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

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

שיטת ה-Lazy Load

Lazy Load הינה שיטה אשר באה לענות על זה בצורה פשוטה של הפחתה בקריאות HTTP מה שגורם לעמוד להיטען מהר יותר מכיוון שהדפדפן לא צריך לחכות שכלל קריאות ה-HTTP יסתיימו וכלל ה-״נכסים״ יטענו.
שיטה זאתי בעצם מאפשרת לנו לטעון תמונות On-Demand, כלומר, התמונות לא נטענות כל עוד הגולש לא הגיע לחלק בו התמונה אמורה להיות מוצגת.

אז איך זה עובד?

על מנת למנוע טעינה של התמונות, אנחנו גורמים לדפדפן לא להוריד את התמונות ע״י כך שאנחנו לא מספקים את תכונת (attribute) ה-src.
במקום להשתמש בתכונת ה-src, אנחנו שומרים את הקישור לתמונה בתכונת data לבחירתנו.

<img data-src="https://www.dorzki.io/wp-content/themes/dorzki_blog/assets/images/logo.png" alt="">

כעת, עלינו לזהות האם הגולש הגיע למקום אשר בו אמורה להיות תמונה, ובמידה והגענו למקום כזה, עלינו להעתיק את הקישור לתמונה מה-data-src> לתכונת ה-src, דבר אשר יחייב את הדפדפן להוריד את התמונה בזמן אמת.

על מנת לזהות האם הגולש הגיע לאלמנט מסויים נשתמש בתוסף jQuery בשם Viewport Selectors.

jQuery( document ).ready( function( $ ) {

  $( document ).scroll( function() {
    $( 'img[data-src]:in-viewport' ).attr( 'src', function() {
      return $( this ).data( 'src' );
    } ).removeAttr( 'data-src' );
  } );

} );

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

img {
    opacity: 1;
    transition: opacity 1s ease;
}

img[data-src] {
    opacity: 0;
}

מה שאנחנו למעשה עושים זה מחביאים את התגית ורק כאשר התמונה נטענה והסרנו את ה-data-src, התמונה תופיעה עם אנימציה fade-in.

שימוש ב-Lazy Load ב-WordPress

על מנת להשתמש בקוד הנ״ל באתר WordPress שלנו, נצטרך לבצע את הצעדים הבאים:

  1. נעתיק את קוד ה-JavaScript לקובץ JavaScript של התבנית.
  2. נעתיק את קוד ה-CSS לקובץ ה-CSS של התבנית.
  3. נוריד את הסקריפט Viewport Selectors ונשמור אותו תחת התבנית שלנו בתיקיית /assets/js/.
  4. נרשום את הסקריפט של ה-Viewport Selectors ב-WordPress ע״י העתקה של הקוד הבא לקובץ functions.php:
    function dorzki_load_scripts() {   wp_enqueue_script( 'viewport-js', get_template_directory_uri() . '/assets/js/jquery.viewport.mini.js', array( 'jquery' ), '1.0', true ); } add_action( 'wp_enqueue_scripts', 'dorzki_load_scripts' );
  5. לבסוף נוסיף את הקוד הבא לקובץ functions.php, תפקידו לזהות היכן קימות תגיות של תמונות ולהחליף מ-src ל-data-src.
    function dorzki_lazy_load_image_replace( $content ) {   return preg_replace( '/(src="[^"]*")/', 'data-$1', $content ); } add_filter( 'the_content', 'dorzki_lazy_load_image_replace' );

סיכום

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

    כתיבת תגובה

    1. אבי

      אחלה מאמר, רק שהקישור לסקריפט Viewport Selectors מוביל ל-404
      תוכל בבקשה לתקן?
      תודה רבה

      הגב
      1. דור צוברי

        היי אבי,
        תודה רבה על הדיווח, הקישור תוקן!

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

    שתפו