בקצרה: Core Web Vitals הם שלושה מדדים שגוגל משתמש בהם כדי למדוד חוויית שימוש: LCP (כמה מהר מופיע התוכן הראשי), INP (כמה מהר העמוד מגיב ללחיצה) ו-CLS (כמה העמוד קופץ בזמן הטעינה). בודקים אותם בחינם ב-PageSpeed Insights, ומשפרים בעיקר עם תמונות קלות, פחות סקריפטים של צד שלישי ואחסון טוב. מהירות היא אחד הסימנים שגוגל בודק, אבל היא חשובה עוד יותר לאנשים עצמם.
ההבדל בין אתר שנטען מהר לאתר שנטען לאט מורגש הכי חזק בטלפון, ברשת סלולרית, באמצע היום. שם נמצאים רוב הלקוחות של עסק קטן. כשבדקתי אתרים של עסקים שפנו אליי לחידוש, ברוב המקרים מצאתי את אותן שלוש-ארבע בעיות. הן לא דורשות קסמים, רק סדר.
מה זה Core Web Vitals
גוגל מגדיר שלושה מדדים, ולכל אחד יש סף של "טוב" שמופיע בהנחיות של Google Search Central:
- LCP (Largest Contentful Paint): כמה זמן עובר עד שהאלמנט הגדול במסך הראשון, בדרך כלל תמונה או כותרת, מופיע. טוב: עד 2.5 שניות.
- INP (Interaction to Next Paint): כמה מהר העמוד מגיב כשלוחצים על כפתור, פותחים תפריט או מקלידים בטופס. טוב: עד 200 אלפיות שנייה.
- CLS (Cumulative Layout Shift): כמה התוכן זז בזמן הטעינה. מכירים את הרגע שבו אתם עומדים ללחוץ על משהו, ופתאום הכול קופץ למטה? זה CLS. טוב: עד 0.1.
המדדים נמדדים על משתמשים אמיתיים, ברוב המכשירים והרשתות שלהם. לכן אתר שנראה מהיר אצלכם במחשב במשרד יכול להיות איטי אצל הלקוח בטלפון.
למה מהירות חשובה, ובאיזו מידה
גוגל אומר במפורש שחוויית עמוד היא חלק ממה שהוא בודק, אבל לא הדבר הראשון. עמוד איטי עם התשובה הכי טובה עדיין יכול לנצח עמוד מהיר בלי תשובה. אז למה להתאמץ?
- כי בין שני עמודים טובים באותה מידה, החוויה יכולה להכריע.
- כי אנשים לא מחכים. מי שלא רואה כלום אחרי כמה שניות, חוזר לגוגל ובוחר את התוצאה הבאה.
- כי גוגל קורא קודם את גרסת הטלפון, ושם האיטיות מורגשת הכי חזק. הסבר מלא במאמר על אינדקס מובייל.
איך בודקים את האתר בחינם
- PageSpeed Insights (pagespeed.web.dev): מדביקים כתובת ומקבלים שני חלקים. למעלה: נתונים של משתמשים אמיתיים, אם יש מספיק תנועה. למטה: בדיקת מעבדה עם רשימת המלצות. מתחילים מהלשונית "נייד".
- Search Console: בדוח "חוויית משתמש" או "מדדי ליבה לבדיקת חוויית המשתמש באתר" רואים אילו קבוצות עמודים טובות ואילו צריכות שיפור. מדריך לכלי: Google Search Console למתחילים.
- בדיקה ידנית: פותחים את האתר בטלפון, ברשת סלולרית ולא בוויי-פיי, בחלון גלישה בסתר. סופרים בראש כמה זמן עד שרואים משהו שימושי. זו הבדיקה הכי כנה שיש.
כדאי לבדוק לא רק את דף הבית, אלא גם עמוד שירות ועמוד עם הרבה תמונות, כמו גלריה. ואם האתר עבר עדכון גדול, כמו הוספת צ'אט או גלריה חדשה, בודקים שוב, כי שינוי אחד קטן יכול להפוך עמוד מהיר לאיטי.
מה בדרך כלל מאט אתר של עסק קטן
תמונות כבדות
זה האשם מספר אחת. תמונה שהועלתה ישר מהמצלמה או מהטלפון יכולה לשקול כמה מגה-בייט, כשבאתר היא מוצגת ברוחב של טלפון. הפתרון: להקטין לגודל שבו היא מוצגת, להמיר לפורמט מודרני כמו WebP, ולתת לדפדפן גרסאות שונות לטלפון ולמחשב. עוד על זה במאמר על תמונות וטקסט חלופי.
סקריפטים של צד שלישי
צ'אט, פיקסלים של פרסום, וידג'טים של נגישות, מפות, סרטונים מוטמעים. כל אחד מוסיף קוד שהדפדפן צריך להוריד ולהריץ, ולפעמים הם תוקעים את התגובה ללחיצה. לא צריך לוותר על הכול, אבל כדאי לבדוק מה באמת בשימוש, ולטעון את השאר רק כשצריך.
תבניות ותוספים כבדים
באתרי תבניות ובוורדפרס עם הרבה תוספים, כל עמוד טוען קוד של פיצ'רים שלא בשימוש באותו עמוד. סליידר, אנימציות, ספריות של עיצוב. זו אחת הסיבות שאני כותב אתרים בקוד: כל עמוד טוען רק את מה שהוא צריך. השוואה מלאה יש במאמר Wix או אתר בקוד.
פונטים
פונט עברי עם הרבה משקלים יכול לשקול לא מעט. טוענים רק את המשקלים שבשימוש, ומגדירים שהטקסט יופיע מיד בפונט חלופי עד שהפונט נטען.
אחסון איטי
שרת זול ועמוס מגיב לאט עוד לפני שהדפדפן התחיל לעבוד. אחסון טוב עם רשת הפצה (CDN) מגיש את האתר מנקודה קרובה למשתמש. מה לבדוק בחבילת אחסון: אחסון אתרים.
דוגמה: מוורדפרס לאתר בקוד
באתר של משרד עו"ד שגב סמואל אשכנזי עשיתי חידוש מלא: מאתר וורדפרס לאתר מהיר בקוד, עם פטיש תלת-ממדי, עמוד לכל תחום ודירוג חי מ-LawReviews. הנקודה המעניינת היא שמהירות ועיצוב עשיר לא סותרים. העיקרון שאני עובד לפיו בכל אתר: הכותרת, הטקסט והכפתורים מקבלים עדיפות, ואלמנטים כבדים כמו תלת-ממד נטענים אחריהם, כך שהלקוח יכול לקרוא וללחוץ עוד לפני שהאפקט מוכן. את סיפור הפרויקט אפשר לקרוא בנפרד.
מה לבקש ממי שבונה לכם אתר
- שכל התמונות יעברו הקטנה והמרה לפני ההעלאה, עם גרסאות לטלפון.
- שלכל תמונה יוגדרו רוחב וגובה, כדי שהעמוד לא יקפוץ.
- שהמסך הראשון ייטען קודם, ותמונות שנמצאות למטה ייטענו רק כשמגיעים אליהן.
- שסקריפטים של צד שלישי ייטענו בצורה שלא חוסמת את העמוד.
- שהאתר יישב על אחסון עם CDN ו-HTTPS.
- שיבדוק את התוצאה ב-PageSpeed Insights בטלפון, ויראה לכם.
דוגמה: אתר של מסעדה עם גלריה
נניח שיש לכם מסעדה, ובדף הבית יש סליידר עם שמונה תמונות גדולות של מנות, תפריט כקובץ PDF, מפה מוטמעת וסרטון. בטלפון, הלקוח רואה מסך לבן כמה שניות. התיקון: תמונה אחת חזקה במסך הראשון במקום סליידר, תמונות הגלריה נטענות רק כשגוללים אליהן, התפריט כעמוד רגיל ולא PDF, והמפה והסרטון נטענים רק בלחיצה. העמוד נראה כמעט אותו דבר, אבל התוכן מופיע הרבה יותר מהר.
מה לא בשליטה שלכם
- המכשיר והרשת של הלקוח. טלפון ישן ברשת חלשה תמיד יהיה איטי יותר.
- שירותים חיצוניים. אם ספק הצ'אט איטי היום, הוא יאט גם אתכם.
- תנודות בבדיקה. בדיקת מעבדה נותנת תוצאה קצת שונה בכל הרצה. מסתכלים על המגמה, לא על הרצה אחת.
אל תרדפו אחרי ציון 100
הציון העגול בראש PageSpeed Insights הוא לא מה שגוגל משתמש בו לדירוג. הוא סיכום של בדיקת מעבדה. מה שחשוב הוא שהמדדים של משתמשים אמיתיים יהיו בתחום "טוב". אתר עם ציון 85 ומדדים טובים בשטח מצוין. לבזבז שבוע כדי לעלות מ-92 ל-100 על חשבון תמונות אמיתיות או אנימציה שמספרת משהו, לרוב לא שווה. איך משלבים עיצוב עשיר עם מהירות: מהירות אתר ועיצוב.
לסיום
מהירות אתר היא שלושה מדדים פשוטים להבנה: התוכן מופיע מהר, העמוד מגיב מהר, ושום דבר לא קופץ. ברוב האתרים הקטנים התיקון הוא תמונות קלות, פחות סקריפטים ואחסון טוב. כל אתר תדמית שאני בונה נכתב בקוד, נבדק בטלפון ב-PageSpeed Insights לפני העלייה, ונשאר מהיר גם אחרי עדכונים במסגרת התחזוקה.
רוצים אתר שעובד בשביל העסק?
ספרו לי מה אתם צריכים, ותקבלו כיוון ברור והצעת מחיר מסודרת.