Beranda
Blogger SEO
Blogger Pemula

Panduan Lengkap Mengatasi CLS dan LCP Tinggi di Blogger Core Web Vitals Hijau

Panduan lengkap memperbaiki CLS dan LCP tinggi di Blogger. Optimalkan gambar, font, script, dan layout agar skor Core Web Vitals naik ke hijau.
TipsTechPraktis
Panduan Diagnosa CLS dan LCP

Banyak pengguna Blogger mengalami masalah skor Core Web Vitals yang buruk, terutama pada CLS dan LCP di versi mobile. Padahal, tanpa disadari, penyebab utamanya sering berasal dari template, iklan, dan pengaturan gambar yang kurang tepat. Artikel ini membahas cara mengatasi CLS dan LCP di Blogger secara praktis, aman, dan cocok untuk blog pemula maupun yang sudah dimonetisasi.

Apa Itu CLS & LCP?

CLS (Cumulative Layout Shift)

CLS adalah ukuran seberapa stabil tampilan halaman saat dibuka. Jika saat loading ada elemen yang tiba-tiba bergeser—misalnya gambar yang baru muncul atau iklan yang terlambat tampil—maka nilai CLS akan naik. Tujuan kita adalah membuat halaman stabil sejak awal dengan target ideal CLS < 0.1.

LCP (Largest Contentful Paint)

LCP mengukur seberapa cepat elemen terbesar di halaman muncul, biasanya berupa gambar utama atau headline. Semakin cepat elemen ini tampil, semakin terasa ringan halaman bagi pengguna. Google menargetkan nilai LCP < 2.5 detik agar pengalaman membaca tetap nyaman.

Penyebab CLS (Cumulative Layout Shift):

  • Gambar tidak memiliki atribut width & height — Tanpa ukuran tetap, browser tidak mengetahui ruang yang harus disiapkan sehingga ketika gambar selesai dimuat, layout akan bergeser.
  • Slot iklan tidak disiapkan — Iklan AdSense biasanya muncul beberapa detik setelah halaman terbuka. Jika tidak ada ruang kosong (placeholder), konten akan terdorong ke bawah dan meningkatkan CLS.
  • Widget berat menyebabkan layout berubah — Widget slider, animation script, related post script, atau widget pihak ketiga sering memodifikasi ukuran elemen setelah halaman selesai dimuat.
  • Google Fonts tidak di-preload — Browser akan memakai font default dulu, lalu menggantinya ketika font Google selesai dimuat. Pergantian ini menyebabkan pergeseran layout (FOIT/FOUT).
  • Menu atau header tidak punya tinggi tetap — Bila tinggi header dihitung setelah JS berjalan, halaman akan bergeser naik-turun saat elemen selesai dirender.

Penyebab LCP (Largest Contentful Paint):

  • Featured image terlalu besar — Gambar utama biasanya elemen terbesar di halaman. Jika ukurannya besar (300KB-1MB), LCP akan melambat.
  • Template menggunakan banyak script berat — Script seperti slider, efek animasi, widget sosial, dan JavaScript eksternal menghambat proses rendering elemen besar.
  • Font tidak di-preload — Font yang tidak diprioritaskan menyebabkan browser menunggu sebelum menampilkan elemen terbesar seperti judul atau hero section.
  • Lazyload tidak optimal — Banyak template me-lazyload semua gambar, termasuk featured image. Padahal gambar LCP harus tampil langsung dan tidak boleh kena lazyload.
  • Kebanyakan widget di header — Header penuh widget (banner, ikon sosial, script statistik, menu animasi) membuat elemen utama terlambat muncul sehingga LCP meningkat.

Cara Mengatasi CLS

1. Tambahkan width & height pada semua gambar

Ini langkah paling penting.


<img src="URL-GAMBAR.webp" width="1200" height="675" alt="deskripsi" loading="lazy">

2. Siapkan slot kosong untuk iklan (wajib)


<div style="min-height:300px;">
  <!-- kode adsense -->
</div>

3. Tambahkan CSS stabilisasi layout


<style>
img {display:block;max-width:100%;height:auto;}
iframe, ins {min-height:250px;}
header, .menu {min-height:60px;}
</style>

4. Hindari widget yang membuat tampilan bergeser

Hindari slider otomatis, widget related post dengan script pihak ketiga, dan popular post mode gambar besar.

Cara Mengatasi LCP

1. Kompres Featured Image (Wajib WebP)

Gunakan WebP dengan ukuran 100–200KB untuk hasil terbaik.

2. Preload Google Fonts (letakkan di Theme > Edit HTML)


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

3. Lazyload semua gambar otomatis


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

4. Gunakan defer untuk script berat


<script src="script.js" defer></script>

5. Kurangi widget di header

Header ideal hanya berisi logo dan menu navigasi.

Setelan Blogger Yang Wajib Kamu Aktifkan

  • Aktifkan HTTPS
  • Aktifkan Lazyload bawaan
  • Kurangi widget tidak penting
  • Gunakan gambar WebP
  • Periksa template agar tidak memakai script berlebihan

Tools Untuk Mengecek Core Web Vitals

  • Google PageSpeed Insights
  • Chrome Lighthouse
  • Web.Dev Measure
  • GTMetrix

Contoh Benchmark Skor PageSpeed (Sebelum dan Sesudah Optimasi)

Banyak pemilik blog merasa sudah melakukan optimasi, tetapi tidak melihat dampak yang jelas. Oleh karena itu, benchmark PageSpeed Insights penting untuk menunjukkan perubahan performa sebelum dan sesudah optimasi CLS dan LCP dilakukan.

Berikut contoh hasil yang umum ditemukan pada blog Blogger sebelum dilakukan perbaikan Core Web Vitals.

Sebelum Optimasi

  • CLS: 0.32 (Buruk – layout sering bergeser saat halaman dimuat)
  • LCP: 4.8 detik (Buruk – konten utama tampil terlalu lambat)
  • INP: 420 ms (Buruk – halaman lambat merespons interaksi)
  • Status Core Web Vitals: Perlu Perbaikan

Penyebab utama skor buruk biasanya berasal dari gambar tanpa ukuran tetap, iklan yang muncul tiba-tiba, penggunaan Google Fonts tanpa preload, serta JavaScript berat yang menghambat proses rendering.

Sesudah Optimasi

  • CLS: 0.03 (Baik – tampilan stabil sejak awal loading)
  • LCP: 1.9 detik (Baik – konten utama tampil lebih cepat)
  • INP: 160 ms (Baik – interaksi terasa responsif)
  • Status Core Web Vitals: Baik

Perbaikan ini dicapai dengan menambahkan atribut width dan height pada gambar, menyediakan slot iklan statis, memprioritaskan pemuatan font utama, serta menerapkan defer pada JavaScript non-kritis.

Hasilnya, halaman terasa lebih cepat, stabil, dan nyaman diakses baik di desktop maupun perangkat mobile.

Metrik Core Web Vitals Lain yang Perlu Diperhatikan: INP

Optimasi CLS dan LCP saja belum cukup. Google kini menggunakan INP (Interaction to Next Paint) untuk menilai seberapa cepat halaman merespons interaksi pengguna, seperti klik menu, menekan tombol, atau melakukan scroll pertama.

INP mengukur jeda waktu antara interaksi pengguna dan perubahan visual berikutnya di layar. Semakin kecil nilainya, semakin responsif halaman tersebut.

Standar penilaian INP menurut Google:

  • ≤ 200 ms → Baik
  • 200–500 ms → Perlu Perbaikan
  • > 500 ms → Buruk

Penyebab INP Tinggi di Blogger

Pada platform Blogger, nilai INP sering tinggi karena beberapa faktor berikut:

  • Terlalu banyak JavaScript dimuat di bagian header
  • Widget pihak ketiga seperti live chat, statistik, atau iklan agresif
  • Event listener berlebihan pada elemen tertentu
  • Efek animasi berat yang tidak memberikan nilai tambah

Cara Menurunkan INP di Blogger

Untuk meningkatkan responsivitas halaman, lakukan langkah-langkah berikut:

  • Mengaktifkan atribut defer pada JavaScript non-kritis
  • Menghapus widget yang jarang digunakan
  • Mengurangi animasi dan efek visual berlebihan
  • Menggunakan template Blogger yang ringan dan responsif
<script defer src="script.js"></script>

Dengan INP yang rendah, interaksi pengguna terasa lebih cepat dan halus, sehingga meningkatkan pengalaman pengguna sekaligus membantu performa SEO jangka panjang.

Cara Mengecek CLS, LCP, dan INP Secara Akurat

Untuk memastikan optimasi berjalan efektif, gunakan dua alat utama dari Google berikut:

  • PageSpeed Insights untuk melihat data laboratorium dan estimasi performa per halaman.
  • Google Search Console untuk memantau data pengguna nyata (field data) pada seluruh situs.

Prioritaskan data dari Google Search Console karena itulah data yang digunakan Google dalam evaluasi peringkat pencarian.

FAQ

Apa penyebab CLS tinggi di Blogger?

CLS tinggi biasanya terjadi karena gambar tidak memiliki ukuran, slot iklan tidak disiapkan, widget berat berubah ukuran, atau font Google memicu pergeseran tampilan saat halaman dimuat.

Apa penyebab LCP tinggi di Blogger?

LCP tinggi biasanya disebabkan oleh featured image yang besar, script berat, font tidak di-preload, dan kebanyakan widget di bagian header yang membuat elemen utama terlambat tampil.

Bagaimana cara memperbaiki CLS di Blogger?

Untuk menurunkan CLS, tambahkan ukuran gambar, siapkan slot iklan, tambahkan CSS stabil, dan hindari widget yang suka menggeser layout. Pastikan header punya tinggi tetap.

Bagaimana cara memperbaiki LCP di Blogger?

Percepat LCP dengan mengompres gambar (WebP), preload font, aktifkan lazyload, gunakan defer pada script berat, dan kurangi widget di header agar elemen utama lebih cepat muncul.

Penutup: Jika setelah menerapkan semua langkah di atas skor masih merah, kirimkan link blog dan screenshot PageSpeed Insights — aku bantu analisis bagian mana yang masih berat.

Posting Komentar