Cara mempercepat loading blog

Berikut adalah panduan lengkap cara memasang kedua kode tersebut dengan benar:

Langkah 1: Memasang Kode Preconnect (Untuk Koneksi Server Eksternal)

Kode preconnect berfungsi memberi tahu browser untuk segera membuka sambungan ke server pihak ketiga (seperti Google Fonts, Google Analytics, atau CDN gambar) sebelum file aslinya diminta. Ini memangkas waktu tunggu secara signifikan.

1. Buka dashboard platform blog Anda (misalnya Blogger/WordPress), lalu masuk ke menu Theme > Edit HTML.
2. Cari tag <head> di bagian atas kode HTML template Anda.
3. Tempelkan kode preconnect tepat di bawah tag <head>. Contoh kodenya seperti ini:

<!-- Preconnect untuk Google Fonts dan CDN Eksternal -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://www.googletagmanager.com">

• Catatan: Sesuaikan URL di dalam href dengan layanan eksternal yang benar-benar digunakan oleh blog Anda. Jangan memasukkan terlalu banyak (cukup 2–3 domain terpenting saja).

Verification: Simpan template, lalu uji kecepatan halaman menggunakan Google PageSpeed Insights untuk memastikan waktu tunggu (latency) koneksi eksternal berkurang.

Langkah 2: Memasang Kode Lazy Load (Untuk Menunda Gambar di Bawah Layar)

lazy load membuat browser hanya memuat gambar yang terlihat di layar pengunjung saja (above the fold). Gambar di bawahnya baru akan dimuat saat pengguna menggulir ke bawah, sehingga halaman awal terbuka jauh lebih cepat.

Cara Modern (Menggunakan Atribut HTML Native):

Cara paling aman dan ringan saat ini adalah menggunakan atribut bawaan browser HTML5, yaitu loading="lazy".

1. Cari semua tag gambar (<img>) di dalam template postingan atau pastikan skrip editor blog Anda otomatis menambahkannya.
2. Tambahkan atribut loading="lazy" dan decoding="async" pada setiap tag gambar. Contohnya:

<img src="url-gambar-anda.jpg" alt="Deskripsi gambar" loading="lazy" decoding="async" width="600" height="400" />

• Penting: Selalu sertakan atribut width dan height pada tag gambar agar tidak terjadi pergeseran tata letak (Cumulative Layout Shift / CLS) saat gambar dimuat.

Verification: Buka halaman blog Anda, gulir ke bawah secara perlahan, dan pastikan gambar baru diunduh oleh browser saat mendekati area layar (viewport).

Langkah 3: Lazy Load untuk Gambar Bawaan Platform (Opsional / JavaScript Tambahan)

Jika Anda menggunakan platform seperti Blogger di mana gambar lama tidak memiliki atribut lazy secara otomatis, Anda bisa menambahkan skrip JavaScript ringan sebelum tag penutup </body>:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var images = document.querySelectorAll("img");
    images.forEach(function(img) {
      if (!img.hasAttribute("loading")) {
        img.setAttribute("loading", "lazy");
      }
    });
  });
</script>


Untuk mempercepat loading blog Anda menggunakan teknik preconnect dan lazy load, langkah-langkah pemasangannya harus diletakkan pada bagian kode HTML blog (biasanya pada menu Theme atau Edit HTML).
Berikut adalah panduan lengkap cara memasang kedua kode tersebut dengan benar:
Langkah 1: Memasang Kode Preconnect (Untuk Koneksi Server Eksternal)
Kode preconnect berfungsi memberi tahu browser untuk segera membuka sambungan ke server pihak ketiga (seperti Google Fonts, Google Analytics, atau CDN gambar) sebelum file aslinya diminta. Ini memangkas waktu tunggu secara signifikan.

Buka dashboard platform blog Anda (misalnya Blogger/WordPress), lalu masuk ke menu Theme > Edit HTML.
Cari tag <head> di bagian atas kode HTML template Anda.
Tempelkan kode preconnect tepat di bawah tag <head>. Contoh kodenya seperti ini:

<!-- Preconnect untuk Google Fonts dan CDN Eksternal -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://www.googletagmanager.com">


Catatan: Sesuaikan URL di dalam href dengan layanan eksternal yang benar-benar digunakan oleh blog Anda. Jangan memasukkan terlalu banyak (cukup 2–3 domain terpenting saja).

Verification: Simpan template, lalu uji kecepatan halaman menggunakan Google PageSpeed Insights untuk memastikan waktu tunggu (latency) koneksi eksternal berkurang.
Langkah 2: Memasang Kode Lazy Load (Untuk Menunda Gambar di Bawah Layar)
lazy load membuat browser hanya memuat gambar yang terlihat di layar pengunjung saja (above the fold). Gambar di bawahnya baru akan dimuat saat pengguna menggulir ke bawah, sehingga halaman awal terbuka jauh lebih cepat.
Cara Modern (Menggunakan Atribut HTML Native):
Cara paling aman dan ringan saat ini adalah menggunakan atribut bawaan browser HTML5, yaitu loading="lazy".

Cari semua tag gambar (<img>) di dalam template postingan atau pastikan skrip editor blog Anda otomatis menambahkannya.
Tambahkan atribut loading="lazy" dan decoding="async" pada setiap tag gambar. Contohnya:

<img src="url-gambar-anda.jpg" alt="Deskripsi gambar" loading="lazy" decoding="async" width="600" height="400" />


Penting: Selalu sertakan atribut width dan height pada tag gambar agar tidak terjadi pergeseran tata letak (Cumulative Layout Shift / CLS) saat gambar dimuat.

Verification: Buka halaman blog Anda, gulir ke bawah secara perlahan, dan pastikan gambar baru diunduh oleh browser saat mendekati area layar (viewport).
Langkah 3: Lazy Load untuk Gambar Bawaan Platform (Opsional / JavaScript Tambahan)
Jika Anda menggunakan platform seperti Blogger di mana gambar lama tidak memiliki atribut lazy secara otomatis, Anda bisa menambahkan skrip JavaScript ringan sebelum tag penutup </body>:
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var images = document.querySelectorAll("img");
    images.forEach(function(img) {
      if (!img.hasAttribute("loading")) {
        img.setAttribute("loading", "lazy");
      }
    });
  });
</script>