Menemukan peluang untuk meningkatkan pengalaman pengguna dengan alat web Chrome.
Dipublikasikan: 11 Mei 2021
Hari ini, kami akan membahas fitur alat baru di Lighthouse, PageSpeed, dan DevTools untuk membantu mengidentifikasi cara meningkatkan performa situs Anda di Web Vitals.
Sebagai pengingat tentang 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, baik yang bersifat publik maupun 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 UI yang memengaruhi metrik pengalaman pengguna (misalnya, node yang berkontribusi pada pergeseran tata letak).
Kami juga telah mengirimkan dukungan untuk screenshot elemen di PageSpeed Insights, sehingga memberikan cara untuk lebih mudah menemukan masalah untuk operasi performa halaman satu kali.
Mengukur Core Web Vitals
Lighthouse dapat mengukur secara sintetis metrik Core Web Vitals termasuk Largest Contentful Paint, Cumulative Layout Shift, dan Total Blocking Time (proxy lab untuk First Input Delay). Metrik ini mencerminkan pemuatan, stabilitas tata letak, dan kesiapan interaksi. Metrik lain seperti First Contentful Paint yang disoroti di masa mendatang Core Web Vitals juga ada di sana.
Bagian "Metrik" dalam laporan Lighthouse mencakup versi lab dari metrik ini. Anda dapat menggunakannya sebagai tampilan ringkasan aspek pengalaman pengguna yang memerlukan perhatian Anda.
Metrik kolom, seperti yang ditemukan di Chrome UX Report atau RUM, tidak memiliki batasan ini dan merupakan pelengkap yang berharga untuk data lab karena mencerminkan pengalaman pengguna yang sebenarnya. Data lapangan tidak dapat memberikan jenis informasi diagnostik yang Anda dapatkan di lab, sehingga keduanya saling melengkapi.
Mengidentifikasi area yang dapat Anda tingkatkan di Web Vitals
Mengidentifikasi elemen Largest Contentful Paint
LCP adalah pengukuran pengalaman pemuatan yang dirasakan. LCP menandai titik selama pemuatan halaman saat konten utama–atau "terbesar"–telah dimuat dan terlihat oleh pengguna.
Lighthouse memiliki audit "Elemen Largest Contentful Paint" yang mengidentifikasi elemen yang merupakan largest contentful paint. Mengarahkan kursor ke elemen akan menandainya di jendela browser utama.
Jika elemen ini adalah gambar, informasi ini adalah petunjuk berguna bahwa Anda mungkin ingin mengoptimalkan pemuatan gambar ini. Lighthouse menyertakan sejumlah audit pengoptimalan gambar untuk membantu Anda memahami apakah gambar Anda dapat dikompresi, diubah ukurannya, atau dikirimkan dengan lebih baik dalam format gambar modern yang lebih optimal.
Anda mungkin juga menganggap Bookmarklet LCP oleh Annie Sullivan berguna untuk mengidentifikasi elemen LCP dengan cepat menggunakan persegi panjang merah hanya dengan sekali klik.
Lakukan pramuat gambar yang ditemukan terlambat untuk meningkatkan LCP
Untuk meningkatkan Largest Contentful Paint (LCP), prapemuat gambar utama penting Anda jika gambar tersebut terlambat ditemukan oleh browser. Penemuan 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:
<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>, adalah kandidat jika
ditemukan pada kedalaman waterfall tiga atau lebih.
Pemuatan lambat gambar di luar layar dan menghindari hal ini untuk LCP
Gambar di luar layar yang tidak penting untuk pengalaman pengguna awal dapat dimuat 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 dalam hal ini:
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 dimuat dengan lambat secara tidak benar melalui audit "Gambar Largest Contentful Paint dimuat dengan lambat":
Mengidentifikasi kontribusi CLS
Cumulative Layout Shift 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 keseluruhannya.
Berkat fitur Screenshot Elemen Lighthouse yang baru, kita dapat melihat pratinjau visual elemen utama yang dicatat dalam audit serta mengklik untuk memperbesar agar tampilan lebih jelas:
Untuk CLS pasca-pemuatan, akan ada manfaatnya jika Anda terus memvisualisasikan elemen mana yang paling berkontribusi terhadap CLS dengan persegi panjang. Ini adalah fitur yang akan Anda temukan di alat pihak ketiga seperti dasbor Core Web Vitals SpeedCurve dan yang saya suka gunakan Layout Shift GIF Generator Defaced untuk:
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 yang memiliki CLS tinggi (dalam hal ini membantu mengidentifikasi sendiri bagian template yang perlu saya perhatikan):
Mengidentifikasi CLS dari gambar tanpa dimensi
Untuk membatasi Cumulative Layout Shift yang disebabkan oleh gambar tanpa dimensi, sertakan atribut ukuran lebar dan tinggi pada elemen gambar dan video Anda. Pendekatan ini memastikan bahwa browser dapat mengalokasikan jumlah ruang yang benar dalam dokumen saat gambar dimuat.
Lihat Menetapkan Tinggi Dan Lebar Pada Gambar Itu Penting 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, termasuk kontribusi terhadap pergeseran tata letak dan tugas berdurasi lama yang dapat menunda seberapa cepat halaman Anda dapat digunakan oleh pengguna. Di Lighthouse, Anda dapat mengaktifkannya 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
- Menghilangkan pergeseran dengan mencadangkan ukuran terbesar yang memungkinkan untuk slot iklan
Hindari animasi non-komposit
Animasi yang tidak digabungkan dapat terlihat tersendat di perangkat kelas bawah jika tugas JavaScript yang berat membuat thread utama sibuk. Animasi tersebut dapat menyebabkan pergeseran tata letak.
Jika Chrome menemukan animasi yang tidak dapat dikomposisikan, Chrome akan melaporkannya ke rekaman aktivitas DevTools yang dibaca Lighthouse, sehingga dapat mencantumkan elemen mana yang memiliki animasi yang tidak dikomposisikan dan karena alasan apa. Anda dapat menemukannya di audit Hindari animasi yang tidak dikomposisi.
Men-debug First Input Delay/Total Blocking Time/Tugas Berdurasi Lama
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 Blocking Time.
Lighthouse menyertakan audit Hindari tugas thread utama yang panjang yang mencantumkan tugas terpanjang di thread utama. Hal ini dapat membantu mengidentifikasi kontributor utama 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 ini. Sebagai pengingat, Tugas Berdurasi Lama adalah tugas yang dijalankan selama lebih dari 50 milidetik. Hal ini dianggap memblokir thread utama cukup lama sehingga memengaruhi kecepatan frame atau latensi input.
Jika mempertimbangkan layanan pihak ketiga untuk pemantauan, saya juga cukup menyukai visual linimasa eksekusi thread utama yang dimiliki Calibre untuk memvisualisasikan biaya ini, yang menyoroti tugas induk dan turunan yang berkontribusi pada tugas berdurasi lama yang memengaruhi interaktivitas.
Memblokir permintaan jaringan untuk melihat dampak sebelum/sesudah di Lighthouse
Chrome DevTools mendukung pemblokiran permintaan jaringan untuk melihat dampak dari resource tertentu yang dihapus atau tidak tersedia. Hal ini dapat membantu memahami biaya yang dimiliki setiap skrip (misalnya, seperti sematan atau pelacak pihak ketiga) pada metrik seperti Total Blocking Time (TBT) dan Time to Interactive.
Pemblokiran permintaan jaringan juga berfungsi dengan Lighthouse. Mari kita lihat sekilas laporan Lighthouse untuk sebuah situs. Skor Perf adalah 63/100 dengan TBT 400 md. Dengan mempelajari kodenya, kami menemukan bahwa situs ini memuat polyfill Intersection Observer di Chrome yang tidak diperlukan. Ayo blokir!
Kita dapat 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 ulang Lighthouse. Kali ini kita dapat melihat bahwa skor performa kita telah meningkat (70/100) seperti Total Blocking Time (400 md => 300 md).
Mengganti sematan pihak ketiga yang mahal dengan fasad
Resource pihak ketiga biasanya digunakan untuk menyematkan video, postingan media sosial, atau widget ke dalam halaman. Secara default, sebagian besar sematan langsung dimuat dengan cepat dan dapat disertai dengan payload mahal yang berdampak negatif pada pengalaman pengguna. Hal ini akan sia-sia jika pihak ketiga tidak terlalu penting (misalnya, jika pengguna perlu men-scroll sebelum melihatnya).
Salah satu pola untuk meningkatkan performa widget tersebut adalah dengan memuatnya secara lambat saat interaksi pengguna. Hal ini dapat dilakukan dengan merender pratinjau widget yang ringan (facade) dan hanya memuat versi lengkap jika pengguna berinteraksi dengan widget tersebut. Lighthouse memiliki audit yang akan merekomendasikan resource pihak ketiga yang dapat dimuat lambat dengan fasad, seperti sematan video YouTube.
Sebagai pengingat, Lighthouse akan menandai 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 ditunda atau dimuat lambat jika yang dirender memerlukan scroll untuk melihatnya.
Selain Core Web Vitals
Selain menyoroti Core Web Vitals, versi terbaru Lighthouse dan PageSpeed Insights juga mencoba memberikan panduan konkret yang dapat Anda ikuti untuk meningkatkan kecepatan pemuatan aplikasi web yang menggunakan banyak JavaScript 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 mengetahui informasi selengkapnya tentang alat Core Web Vitals, pantau akun Twitter tim Lighthouse dan Yang baru di DevTools.