Cara Tunda Gambar di Balik Layar (PageSpeed Insights)

Balik lagi ke seri Tutorial Blog dimana saya akan membagikan tips dan tutorial agar blogmu semakin SEO Friendly dalam mengarungi algoritma terbaru Google yang baru saja update core bulan Juli ini. Tutorial terakhir membahas JPG to WebP.

Yang akan saya bahas kali ini adalah mengenai optimasi kecepatan website. Tutorial ini saya tujukan untuk pengguna CMS Blogger karena pada Wordpress versi terbaru sudah otomatis menggunakan lazyload untuk loading gambarnya.

cara tunda gambar di balik layar

Dalam tutorial cara menunda gambar di balik layar atau bahasa Inggris-nya defer offscreen images pada PageSpeed Insights, saya menggunakan situs Zenius.net blog sebagai contohnya, tepatnya artikel "https://www.zenius.net/blog/panduan-lengkap-membuat-cv", saya temukan ketika browsing cara memaksimalkan CV.

Skor PSI nya buruk, yakni di angka 27 dengan metrik First Contentful Paint (FCP) = 3 detik, Largest Contentful Paint (LCP) = 3.9 detik, dan Cumulative Layout Shift (CLS) = 0.2. Dengan hasil ini artikel tersebut tidak lolos uji core web vital.

cara mengoptimalkan kecepatan web

Klik gambar untuk lebih jelas keterbacaannya. Nah, salah satu peluang yang harus dilakukan agar skor loading blog Zenius meningkat adalah dengan melakukan Tunda gambar di balik layar, seperti gambar di bawah ini sarannya.

cara mengatasi tunda gambar di balik layar

Kira-kira bagaimana cara melakukan peluang defer offscreen images itu? Mudah banget kok apalagi banyak browser versi terbaru sudah support lazyload gambar asalkan diaktifkan pakai satu tag saja sudah work. Cek caranya di bawah ini.

Cara Mengatasi Defer Offscreen Images

a. Untuk Blogger

  1. Upload/cari gambar ke dalam postingan yang ingin dioptimasi
  2. Pindah ke Tampilan HTML
  3. Tambahkan cdn.statically.io/img/ di depan 1.bp.blogspot.com baik itu di ahref="" dan scr=""
  4. Sebelum src="" tambahkan loading="lazy"
  5. Selesai

Apa itu maksudnya? Tenang, terus baca artikel ini sampai habis karena akan saya jelaskan penerapan optimasi tunda gambar di balik layar itu. Yang pertama soal cdn.statically.io/img, itu fungsinya agar gambar dalam artikel blog tidak disimpan di hosting Blogger, tetapi disimpan di CDN (Content Delivery Network).

Dengan menghosting gambar di CDN membuat bot yang merender halaman web tidak akan memakan waktu lama ketika bertemu gambar. Oh ya, agar lebih optimal sebaiknya situs CDN yang kamu gunakan diberi tag rel="preconnect" ya dengan ditaruh tag tersebut di bagian <head>. Contoh : <link rel="preconnect" href="https://cdn.statically.io"/>.

Mengutip dari web.dev, fungsi preconnect adalah memberi tahu browser bahwa halaman webmu butuh menstabilkan koneksi dengan situs pihak ketiga dan butuh diproses sesegera mungkin. Intinya biar di-load lebih awal.

Kembali lagi ke CDN, peletakkan cdn.statically.io/img berada di depan 1.bp atau 2.bp yang mana itu url gambar yang dihosting di Blogger. Coba cek gambar di bawah ini.

cara tunda gambar di balik layar blogger

Nah, ada dua kan link gambarnya. Satu di ahref dan satu di src. Dua-dunya harus diberi link CDN. Pengguna Blogger harus sabar karena melakukan ini satu per satu secara manual karena tidak ada plugin seperti di Wordpress.

Selanjutnya tentang loading="lazy". Ini yang saya maksud tadi mengenai browser modern yang support lazyload. Tinggal menambahkan kode singkat tersebut sudah bisa mengaktifkan mode pemuatan gambar secara lambat deh di blogmu.

b. Untuk Wordpress

  1. Update Wordpress ke versi terbaru agar otomatis support lazyload
  2. Jika masih belum berhasil install plugin cache seperti WP Fastest Cache karena biasanya ada fitur lazyload
  3. Jika masih gagal juga, langkah terakhir install plugin lazyload image
  4. Selesai

Buat pengguna Wordpress kamu tidak perlu ribet-ribet mengoptimasi gambar satu per satu ya karena ada bantuan plugin yang dapat membereskan semua itu dengan sekali klik. Beruntunglah kalian pengguna WP apalagi jika menggunakan server Litespeed terus hosting di hosting terbaik seperti Exabytes, IdCloudHost, Bluehost, Siteground, Hostgator, dan masih banyak lagi yang kencang.

Sebelum mengakhiri artikel ini kamu pasti nggak ingin setengah-setengah kan mengoptimasi gambar di blogmu? Oleh karena itu, saya merekomendasikanmu untuk baca artikel "Cara mengoptimasi gambar web" yang masih relate dengan cara tunda gambar di balik layar PageSpeed Insights ini.

No comments: