ติดตั้ง Lazy Loading ให้กับ Yii Framework

ในบทเรียนรู้นี้เรามาติด Lazy Loading ให้กับ Yii Framework 2 เพื่อให้การ Load Image, Iframe หรือ Video มีความลื่นไหลมากยิ่งขึ้น ดังที่ Google แนะนำตอนตรวจสอบ Page Speed โดยสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่ https://web.dev/native-lazy-loading

ขั้นแรกทำการ RegisterJS ก่อน

โดยใช้คำสั่งในการ registerJs ลงใน Theme Layout หลักของเราเลย เช่น frontend/views/layouts/main.php หรือ layout ของ theme ที่เราสร้างขึ้น ดังนี้

<?php $this->registerJs("
        if ('loading' in HTMLImageElement.prototype) {
            const images = document.querySelectorAll('img[loading=\"lazy\"]');
            images.forEach(img => {
              img.src = img.dataset.src;
            });
          } else {
            // Dynamically import the LazySizes library
            const script = document.createElement('script');
            script.src =
              'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js';
            document.body.appendChild(script);
          }
        ")?>

จากนั้นในรูปภาพก็ใส่ attribute สำหรับ lazy load ดังนี้

<?=Html::img($directoryAsset."/img/landing.png", ['class' => 'img-fluid lazyload', 'loading' => 'lazy', 'data' => ['src' => $directoryAsset."/img/landing.png"]])?>

จะเห็นว่ามี class lazyload และ มี attribute loading="lazy" เป็นอันเสร็จเรียบร้อย

หมายเหตุ การตั้งค่านี้รองรับใน Chrome version 76 ขึ้นไป