Menemukan peluang untuk meningkatkan pengalaman pengguna dengan alat web Chrome.
Hari ini, kita akan membahas fitur alat baru di Lighthouse, PageSpeed, dan DevTools untuk membantu mengidentifikasi cara meningkatkan situs Anda di Data Web.
Sebagai pengingat untuk alat tersebut, Lighthouse adalah alat open source otomatis untuk meningkatkan kualitas halaman web. Anda dapat menemukannya di rangkaian alat proses debug Chrome DevTools dan menjalankannya pada halaman web mana pun, secara 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 pemeriksaan visual yang lebih mudah pada bagian-bagian UI Anda yang memengaruhi metrik pengalaman pengguna (misalnya, node apa yang berkontribusi terhadap pergeseran tata letak).
Kami juga telah mengirimkan dukungan untuk screenshot elemen pada PageSpeed Insights, yang memungkinkan Anda menemukan masalah dengan lebih mudah untuk menjalankan halaman dengan performa satu kali.
Mengukur Data Web Inti
Lighthouse dapat secara sintetik mengukur metrik Data Web Inti 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 akan ditandai dalam masa mendatang Data Web Inti juga tersedia.
Bagian "Metrik" pada laporan Lighthouse menyertakan versi lab dari metrik tersebut. Anda dapat menggunakannya sebagai tampilan ringkasan aspek pengalaman pengguna yang memerlukan perhatian Anda.
Metrik kolom, seperti yang ditemukan di Laporan UX Chrome atau RUM, tidak memiliki batasan ini dan merupakan pelengkap berharga untuk data lab karena mencerminkan pengalaman yang dimiliki pengguna sebenarnya. Data kolom tidak dapat menawarkan jenis informasi diagnostik yang Anda dapatkan di lab, sehingga keduanya dapat digunakan bersamaan.
Mengidentifikasi bagian yang dapat ditingkatkan di Data Web
Mengidentifikasi elemen Largest Contentful Paint
LCP adalah pengukuran pengalaman pemuatan yang dirasakan. Batas ini menandai titik selama pemuatan halaman saat konten utama–atau "terbesar"–telah dimuat dan dapat dilihat oleh pengguna.
Lighthouse memiliki audit "Largest Contentful Paint elemen" yang mengidentifikasi elemen apa yang merupakan largest contentful Paint. Mengarahkan kursor ke elemen akan menandainya di jendela browser utama.
Jika elemen ini berupa gambar, informasi ini adalah petunjuk yang berguna bahwa Anda mungkin ingin 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.
Anda mungkin juga mendapati Bookmarklet LCP oleh Annie Sullivan berguna untuk secara cepat mengidentifikasi elemen LCP dengan kotak merah hanya dengan sekali klik.
Pramuat gambar yang ditemukan lama untuk meningkatkan LCP
Untuk meningkatkan Largest Contentful Paint, lakukan pramuat gambar utama Anda jika gambar tersebut terlambat ditemukan oleh browser. Penemuan yang terlambat dapat terjadi jika paket JavaScript perlu dimuat sebelum gambar dapat ditemukan.
Ada beberapa pertanyaan umum yang diajukan 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 ini:
<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
memuat 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 menandai peluang pramuat jika gambar LCP ditentukan melalui latar belakang CSS? Ya.
Setiap gambar yang ditandai sebagai gambar LCP, baik melalui latar belakang CSS maupun <img>, adalah kandidat jika
ditemukan pada kedalaman waterfall tiga atau lebih.
Lambat memuat gambar di balik layar dan menghindari hal ini untuk LCP
Gambar di luar layar yang tidak penting untuk pengalaman pengguna awal dapat dimuat dengan lambat. Ini adalah teknik yang menunda download gambar hingga pengguna men-scroll di dekatnya, yang dapat mengurangi pertentangan jaringan untuk aset penting dan dalam beberapa kasus meningkatkan LCP. Audit "Tunda gambar di balik layar" dapat membantu di sini:
Gambar paruh atas yang penting, seperti gambar Largest Contentful Paint, tidak boleh dimuat dengan lambat. Tindakan ini dapat menunda pemuatan gambar LCP. Lighthouse akan menandai jika gambar LCP salah dimuat dengan lambat melalui audit "Largest Contentful Paint was lazily supported":
Mengidentifikasi kontribusi CLS
Pergeseran Tata Letak Kumulatif (CLS) 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 yang 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-nya secara keseluruhan.
Berkat fitur Screenshot Elemen Lighthouse yang baru, kita dapat melihat pratinjau visual elemen utama yang disebutkan dalam audit serta klik untuk zoom guna mendapatkan tampilan yang lebih jelas:
Untuk CLS pasca-pemuatan, mungkin ada nilai saat memvisualisasikan secara terus-menerus dengan persegi panjang yang elemennya paling banyak berkontribusi pada CLS. Ini adalah fitur yang akan Anda temukan di alat pihak ketiga seperti dasbor Data Web Inti SpeedCurve, dan yang saya sukai menggunakan Generator GIF Layout Shift Defaced untuk:
Untuk gambaran tentang masalah pergeseran tata letak di seluruh situs, saya mendapatkan banyak manfaat dari laporan Data Web Inti Search Console. Dengan begitu, saya dapat melihat jenis halaman di situs saya dengan CLS yang tinggi (dalam hal ini membantu mengidentifikasi sendiri sebagian template yang perlu saya gunakan):
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.
Lihat Menetapkan Tinggi dan Lebar Pada Gambar Penting lagi untuk penjelasan yang bagus tentang pentingnya mempertimbangkan dimensi dan rasio aspek gambar.
Mengidentifikasi CLS dari iklan
Iklan Penayang untuk Lighthouse memungkinkan Anda menemukan peluang untuk meningkatkan pengalaman pemuatan iklan di halaman, termasuk kontribusi terhadap pergeseran tata letak dan tugas panjang yang dapat mendorong seberapa cepat halaman Anda dapat digunakan oleh pengguna. Di Lighthouse, Anda dapat mengaktifkan fitur ini melalui Plugin Komunitas.
Ingat bahwa iklan adalah salah satu kontributor terbesar terhadap pergeseran tata letak di web. Penting untuk:
- Berhati-hatilah saat menempatkan iklan tidak melekat di dekat bagian atas area pandang
- Hilangkan pergeseran dengan menyimpan ukuran terbesar yang memungkinkan untuk slot iklan
Menghindari animasi non-gabungan
Animasi yang non-gabungan dapat muncul sebagai tersendat di perangkat kelas bawah jika tugas JavaScript yang berat membuat thread utama tetap sibuk. Animasi tersebut dapat menyebabkan pergeseran tata letak.
Jika menemukan animasi tidak dapat digabungkan, Chrome akan melaporkannya ke pembacaan Lighthouse rekaman aktivitas DevTools, sehingga Chrome dapat mencantumkan elemen dengan animasi yang tidak digabungkan dan untuk alasannya. Anda dapat menemukannya di audit Hindari animasi non-gabungan.
Penundaan Input Pertama Debug / Total Waktu Pemblokiran / Tugas 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 memulai pemrosesan pengendali peristiwa sebagai respons terhadap interaksi tersebut. Tugas JavaScript yang panjang dapat memengaruhi metrik ini dan proxy untuk metrik ini, Total Blocking Time.
Lighthouse menyertakan audit Hindari tugas thread utama yang berjalan lama yang mencantumkan tugas terlama di thread utama. Hal ini dapat membantu untuk mengidentifikasi kontributor utama penundaan input. Di kolom sebelah kiri, kita dapat melihat URL skrip yang bertanggung jawab atas tugas thread utama yang panjang.
Di sebelah kanan, kita dapat melihat durasi tugas ini. Sebagai pengingat, Tugas Panjang adalah tugas yang dijalankan lebih dari 50 milidetik. Hal ini dianggap 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 main-thread yang dimiliki Kalibre visual untuk memvisualisasikan biaya ini, yang menyoroti tugas induk dan turunan yang berkontribusi pada tugas panjang yang memengaruhi interaktivitas.
Blokir permintaan jaringan untuk melihat dampak sebelum/sesudah di Lighthouse
Chrome DevTools mendukung pemblokiran permintaan jaringan untuk melihat dampak dari masing-masing resource yang dihapus atau tidak tersedia. Hal ini dapat berguna untuk memahami biaya masing-masing skrip (misalnya, sematan atau pelacak pihak ketiga) yang dimiliki metrik seperti Total Blocking Time (TBT) dan Waktu untuk Interaktif.
Pemblokiran permintaan jaringan juga berfungsi dengan Lighthouse. Mari kita lihat sekilas laporan Lighthouse untuk sebuah situs. Skor Perf adalah 63/100 dengan TBT 400ms. Jika menggali kode, kami menemukan bahwa situs ini memuat polyfill Intersection Observer di Chrome yang tidak diperlukan. Mari kita blokir!
Kita bisa mengklik kanan skrip di panel Jaringan DevTools dan mengklik Block Request URL untuk
memblokirnya. Di sini, kita akan melakukannya untuk polyfill Intersection Observer.
Selanjutnya, kita dapat menjalankan kembali Lighthouse. Kali ini, kita dapat melihat skor performa meningkat (70/100) seperti Total Blocking Time (400 md => 300 md).
Ganti sematan pihak ketiga yang mahal dengan fasad
Penggunaan resource pihak ketiga untuk menyematkan video, postingan media sosial, atau widget ke dalam halaman adalah hal yang umum. Secara default, sebagian besar sematan langsung dimuat dengan cepat dan dapat disertai payload mahal yang berdampak negatif pada pengalaman pengguna. Hal ini tidak berguna jika pihak ketiga tidak penting (misalnya, jika pengguna perlu men-scroll sebelum mereka 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 facade, seperti sematan video YouTube.
Sebagai pengingat, Lighthouse akan menandai kode pihak ketiga yang memblokir thread utama selama lebih dari 250 milidetik. Hal ini dapat mengekspos semua jenis skrip pihak ketiga (termasuk yang ditulis oleh Google) yang mungkin lebih layak untuk ditunda atau pemuatan lambat jika apa yang dirender memerlukan scroll untuk melihatnya.
Melebihi Data Web Inti
Selain menyoroti Data Web Inti, versi terbaru Lighthouse dan PageSpeed Insights juga mencoba memberikan panduan konkret yang dapat Anda ikuti untuk meningkatkan kecepatan pemuatan aplikasi web yang sarat JavaScript jika Anda mengaktifkan peta sumber.
Ini termasuk kumpulan audit yang bertambah untuk mengurangi biaya JavaScript di halaman Anda, seperti mengurangi ketergantungan pada polyfill dan duplikat yang mungkin tidak diperlukan untuk pengalaman pengguna.
Untuk informasi selengkapnya tentang alat Data Web Inti, pantau akun Twitter tim Lighthouse dan Yang baru di DevTools.
Banner besar oleh Mercedes Mehling di Unsplash.