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 cara situs Anda dapat meningkat dalam Data Web.
Sebagai pengingat tentang alat ini, Lighthouse adalah alat open-source otomatis untuk meningkatkan kualitas halaman web. Anda dapat menemukannya di Chrome DevTools rangkaian alat proses debug dan menjalankan terhadapnya pada laman web apa pun, publik atau membutuhkan otentikasi. Anda juga bisa menemukan Mercusuar di PageSpeed Insight, CI dan WebPageTest.
Lighthouse 7.x menyertakan fitur baru seperti tangkapan layar elemen, untuk pemeriksaan visual yang lebih mudah bagian UI yang memengaruhi metrik pengalaman pengguna (misalnya, node apa yang berkontribusi pada tata letak {i>shift<i}).
Kami juga telah menghadirkan dukungan untuk screenshot elemen di PageSpeed Insights, yang memungkinkan lebih banyak cara mudah menemukan masalah untuk performa halaman satu kali saja.
Mengukur Core Web Vitals
Mercusuar dapat mengukur secara sintetis metrik Core Web Vitals termasuk Largest Contentful Paint, Kumulatif Pergeseran Tata Letak 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 disorot di masa depan Core Web Vitals juga tersedia.
"Metrik" di laporan Lighthouse, mencakup versi lab dari metrik tersebut. Anda dapat menggunakan ini sebagai tampilan ringkasan tentang aspek apa dari pengalaman pengguna yang memerlukan perhatian Anda.
Metrik kolom, seperti yang ditemukan di UX Chrome Laporkan atau RUM, tidak memiliki ini dan merupakan pelengkap penting untuk data lab karena mencerminkan pengalaman pengguna miliki. Data kolom tidak dapat menawarkan jenis informasi diagnostik yang Anda dapatkan di lab, jadi keduanya bergandengan tangan.
Mengidentifikasi tempat yang dapat Anda tingkatkan untuk Data Web
Mengidentifikasi elemen Largest Contentful Paint (LCP)
LCP adalah pengukuran pengalaman pemuatan yang dirasakan. Fungsi ini menandai titik saat halaman dimuat jika konten primer–atau "terbesar"–telah dimuat dan dapat dilihat oleh pengguna.
Mercusuar memiliki "elemen Largest Contentful Paint" (Elemen Largest Contentful Paint) audit yang mengidentifikasi elemen apa yang {i>large contentful paint<i}. Mengarahkan kursor ke elemen tersebut akan menyorotnya di jendela utama browser.
Jika elemen ini berupa gambar, informasi ini merupakan petunjuk berguna yang mungkin perlu Anda optimalkan untuk pemuatan gambar ini. Lighthouse menyertakan sejumlah audit pengoptimalan gambar untuk membantu Anda memahami apakah gambar dapat dikompresi, diubah ukurannya, atau ditayangkan dengan gambar modern yang lebih optimal format font.
Anda mungkin juga menemukan LCP Bookmarklet oleh Annie Sullivan berguna untuk mengidentifikasi elemen LCP secara cepat dengan kotak merah hanya dengan sekali klik.
Pramuat gambar yang baru ditemukan untuk meningkatkan LCP
Untuk meningkatkan Largest Contentful Paint, pramuat hero penting Anda gambar jika mereka tidak diketahui oleh {i>browser<i}. Penemuan yang terlambat dapat terjadi jika Paket JavaScript harus dimuat sebelum gambar dapat ditemukan.
Ada beberapa pertanyaan umum yang ditanyakan kepada kami tentang pramuat gambar LCP yang mungkin juga bermanfaat saya bahas 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 bisa
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 CSS latar belakang? Ya.
Gambar apa pun yang ditandai sebagai gambar LCP, baik melalui latar belakang CSS maupun <img>, adalah kandidat jika
ditemukan pada kedalaman air terjun 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:
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 "largest Contentful Paint was lamzily loaded" audit:
Mengidentifikasi kontribusi CLS
Pergeseran Tata Letak Kumulatif adalah pengukuran stabilitas visual. Ini mengukur berapa banyak konten akan berubah secara visual. Lighthouse memiliki audit untuk proses debug CLS yang disebut "Hindari ukuran besar pergeseran tata letak".
Audit ini menyoroti elemen DOM yang paling banyak berkontribusi pada pergeseran halaman. Dalam Elemen di sebelah kiri, Anda akan melihat daftar elemen DOM ini dan di sebelah kanan, CLS keseluruhannya kontribusi.
Berkat fitur Screenshot Elemen Lighthouse yang baru, kita berdua dapat melihat pratinjau visual dari elemen utama yang disebutkan dalam audit serta klik untuk memperbesar/memperkecil untuk tampilan yang lebih jelas:
Untuk CLS pasca-pemuatan, bisa ada nilai dalam visualisasi secara terus-menerus dengan persegi panjang elemen mana yang paling banyak berkontribusi pada CLS. Ini adalah fitur yang akan Anda temukan di alat pihak ketiga seperti Dasbor Core Web Vitals SpeedCurve dan yang saya suka menggunakan GIF Pergeseran Tata Letak {i>Defaced<i} Generator untuk:
Untuk melihat masalah pergeseran tata letak di seluruh situs, saya mendapatkan banyak manfaat dari Core Search Console Laporan Data Web. Hal ini memungkinkan saya melihat jenis halaman di situs saya dengan CLS tinggi (dalam hal ini membantu mengidentifikasi template sebagian yang perlu saya luangkan waktu saya):
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 Anda. Pendekatan ini memastikan bahwa {i>browser<i} dapat mengalokasikan jumlah ruang yang tepat dalam dokumen saat gambar dimuat.
Lihat Menetapkan Tinggi dan Lebar Gambar Penting Sekali lagi untuk penjelasan yang baik 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 hingga pergeseran tata letak dan tugas panjang yang dapat mendorong seberapa cepat halaman dapat digunakan oleh pengguna. Di beberapa Lighthouse, Anda dapat mengaktifkannya melalui Plugin Komunitas.
Perlu diingat bahwa iklan adalah salah satu kontributor terbesar pada 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-komposit bisa menampilkan dirinya sebagai jank di perangkat kelas bawah jika berat Tugas JavaScript membuat thread utama tetap sibuk. Animasi seperti itu bisa menyebabkan pergeseran tata letak.
Jika Chrome menemukan bahwa animasi tidak dapat digabungkan, Chrome akan melaporkannya ke rekaman aktivitas DevTools Lighthouse membaca, memungkinkannya untuk membuat daftar elemen dengan animasi yang tidak disusun dan untuk apa alasannya. Anda dapat menemukannya di kolom Hindari animasi.
Debug Penundaan Input Pertama / Waktu Pemblokiran Total / Tugas Berdurasi Panjang
Input Pertama mengukur waktu dari saat pengguna pertama kali berinteraksi dengan halaman (mis. saat mereka mengklik menautkan, mengetuk tombol, atau menggunakan kontrol khusus yang didukung JavaScript) ke waktu saat browser benar-benar dapat mulai memproses pengendali kejadian sebagai respons terhadap interaksi tersebut. JavaScript Panjang Tugas dapat memengaruhi metrik ini dan proxy untuk metrik ini, Total Blocking Time.
Lighthouse menyertakan audit Hindari tugas thread utama yang panjang yang mencantumkan tugas terlama di thread utama. Alat ini dapat membantu mengidentifikasi kontributor terburuk untuk penundaan input. Di kolom kiri, kita dapat melihat URL skrip yang bertanggung jawab untuk utas utama yang panjang tugas klasifikasi.
Di sebelah kanan, kita dapat melihat durasi tugas. Sebagai pengingat, {i>Long Tasks<i} adalah tugas yang mengeksekusi selama lebih dari 50 milidetik. Hal ini dianggap memblokir thread utama cukup lama untuk yang dapat memengaruhi kecepatan frame atau latensi input.
Jika mempertimbangkan layanan pihak ketiga untuk pemantauan, saya juga cukup menyukai eksekusi thread utama Linimasa visual kaliber telah untuk memvisualisasikan biaya ini, yang menyoroti tugas induk dan turunan yang berkontribusi pada tugas yang berdampak pada interaktivitas.
Blokir permintaan jaringan untuk melihat dampak sebelum/sesudah di Lighthouse
Chrome DevTools mendukung pemblokiran jaringan permintaan untuk melihat dampak dari tiap resource yang dihapus atau tidak tersedia. Hal ini dapat bermanfaat untuk memahami biaya yang ditimbulkan oleh masing-masing skrip (mis., sematan atau pelacak pihak ketiga) metrik seperti {i>Total Blocking Time<i} (TBT) dan {i>Time to Interactive<i}.
Pemblokiran permintaan jaringan juga berfungsi dengan Lighthouse. Mari kita lihat sekilas pada Laporan Lighthouse untuk situs. Skor Perfnya adalah 63/100 dengan TBT 400 md. Menggali kode, kita mendapati 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 memblokir
anotasi. Di sini kita akan melakukannya untuk polyfill Intersection Observer.
Selanjutnya kita dapat menjalankan kembali Lighthouse. Kali ini kita dapat melihat skor kinerja kami telah meningkat (70/100) karena memiliki Total Waktu Pemblokiran (400 md => 300 md).
Ganti sematan pihak ketiga yang mahal dengan fasad
Menggunakan sumber daya pihak ketiga untuk menyematkan video, postingan media sosial, atau widget ke dalam halaman. Secara {i>default<i}, 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 secara lambat pada pengguna interaksi. 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 sumber daya pihak ketiga yang dapat yang lambat dan memiliki fasad, seperti sematan video YouTube.
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.
Melebihi Core Web Vitals
Selain menyoroti Core Web Vitals, versi terbaru Lighthouse dan PageSpeed Insights juga coba berikan panduan konkret yang dapat Anda ikuti untuk meningkatkan kecepatan pemuatan web dengan JavaScript dapat dimuat jika Anda mengaktifkan peta sumber.
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 informasi selengkapnya tentang alat Core Web Vitals, pantau terus Lighthouse akun Twitter tim Google dan What's new in DevTools.
Banner besar oleh Mercedes Mehling di Unsplash.