אתר וורדפרס איטי הוא כמעט תמיד תוצאה של כמה תקלות מוכרות, ולא של בעיה אחת גדולה. כשעבדתי על האתר הזה, מצאתי אצלי בעצמי כמעט את כל התקלות שאני רואה באתרים של לקוחות. כאן ריכזתי אותן, עם מה שגרם לכל אחת ואיך תיקנתי.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
תוסף מהירות ששבר את התפריט
תוסף המהירות באתר היה מוגדר לדחות את כל הסקריפטים עד שהגולש נוגע בעמוד. הציון בבדיקה עלה, אבל התפריט בהדר הפסיק להיפתח, כי הסקריפטים שלו חיכו בתור יחד עם כל השאר. הגולש לחץ, וכלום לא קרה במשך כמה שניות.
התיקון היה להחריג מהדחייה את הסקריפטים שהתפריט והבונה צריכים מיד. אותה תקלה חזרה בעמוד הפרויקטים: הסליידרים לא הופיעו בכלל, כי הסקריפט שלהם נטען אחרי שהבונה כבר סיים לאתחל את העמוד. הלקח הוא לבדוק תפריטים, סליידרים וטפסים אחרי כל שינוי בהגדרות הדחייה.
קפיצות בעמוד שלא נראו בבדיקה
בדף הבית בטלפון, ציון הקפיצות היה 0.255, הרבה מעל הסף של 0.1. הסיבה הייתה תמונה בראש העמוד, בתוך עמודה בלי רוחב מוגדר. עד שהתמונה נטענה, העמודה הייתה ברוחב אפס, ואז התרחבה בבת אחת והזיזה את כל מה שמתחתיה.
קפיצה נוספת הגיעה מהפונט. פונט האתר רחב יותר מפונט הגיבוי, ולכן כשהוא נטען הכותרות נשברו לשורות נוספות. הגדרה של פונט גיבוי ברוחב דומה הורידה את הציון ל-0.015. פירטתי את זה במאמר על font-display.
קוד עיצוב שתפח
תוסף המהירות יוצר לכל עמוד קובץ עיצוב מצומצם, רק עם מה שהעמוד באמת משתמש בו. אבל ברשימת החריגות שלו הצטברו עם הזמן כללים רחבים, שהשאירו בפנים כמעט את כל העיצוב. הקוד שהוטמע בכל עמוד הגיע ל-413 קילובייט.
אחרי שהסרתי 39 כללים רחבים מהרשימה, הוא ירד ל-231 קילובייט, והעמוד כולו ירד מ-616 ל-434 קילובייט. כדי לוודא ששום דבר לא נשבר, צילמתי 8 מסכים לפני ואחרי והשוויתי פיקסל מול פיקסל. על העיקרון כתבתי במאמר על Critical CSS.
תמונות שירדו פעמיים
תוסף הדחיסה באתר מגיש לכל דפדפן את הפורמט הקל ביותר שהוא תומך בו. אבל סליידרים של לפני ואחרי בדף הבית בנו את עצמם מכתובת התמונה המקורית, וכך כל תמונה בהם ירדה פעמיים, פעם בכל פורמט. אחרי התיקון, משקל התמונות בטעינת דף הבית ירד מ-493 ל-292 קילובייט.
הבדיקה פשוטה: פותחים את לשונית הרשת, מסננים לתמונות, ומחפשים את אותו שם קובץ פעמיים בסיומות שונות. אם הוא מופיע פעמיים, משהו בעמוד עוקף את התוסף. את הפרטים ואת התיקון כתבתי במאמר על תמונות AVIF.
ציון בדיקה שלא משקף גולשים
PageSpeed Insights הציג לדף הבית זמן הופעת תוכן ראשי של 4.2 שניות בטלפון. באותו יום מדדתי בדפדפן אמיתי, עם האטה דומה של מעבד ורשת, והתוכן הראשי הופיע אחרי 1.2 שניות. הבדיקה של גוגל מחשבת הערכה, ולא תמיד היא קרובה למה שגולש חווה.
זה לא אומר להתעלם מהציון, אלא לבדוק מה עומד מאחוריו. כשאין לאתר מספיק גולשים לנתוני שטח, כמו באתר הזה, כדאי למדוד גם בדפדפן אמיתי. אתר וורדפרס איטי לא מתוקן משינוי הגדרות רק בשביל המספר, ובדרך אפשר לשבור דברים שעבדו.
מה בודקים באתר וורדפרס איטי
לפי הניסיון שלי, זה הסדר שחוסך הכי הרבה זמן: זמן התגובה של השרת, התמונה בראש העמוד, הסקריפטים שנטענים לפני שהעמוד מופיע, ומה תוסף המהירות עושה בפועל. אחרי כל שינוי באתר וורדפרס איטי בודקים שתפריטים, סליידרים וטפסים עדיין עובדים, גם בטלפון.
שאלות ותשובות על תקלות מהירות
למה האתר מהיר אצלי ואיטי אצל גולשים?
כי אצלכם הדפדפן כבר שמר את הקבצים. גולש חדש מוריד הכל מההתחלה, לרוב בטלפון ובקליטה בינונית. בודקים בגלישה בסתר, בטלפון ובכתובת נקייה בלי פרמטרים, כי פרמטרים בכתובת עוקפים לרוב את המטמון של השרת.
האם יותר מדי תוספים מאטים את האתר?
המספר פחות חשוב ממה שכל תוסף טוען. עשרים תוספים קטנים שעובדים רק בממשק הניהול לא מורגשים, ותוסף אחד שטוען סקריפטים בכל עמוד כן. טעינה של כל תוסף רק בעמודים שצריכים אותו פותרת הרבה מזה בלי למחוק כלום.
מה לעשות אם תוסף מהירות שבר משהו?
מכבים הגדרה אחת בכל פעם, בדרך כלל דחיית סקריפטים או צמצום קוד העיצוב, ובודקים מתי הבעיה נעלמת. אחר כך מחזירים את ההגדרה עם החרגה לקובץ שנשבר, במקום לוותר עליה לגמרי. אחרי כל שינוי מנקים את המטמון.
האם אחסון זול מאט את האתר?
הוא יכול. אם השרת עונה לאט, שום תוסף לא יפצה על זה בעמודים שלא נשמרים במטמון. מודדים את זמן התגובה של השרת בכמה עמודים ובכמה שעות שונות. אם הוא גבוה גם עם מטמון פעיל, כדאי לשקול מעבר אחסון.
הצעד הבא
האתר שלכם איטי ולא ברור למה? שלחו לי את הכתובת. אבדוק את אותן תקלות שמצאתי אצלי, מהשרת ועד הסליידרים, ואגיד לכם מה לתקן קודם ובמה לא לגעת.
