Menemukan peluang untuk meningkatkan pengalaman pengguna dengan alat web Chrome.
Hari ini, kami akan membahas fitur alat baru di Lighthouse, PageSpeed, dan DevTools untuk membantu mengidentifikasi bagaimana situs Anda dapat meningkatkan kualitas Data Web.
Sebagai pengingat pada alat ini, Lighthouse adalah alat open source otomatis untuk meningkatkan kualitas halaman web. Anda dapat menemukannya di rangkaian alat proses debug Chrome DevTools dan menjalankannya di halaman web mana pun, yang bersifat publik, atau yang memerlukan autentikasi. Anda juga dapat menemukan Lighthouse di PageSpeed Insights, CI, dan WebPageTest.
Lighthouse 7.x menyertakan fitur baru seperti screenshot elemen, untuk memudahkan pemeriksaan visual bagian-bagian UI yang memengaruhi metrik pengalaman pengguna (misalnya, node apa yang berkontribusi pada pergeseran tata letak).
Kami juga telah menghadirkan dukungan untuk screenshot elemen di PageSpeed Insights, yang memungkinkan cara yang lebih mudah menemukan masalah untuk pengoperasian satu kali halaman.
![Screenshot Elemen menyoroti node DOM yang berkontribusi pada pergeseran tata letak di halaman](https://web.dev/static/articles/optimize-vitals-lighthouse/image/element-screenshots-highl-9678c17be2c3e.png?authuser=3&hl=id)
Mengukur Core Web Vitals
Lighthouse dapat secara sintetis mengukur metrik Core Web Vitals termasuk Largest Contentful Paint, Pergeseran Tata Letak Kumulatif, dan Total Waktu Pemblokiran (proxy lab untuk Penundaan Input Pertama). Metrik ini mencerminkan pemuatan, stabilitas tata letak, dan kesiapan interaksi. Metrik lain seperti First Contentful Paint yang ditandai dalam masa depan Core Web Vitals juga ada di sana.
Bagian "Metrik" di laporan Lighthouse menyertakan versi lab dari metrik ini. Anda dapat menggunakannya sebagai tampilan ringkasan tentang aspek pengalaman pengguna yang perlu Anda perhatikan.
![Metrik performa Lighthouse](https://web.dev/static/articles/optimize-vitals-lighthouse/image/lighthouse-peformance-met-3efe9953f7349.png?authuser=3&hl=id)
![Jalur Web Vitals di panel performa devtools](https://web.dev/static/articles/optimize-vitals-lighthouse/image/web-vitals-lane-the-devt-783469a60bb43.png?authuser=3&hl=id)
Metrik kolom, seperti yang ada dalam Laporan UX Chrome atau RUM, tidak memiliki batasan ini dan merupakan pelengkap yang berharga untuk data lab karena mencerminkan pengalaman yang dimiliki pengguna yang sebenarnya. Data kolom tidak dapat menawarkan jenis informasi diagnostik yang Anda dapatkan di lab, jadi keduanya berjalan beriringan.
Mengidentifikasi tempat yang dapat Anda tingkatkan untuk Data Web
Mengidentifikasi elemen Largest Contentful Paint (LCP)
LCP adalah pengukuran pengalaman pemuatan yang dirasakan. Menandai titik selama pemuatan halaman saat konten utama–atau "terbesar" telah dimuat dan terlihat oleh pengguna.
Lighthouse memiliki audit "Largest Contentful Paint element" yang mengidentifikasi elemen apa yang merupakan largest Contentful Paint. Mengarahkan kursor ke elemen tersebut akan menyorotnya di jendela utama browser.
![Elemen Largest Contentful Paint (LCP)](https://web.dev/static/articles/optimize-vitals-lighthouse/image/largest-contentful-paint-b0d51a8ebda9.png?authuser=3&hl=id)
Jika elemen ini berupa gambar, informasi ini merupakan petunjuk berguna yang mungkin perlu dioptimalkan untuk mengoptimalkan pemuatan gambar ini. Lighthouse menyertakan sejumlah audit pengoptimalan gambar untuk membantu Anda memahami apakah gambar dapat dikompresi, diubah ukurannya, atau dikirim dengan lebih baik dalam format gambar modern yang lebih optimal.
![Audit gambar menyesuaikan ukuran dengan benar](https://web.dev/static/articles/optimize-vitals-lighthouse/image/properly-size-images-audi-73a6bd1ff0d65.png?authuser=3&hl=id)
Anda mungkin juga melihat LCP Bookmarklet oleh Annie Sullivan berguna untuk mengidentifikasi elemen LCP secara cepat dengan kotak merah hanya dengan sekali klik.
![Menyoroti elemen LCP dengan bookmarklet](https://web.dev/static/articles/optimize-vitals-lighthouse/image/highlighting-lcp-element-3679084da1848.png?authuser=3&hl=id)
Pramuat gambar yang baru ditemukan untuk meningkatkan LCP
Untuk meningkatkan Largest Contentful Paint, pramuat image utama penting Anda jika gambar tersebut sering ditemukan oleh browser. Penemuan yang terlambat dapat terjadi jika paket JavaScript harus dimuat sebelum gambar dapat ditemukan.
![Pramuat gambar terbesar contentful paint](https://web.dev/static/articles/optimize-vitals-lighthouse/image/preload-largest-contentf-337c3976114a2.png?authuser=3&hl=id)
Ada beberapa pertanyaan umum yang ditanyakan kepada kami tentang pramuat gambar LCP yang mungkin juga perlu dibahas secara singkat.
Dapatkah Anda melakukan pramuat gambar responsif? Ya.
Misalnya kita memiliki banner besar responsif seperti yang ditentukan menggunakan srcset
dan sizes
di bawah:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
Berkat atribut imagesrcset
dan imagesizes
yang ditambahkan ke atribut link
, kita dapat
melakukan pramuat gambar responsif menggunakan logika pemilihan gambar yang sama dengan yang digunakan oleh srcset
dan sizes
:
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
Apakah audit juga akan menyoroti peluang pramuat jika gambar LCP ditentukan melalui latar belakang CSS? Ya.
Gambar apa pun yang ditandai sebagai gambar LCP, baik melalui latar belakang CSS maupun <img>
, akan menjadi kandidat jika
ditemukan pada kedalaman waterfall tiga atau lebih.
Pemuatan lambat gambar di luar layar dan menghindarinya untuk LCP
Gambar di luar layar yang tidak penting untuk pengalaman pengguna awal dapat dimuat dengan lambat. Ini adalah teknik yang menunda download gambar sampai pengguna men-scroll di dekatnya, yang dapat mengurangi pertentangan jaringan untuk aset penting dan dalam beberapa kasus meningkatkan kualitas LCP. Audit "Tunda gambar di luar layar" dapat membantu Anda di sini:
![Tunda gambar di luar layar](https://web.dev/static/articles/optimize-vitals-lighthouse/image/defer-offscreen-images-b155bac024485.png?authuser=3&hl=id)
Gambar paruh atas yang penting, seperti gambar Largest Contentful Paint, tidak boleh dimuat dengan lambat. Tindakan tersebut dapat menunda pemuatan gambar LCP. Lighthouse akan menandai jika gambar LCP salah dimuat secara lambat melalui audit "Largest Contentful Paint image was lazily loaded":
![Menghindari pemuatan lambat gambar LCP](https://web.dev/static/articles/optimize-vitals-lighthouse/image/avoid-lazy-loading-lcp-im-5cda17112b2f1.png?authuser=3&hl=id)
Mengidentifikasi kontribusi CLS
Pergeseran Tata Letak Kumulatif adalah pengukuran stabilitas visual. Metrik ini mengukur seberapa banyak konten halaman bergeser secara visual. Lighthouse memiliki audit untuk men-debug CLS yang disebut "Hindari pergeseran tata letak besar".
Audit ini menyoroti elemen DOM yang paling banyak berkontribusi pada pergeseran halaman. Di kolom Elemen di sebelah kiri, Anda akan melihat daftar elemen DOM ini dan di sebelah kanan, kontribusi CLS keseluruhannya.
![Audit untuk menghindari pergeseran tata letak besar di Lighthouse yang menandai node DOM relevan yang berkontribusi pada CLS](https://web.dev/static/articles/optimize-vitals-lighthouse/image/the-avoid-large-layout-sh-629d2845accff.png?authuser=3&hl=id)
Berkat fitur Screenshot Elemen Lighthouse yang baru, kita dapat melihat pratinjau visual elemen utama yang dicatat dalam audit serta klik untuk zoom guna mendapatkan tampilan yang lebih jelas:
![Mengklik screenshot Elemen akan meluaskannya](https://web.dev/static/articles/optimize-vitals-lighthouse/image/clicking-an-element-scre-fa8d885736b59.png?authuser=3&hl=id)
Untuk CLS pasca-pemuatan, mungkin ada nilai dalam memvisualisasikan secara terus-menerus dengan persegi panjang elemen yang paling banyak berkontribusi pada CLS. Ini adalah fitur yang akan Anda temukan di alat pihak ketiga seperti dasbor Core Web Vitals milik SpeedCurve dan yang saya suka menggunakan Layout Shift GIF Generator Defaced untuk:
![{i>layout shift generator<i} yang menyoroti pergeseran](/static/articles/optimize-vitals-lighthouse/image/the-layout-shift-generato-21aa868cfdf03.gif)
Untuk melihat masalah pergeseran tata letak di seluruh situs, saya mendapatkan banyak manfaat dari laporan Core Web Vitals Search Console. Dengan begitu, saya dapat melihat jenis halaman di situs saya dengan CLS yang tinggi (dalam hal ini, membantu mengidentifikasi sendiri bagian template yang perlu saya gunakan):
![Search Console menampilkan masalah CLS](https://web.dev/static/articles/optimize-vitals-lighthouse/image/search-console-displaying-652f8345e0e22.png?authuser=3&hl=id)
Mengidentifikasi CLS dari gambar tanpa dimensi
Untuk membatasi Pergeseran Tata Letak Kumulatif yang disebabkan oleh gambar tanpa dimensi, sertakan atribut ukuran lebar dan tinggi pada elemen gambar dan video. Pendekatan ini memastikan bahwa browser dapat mengalokasikan jumlah ruang yang tepat dalam dokumen saat gambar dimuat.
![Mengaudit elemen gambar tanpa lebar dan tinggi yang eksplisit](https://web.dev/static/articles/optimize-vitals-lighthouse/image/audit-image-elements-wit-469f666c4444e.png?authuser=3&hl=id)
Lihat Menetapkan Tinggi dan Lebar pada Gambar, Lagi Penting untuk mendapatkan penjelasan yang bagus tentang pentingnya memikirkan dimensi dan rasio aspek gambar.
Mengidentifikasi CLS dari iklan
Iklan Penayang untuk Lighthouse memungkinkan Anda menemukan peluang untuk meningkatkan pengalaman pemuatan iklan di halaman Anda, termasuk kontribusi terhadap pergeseran tata letak dan tugas panjang yang dapat mendorong seberapa cepat halaman Anda dapat digunakan oleh pengguna. Di Lighthouse, Anda dapat mengaktifkannya melalui Plugin Komunitas.
![Audit terkait iklan yang menyoroti peluang untuk mengurangi waktu permintaan dan pergeseran tata letak](https://web.dev/static/articles/optimize-vitals-lighthouse/image/ads-related-audits-highli-655d466f3dfce.png?authuser=3&hl=id)
Ingat bahwa iklan adalah salah satu kontributor terbesar terhadap pergeseran tata letak di web. Penting untuk:
- Hati-hati saat menempatkan iklan tidak melekat di dekat bagian atas area pandang
- Hilangkan pergeseran dengan mereservasi ukuran sebesar mungkin untuk slot iklan
Menghindari animasi yang tidak digabungkan
Animasi yang non-gabungan dapat menampilkan dirinya sebagai jank di perangkat kelas bawah jika tugas JavaScript yang berat membuat thread utama tetap sibuk. Animasi seperti itu bisa menyebabkan pergeseran tata letak.
Jika menemukan bahwa animasi tidak dapat digabungkan, Chrome akan melaporkannya ke trace DevTools yang dibaca Lighthouse, sehingga Chrome dapat menampilkan daftar elemen dengan animasi yang tidak digabungkan dan apa alasannya. Anda dapat menemukannya di audit Hindari animasi non-gabungan.
![Audit untuk menghindari animasi yang tidak digabungkan](https://web.dev/static/articles/optimize-vitals-lighthouse/image/audit-avoiding-non-compo-c2eb95c0a3b8a.png?authuser=3&hl=id)
Debug Penundaan Input Pertama / Waktu Pemblokiran Total / Tugas Berdurasi Panjang
Input Pertama mengukur waktu dari saat pengguna pertama kali berinteraksi dengan halaman (misalnya, saat mereka mengklik link, mengetuk tombol, atau menggunakan kontrol kustom yang didukung JavaScript) hingga saat browser benar-benar dapat mulai memproses pengendali peristiwa sebagai respons terhadap interaksi tersebut. Tugas JavaScript yang Panjang dapat memengaruhi metrik ini dan proxy untuk metrik ini, Total Waktu Pemblokiran.
![Mengaudit untuk menghindari tugas thread utama yang panjang](https://web.dev/static/articles/optimize-vitals-lighthouse/image/audit-avoiding-long-main-bdd20692ccc9c.png?authuser=3&hl=id)
Lighthouse menyertakan audit Hindari tugas thread utama yang panjang yang mencantumkan tugas terpanjang di thread utama. Hal ini dapat berguna untuk mengidentifikasi kontributor terburuk terhadap penundaan input. Di kolom kiri, kita dapat melihat URL skrip yang bertanggung jawab atas tugas thread utama yang panjang.
Di sebelah kanan, kita dapat melihat durasi tugas. Perlu diingat, Tugas Lama adalah tugas yang dijalankan selama lebih dari 50 milidetik. Hal ini dianggap dapat memblokir thread utama cukup lama untuk memengaruhi kecepatan frame atau latensi input.
Jika mempertimbangkan layanan pihak ketiga untuk pemantauan, saya juga sangat menyukai linimasa eksekusi thread utama yang dimiliki Calibre visual untuk memvisualisasikan biaya ini, yang menyoroti tugas induk dan turunan yang berkontribusi pada tugas lama yang memengaruhi interaktivitas.
![Visual linimasa eksekusi thread utama Calibre memiliki](https://web.dev/static/articles/optimize-vitals-lighthouse/image/the-main-thread-execution-16ffaca06acc9.png?authuser=3&hl=id)
Blokir permintaan jaringan untuk melihat dampak sebelum/sesudah di Lighthouse
Chrome DevTools mendukung pemblokiran permintaan jaringan untuk melihat dampak dari penghapusan atau ketidaktersediaan setiap resource. Hal ini dapat berguna untuk memahami biaya yang dimiliki setiap skrip (misalnya, sematan atau pelacak pihak ketiga) pada metrik seperti Total Waktu Pemblokiran (TBT) dan Waktu untuk Interaktif.
Pemblokiran permintaan jaringan juga berfungsi dengan Lighthouse. Mari kita lihat sekilas laporan Lighthouse untuk sebuah situs. Skor Perfnya adalah 63/100 dengan TBT 400 md. Setelah mendalami kode, kita akan mendapati bahwa situs ini memuat polyfill Intersection Observer di Chrome yang tidak diperlukan. Mari kita blokir!
![Pemblokiran permintaan jaringan](https://web.dev/static/articles/optimize-vitals-lighthouse/image/network-request-blocking-0af6598f53919.png?authuser=3&hl=id)
Kita dapat mengklik kanan skrip di panel Jaringan DevTools lalu mengklik Block Request URL
untuk memblokirnya. Di sini kita akan melakukannya untuk polyfill Intersection Observer.
![Blokir URL permintaan di DevTools](https://web.dev/static/articles/optimize-vitals-lighthouse/image/block-request-urls-devto-6a1f372c47f8e.png?authuser=3&hl=id)
Selanjutnya kita dapat menjalankan kembali Lighthouse. Kali ini kita dapat melihat skor performa meningkat (70/100) karena Total Waktu Pemblokiran (400 md => 300 md).
![Tampilan setelah pemblokiran permintaan jaringan yang mahal](https://web.dev/static/articles/optimize-vitals-lighthouse/image/the-view-blocking-costl-dd077ef6d8454.png?authuser=3&hl=id)
Ganti sematan pihak ketiga yang mahal dengan fasad
Menggunakan resource pihak ketiga untuk menyematkan video, postingan media sosial, atau widget ke halaman adalah hal yang umum dilakukan. Secara default, sebagian besar sematan langsung dimuat dan dapat disertai dengan payload mahal yang berdampak negatif pada pengalaman pengguna. Hal ini akan sia-sia jika pihak ketiga tidak berperan penting (misalnya, jika pengguna perlu men-scroll sebelum melihatnya).
Salah satu pola untuk meningkatkan performa widget tersebut adalah memuatnya dengan lambat pada interaksi pengguna. Hal ini dapat dilakukan dengan merender pratinjau ringan widget (fasad) dan hanya memuat versi lengkap jika pengguna berinteraksi dengannya. Lighthouse memiliki audit yang akan merekomendasikan resource pihak ketiga yang dapat dimuat dengan lambat dengan fasad, seperti sematan video YouTube.
![Audit yang menyoroti bahwa beberapa resource pihak ketiga yang mahal dapat diganti](https://web.dev/static/articles/optimize-vitals-lighthouse/image/audit-highlighting-some-86a43248c5c98.png?authuser=3&hl=id)
Sebagai pengingat, Lighthouse akan menyoroti kode pihak ketiga yang memblokir thread utama selama lebih dari 250 md. Hal ini dapat mengekspos semua jenis skrip pihak ketiga (termasuk yang ditulis oleh Google) yang mungkin lebih baik untuk ditangguhkan atau lambat dimuat jika yang dirender memerlukan scroll untuk melihatnya.
![Mengurangi biaya audit JavaScript pihak ketiga](https://web.dev/static/articles/optimize-vitals-lighthouse/image/reduce-cost-third-party-8400bcee48ab3.png?authuser=3&hl=id)
Melebihi Core Web Vitals
Selain menyoroti Core Web Vitals, Lighthouse dan PageSpeed Insights versi terbaru juga mencoba memberikan panduan konkret yang dapat Anda ikuti untuk meningkatkan kecepatan pemuatan aplikasi web dengan JavaScript yang aktif jika peta sumber diaktifkan.
Hal ini mencakup kumpulan audit yang terus bertambah untuk mengurangi biaya JavaScript di halaman Anda, seperti mengurangi ketergantungan pada polyfill dan duplikat yang mungkin tidak diperlukan untuk pengalaman pengguna.
Untuk mengetahui informasi selengkapnya tentang alat Core Web Vitals, pantau akun Twitter tim Lighthouse dan Yang baru di DevTools.
Banner besar oleh Mercedes Mehling di Unsplash.