הבלוג של SEO ישראל

מדריך: כך תבדקו Lazy Loading באתר באמצעות כרום. עובד גם על אתרי פיתוח!

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

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

מה זה Lazy loading?

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

שימו לב – lazy loading לא מהווה תחליף לכיווץ תמונות כבדות מדי, הן עדיין משהו שצריך לטפל בו.

למה בכלל צריך לבדוק Lazy Loading בכרום?

מרבית כלי בדיקת מהירות (כמו Page Speed Insights) יתריעו כאשר ישנן תמונות מתחת לפולד שנטענות בכניסה לעמוד ולא באמצעות lazy loading, אבל אני לא אוהב אותם מכמה סיבות:

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

איך לבדוק lazy loading בכרום

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

  1. פתחו את ה- Developer Tools של כרום באמצעות מקש F12 או על ידי הקלקה ימנית על כל מקום בדף ובחירה ב Inspect element.
  2. הקליקו על טאב Network בחלקה העליון של החלונית שנפתחה
    טאב Network בדפדפן כרום
  3. לחצו על טאב Img מימין לפילטר, זה יאפשר לנו לראות את כל הבקשות לתמונות שנשלחות בזמן שאנחנו על עמוד מסוים.
    לחיצה על טאב Img יציג רק בקשות של תמונות אל השרת
  4. רעננו את העמוד שאתם רוצים לבדוק – מה שתקבלו זו רשימה של כל התמונות שנטענות ביחד עם טעינת העמוד הראשונית ולא ב lazy loading. הקלקה על כל שורה תציג מידע נוסף לגבי התמונה ואת התמונה עצמה, כך שאפשר לזהות תמונות סוררות יחסית בקלות. בשלב זה חשוב לא לגלול את העמוד על מנת שלא לגרום לטעינה של תמונות נוספות.
  5. בדקו שאין ברשימה תמונות שלא אמורות להיטען בשלב זה או בעמוד הזה בכלל, לפעמים תגלו שישנן תמונות (ומשאבים בכללי) שנטענות ללא צורך ולפעמים אפילו שגיאות 404.
  6. נקו את הרשימה על ידי לחיצה על האייקון השני משמאל (Clear)
    כפתור Clear  מנקה את הרשימה
  7. התחילו לגלול עד לתחתית תוך מתן תשומת לב לרשימה, התמונות שיחלו להופיע בהדרגה הן תמונות שנטענות עם lazy loading ולא בטעינת העמוד הראשונית. אם הרשימה ריקה וישנן תמונות מתחת לפולד בעמוד, lazy loading לא עובד בעמוד הזה.
נשארים בלופ

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

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

עוד קצת ואתם בדרך לקידום אתרים טוב יותר

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