Wajar jika webmaster atau pemilik blog menginginkan untuk mendapatkan skor sempurna di angka 100 pada audit Lighthouse di setiap kategori, selagi itu bisa dicapai. Faktanya angka sempurna pada setiap kategori memang bisa dicapai, meski perlu upaya tak mudah pada prosesnya.
Sependek panjangnya ingatan, munculnya bendera Serves Images With Low Resolution ini dahulu tak pernah muncul. Utamanya setelah saya menggunakan srcset pada image atau foto yang ada di blog. Fungsi srcset adalah agar browser mengunduh image dengan resolusi terendah, sesuai dengan ukuran layar gadget atau komputer yang digunakan.
Ini tentu dimaksudkan untuk memberi pengalaman yang baik kepada pengunjung. Oleh sebab semakin cepat blog dibuka setelah diklik tautnya, semakin senang pengunjung karena tak harus menunggu lama. Probabilitasnya tinggi untuk pengunjung menutup sebuah laman jika tak juga muncul setelah lebih dari 3-4 detik.
Contoh kode pada image dengan srcset yang saya gunakan selama ini adalah sebagai berikut,
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s1600/legenda-1b.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s3/legenda-1b.jpg" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s320/legenda-1b.jpg" data-srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s1600/legenda-1b.jpg 728w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s400/legenda-1b.jpg 400w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s320/legenda-1b.jpg 320w" data-sizes="100vw" class="lazyload" alt="taman legenda keong emas tmii jakarta" width="100%" height="auto" /></a>
Perhatikan pada kode srcset, yang tak lagi memuaskan bagi audit Lighthouse sehingga bendera peringatanpun dikerek. Adalah wajar jika parameter audit berubah dari waktu ke waktu sesuai dengan perkembangan, dan tentu dimaksudkan agar supaya kinerja website bisa menjadi lebih baik lagi.
Penambahan atribut "data-" pada srcset dilakukan oleh sebab blog ini menggunakan skrip lazyload dari lazysizes, yang dimaksudkan untuk mempercepat loading halaman blog.
Apa yang kemudian saya lakukan untuk mengatasi masalah flag Serves Images With Low Resolution Lighthouse adalah mengganti cara penulisan pada srcset dengan menggunakan skala, dengan layar terkecil digunakan sebagai basis skala 1.
Kode pada srcset setelah diubah akan menjadi seperti ini,
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s1600/legenda-1b.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s3/legenda-1b.jpg" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s320/legenda-1b.jpg" data-srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s320/legenda-1b.jpg, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s480/legenda-1b.jpg 1.5x, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutU6VdGhrIm684oi_oxd8Fedm5ebiNiwMqVwHIeUNmhMCuXDSlH4_JCbkuFekXMkPUgNi_RLEIc8q01nIr4rcrpxwg-Q2yZomZ0qR8-_QNZLpcM7kU2v4xEUegKbvUXwao2MarfhASHNb/s728/legenda-1b.jpg 2x" class="lazyload" alt="taman legenda keong emas tmii jakarta" width="100%" height="66.67%" /></a>
Atribut data-sizes="100vw" tidak diperlukan lagi sehingga dihapus. Setelah perubahan disimpan dan melakukan audit ulang Lighthouse, maka bendera tak lagi dikerek dan skor pun menjadi sempurna.
Label: Lighthouse, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
