לוח עניניים
מדי פעם פונים אלי ומתייעצים איתי כדי להאיץ את מהירות האתר במבחן בדיקת המהירות של גוגל. יש דברים שאפשר לעשות באופן מיידי, ויש דברים שצריך להשקיע בהם הרבה זמן ואנרגיה כדי להעלות את הציון. אז הנה 12 טיפים כיצד להאיץ את האתר.
אין פתרון קסמים בקליק אחד בהכרח, אבל 12 הטיפים הללו יעשו המון הבדל
1. חברת האחסון עושה המון הבדל
השקעתי המון זמן ואנרגיה באופטימיזציה לאתר שלי, ועדיין הציון שלי לא היה מספיק גבוה ב-uPress. כאשר עברתי ל-Kinsta זה לבדו הקפיץ לי את כמעט הציון למה שהוא היום. מחיר האחסון הבסיסי ב-Kinsta עולה כפליים ב-uPress או חבילת ה-Tiny ב-FlyWheel, אבל הביצועים והיציבות עושים את כל ההבדל. מי שמוכן לשלם יותר, מקבל יותר.
2. להשתדל לא להטמיע וידאו כבד בעמוד
אם העמוד מכיל וידאו רקע (שהוא תמיד מתנגן אוטומטית) אז כדאי שהוידאו ירוץ דרך YouTube או Vimeo, ולא דרך קובץ וידאו (למשל mp4) באופן ישיר. הדפדפן צריך לטעון את הוידאו ישירות בהרבה מקרים, וזה הולך להשפיע ישירות על מהירות האתר והציון בהתאם.
אפשר לשים קבצי וידאו (mp4) ישירות רק אם שוקלים לכל היותר 3 מגהבייטים, ואם הם מותאמים ל-web. כל הסרטונים פה בעמוד (ובאתר כולו) הם קבצים מקומיים, והם שוקלים באיזור ה-2 מגה כל אחד.
למשל, ב-my6sense יש וידאו ששמנו בתחילת דף הבית. העלינו אותו ל-YouTube בתור וידאו שהוא unlisted כדי לחסוך זמן טעינה.
3. צריך לשים לב בבדיקה אם צריך את הקידומת 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 פיקסלים. שווה ללמוד איך להקטין רוחב תמונות ראשית כל.
פתרון נוסף הוא המרה לפורמט התמונות החדש WebP של גוגל. ישנם תוספים הממירים את כל התמונות (כמו imagify.io למשל) גם התוסף בחינם Jetpack של wordpress.com שטוען את כל התמונות דרך השרתים של wordpress העולמית, והם מעניקים ציון נוסף לשימוש בפורמט הזה בתור בונוס ״פורמט תמונה מתקדם״.
6. תוספים מסויימים יכולים להאט את האתר
תוספים של גיבוי (שאמור להגיע מצד חברת אחסון איכותית), וגם תוספים אשר דורשים בדיקות מול מסד הנתונים מוסיפים עומס על השרת. ישנם גם תוספים המוסיפים הרבה קוד. חשוב שהכל יהיה יעיל, ושום דבר מיותר שלא ירוץ.
בזכות גרסת ה-Pro של אלמנטור לא צריך תוסף חיצוני לטופס יצירת הקשר, או לפופ-אפ של תפריט הניווט.
7. תוסף אופטימיזציה מאוד עוזר
תוסף בתשלום מאוד פופולרי הוא WP Rocket שמאוד עוזר להאיץ את האתר על ידי דחיסת קוד, ניקוי ״זבל״ במסד הנתונים, ומניעה של טעינת ברירות מחדל מיותרות של וורדפרס (כמו סקריפט האמוג׳י שלהם למשל). יש גם את התוסף permatters שגם אותו שווה לבדוק.
8. לעשות שימוש ב-SVG עבור האייקונים
קבצי SVG הם לא תמונות, אלא קוד HTML שמייצר תמונות עם קווי מתאר, מה שנהדר לאייקונים. הקבצים הללו שוקלים כמעט כלום, לעומת תמונות גרפיות.
אחר הדברים הנהדרים מאז גרסה 2.6 של אלמנטור היא האפשרות לעבוד ישירות עם קבצי SVG עבור אייקונים במקום בקבצי PNG בשביל אייקונים שקופים, אך כיום כל הדפדפנים תומכים בקבצי SVG שהם בסך הכל קובץ טקסט עם הוראות ציור וקטורי.
בדוגמה הבאה כפתורי הפלוס (+) על הכפתורים וגם בתפריט הניווט הם אייקונים מותאמים אישית (קבצי SVG) אשר טענתי ישירות לתוך הממשק של אלמנטור.
9. לא לטעון שום פונט שלא צריך, וגם לא שום משקל שלא צריך
כיום בזכות Google Fonts ניתן לעבוד עם פונטים יפים בעברית. אבל מיותר לטעון את כל המשקלים (דק, עבה, ממש עבה וכו׳) אם לא צריך את כולם. ניתן לבחור פונט ולטעון לתוכו רק את המשקלים שצריך. זה אמנם דורש עבודה ידנית, אבל זה עושה המון הבדל. ניתן גם לטעון פונטים באופן מקומי ישירות מתוך האתר וגם זה חוסך משאבים.
10. טעינה ״עצלה״ לתמונות
ניתן למנוע מהדפדפן לטעון את כל הסרטונים והתמונות מראש, לפחות עד שהגולש גולל קרוב אליהם. דבר זה מאוד מאיץ את טעינת האתר. ניתן לעשות זאת באופן מובנה באמצעות WP Rocket, זה מגיע יחד עם התוסף Jetpack ויש גם את התוסף Lazy Load מבית WP Rocket שהוא בחינם.
אופטימזציה מגיעה עד הפרטים הכי קטנים
זו רשימה חלקית מאוד של הדברים שאני מבטל דרך קוד בתבנית הבת שאני יוצר עבור כל אתר או דרך תוסף אופטימיזציה:
- מבטל טעינה של תמונות אמוג׳י מותאמות אישית של וורדפרס
- מבטל טעינה של סט האייקונים Font Awesome אשר נטען בתור ברירת מחדל עם אלמנטור (גרסה 4 או 5)
- מבטל הצגה של קוד HTML מיותר בוורדפרס כמו קישורי RSS, מספר גרסה
לסיכום
האצת אתר דורשת הרבה עבודה, מהתמונות, ועד התוספים, האייקונים, הסקריפטים, קוד העיצוב ועוד. זה לא נגמר בפלאגין, אבל אחסון טוב ואופטימיזציה עושים הרבה מאוד הבדל, כפי שזה עשה אצלי באתר.
עדכון: ידעת שקבלה של ציון 50 פירושו שהאתר שלך מהיר מ-75% מהאתרים באינטרנט? רועי יוסף מ-Savvy כתב פוסט מצויין ומעמיק מדריך Google PageSpeed Insights למשתמשי וורדפרס – חלק א׳ ויש גם את חלק ב׳.