אומנם זה לא רישמי, אבל ברור לכולם שהמרוץ לאתר המהיר, כבר התחיל.
המירוץ לאתר המהיר
בגלל שאנחנו בונים אתרים מלאים בפונקציונליות, קוד, אנמציות וכו… הם נהיים איטיים ומאבדים מהמטרה שלהם.
הרי האתר צריך לשרת את המטרה שבשבילה הוא נבנה, ובשביל זה הוא צריך לתפקד במהירות ויעילות.
למה? כי הגולש פשוט יעבור לאתר הבא, ואפילו לא הזכרתי את גוגל, שכמובן אוהב אתרים מהירים יותר.
אז אחרי שהבנו שהאתר שלנו צריך להיות מהיר, עכשיו צריך להבין מה כדאי לעשות בנדון.
אז מה הם הדגשים?
- תבנית
- תמונות במימדים נכונים
- תוספים
- דרך הבניה
- ביטל פונקציונליות לא נצרכת
- אחסון
- אופטימזציה לקבצים
- הגשת עמודים סטטים
- עיקוב טעינת תמונות
- שמירת קאש בדפדפן
1. תבנית
התבנית כמובן צריכה לספק את הצרכים שלנו אבל גם חשוב לבדוק אם היא לא מספקת יותר מידי…
לדוגמה לאתר תדמית קלאסי שנבנה עם אלמנטור אין שום סיבה להשתמש בתבנית פרמיום.
תבניות פרמיום טוענות הרבה קוד,שאנחנו לא משתמשים בו!
2. תמונות במימדים נכונים
תמונה שאתם מעלים לאתר שלכם צריכה להיות במשקל מנימלי ובמידה מתאימה לDIV בו היא הולכת להיות באתר.
תמונה בגודל גדול יותר תיהיה בזבוז משאבים.
3. תוספים
מרבה תוספים מרבה דאגה – המשפט הזה צריך ללוות אותכם בכל התקנת תוסף.
כל תוסף טוען איתו את הקוד שלו והפונקציונליות שהוא נותן. לפעמים הפלאגים לא נכתבים באופן מקצועי ונכון וגורמים לבזבוז משאבים, ולפעמים גם אפשר פשוט בכמה שורות קוד לוותר על הצורך בפלאגין.
4. דרך הבניה
חשוב מאוד!
שאנחנו בונים אתר צריך לחשוב כל הזמן על זה שהאתר צריך להיותר ייעיל ולא רק יפה או מגניב.
שזה אומר לחשוב על כל אנמציה אם היא הכרחית, לחשוב פעמיים אם יוצא לך להסתיר אלמנט במובייל ולבנות אלמנט נוסף למסכים הקטנים, שזה כמובן יותר טעינה נוספת של הקוד בשני המסכים (לא מגניב)
דבר נוסף שקשור לדרך הבנייה זה להעזר בבונה התבנית (טמפלייטים) למקומות שאתם יכולים, לדוגמה הדר, פוטר, סיידבר וכו… ככה נוצר קוד אחיד שיכול להשמר באותו קאש לכמה עמודים.
ועוד דבר לא פחות חשוב זה להקטין שימוש בעיצוב של כל ווידגט, לדוגמה ראיתי אתרים שכל הפונטים, גדלי הפונטים, צבע וכו… נבחרו בטיפוגרפיה של כל אלמנט ספציפי, זה גורם להרבה יותר קוד CSS וזה מיותר, קבעו צבעים ופונטים גלובלים.
5. ביטול פונקציונליות לא נצרכת
גוטנברג לדוגמה טוען 2 קבצי עיצוב באתר שלכם, אבל לרוב באתר שנבנה בעזרת אלמנטור לא משתמש בהם בכלל, אבל הם בכל זאת נטענים. בטלו אותם! (דורש ידע מינימלי בקוד)
אם כבר החלטתם להתשמש בתבנית פרמיום או בתוסף גדול תהיו בטוחים שהם טוענים לכם איזה 10 ספריות CSS ו JS, נסו להבין במה אתם לא משתמשים ולדאוג לבטל את מה שלא צריך.
6. אחסון
כמובן שהתשתית של האתר משפיעה הרבה, וזה כמובן האחסון, איפה שנמצאים הקבצים פיזית.
אחסון איכותי יותר – האתר יעלה מהר יותר, וכמובן שגם מומלץ אחסון קרוב פיזית, אתר ישראלי עדיף אחסון ישראלי…
חפשו אחסון עם המלצות טובות, אל תתפתו ללכת לחברות הזולות בחו"ל (גו דאדי בלו הוסט וכו…).
אחסון זה השקעה יחסית קטנה לאתר,אבל מאוד חשובה.
7. אופטימזציה לקבצים*
איחוד וכיווץ (Minify) לקבצי CSS ו JS.
במקום לטעון 20 קבצי CSS שונים, אפשר לאחד אותם לקובץ אחד ארוך ודחוס וככה תיהיה רק קריאה אחת לשרת.
8. הגשת אתר סטטי*
בכל טעינה של עמוד באתר, הדפדפן ניגש לשרת, השפה בצד השרת (PHP) עושה את כל החישובים הנצרכים בשביל להביא את התוכן הנכון ואז חוזר לדפדפן מסמך HTML.
ע"י שמירת קובץ סטטי בשרת לכל עמוד אנחנו יכולים להגיד לשרת ישר לספק את הקובץ HTML ולדלג על המעבר על ה PHP בעמוד והקימפול שלו לשפת צד לקוח.
9. עיקוב טעינת תמונות (lazy-load)*
אנחנו אוהבים תמונות באתרים, ובצדק.
אבל חשוב לזכור שכל תמונה זו קריאה לשרת וטעינה של הרבה משאבים.
במקום לטעון את כל התמונות בעליית העמוד, יש דרך לטעון כל פעם רק את התמונות שאנחנו רואים במסך, וזה בעצם נותן הרגשה של טעינה מהירה.
10. שמירת קאש בדפדפן*
מנגנון הקאש (מטמון) אומר לדפדפן לשמור את הקבצים שלנו (CSS ,JS, תמונות) בזכרון שלו כדי שבטעינה הבאה הם כבר יהיו זמינים מקומית ללא צורך לקרוא לקבצים מהשרת המרוחק.
*בסעיף זה אני בדרך כלל אמליץ להשתמש בתוסף אוטימזציה לדוגמת Wp Rpcket ,WP Super Cache ודומיהם.
לסיכום
אני נעזר מאוד בכלי בדיקת מהירות של גוגל גם בגלל עניין הניקוד אך יותר בגלל ההערות שהוא נותן.
לא חובה להקשיב לכל הערה או להתאבד על כל נקודה ובהחלט יש מקום לשיקול דעת על מה להתמקד ומה פחות רלוונטי
ובכל זאת אני חושב שזה כלי נהדר ואין סיבה לאתר אלמנטור קלאסי לא לעבור את ה 80-90 נקודות.
