איך לבדוק ולשפר את מהירות האתר בנייד
יהלי סמפסון · · 3 דקות קריאה
בקצרה
בודקים את האתר ב-pagespeed.web.dev בלשונית הנייד. מסתכלים על שלושה מדדים: LCP (טעינת התוכן הראשי, טוב עד 2.5 שניות), INP (תגובה ללחיצות, טוב עד 200 מילישניות) ו-CLS (קפיצות בעמוד, טוב עד 0.1). מתקנים קודם תמונות כבדות, סקריפטים מיותרים, פונטים וסרטון במסך הראשון.
רוב הלקוחות של עסק קטן מגיעים מהטלפון, הרבה פעמים בדרך, עם קליטה לא מושלמת. אתר שנטען לאט מפסיד אותם לפני שהם בכלל קראו את הכותרת. בנוסף, גוגל לוקח בחשבון את חוויית השימוש בעמוד כשהוא מדרג.
המדריך הזה מראה איך לבדוק את האתר בעצמך, איך לקרוא את התוצאות, ומה לתקן קודם.
שלב 1: בודקים את האתר
- 1
נכנסים ל-PageSpeed Insights
גולשים ל-pagespeed.web.dev, מדביקים את כתובת האתר ולוחצים על ניתוח.
- 2
עוברים ללשונית הנייד
זו התוצאה החשובה, כי רוב הגולשים מגיעים מהטלפון.
- 3
בודקים גם עמודים פנימיים
לא רק את דף הבית. עמוד שירות כבד יכול להיות איטי גם כשדף הבית מהיר.
בדיקה אנושית חשובה לא פחות: פותחים את האתר בנייד על רשת סלולרית, לא על ה-Wi-Fi של הבית, ושמים לב כמה זמן לוקח עד שרואים את הכותרת ואת הכפתור.
שלב 2: מבינים את שלושת המדדים
גוגל מודד את חוויית השימוש בשלושה מדדים שנקראים Core Web Vitals:
- LCP: כמה זמן לוקח לתוכן הראשי במסך להיטען. טוב: עד 2.5 שניות.
- INP: כמה מהר העמוד מגיב ללחיצות ולהקלדה. טוב: עד 200 מילישניות.
- CLS: כמה העמוד קופץ בזמן הטעינה. טוב: עד 0.1.
מתחת למדדים, PageSpeed מציג רשימת הזדמנויות לשיפור. לא צריך להבין כל שורה. מתחילים מהפריטים שבראש הרשימה.
שלב 3: מתקנים את התמונות
תמונות כבדות הן סיבה נפוצה מאוד לאתר איטי. תמונה שצולמה בטלפון ועלתה כמו שהיא יכולה לשקול כמה מגה, כשבאתר היא מוצגת בגודל קטן בהרבה.
- מקטינים כל תמונה לגודל שבו היא באמת מוצגת
- שומרים בפורמט מודרני כמו WebP או AVIF
- טוענים תמונות שמתחת למסך הראשון רק כשמגיעים אליהן (lazy loading)
- מגדירים רוחב וגובה לכל תמונה, כדי שהעמוד לא יקפוץ
<img src="studio.webp" width="800" height="600" loading="lazy" alt="הסטודיו מבפנים">שלב 4: מורידים סקריפטים מיותרים
כל תוסף, וידג'ט צ'אט, פיקסל ואנימציה מוסיפים קוד שהטלפון צריך להוריד ולהריץ. עוברים על הרשימה ומשאירים רק את מה שבאמת בשימוש.
שאלה טובה לכל תוסף: אם הוא ייעלם מחר, מישהו ישים לב?
שלב 5: פונטים
כל פונט וכל משקל של פונט הוא קובץ נוסף. בוחרים פונט אחד או שניים, רק את המשקלים שבשימוש, ורק את השפות שצריך (למשל עברית ולטינית).
שלב 6: סרטון במסך הראשון
סרטון רקע גדול נראה מרשים, אבל בנייד הוא יכול להיות הדבר הכבד ביותר בעמוד. אם משאירים אותו, מכווצים אותו היטב, מוסיפים תמונת פתיחה (poster), ושוקלים להחליף אותו בתמונה בנייד.
שלב 7: אחסון
אחסון טוב עם רשת הפצה (CDN) מגיש את האתר משרת קרוב לגולש. לאתרים סטטיים יש היום אפשרויות אחסון מהירות מאוד.
מהיר זה לא מספיק: גם נוח
- טקסט בגודל שקל לקרוא בלי להגדיל
- כפתורים גדולים מספיק ללחיצה עם האגודל
- כפתור הוואטסאפ גלוי בלי לגלול
- בלי חלונות קופצים שמסתירים את התוכן
שאלות על הנושא
מה זה ציון טוב ב-PageSpeed?
הציון הוא אינדיקציה. חשוב יותר להסתכל על שלושת המדדים (LCP, INP, CLS) ולוודא שהם בטווח הטוב, במיוחד בנייד.
האתר נראה מהיר אצלי, למה הציון נמוך?
בטלפון שלך האתר אולי שמור בזיכרון ועל רשת מהירה. הבדיקה מדמה גולש חדש עם טלפון ממוצע ורשת סלולרית.
מהירות משפיעה על גוגל?
גוגל לוקח בחשבון את חוויית השימוש בעמוד, כולל המדדים האלה. חשוב לא פחות שגולשים לא עוזבים לפני שהעמוד נטען.