איך הגעתי לציון 97 ב-Google Page Speed

אין פתרון קסמים בקליק אחד בהכרח, אבל 12 הטיפים הללו יעשו המון הבדל

תוצאות בדיקת מהירות האתר ב-Google Page Speed עם התוצאה של 97

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

חשוב לי לציין, שבניגוד למה שאנשים חושבים, הציון עצמו אינו משפיע ישירות על הקידום בגוגל (לפחות לא באופן רשמי), אבל מהירות האתר משפיע על חווית המשתמש. מהירות האתר היא חשובה לא בגלל שגוגל ״מעניש״ אתרים איטיים אלא בגלל שגולשים לא אוהבים אתרים איטיים.

אין פתרון קסמים בקליק אחד בהכרח, אבל 12 הטיפים הללו יעשו המון הבדל

1. חברת האחסון עושה המון הבדל

השקעתי המון זמן ואנרגיה באופטימיזציה לאתר שלי, ועדיין הציון שלי לא היה מספיק גבוה ב-uPress. כאשר עברתי ל-Kinsta זה לבדו הקפיץ לי את כמעט הציון למה שהוא היום. מחיר האחסון הבסיסי ב-Kinsta עולה כמו אחסון של 3 אתרים ב-uPress, אבל הביצועים והיציבות עושים את כל ההבדל. מי שמוכן לשלם יותר, מקבל יותר.

2. כאשר בונים באלמנטור כל הקוד צריך להיות דווקא לא דרך אלמנטור

למרות שבאלמנטור אפשר לעצב כל כפתור וכל כותרת באופן ידני, זה גם אומר לעשות המון עבודה כפולה כל פעם שצריך לעדכן את כל האתר, אבל זה גם אומר שאלמנטור יוצר קובץ עיצוב (קובץ CSS) שממנו הוא טוען את העיצוב של כל הרכיבים בעמוד. עבור האתר שלי יצרתי עיצוב שמראש יעצב את כל הכפתורים, כל הכותרות וכו׳ מבלי שצריך לגעת בשום דבר מלבד הלינק. השאיפה היא שהדפדפן יטען כמה שפחות קבצי CSS.

3. לא להטמיע וידאו ישירות באתר

אם העמוד מכיל וידאו רקע (שהוא תמיד מתנגן אוטומטית) אז כדאי שהוידאו ירוץ דרך YouTube או Vimeo, ולא דרך קובץ וידאו (למשל mp4) באופן ישיר. הדפדפן צריך לטעון את הוידאו ישירות בהרבה מקרים, וזה הולך להשפיע ישירות על מהירות האתר והציון בהתאם.

למשל, ב-my6sense יש וידאו ששמנו ב-Hero של דף הבית. למרות שקנינו את הוידאו ב-iStockPhoto, העלינו אותו ל-YouTube בתור וידאו שהוא unlisted. אגב, הוידאו הוא בשחור לבן ושמתי שכבת רקע (overlay) בצבע המותג מעל הוידאו כדי לצבוע אותו.

הוידאו בדף הבית של my6sense מוטמע ב-YouTube (דווקא הוידאו הזה פה בפוסט מוטמע ישירות…)

4. צריך לשים לב בבדיקה אם צריך או לא את ה-www

כבר מזה הרבה מאוד שנים לא צריך שאתר יתחיל ב-www. אבל אם כתובת האתר שלך מכילה www בהתחלה, אז חשוב לשים בבדיקה את הכתובת המדוייקת (למשל royeyal.com ולא www.royeyal.com ולהיפך), אחרת חלק מהציון ירד על ההפניה.

5. תבנית הבסיס עושה המון הבדל

שנים עשיתי שימוש בתבניות GeneratePress וגם ב-OceanWP (שאני גם המתרגם הרשמי שלהן לעברית). התבנית GeneratePress היא ממש קלת משקל, אבל חסרת אפשרויות מתקדמות. ואילו OceanWP מכילה המון סקריפטים, אבל היא כמו תבנית פרמיום בחינם ולכן אוהבים להשתמש בה. לשתיהן יש אפשרות בתשלום, ושילמתי שנתית על כל אחת. אבל ברגע שניסיתי את תבנית הבסיס Hello Elementor, שהיא תבנית עירומה לגמרי, זה האיץ את כל האתרים שלי. לא נטען שום סקריפט מיותר, הכל נעשה דרך אלמנטור.

מיותר לציין שכל ערכת עיצוב דרך Theme Forest תמיד תהיה איטית מהתבנית Hello Elementor. תמיד. בייחוד Avada הידועה לשמצה.

בזכות גרסת ה-Pro של אלמנטור אני לא צריך תבניות מסורבלות כדי ליצור אתר מותאם אישית, כולל ראש האתר והתחתית שלו.

התבנית ״שלום אלמנטור״ במאגר התבניות החינמי של וורדפרס
התבנית ״שלום אלמנטור״ במאגר התבניות החינמי של וורדפרס

6. כל תמונה צריכה לעבור אופטימיזציה

התמונות צריכות לשקול כמה שפחות. ומשקל התמונות מצטבר. אני תמיד טוען שתמונה צריכה לשקול כמו בן אדם גדול, עד כמה שאפשר. אם מישהו שוקל 1,500 קילו, אולי זה הזמן לקצת דיאטה. לקוחות שלי לא יודעים להתעסק עם תוכנות, וכיום יש הרבה תוכנות שעושות זאת, ואפילו בחינם עבור מספר תמונות בחודש. פתרון נפוץ מאוד הוא האתר TinyJPG.

מעבר לכך, הרבה מעלים תמונות ישירות מהמצלמה הדיגיטלית. בזמן שרוחב מסך 24״ ממוצע הוא 1920 פיקסלים, להעלות תמונה ברוחב של 5,000 פיקסלים זה מיותר. וורדפרס אוטומטית חותכת קבצים לקטן, בינוני וגדול, כאשר זה האחרון הוא באיזור ה-1,000 פיקסלים. שווה ללמוד איך להקטין רוחב תמונות ראשית כל.

פתרון שאני כרגע עושה בו שימוש הוא התוסף Jetpack של wordpress.com שטוען את כל התמונות דרך השרתים של wordpress העולמית, וגם מציג אוטומטית במקום JPG את הפורמט WebP שגוגל המציאו, והם מעניקים ציון נוסף לשימוש בפורמט הזה בתור בונוס ״פורמט תמונה מתקדם״, והכל אוטומטית.

האתר Tiny JPG שמופיעה בו פנדה חמודה. ומי לא אוהב פנדות?
האתר Tiny JPG שמופיעה בו פנדה חמודה. ומי לא אוהב פנדות?

7. תוספים מסויימים יכולים להאט את האתר

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

בזכות גרסת ה-Pro של אלמנטור אני לא צריך תוסף חיצוני לטופס יצירת הקשר, או לפופ-אפ של תפריט הניווט.

8. תוסף אופטימיזציה מאוד עוזר

אני כיום עושה שימוש ב-WP Rocket כדי להאיץ את האתר. התוסף הזה דוחס קבצי קוד ומסיר אלמנטים שמאטים את האתר. ב-uPress אפשר להתקין את התוסף הזה בחינם במקום לשלם 49$ לשנה. יש גם את התוסף permatters שאין לו שום שיווק אבל הוא הכי טוב שיש כיום.

9. במובייל צריך לעשות עוד המון עבודה

כרגע האתר שלי מחזיר ציון של 78 במובייל. ראיתי אתרים שמקבלים באיזור ה-15, אז זה ציון יחסית טוב, אבל חשוב לזכור שהמבחן הזה במובייל תמיד יהיה קשוח יותר בתוצאות.

ציון 78 ב-Google Page Speed במובייל
ציון 78 ב-Google Page Speed במובייל

10. לעשות שימוש ב-SVG עבור האייקונים

אחר הדברים הנהדרים בגרסה 2.6 של אלמנטור היא האפשרות לעבוד ישירות עם קבצי SVG עבור אייקונים. שנים הייתי עושה שימוש בקבצי PNG בשביל אייקונים שקופים, אך כיום כל הדפדפנים תומכים בקבצי SVG שהם בסך הכל קובץ טקסט עם הוראות ציור וקטורי.

בדוגמה הבאה כפתורי הפלוס (+) על הכפתורים וגם בתפריט הניווט הם אייקונים מותאמים אישית (קבצי SVG) אשר טענתי ישירות לתוך הממשק של אלמנטור.

האתר roitman design בפעולה

11. לא לטעון שום פונט שלא צריך, וגם לא שום משקל שלא צריך

כיום בזכות Google Fonts ניתן לעבוד עם פונטים יפים בעברית. אבל מיותר לטעון את כל המשקלים (דק, עבה, ממש עבה וכו׳) אם לא צריך את כולם. ניתן לבחור פונט ולטעון לתוכו רק את המשקלים שצריך. זה אמנם דורש עבודה ידנית, אבל זה עושה המון הבדל. ניתן גם לטעון פונטים באופן מקומי ישירות מתוך האתר וגם זה חוסך משאבים.

באתר שלי ביטלתי לחלוטין את Google Fonts, ואני עושה שימוש בפונטים שרכשתי.

טעינת פונטים בהתאמה אישית דרך Google Fonts
טעינת פונטים בהתאמה אישית דרך Google Fonts

12. טעינה עצלה לתמונות

זה אמנם נשמע לא מחמיא במיוחד, אבל ניתן למנוע מהדפדפן לטעון את כל הסרטונים והתמונות מראש, לפחות עד שהגולש גולל קרוב אליהם. דבר זה מאוד מאיץ את טעינת האתר. ניתן לעשות זאת באופן מובנה באמצעות WP Rocket, זה מגיע יחד עם התוסף Jetpack ויש גם את התוסף Lazy Load מבית WP Rocket שהוא בחינם.

אצלי באתר הוספתי אנימציה עדינה כאשר תמונה נטענת דרך טעינה עצלה.

ויש עוד: אופטימזציה מגיעה עד הפרטים הכי קטנים

זו רשימה חלקית מאוד של הדברים שאני מבטל דרך קוד בתבנית הבת שאני יוצר עבור כל אתר:

  • מבטל טעינה של תמונות אמוג׳י מותאמות אישית של וורדפרס
  • מבטל טעינה של סט האייקונים Font Awesome אשר נטען בתור ברירת מחדל עם אלמנטור (גרסה 4 או 5)
  • מבטל הצגה של קוד HTML מיותר בוורדפרס כמו קישורי RSS, מספר גרסה
  • ועוד

לסיכום

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