מה זה Core Web Vitals, ולמה גוגל מודדת דווקא את שלושת המדדים האלה?

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

תוכן העניינים 8 פרקים ▾

למה שלושה מדדים ולא אחד

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

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

את ההגדרה המדויקת של כל מדד, את הספים שגוגל פרסמה ואת האופן שבו Search Console מציג את הנתונים כתבתי בעמוד Core Web Vitals ותיקון LCP, INP ו-CLS. כאן אני עוסק בשאלה השנייה, זו שאין עליה תשובה בדוח: מה בתוך אתר וורדפרס מייצר את הכשל, ובאיזה סדר מטפלים בו.

למה דווקא אתרי וורדפרס נופלים בזה

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

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

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

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

מה מאחר את התוכן הראשון על המסך

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

• תמונת כותרת שלא הוקטנה. קובץ באורך 4000 פיקסלים שמוצג בפועל ברוחב 390 פיקסלים במובייל. הדפדפן מוריד את כל הקובץ ורק אחר כך מכווץ אותו.
• lazy loading על תמונת הכותרת עצמה. תוסף שמפעיל דחיית טעינה על כל התמונות באתר מעכב בדיוק את התמונה שהמדד מודד. זו הטעות היחידה שאני מוצא הכי הרבה, והיא גם הכי מהירה לתיקון.
• סליידר בעמוד הבית. שלוש שקופיות משמעותן שלוש תמונות כבדות וספריית JavaScript, כדי להציג בפועל תמונה אחת.
• תגובת שרת איטית. אחסון משותף עמוס, גרסת PHP ישנה, ומטמון שלא מוגדר נכון. אם השרת מתחיל לענות מאוחר, שום דבר בצד הדפדפן לא יציל את המדד.
• גופנים וקבצי עיצוב שחוסמים רינדור. תבנית שטוענת ארבעה משקלי גופן מרשת חיצונית, והדפדפן ממתין להם לפני שהוא מצייר טקסט.

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

למה העמוד לא מגיב לנגיעה

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

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

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

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

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

מה מזיז לכם את העמוד באמצע הקריאה

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

ארבעה חשודים חוזרים באתרי וורדפרס, ולכל אחד מהם פתרון ידוע:

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

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

סדר התיקונים, ולמה דווקא הסדר הזה

הסדר לא שרירותי. הוא בנוי כך שהזול ייעשה ראשון וכך שכל שלב לא יסתור את הבא אחריו.

1. מדידה אחת רצינית לפני שנוגעים. בלי נקודת פתיחה מתועדת לא תדעו אם השתפרתם או שסתם השתנה משהו אחר.
2. ייצוב הפריסה. מידות לתמונות, שריון מקום להטמעות ולבאנרים, טיפול בהחלפת הגופן. השינוי הזול והמורגש ביותר.
3. התמונה הראשית. גודל נכון, פורמט מודרני, הסרת השהיית טעינה ממנה, טעינה מוקדמת.
4. שכבת השרת. מטמון עמודים, גרסת PHP עדכנית, ולעיתים החלפת אחסון. אין טעם לעשות את זה לפני שהתמונות טופלו, כי מטמון על עמוד כבד רק מסתיר את הבעיה.
5. דיאטת התוספים והסקריפטים. השלב שדורש החלטות עסקיות ולא רק טכניות, ולכן הוא אחרון.
6. מדידה חוזרת אחרי שהשינויים חיים, על גולשים אמיתיים ולא רק בבדיקה מהמשרד.

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

הטיפול המלא נמצא בעמוד אופטימיזציית מהירות וורדפרס ו-Core Web Vitals ועולה ₪1,500-₪4,500 חד פעמי לפני מע״מ, לפי גודל האתר ומספר התבניות שצריך לעבור עליהן.

טבלה: מה תעשו לבד ומה דורש מפתח

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

שורה שכדאי לקרוא פעמיים: כמעט כל תיקון בטבלה מתחיל בגיבוי. אם האתר שלכם כבר זוחל ואתם לא בטוחים מאיפה, תיקון אתר וורדפרס איטי מתחיל ב-₪650 לפני מע״מ לאבחון ולתיקון, וזו הדרך הזולה לדעת אם מדובר בתמונות, בתוספים או בשרת לפני שמשקיעים בפרויקט מלא.

מתי אין טעם לתקן

יש שלושה מצבים שבהם אני אומר ללקוח לא לשלם על אופטימיזציה.

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

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

השלישי, אתר שנבנה על ערימה של תוספים ובונה עמודים כבד שכל אחד מהם קריטי לתפעול. במקרה כזה כל תיקון נסתר על ידי השכבה הבאה, ומגיעים לרצפה שמעליה אי אפשר לעלות. הסימן לכך פשוט: עשיתם את כל התיקונים הזולים, המספרים זזו קצת, והאתר עדיין מרגיש כבד באייפון בן ארבע שנים. שם השאלה כבר לא איך משפרים אלא על מה בונים, ובניית אתר על Astro, ₪3,500-₪18,500 חד פעמי לפני מע״מ עם תחזוקה חודשית אופציונלית של ₪450, מייצרת נקודת פתיחה אחרת לגמרי כי אין שם שכבות שצריך לקזז.

אני ארתור קלנדרוב ואני מנהל את עבודת הווב בשיווקנט. אם יש לכם אתר וורדפרס עם מדדים אדומים ואינכם יודעים מאיזה קצה להתחיל, שלחו לי את כתובת האתר ורשימה של התוספים המותקנים. אחזור אליכם עם שלושת הדברים שהייתי מתקן ראשון, ועם חלוקה ברורה בין מה שתעשו לבד לבין מה ששווה להזמין. הטיפול המלא במהירות עולה ₪1,500-₪4,500 חד פעמי לפני מע״מ. אפשר להשיג אותי בטלפון 054-238-3789 או בWhatsApp. דברו איתי בוואטסאפ ←