Studi Kasus Ade Mulyana: Turunkan CLS dari 0,31 ke 0,05 dengan Skeleton Loader di Portfolio 2026

TL;DR: Portfolio Ade Mulyana awalnya gagal Core Web Vitals karena CLS 0,31 (batas baik adalah di bawah 0,1). Setelah pasang skeleton loader berdimensi tetap untuk testimonial dan project gallery, CLS turun ke 0,05 dalam 14 hari. Teknik ini bekerja karena browser tidak lagi memindahkan layout saat konten async masuk.

Saat audit portfolio Ade Mulyana Februari 2026, satu masalah langsung kelihatan dari panel DevTools: setiap kali halaman dimuat, gallery project melompat 240 piksel ke bawah setelah image selesai di-fetch. Ini bukan cuma jelek secara visual. Ini juga melanggar batas Core Web Vitals dan menahan halaman dari ranking di top 10 SERP keyword "personal branding karir profesional".

Solusinya ternyata bukan refactor besar. Cukup tambah komponen skeleton dengan dimensi yang sama persis dengan konten final.

Kenapa CLS Portfolio Ade Tinggi

Portfolio Ade Mulyana pakai Next.js 15 dengan dua section yang fetch data dari Supabase: testimonial slider dan project gallery. Sebelum data tiba, kedua section ini punya tinggi 0 piksel. Ketika data tiba dan komponen di-render, total tinggi melompat ke 720 piksel. Lihat detail metriknya di Cumulative Layout Shift.

Browser mencatat layout shift ini sebagai CLS score 0,31. Threshold "good" Google adalah 0,1. Threshold "poor" adalah 0,25. Ade jatuh di kategori poor. Konteks teknis ada di dokumentasi web.dev tentang CLS.

Desain Skeleton yang Dipakai

Skeleton di Ade tidak hanya placeholder kosong. Desainnya mengikuti tiga aturan:

Skeleton testimonial berukuran 320x140 piksel per card, dengan 3 card visible. Skeleton project gallery berukuran 280x320 piksel per item, grid 3 kolom di desktop.

Implementasi di Next.js 15

Pakai React Suspense dengan fallback skeleton:

// app/page.tsx
import { Suspense } from 'react';
import { ProjectGallery } from '@/organisms/ProjectGallery';
import { ProjectGallerySkeleton } from '@/atoms/Skeleton';

export default function Home() {
  return (
    <Suspense fallback={<ProjectGallerySkeleton count={6} />}>
      <ProjectGallery />
    </Suspense>
  );
}

Komponen skeleton:

// components/atoms/Skeleton.tsx
export function ProjectGallerySkeleton({ count }: { count: number }) {
  return (
    <div className="grid grid-cols-3 gap-4">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="w-[280px] h-[320px] bg-gray-200 animate-pulse rounded-lg" />
      ))}
    </div>
  );
}

Untuk teknik image yang lebih ketat, lihat pasang fetchpriority di image hero dan bundle size budget Next.js.

Hasil Terukur

Per 12 Maret 2026, 14 hari setelah deploy:

• CLS p75 turun dari 0,31 ke 0,05 (lulus threshold good Google)
• LCP relatif stabil di 1,8 detik (tidak terpengaruh)
• INP membaik dari 220 ke 170 ms
• Posisi keyword "personal branding karir profesional" naik dari posisi 14 ke 7

Catatan: kenaikan ranking tidak murni dari CLS, tapi Core Web Vitals adalah salah satu sinyal yang dievaluasi Google bersama relevansi konten. Konteks INP ada di glosarium INP.

Pertanyaan Umum

Apakah skeleton harus pakai animasi shimmer?

Tidak wajib. Skeleton statis warna abu-abu sudah cukup untuk menahan layout. Animasi shimmer membantu persepsi loading tapi bisa memboroskan main thread kalau dipasang banyak.

Berapa dampak skeleton ke bundle size?

Komponen skeleton biasanya kurang dari 1 KB minified. Dampaknya minim dibanding library loading state berat seperti react-loading-skeleton yang bisa 8 sampai 12 KB.

Apakah skeleton mempengaruhi LCP?

Tidak langsung. LCP mengukur kapan elemen terbesar selesai di-render. Skeleton tidak dihitung sebagai LCP element karena bukan konten final.

Bagaimana ukur CLS di production?

Pakai web-vitals library yang kirim metrik ke analytics, atau monitor lewat CrUX di Search Console. Lab testing di Lighthouse hanya memberi gambaran kasar.

Penutup

CLS sering dianggap masalah kecil sampai project menyentuh skala traffic tertentu. Pasang skeleton dari awal lebih murah daripada audit setelah ranking turun. Mulai dari section yang fetch data async, lalu meluas ke image dan font yang bisa shift saat load.