Cara Pasang Lazy Load Gambar dan YouTube di Blogger Agar Blog Makin Cepat

Kecepatan loading sebuah blog adalah faktor yang sangat krusial dalam dunia SEO dan pengalaman pengguna. Blog yang lambat cenderung ditinggalkan oleh pengunjung sebelum kontennya selesai dimuat. Dua elemen yang biasanya membuat blog terasa berat adalah gambar berukuran besar dan embed video YouTube.

Lazy load adalah teknik yang menunda pemuatan elemen berat tersebut hingga pengunjung melakukan scroll ke area di mana elemen itu berada. Dengan cara ini, browser hanya memuat apa yang benar-benar dilihat oleh mata pengunjung, sehingga proses loading awal menjadi jauh lebih ringan dan cepat.

Cara Pasang Lazy Load Gambar di Blogger

Secara teknis, banyak browser modern sudah mendukung atribut loading="lazy" secara bawaan. Namun, untuk memastikan fitur ini bekerja maksimal di semua perangkat dan memenuhi kriteria Google PageSpeed Insights, Anda bisa menggunakan bantuan script ringan.

Langkah pertama adalah masuk ke dashboard Blogger, pilih menu Tema, lalu klik Edit HTML. Cari kode </body> dan letakkan kode berikut tepat di atasnya:

<script type='text/javascript'>
//<![CDATA[
(function(a,b){var c=function(a,b,c){if(a.addEventListener)a.addEventListener(b,c,!1);else if(a.attachEvent)a.attachEvent("on"+b,c)};var d=function(a,b){var c,d,e,f=function(){};this.settings=a||{};this.callback=b||f;this.images=[];this.observer=null;this.init()};d.prototype={init:function(){if(!a.IntersectionObserver)this.loadAll();else{var b=this,c={root:null,rootMargin:"0px",threshold:[0]};this.observer=new IntersectionObserver(function(a){a.forEach(function(a){if(a.isIntersecting){var c=a.target;b.loadImage(c);b.observer.unobserve(c)}})},c);this.update()}},update:function(){var a=b.querySelectorAll("img[data-src]");for(var c=0;c<a.length;c++)this.observer.observe(a[c])},loadImage:function(a){var b=a.getAttribute("data-src");if(!b)return;a.src=b;a.removeAttribute("data-src")}};a.LazyLoad=d})(window,document);
var lazyLoadInstance = new LazyLoad();
//]]>
</script>

Setelah memasang script di atas, saat Anda menulis artikel, pastikan tag gambar Anda menggunakan atribut data-src sebagai pengganti src. Contoh pengunaannya adalah sebagai berikut:

<img alt="Deskripsi Gambar" data-src="url-gambar-anda.jpg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" />

Cara Pasang Lazy Load YouTube

Memasang video YouTube secara langsung menggunakan iframe bawaan akan memuat script yang sangat besar, meskipun video tersebut belum diputar. Teknik terbaik adalah hanya menampilkan gambar thumbnail video, dan baru memuat video aslinya saat tombol play diklik.

Gunakan kode CSS berikut di atas kode </b:skin> atau di dalam tag <style> blog Anda:

.lazy-youtube {
  background-color: #000;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.lazy-youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7;
}
.lazy-youtube .play-button {
  width: 90px;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}
.lazy-youtube .play-button:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent #fff;
}
.lazy-youtube img, .lazy-youtube .play-button {
  cursor: pointer;
}
.lazy-youtube img, .lazy-youtube .play-button, .lazy-youtube .play-button:before {
  position: absolute;
}
.lazy-youtube .play-button, .lazy-youtube .play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

Kemudian, pasang script berikut di atas </body> untuk menangani fungsi kliknya:

<script>
document.addEventListener("DOMContentLoaded", function() {
  var div, n, v = document.getElementsByClassName("lazy-youtube");
  for (n = 0; n < v.length; n++) {
    div = document.createElement("div");
    div.setAttribute("data-id", v[n].dataset.id);
    div.innerHTML = '<img src="https://i.ytimg.com/vi/' + v[n].dataset.id + '/hqdefault.jpg"><div class="play-button"></div>';
    div.onclick = function() {
      var iframe = document.createElement("iframe");
      iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1");
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("allowfullscreen", "1");
      iframe.setAttribute("allow", "autoplay; encrypted-media");
      this.parentNode.replaceChild(iframe, this);
    };
    v[n].appendChild(div);
  }
});
</script>

Untuk menampilkan videonya di dalam postingan, Anda cukup menggunakan kode HTML sederhana ini dan ganti ID_VIDEO_ANDA dengan ID unik dari video YouTube tersebut:

<div class="lazy-youtube" data-id="ID_VIDEO_ANDA"></div>

Dengan menerapkan kedua teknik lazy load di atas, beban awal blog Anda akan berkurang drastis. Pastikan Anda selalu melakukan backup template sebelum melakukan modifikasi agar jika terjadi kesalahan, Anda bisa mengembalikannya ke kondisi semula dengan mudah.