Dokumen ini bertujuan untuk mengatasi kesulitan yang dihadapi pengguna domestik dalam mempelajari FramerFramer akibat kurangnya sumber daya dalam Bahasa Indonesia, dengan menerjemahkan konten blog resmi ke dalam Bahasa Indonesia dan menambahkan informasi yang berguna untuk praktik. Kami harap ini dapat sedikit membantu pengguna FramerFramer.

Perbedaan antara Lighthouse dan Core Web Vitals

Lighthouse Google adalah alat debugging otomatis yang memeriksa kinerja, aksesibilitas, praktik terbaik, SEO, dan lain-lain dari situs web. Sebaliknya, Core Web Vitals diukur berdasarkan data yang dikumpulkan saat pengguna nyata mengunjungi melalui Chrome.

Artinya, yang secara langsung mempengaruhi peringkat pencarian Google adalah data Core Web Vitals, bukan skor Lighthouse. Data Core Web Vitals dapat dilihat di Google Search Console, dan karena mencerminkan rata-rata selama 28 hari terakhir, mungkin memerlukan waktu untuk hasil optimalisasi ditampilkan.

• Lighthouse: Alat debugging melalui simulasi waktu nyata

• Core Web Vitals: Data pengalaman pengguna nyata (mempengaruhi peringkat pencarian)

Alasan Mengapa Anda Tidak Perlu Terlalu Terobsesi Dengan Skor Lighthouse

Lighthouse mensimulasikan berdasarkan perangkat Motorola 2016, sehingga video kualitas tinggi yang diputar otomatis atau elemen dengan banyak interaksi dapat menyebabkan skor rendah. Namun, karena perangkat ini jarang digunakan, Anda tidak perlu khawatir.

Misalnya, apple.com hanya mendapat skor 56 di mobile Lighthouse. Jadi, ketika merancang menggunakan video atau animasi, skor Lighthouse yang sedikit rendah tidak selalu berarti buruk.

Tetap saja, penggunaan yang berlebihan harus dihindari.

Tiga Indikator Kinerja Utama Lighthouse

Lighthouse menghitung skor berdasarkan berbagai indikator kinerja. Dari jumlah tersebut, ada tiga item yang dapat kita pengaruhi secara langsung.

1. LCP (Largest Contentful Paint)

Mengukur waktu yang diperlukan untuk memuat sebagian besar konten di situs. Ini termasuk elemen seperti gambar header, font menu, dan video yang diputar otomatis.
Catatan : Elemen seperti animasi sambutan atau banner cookie yang muncul terlambat dapat menunda LCP. Gunakan Lighthouse untuk mengidentifikasi elemen mana yang mempengaruhi LCP dan optimalkan desain untuk waktu pemuatan.

2. TBT (Total Blocking Time)

Mengukur waktu penundaan yang disebabkan oleh JavaScript saat halaman memuat. Skrip yang berjalan selama lebih dari 0,05~0,1 detik dapat mempengaruhi pengalaman pengguna, sehingga TBT menjumlahkan semua penundaan ini.
Catatan : Untuk mengurangi TBT, sebaiknya hapus skrip analitik atau iklan yang tidak diperlukan. TBT yang tinggi tidak mempengaruhi peringkat pencarian dan tidak termasuk dalam Core Web Vitals.

3. CLS (Cumulative Layout Shift)

Mengukur pergeseran tata letak halaman yang tidak terduga selama pemuatan. (Misal: iklan yang tiba-tiba muncul mengubah posisi teks) Situs FramerFramer hampir tidak memiliki CLS, sehingga ini ideal untuk menjaga tata letak yang stabil.

Tips Untuk Meningkatkan Skor Lighthouse

• Manfaatkan HTTP/3 untuk meningkatkan kecepatan: Versi protokol HTTP yang digunakan server juga mempengaruhi kecepatan. (FramerFramer secara default mendukung HTTP/3, sehingga Anda dapat menikmati kecepatan cepat tanpa pengaturan tambahan)

• Skrip layanan eksternal hanya yang diperlukan: Skrip yang diambil dari luar seperti Google Analytics atau embedding YouTube dapat sangat memperbesar ukuran situs. Bahkan satu baris JavaScript dapat mengurangi kinerja halaman hingga setengahnya, jadi sebaiknya hanya menambahkan yang diperlukan saja secara minimal.

Jika Ingin Meningkatkan SEO, Prioritaskan Core Web Vitals

Jika ingin meningkatkan peringkat pencarian, alih-alih fokus hanya pada meningkatkan skor Lighthouse, optimalkan indikator Core Web Vitals yang diukur berdasarkan pengalaman pengguna nyata agar lebih efektif.

Karena Google secara langsung menggunakan data kecepatan yang dirasakan oleh pengguna Chrome untuk menentukan peringkat, merancang situs agar pengguna dapat menelusuri secara cepat dan lancar adalah hal yang paling penting.

Artikel ini menerjemahkan dan mengadaptasi konten dari blog resmi FramerFramer ‘Guide to Lighthouse scores’.