Cara Menggunakan PageSpeed Insights untuk Optimasi Blog di Blogger

PageSpeed Insights (PSI) adalah alat gratis dari Google untuk mengukur kecepatan dan pengalaman pengguna (Core Web Vitals) di blogmu. Dengan PSI, kamu tahu skor Mobile & Desktop, metrik utama (LCP, CLS, INP), serta saran perbaikan yang spesifik. Di panduan ini, kita bahas cara cek skor serta langkah teknis yang relevan untuk Blogger.

Ringkasan langkah

Uji blog di PageSpeed Insights.
Pahami metrik utama: LCP, CLS, INP.
Perbaiki masalah paling berpengaruh: gambar besar, font lambat, script berat.
Uji ulang sampai skor dan Core Web Vitals membaik.

1) Cara Tes Kecepatan Blog

Buka pagespeed.web.dev.
Masukkan URL blog (contoh: https://thetipsweb.blogspot.com/) → klik Analyze.
Lihat tab Mobile & Desktop. Fokus utamanya Mobile.
Perhatikan bagian Core Web Vitals dan daftar Opportunities/Diagnostics.

2) Kenali Core Web Vitals

LCP (Largest Contentful Paint) – waktu tampil elemen terbesar di layar. Target ≤ 2.5s.
CLS (Cumulative Layout Shift) – stabilitas layout saat halaman memuat. Target ≤ 0.1.
INP (Interaction to Next Paint) – respons interaksi pengguna. Target ≤ 200 ms.

3) Perbaikan Cepat Khusus Blogger

A. Optimasi Gambar (pengaruh besar untuk LCP)

Gunakan WebP jika memungkinkan. Saat upload, utamakan ukuran resolusi yang sesuai tampilan.
Atur ukuran eksplisit agar layout stabil (turunkan CLS).
Lazy-load gambar di bawah above the fold (biarkan hero di atas tanpa lazy).

<!-- Contoh gambar hero (jangan lazy) -->
<img src="URL-HERO.webp" width="1200" height="630" alt="Ilustrasi artikel blogger">

<!-- Gambar lain (lazy) -->
<img src="URL-KONTEN.webp" loading="lazy" width="800" height="450" alt="Contoh langkah">

B. Font Lebih Cepat (kurangi render-blocking)

Jika kamu memakai Google Fonts di template, tambahkan preconnect & display swap untuk menghindari jeda render.

<!-- Letakkan di <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

Tips: Batasi varian/berat font agar beban kecil. Jika tema sudah menyuntikkan Google Fonts, rapikan agar hanya satu kali pemanggilan.

C. Tunda (defer) JavaScript Non-Kritis

Script yang tidak dibutuhkan saat awal muat bisa diberi defer atau async, atau dipindah mendekati </body>.

<!-- Contoh -->
<script src="https://example.com/widget.js" defer></script>
<!-- atau -->
<script async src="https://example.com/analytics.js"></script>

Catatan: Jangan ubah urutan/atribut script inti tema jika tidak yakin. Uji setelah perubahan.

D. Lazy-load Embed YouTube

Sematan video biasanya berat. Pakai teknik placeholder + pemuatan saat klik.

<!-- Thumbnail + tombol play; muat iframe saat diklik (butuh sedikit JS) -->
<div class="yt-lite" data-id="ID_VIDEO">
  <button class="play">Play</button>
</div>

<script>
// contoh sederhana
document.addEventListener('click', function(e){
  var box = e.target.closest('.yt-lite'); if(!box) return;
  var id = box.getAttribute('data-id');
  box.innerHTML = '<iframe src="https://www.youtube.com/embed/'+id+'?autoplay=1" ' +
                  'allow="accelerometer; autoplay; encrypted-media" allowfullscreen loading="lazy"></iframe>';
});
</script>

E. Pangkas Widget & Iklan Berlebihan

Hapus widget yang tidak penting (jam, kalender, counter lama).
Batasi jumlah unit iklan di above the fold.
Gunakan gambar logo berukuran wajar (< 60–80KB bila memungkinkan).

F. Kurangi Post di Beranda

Atur Jumlah postingan di laman utama (mis. 5–7) di Setelan → Postingan agar beranda lebih ringan. Gunakan jump break di setiap artikel supaya hanya menampilkan ringkasan.

G. Atur Dimensi Iklan & Elemen Dinamis (untuk CLS)

Pastikan slot iklan dan gambar punya width/height atau aspect-ratio supaya layout tidak “loncat”.

<ins class="adsbygoogle"
     style="display:block;width:336px;height:280px"
     data-ad-client="ca-pub-XXXX"
     data-ad-slot="YYYY"></ins>

4) Workflow Praktis Perbaikan

Uji halaman beranda dan 2–3 artikel populer di PSI.
Catat 2–3 rekomendasi teratas (mis. “Serve images in next-gen formats”, “Reduce unused JS”).
Lakukan perbaikan paling berpengaruh (gambar & font dulu, lalu script).
Uji ulang: targetkan LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms (khusus mobile).

5) Checklist Cepat

Hero image terkompresi & berukuran wajar (WebP, dimensi eksplisit).
Google Fonts: preconnect + display=swap (minim varian).
Script pihak ketiga diberi defer/async bila aman.
Embed YouTube di-lazy-load.
Widget berlebih dibersihkan; post beranda 5–7 item.
Slot iklan dan gambar punya dimensi pasti (turunkan CLS).

You may want to read this post :

Pertanyaan yang Sering Diajukan (FAQ)

Berapa skor PageSpeed yang “bagus” untuk Blogger?

Tidak ada skor wajib, tetapi targetkan hijau di Mobile (≥90) jika memungkinkan. Lebih penting, pastikan Core Web Vitals (LCP, CLS, INP) masuk kategori “Good”.

Apakah semua gambar harus WebP?

Idealnya ya, tapi prioritas pada gambar besar (hero/featured). Jika ada kendala kompatibilitas, sediakan fallback JPG/PNG—namun mayoritas browser modern sudah mendukung WebP.

Apa beda “Lab data” dan “Field data” di PSI?

Lab data adalah simulasi Lighthouse saat pengujian, sedangkan Field data berasal dari pengguna nyata (CrUX). Perbaikan sebaiknya memprioritaskan Field data jika tersedia.

Apakah memasang banyak iklan memengaruhi skor?

Iya, script iklan menambah beban dan bisa menggeser layout. Batasi unit iklan di atas layar dan beri dimensi pasti pada slot iklan untuk mencegah CLS.

Perlu pakai CDN atau hosting khusus?

Blogger sudah punya infrastruktur Google. Fokus utama biasanya pada media (gambar/video), font, dan script pihak ketiga. Kompres media dan rapikan pemanggilan resource.

Kesimpulan

Mulai perbaikan dari yang paling berdampak: gambar (WebP + dimensi), font (preconnect + swap), lalu script (defer/async) dan pembatasan widget. Uji ulang di PSI setelah setiap perubahan sampai Core Web Vitals masuk kategori baik, terutama di perangkat mobile.

Cari Blog Ini

TheTipsWeb