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

4/01/2026
Cara Memasang Lazy Load Gambar dan YouTube di Blogger

Kecepatan loading blog merupakan salah satu aspek penting dalam memberikan pengalaman pengguna yang baik. Ketika halaman membutuhkan waktu lama untuk menampilkan konten utama, pengunjung dapat merasa kurang nyaman dan berpotensi meninggalkan halaman sebelum artikel selesai dimuat.

Pada blog Blogger atau Blogspot, salah satu penyebab halaman terasa berat dapat berasal dari gambar berukuran besar dan embed video YouTube. Gambar yang banyak serta iframe YouTube dapat menambah resource yang harus diproses browser ketika halaman pertama kali dibuka.

Salah satu teknik yang dapat digunakan untuk mengurangi beban pemuatan awal adalah lazy loading. Teknik ini memungkinkan resource tertentu dimuat ketika memang dibutuhkan, misalnya ketika gambar mulai mendekati area yang terlihat oleh pengunjung.

Untuk video YouTube, pendekatan yang berbeda dapat digunakan, yaitu menampilkan thumbnail terlebih dahulu dan baru membuat iframe YouTube ketika pengunjung menekan tombol play. Dengan metode ini, iframe YouTube tidak perlu langsung dimuat ketika artikel pertama kali dibuka.

Apa Itu Lazy Load?

Lazy load adalah teknik pemuatan resource secara bertahap sesuai kebutuhan. Pada halaman yang memiliki banyak gambar atau media, tidak semua resource harus diproses sekaligus pada saat halaman pertama kali dibuka.

Contohnya, apabila sebuah artikel memiliki 20 gambar tetapi pengunjung baru melihat bagian awal artikel, gambar yang berada jauh di bawah halaman belum tentu perlu dimuat seketika.

Dengan menerapkan lazy loading secara tepat, proses pemuatan awal halaman dapat menjadi lebih ringan. Namun, hasilnya tetap bergantung pada ukuran gambar, jumlah elemen, script pihak ketiga, struktur template, dan resource lain yang digunakan.

Cara Memasang Lazy Load Gambar di Blogger

Browser modern sudah mendukung lazy loading melalui atribut loading="lazy". Cara ini merupakan pendekatan sederhana untuk gambar yang memang tidak berada di area awal halaman.

Contoh sederhananya:

<img
  src="url-gambar-anda.jpg"
  alt="Deskripsi gambar"
  loading="lazy">

Untuk penggunaan yang lebih terkontrol, lazy load juga dapat dibuat menggunakan JavaScript dan IntersectionObserver. Teknik ini memungkinkan script mendeteksi ketika gambar mendekati area tampilan browser.

Memasang Script Lazy Load di Template Blogger

Sebelum melakukan perubahan pada template, sebaiknya backup template Blogger terlebih dahulu. Langkah ini penting agar Anda dapat mengembalikan template jika terjadi kesalahan.

Setelah melakukan backup, masuk ke Dashboard Blogger > Tema > Edit HTML. Kemudian cari tag:

</body>

Gunakan CTRL + F untuk mempercepat pencarian. Setelah menemukan tag tersebut, Anda dapat menempatkan script lazy load sebelum </body>.

Contoh script yang digunakan untuk mendeteksi gambar dengan atribut data-src adalah sebagai berikut:

<script type='text/javascript'>
//<![CDATA[
(function() {
  function loadImage(img) {
    var src = img.getAttribute("data-src");

    if (!src) {
      return;
    }

    img.src = src;
    img.removeAttribute("data-src");
  }

  function initLazyLoad() {
    var images = document.querySelectorAll("img[data-src]");

    if (!("IntersectionObserver" in window)) {
      for (var i = 0; i < images.length; i++) {
        loadImage(images[i]);
      }

      return;
    }

    var observer = new IntersectionObserver(function(entries, obs) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          loadImage(entry.target);
          obs.unobserve(entry.target);
        }
      });
    });

    for (var i = 0; i < images.length; i++) {
      observer.observe(images[i]);
    }
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initLazyLoad);
  } else {
    initLazyLoad();
  }
})();
//]]>
</script>

Script tersebut mencari gambar yang memiliki atribut data-src. Ketika gambar mulai masuk ke area yang diamati browser, nilai data-src akan dipindahkan menjadi src sehingga gambar mulai dimuat.

Cara Menggunakan Lazy Load pada Gambar Artikel

Setelah script dipasang, gambar yang ingin ditunda pemuatannya dapat menggunakan struktur seperti berikut:

<img
  alt="Deskripsi Gambar"
  data-src="https://example.com/gambar.jpg"
  src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">

Ganti URL pada bagian data-src dengan URL gambar yang sebenarnya.

Namun, pastikan gambar utama atau gambar yang langsung terlihat ketika halaman pertama kali dibuka tidak ditunda secara berlebihan. Elemen yang berada di area awal halaman dapat membutuhkan strategi loading yang berbeda agar tidak memperlambat tampilan konten utama.

Cara Memasang Lazy Load YouTube di Blogger

Selain gambar, embed YouTube juga dapat menambah resource yang harus dimuat browser. Salah satu pendekatan yang dapat digunakan adalah menampilkan thumbnail video terlebih dahulu.

Iframe YouTube kemudian dibuat ketika pengunjung menekan tombol play. Dengan demikian, iframe video tidak langsung dibuat ketika halaman artikel pertama kali dibuka.

CSS untuk Tampilan Lazy Load YouTube

Tambahkan CSS berikut ke template Blogger. Anda dapat menempatkannya di dalam tag <style> atau area CSS template yang sesuai.

.lazy-youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}

.lazy-youtube img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lazy-youtube .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 50px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  z-index: 2;
}

.lazy-youtube .play-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
}

.lazy-youtube:hover img {
  opacity: 0.85;
}

.lazy-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

CSS tersebut membuat area video menggunakan rasio 16:9 sehingga tampil lebih proporsional pada desktop maupun perangkat mobile.

JavaScript Lazy Load YouTube

Selanjutnya, tambahkan JavaScript berikut sebelum tag </body>. Script ini akan membuat thumbnail berdasarkan ID video YouTube dan menggantinya dengan iframe ketika pengunjung mengklik area video.

<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
  var videos = document.querySelectorAll(".lazy-youtube");

  videos.forEach(function(video) {
    var videoId = video.getAttribute("data-id");

    if (!videoId) {
      return;
    }

    var wrapper = document.createElement("div");

    wrapper.innerHTML =
      '<img src="https://i.ytimg.com/vi/' +
      videoId +
      '/hqdefault.jpg" alt="Video YouTube">' +
      '<div class="play-button" aria-label="Putar video"></div>';

    wrapper.addEventListener("click", function() {
      var iframe = document.createElement("iframe");

      iframe.src =
        "https://www.youtube.com/embed/" +
        videoId +
        "?autoplay=1";

      iframe.setAttribute("title", "Video YouTube");
      iframe.setAttribute("allow", "autoplay; encrypted-media");
      iframe.setAttribute("allowfullscreen", "");

      video.innerHTML = "";
      video.appendChild(iframe);
    });

    video.appendChild(wrapper);
  });
});
//]]>
</script>

Cara Menampilkan Video YouTube di Artikel

Setelah CSS dan JavaScript dipasang, Anda tidak perlu memasukkan iframe YouTube secara langsung ke dalam artikel. Cukup gunakan elemen berikut:

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

Ganti ID_VIDEO_ANDA dengan ID video YouTube yang ingin ditampilkan.

Contohnya, apabila URL video adalah:

https://www.youtube.com/watch?v=AbCdEf12345

Maka ID videonya adalah:

AbCdEf12345

Sehingga kode yang digunakan menjadi:

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

Keuntungan Menggunakan Lazy Load pada Blogger

Penerapan lazy loading dapat memberikan beberapa manfaat, terutama pada artikel yang memiliki banyak gambar atau video.

  • Mengurangi beban pemuatan awal: Resource yang berada di bawah halaman tidak harus langsung dimuat semuanya.
  • Mengurangi request yang tidak diperlukan: Resource tertentu dapat dimuat ketika memang dibutuhkan.
  • Membantu pengalaman pengguna: Konten utama dapat memiliki kesempatan untuk tampil lebih cepat.
  • Mengurangi beban iframe YouTube: Video dapat dibuat ketika pengunjung benar-benar ingin menontonnya.
  • Mendukung optimasi performa: Lazy loading dapat menjadi salah satu bagian dari strategi optimasi kecepatan website.

Hal yang Perlu Diperhatikan Sebelum Menggunakan Lazy Load

Meskipun lazy loading bermanfaat, penerapannya tetap harus dilakukan dengan tepat. Jangan menerapkan lazy load pada semua elemen tanpa mempertimbangkan posisi dan fungsi elemen tersebut.

Jangan Menunda Gambar Utama Secara Berlebihan

Gambar yang langsung terlihat ketika halaman pertama kali dibuka sebaiknya dipertimbangkan secara khusus. Menunda resource penting di area awal halaman justru dapat membuat elemen tersebut tampil lebih lambat.

Gunakan Alt Text pada Gambar

Pastikan setiap gambar penting memiliki atribut alt yang deskriptif dan relevan. Contohnya:

<img
  src="gambar.jpg"
  alt="Tutorial memasang lazy load gambar di Blogger">

Alt text membantu memberikan konteks mengenai isi gambar dan juga berguna ketika gambar tidak dapat ditampilkan.

Periksa Ukuran Gambar

Lazy load bukan pengganti optimasi gambar. Gambar yang terlalu besar tetap dapat menjadi resource berat ketika akhirnya dimuat. Gunakan ukuran gambar yang sesuai dengan kebutuhan tampilan artikel.

Uji Template Setelah Memasang Script

Setelah memasang kode, periksa kembali halaman blog. Pastikan gambar, video, menu, komentar, widget, dan fitur interaktif lainnya tetap bekerja dengan baik.

Cara Menguji Hasil Optimasi Loading Blogger

Setelah menerapkan lazy load, lakukan pengujian sebelum dan sesudah perubahan. Hal ini penting untuk mengetahui apakah teknik tersebut benar-benar memberikan manfaat pada template yang Anda gunakan.

Anda dapat memeriksa beberapa indikator performa seperti:

  • Waktu tampilnya konten utama.
  • Jumlah resource yang dimuat ketika halaman pertama kali dibuka.
  • Jumlah request halaman.
  • Ukuran resource yang digunakan.
  • Aktivitas JavaScript pada proses awal.
  • Performa halaman pada perangkat mobile.

Gunakan alat pengujian performa seperti Google PageSpeed Insights untuk mendapatkan gambaran mengenai kondisi halaman. Jangan hanya berfokus pada angka skor, tetapi perhatikan juga rekomendasi teknis dan pengalaman penggunaan halaman.

Masalah yang Mungkin Terjadi

Setiap template Blogger memiliki struktur yang berbeda. Karena itu, implementasi lazy load dapat menghasilkan perilaku yang berbeda pada setiap blog.

Beberapa masalah yang mungkin muncul antara lain:

  • Gambar tidak muncul karena URL pada data-src salah.
  • Thumbnail YouTube tidak tersedia atau gagal dimuat.
  • Video tidak dapat diputar karena ID video tidak sesuai.
  • Script bentrok dengan JavaScript lain pada template.
  • Gambar tertentu tidak dimuat karena struktur HTML template berbeda.
  • Elemen yang seharusnya muncul sejak awal justru ikut ditunda.

Jika masalah terjadi, lakukan pemeriksaan secara bertahap dan kembalikan template ke backup sebelumnya apabila diperlukan.

Tips Optimasi Loading Blogger Selain Lazy Load

Lazy load hanyalah salah satu teknik untuk meningkatkan efisiensi pemuatan halaman. Agar performa blog lebih baik, Anda juga dapat melakukan beberapa optimasi tambahan.

  • Kompres gambar sebelum mengunggahnya.
  • Gunakan ukuran gambar yang sesuai dengan area tampilan.
  • Kurangi penggunaan widget yang tidak diperlukan.
  • Evaluasi script JavaScript pihak ketiga.
  • Hindari terlalu banyak embed eksternal.
  • Gunakan CSS secara efisien.
  • Periksa template secara berkala menggunakan alat pengujian performa.

Kesimpulan

Cara memasang lazy load gambar dan YouTube di Blogger dapat dilakukan dengan memanfaatkan HTML, CSS, dan JavaScript. Untuk gambar, Anda dapat menggunakan atribut loading="lazy" atau pendekatan berbasis IntersectionObserver. Sementara untuk YouTube, iframe dapat ditunda dengan menampilkan thumbnail terlebih dahulu dan membuat iframe ketika pengunjung menekan tombol play.

Teknik ini dapat membantu mengurangi resource yang harus diproses pada tahap awal halaman, khususnya pada artikel yang memiliki banyak gambar dan video. Namun, lazy load bukan satu-satunya faktor yang menentukan kecepatan Blogger.

Untuk mendapatkan hasil yang lebih baik, kombinasikan lazy loading dengan optimasi ukuran gambar, pengurangan script yang tidak diperlukan, penggunaan widget secara bijak, serta pengujian performa secara berkala.

Yang tidak kalah penting, selalu backup template Blogger sebelum melakukan modifikasi kode. Dengan begitu, Anda dapat mencoba optimasi dengan lebih aman tanpa khawatir kehilangan konfigurasi template sebelumnya.

FAQ Lazy Load Blogger

Apakah lazy load bisa digunakan di Blogger?

Ya. Lazy load dapat digunakan di Blogger untuk membantu menunda pemuatan gambar atau media tertentu sampai resource tersebut dibutuhkan.

Apakah lazy load otomatis membuat Blogger menjadi cepat?

Tidak selalu. Lazy load dapat membantu mengurangi beban pemuatan awal, tetapi performa blog juga dipengaruhi ukuran gambar, JavaScript, CSS, widget, iklan, iframe, dan struktur template.

Apakah gambar Blogger bisa menggunakan loading lazy?

Ya. Browser modern mendukung atribut loading="lazy" pada gambar sehingga gambar dapat dimuat secara tertunda ketika diperlukan.

Mengapa video YouTube sebaiknya menggunakan lazy load?

Iframe YouTube dapat memuat berbagai resource eksternal. Dengan menampilkan thumbnail terlebih dahulu dan membuat iframe ketika tombol play diklik, pemuatan iframe dapat ditunda sampai pengunjung benar-benar ingin menonton video.

Apakah lazy load bisa meningkatkan SEO Blogger?

Lazy loading dapat menjadi bagian dari optimasi performa halaman dan pengalaman pengguna, tetapi tidak ada jaminan bahwa penerapan lazy load saja akan meningkatkan peringkat SEO.

Apakah harus melakukan backup template sebelum memasang lazy load?

Sangat disarankan. Backup membantu Anda mengembalikan template ke kondisi sebelumnya jika terjadi kesalahan setelah modifikasi kode.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!