קובץ קטן, 2 פקודות ושיפור של 25% במהירות

השיפורים במדריך זה מתאים לאתרי וורדפרס בלבד

היום אני רוצה לדבר אתכם על שינוי קטן שעשיתי כדי ליצור אתר מהיר יותר בשבילכם (נחמד לא?!) גוגל אומרים שאחוז ההמרות גודל ב15%-30% אם האתר שלכם מהיר יותר! אז למה לקח לי כל כך הרבה זמן? 30% מחסור בזמן ו70% עצלנות!

מיד לאחר ההתקנה הרצתי בדיקה על דף הבית שלנו וגיליתי ש…

כמה תוספים בהם אני משתמש כדי להציג קוד בתוך פוסטים בצורה קריאה, לאפשר שיתוף של הפוסטים בעזרת כפתורים חברתיים וגם תוספים אחרים טוענים קבצי ג'אווה סקריפט בדף הבית של האתר שלי. חשוב לציין שאני לא ממש מופתע אבל כעת שכמות קבצי הג'אווה סקריפט נתגלתה לעיני החלטתי לעשות מעשה.

כמה מילים על Page Speed וכרום

מיד לאחר ההתקנה (יש לעשות לדפדפן אתחול) תופיע לשונית חדשה בChrome DevTools למי שלא מכיר את הכלי הנהדר מבית גוגל לכרום שנקרא "Chrome DevTools" ראו תמונות או בקרו כאן:

איך זה נראה בPage Speed

לפני שנוכל לגשת לצמצום הבעיה אני רוצה להראות לכם איך זה נראה בPage Speed… בכדי להפעיל את Dev Tools בדפדפן הכרום שלכם יש ללחוץ על F12. הלשונית האחרונה היא לשונית Page Speed.

נטענים המון קבצים שאני לא צריך בדף הבית! בתמונה האחרונה הוצגה לי רשימה של קבצי ג'אווה סקריפט שנטענים אל דף הבית. כל השורות אשר סימנתי בצהוב הם קבצים שאין בהם שימוש בדף הבית! חשוב להבין שטעינת הדף מתעכבת מכיוון שהדפדפן ממתין שכל קבצי הג'אווה סקריפט יטענו ולכן הסרה של קבצים מיותרים יכולה להפוך את טעינת האתר שלי למהירה מאוד לעומת המהירות הנוכחית!

למה הקבצים האלו נטענים? קבצי הג'אווה סקריפט האלו הם חלק מהקבצים אשר דרושים לפעילות התקינה של תוספים בהם אני משתמש ברחבי האתר שלי. ולכן הם נטענים בצורה גורפת בכל האתר ואפילו בדפים בהם בכלל לא נעשה בהם שימוש! לרוב מדובר על תוספים שונים שטוענים קבצי ג'אווה סקריפט ולכן אינני יכול לשלוט בהם בצורה מלאה.

מילת אזהרה בשלב הבא אני אעשה "ביטול רישום" של תוספים בהם אני לא עושה שימוש בדף הבית ובקטגוריות. מוטל עליכם הידע באיזה תוסף אתם עושים שימוש בדף הבית ובאיזה לא ועל פי כך איזה ניתן להסיר. למרות האמור, אתם מוזמנים להתייעץ איתנו בעזרת טופס התגובות במורד הדף.

מילת הרגעה השינויים אשר נעשה ניתנים לביטול על ידי הסרת הפונקציה שאדגים בחלק. אם גיליתם שביטול הטעינה של תוסף מסוים מוביל לבעיות אתם יכולים למחוק את השורה אשר מתייחסת אליו והמצב יחזור לקדמותו.

איזה תוסף מוסיף לי קבצי JS מיותרים בדף הבית?

נבדוק אילו סקריפטים שייכים לאיזה תוסף

בתמונה האחרונה הראיתי את הרשימה של קבצי הJS להם אני לא זקוק בדף הבית… אם אעבור מעל כל קובץ עם הסמן של העכבר אראה את המסלול השלם של הקובץ ואוכל לראות באיזה תיקייה הוא נמצא דהיינו לאיזה תוסף הוא שייך.

כפי שניתן לראות הקובץ שייך (כמו רבים כמוהו) לתוסף שנקרא Syntax Highlighter בו אני משתמש כדי להציג סניפטים של קוד מסוג Html, Css, Php וכו'. מכיוון שאני יודע שאינני מציג סניפטים כאלו בדף הבית הוא ו20 הקבצים שהוא טוען אל כל עמוד הם המטרה הראשונה שלי!

נבנה פונקציה מתאימה לביטול הטעינה שלהם

בחלק זה נבנה יחד פונקציה שתכוון לנקודת זמן בוורדפרס בה הסקריפטים השונים נטענים אל וורדפרס. בתוך הפונקציה נשים בשלב הבא הגדרה אשר בודקת אם אנחנו בדף הבית וכך ניצור התניה רק לדף הבית שלא תשפיע על עמודים פנימיים.

* הקוד הבא הולך אל הקובץ functions.php או קובץ אשר נטען אליו.

add_action( 'wp_enqueue_scripts', 'deregister_xscript', 100 );
function deregister_xscript() {
	// כאן נמקם את הקוד שלנו
}

ניצור התניה שאומרת "אם אנחנו בדף הבית"

בחלק זה ניצור התניה שהיא חלק מובנה בוורדפרס ואפשר בעזרתה לבדוק באיזה קובץ אנחנו בתור גולשים צופים וכך ליצור קוד רק לסוג הדף / התוכן הזה אשר במקרה זה הוא דף הבית.

add_action( 'wp_enqueue_scripts', 'deregister_xscript', 100 );
function deregister_xscript() {
	if(is_home() || is_front_page()) {
		// אני פונקציה אשר תפעל רק בדף הבית או הדף הראשי של האתר
	}
}

נבדוק כיצד התוסף מכליל את הסקריפט

בכדי לטעון סקריפטים תוספים (לפחות אלו שעודכנו בשנה האחרונה) משתמשים בפקודה מובנית של וורדפרס אשר נקראת wp_enqueue_script. כעת הגיע שלב קצת סבוך בו אתם צריכים להכנס אל התיקייה הראשית של התוסף ואל הקובץ הראשי שלו ולמצוא את השורות בהן התוסף מכליל קבצי ג'אווה סקריפט.

אם אתם לא מכירים את המסלול לתיקיית התוספים אתם במדריך הלא נכון!

החלק שאנו צריכים בתוך פקודה הEnqueue בהם משתמשים התוספים הוא השם שהם נתנו לסקריפט… הנה תצלום מתוך הקוד של התוסף אותו אני מבקש להגביל (Syntax Highlighter).

הדגשתי בצהוב חלק בשורת הקוד שהוא השם שניתן לאותו סקריפט במערכת של וורדפרס על ידי בונה התוסף. אלו השורות אשר נוסף בחלק הבא (וגם כל השורות מתחתן) כדי להגיד לוורדפרס – אם אתה בדף הבית אל תטען את הסקריפטים האלו!

נכניס את שמות הסקריפטים לתוך הפונקציה

הגענו למשוכה האחרונה! כעת עלינו לשלב בתוך הפונקציה שבנינו קודם את שמות הסקריפטים שאנו מבקשים להסיר במקרה שאנו בדף הבית של האתר שלנו.

add_action( 'wp_enqueue_scripts', 'deregister_xscript', 100 );
function deregister_xscript() {
	if(is_home() || is_front_page()) {
		// SYNTAX HIGHLIGHTER
		wp_deregister_script( 'syntaxhighlighter-core' );
		wp_deregister_script( 'syntaxhighlighter-brush-as3' );
		wp_deregister_script( 'syntaxhighlighter-brush-bash' );
		wp_deregister_script( 'syntaxhighlighter-brush-coldfusion' );
		wp_deregister_script( 'syntaxhighlighter-brush-cpp' );
		wp_deregister_script( 'syntaxhighlighter-brush-csharp' );
		wp_deregister_script( 'syntaxhighlighter-brush-css' );
		wp_deregister_script( 'syntaxhighlighter-brush-delphi' );
		wp_deregister_script( 'syntaxhighlighter-brush-diff' );
		wp_deregister_script( 'syntaxhighlighter-brush-erlang' );
		wp_deregister_script( 'syntaxhighlighter-brush-groovy' );
		wp_deregister_script( 'syntaxhighlighter-brush-java' );
		wp_deregister_script( 'syntaxhighlighter-brush-javafx' );
		wp_deregister_script( 'syntaxhighlighter-brush-jscript' );
		wp_deregister_script( 'syntaxhighlighter-brush-perl' );
		wp_deregister_script( 'syntaxhighlighter-brush-php' );
		wp_deregister_script( 'syntaxhighlighter-brush-plain' );
		wp_deregister_script( 'syntaxhighlighter-brush-powershell' );
		wp_deregister_script( 'syntaxhighlighter-brush-python' );
		wp_deregister_script( 'syntaxhighlighter-brush-ruby' );
		wp_deregister_script( 'syntaxhighlighter-brush-scala' );
		wp_deregister_script( 'syntaxhighlighter-brush-sql' );
		wp_deregister_script( 'syntaxhighlighter-brush-vb' );
		wp_deregister_script( 'syntaxhighlighter-brush-xml' );
		wp_deregister_script( 'syntaxhighlighter-brush-clojure' );
		wp_deregister_script( 'syntaxhighlighter-brush-fsharp' );
		wp_deregister_script( 'syntaxhighlighter-brush-latex' );
		wp_deregister_script( 'syntaxhighlighter-brush-matlabkey' );
		wp_deregister_script( 'syntaxhighlighter-brush-objc' );
		wp_deregister_script( 'syntaxhighlighter-brush-r' );
	}
}

מעתה, הסקריפטים הבאים לא יטענו יותר בדף הבית! חסכתי לגולשים חדשים באתר או כאלה אשר באים לבקר בדף הבית שלי זמן המתנה מיותר (אבל מיותר באמת) וציון המהירות של האתר שלי עלה מ55 ל75!

בנוסף ולמרות שהמדריך יצא ארוך ועל פניו מתסבך… אם אתה מספקים שירותי בניית אתרים מבוססי וורדפרס חשוב ללמוד כיצד לבצע זאת פעם אחת ודי (כמו לרכב על אופניים) כדי שגם לכם תהיה שליטה על קבצי הjavascript אשר נטענים בכל דף באתר בו אתם בונים או מנהלים.

נעלה ונתענג על האתר המהיר שלנו!

כעת כל שנותר לכם לעשות הוא להעלות את קובץ הFunctions.php או הקובץ בו מיקמתם את הפונקציה שלנו וסיימתם! כמו תמיד אני מזמין אתכם להגיב, לתרום מידע, לשאול שאלות או לדבר איתנו על כל נושא רלוונטי אחר שמעניין אתכם. המון בהצלחה, שגיב SEO.