Studi Kasus Atmo LMS: Pangkas LCP dari 3,2 ke 1,4 Detik dengan Resource Hints di 2026
TL;DR: Atmo LMS turun LCP dari 3,2 ke 1,4 detik dalam 21 hari hanya dengan menambah empat resource hint (preconnect ke Supabase Storage, dns-prefetch ke CDN font, preload hero image, modulepreload chunk JS). Tidak ada migrasi framework, tidak ada perubahan arsitektur. Teknik ini paling cocok untuk platform yang sudah pakai Next.js dengan banyak third-party origin.
Saat memantau Search Console Atmo LMS bulan Maret 2026, saya melihat satu pola yang konsisten: halaman dashboard member mendapat skor LCP 3,2 detik di field data CrUX, padahal lab data Lighthouse menunjukkan 1,9 detik. Selisih 1,3 detik ini bukan anomali. Ini sinyal klasik bahwa browser pengguna asli kehilangan waktu di lapisan koneksi, bukan di render.
Dalam beberapa proyek terakhir yang saya tangani, gap antara lab dan field hampir selalu bisa ditipiskan tanpa menyentuh kode bisnis. Yang dipakai cukup empat baris HTML.
Kenapa LCP Atmo LMS Lambat di Real Device
Atmo LMS memuat resource dari empat origin berbeda saat halaman dashboard dibuka. Setiap origin baru memaksa browser menjalankan tiga tahap koneksi: DNS lookup, TCP handshake, lalu TLS negotiation. Pada koneksi 4G Indonesia rata-rata, tahap ini memakan 200 sampai 450 ms per origin. Lihat detail metriknya di Largest Contentful Paint.
Yang lebih merepotkan, browser baru memulai koneksi ke origin tersebut setelah HTML parser menemukan tag yang merujuk ke origin itu. Akibatnya, image hero baru di-fetch ketika parser sudah selesai membaca seperempat dokumen.
Empat Resource Hint yang Dipakai
Berikut hint yang ditambahkan ke <head> Atmo LMS:
| Hint | Target | Fungsi |
|---|---|---|
| preconnect | Supabase Storage origin | Mulai DNS+TCP+TLS lebih awal |
| dns-prefetch | CDN font Google | Resolusi DNS dini |
| preload | Hero image dashboard | Fetch image sebelum CSS parsing selesai |
| modulepreload | Chunk JS dashboard | Paralel parse JS dan HTML |
Catatan implementasi: preconnect lebih kuat daripada dns-prefetch karena menyelesaikan TLS, tapi gunakan hanya untuk origin yang pasti dipakai. Memasang preconnect ke origin yang tidak dipanggil justru memboroskan kuota koneksi browser. Dokumentasi resmi ada di web.dev resource hints guide.
Implementasi di Next.js 15 Atmo
Di App Router Next.js 15, resource hints dipasang via <link> tag di file app/layout.tsx. Format yang dipakai di Atmo:
<link rel="preconnect" href="https://ccypzcbkmfzxwbmdqkdb.supabase.co" />
<link rel="dns-prefetch" href="https://fonts.gstatic.com" />
<link rel="preload" as="image" href="/hero-dashboard.webp" fetchpriority="high" />
<link rel="modulepreload" href="/_next/static/chunks/dashboard.js" />
Pemasangannya butuh 14 menit, dideploy ke Vercel tanpa rollback, dan hasilnya sudah terbaca di CrUX 21 hari kemudian. Untuk teknik fetchpriority lebih dalam, lihat panduan pasang fetchpriority di image hero.
Hasil Terukur
Per 19 April 2026, data CrUX Atmo LMS menunjukkan:
- LCP p75 turun dari 3,2 ke 1,4 detik
- INP p75 turun dari 240 ke 180 ms (efek samping karena main thread lebih cepat idle)
- Bounce rate dashboard turun dari 38 ke 29 persen
- Repeat session per member naik dari 2,1 ke 3,4 per minggu
Angka ini spesifik untuk Atmo LMS dengan profil traffic mayoritas mobile Indonesia. Hasil di project lain bisa bervariasi tergantung jumlah origin third-party dan ukuran hero asset. Untuk konteks metrik turunan, baca tentang INP dan Field Data CrUX.
Pertanyaan Umum
Apa bedanya preconnect dan dns-prefetch?
Preconnect menyelesaikan DNS, TCP, dan TLS sekaligus. Dns-prefetch hanya menyelesaikan DNS. Preconnect lebih agresif, jadi pakai maksimal 3 sampai 4 origin yang pasti dipanggil.
Apakah resource hints bisa memperlambat halaman?
Bisa, kalau dipasang berlebihan. Setiap preconnect menahan kuota koneksi browser. Memasang 10 preconnect ke origin yang jarang dipakai bisa menunda fetch resource kritis.
Berapa lama dampak terlihat di CrUX?
CrUX memakai window 28 hari, jadi sinyal awal terlihat 7 sampai 10 hari setelah deploy, dan baseline baru stabil di hari ke-28.
Penutup
Resource hints bekerja paling baik di project dengan banyak origin third-party. Audit dulu origin mana saja yang dipanggil di halaman LCP-critical pakai DevTools Network panel, lalu prioritaskan empat yang paling sering. Sisanya cukup pakai dns-prefetch atau diabaikan.
Artikel Terkait
Case Study
Studi Kasus Vetmo: Pasang Workbox untuk Mode Offline Booking Klinik Hewan di 2026
Cerita lengkap memasang Workbox di Vetmo: dari masalah booking gagal saat sinyal lemah, sampai naik 22 persen completion rate dalam 60 hari.
Case Study
Studi Kasus Ade Mulyana: Turunkan CLS dari 0,31 ke 0,05 dengan Skeleton Loader di Portfolio 2026
Skeleton loader di portfolio Ade Mulyana turunkan CLS dari 0,31 ke 0,05 dalam 14 hari. Breakdown teknik, code Next.js 15, dan dampak ke ranking.
Case Study
Studi Kasus Nalesha: Turunkan CLS dari 0,28 ke 0,04 dengan Grid Reservation di Product Listing 2026
Halaman product listing Nalesha mencatat CLS 0,28 karena gambar produk lazy-load tanpa reservasi dimensi. Berikut perbaikan dengan CSS grid dan aspect-ratio.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang