לוח עניניים

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

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

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

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

2. להשתדל לא להטמיע וידאו כבד בעמוד

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

אפשר לשים קבצי וידאו (mp4) ישירות רק אם שוקלים לכל היותר 3 מגהבייטים, ואם הם מותאמים ל-web. כל הסרטונים פה בעמוד (ובאתר כולו) הם קבצים מקומיים, והם שוקלים באיזור ה-2 מגה כל אחד.

למשל, ב-my6sense יש וידאו ששמנו בתחילת דף הבית. העלינו אותו ל-YouTube בתור וידאו שהוא unlisted כדי לחסוך זמן טעינה.

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

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

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

4. תבנית העיצוב עושה הבדל משמעותי

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

קבצי SVG הם לא תמונות, אלא קוד HTML שמייצר תמונות עם קווי מתאר, מה שנהדר לאייקונים. הקבצים הללו שוקלים כמעט כלום, לעומת תמונות גרפיות.

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

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

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

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

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

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

10. טעינה ״עצלה״ לתמונות

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

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

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

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

לסיכום

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

עדכון: ידעת שקבלה של ציון 50 פירושו שהאתר שלך מהיר מ-75% מהאתרים באינטרנט? רועי יוסף מ-Savvy כתב פוסט מצויין ומעמיק מדריך Google PageSpeed Insights למשתמשי וורדפרס – חלק א׳ ויש גם את חלק ב׳.