Bedah Rekayasa Super Body Repair: Mencapai Skor Lighthouse 98–100/100 pada Website Bengkel Otomotif
Studi kasus riil: teknik kompresi WebP gambar berat, serverless edge caching di Cloudflare, dan purging CSS hingga halaman berbobot kurang dari 250KB.
Tantangan: Galeri Foto Resolusi Tinggi vs Kecepatan Mobile
Website bengkel otomotif bodi & cat mobil memiliki paradoks teknis yang menantang: pengunjung membutuhkan banyak foto detail kendaraan beresolusi tajam untuk memastikan kualitas cat tidak bergelombang atau belang warna.
Namun jika foto-foto ini dimuat secara ceroboh, bobot halaman bisa membengkak hingga 8MB sampai 15MB, melumpuhkan smartphone calon pelanggan yang mengakses dari jaringan seluler di jalan.
Pada proyek Super Body Repair (superbodyrepair.web.id), target rekayasa kami adalah menampilkan seluruh bukti pengerjaan mobil dengan ketajaman retina namun total transfer payload seluruh halaman tetap di bawah 250 Kilobyte dan LCP di bawah 0.85 detik.
3 Taktik Rekayasa Optimasi Aset Visual
Berikut adalah arsitektur teknis yang diterapkan InsinyurWeb untuk memecahkan paradoks ini:
- ✓ Konversi WebP Multi-Resolusi (Responsive Picture Srcset): Setiap foto kendaraan dikompresi ke format WebP dengan subsampling warna yang dioptimalkan, memangkas ukuran file sebesar 78% tanpa penurunan kualitas visual kasat mata.
- ✓ Lazy Loading Asinkron dengan Dimensi Eksplisit: Seluruh elemen gambar diberikan atribut width dan height eksplisit untuk mencegah Cumulative Layout Shift (CLS), serta loading="lazy" decoding="async" agar gambar di bawah viewport tidak membebani koneksi awal.
- ✓ Penghapusan Seluruh Javascript Framework Runtime Berat: Tidak ada React, Vue, atau jQuery runtime yang di-load di browser pengunjung. Halaman beroperasi dengan HTML statis murni dan CSS Tailwind yang telah dipangkas (purged) hingga tersisa hanya 14KB.
Hasil Audit Produksi Google Lighthouse 98–100/100
Hasil uji Lighthouse resmi Google pada perangkat mobile 4G emulated menunjukkan mutu tinggi:
- Performance: 98 - 100/100
- Accessibility: 100/100
- Best Practices: 100/100
- SEO: 100/100
Waktu loading Largest Contentful Paint (LCP) berada di angka 0.82 detik, jauh di bawah ambang "Good" standar Core Web Vitals Google (2.5 detik).
Diskusikan Kebutuhan Website Bisnis Anda Langsung dengan Pengembang Utama
Kami siap menganalisis website lama Anda atau merancang arsitektur baru yang cepat (< 1 detik), SEO-ready, dan terhubung langsung ke WhatsApp bisnis Anda.