Core Web Vitals: 7 alat & teknik untuk mengidentifikasi kemacetan kinerja

Core Web Vitals (CWV) adalah topik hangat saat ini. Di sini, kita akan melihat beberapa alat yang dapat kita gunakan untuk membantu mengidentifikasi masalah kinerja situs web, sebagai persiapan untuk pembaruan peringkat Google yang akan datang pada Mei 2021.

Butuh penyegaran di Core Web Vitals? Pelajari apa itu dan bagaimana mengoptimalkannya di artikel Penjelasan Vital Web Inti saya.

Pemantauan otomatis metrik CWV

Jika Anda memiliki beberapa situs web atau halaman utama yang ingin Anda pantau dari waktu ke waktu, tanpa harus menjalankan pengujian demi pengujian secara manual, spreadsheet dari Digital Inspiration ini cocok untuk Anda. Cukup ambil kunci API Lighthouse PageSpeed, pasang beberapa URL dan pergilah!

Spreadsheet membantu mengidentifikasi potensi masalah kinerja di sekitar indikator CWV utama dan kapan masalah itu mungkin terjadi, yang pada gilirannya dapat memberi kita petunjuk tentang apa yang mungkin menjadi penyebabnya. Ini juga dapat digunakan untuk menunjukkan bagaimana skor kecepatan dapat berubah secara alami seiring waktu seiring pertumbuhan situs web, atau ketika perubahan pada algoritme kecepatan halaman yang mendasarinya dibuat.

Kami telah menggunakan versi modifikasi dari spreadsheet ini selama beberapa bulan dan telah membantu kami mengidentifikasi peluang untuk meningkatkan kinerja sejumlah situs web.

Wawasan PageSpeed

Google's PageSpeed ​​Insights adalah alat bantu saya untuk investigasi awal dan top-line terhadap kinerja dan masalah terkait CWV, baik untuk perangkat seluler maupun desktop. Laporan berisi 'Data Lapangan'; bagaimana pengguna dunia nyata mengalami situs web bersama dengan data 'Lab' Lighthouse yang mensimulasikan pemuatan halaman, yang berguna untuk pengujian berulang dan konsisten.

Metrik Core Web Vital disorot dengan jelas dengan indikator kode warna yang sederhana. Metrik yang buruk disorot dengan warna merah, bagus dengan warna hijau. Metrik ini digabungkan untuk memberikan skor kecepatan keseluruhan, dan Anda memerlukan 90% atau lebih untuk 'lulus' hijau.

Serangkaian rekomendasi dan diagnostik juga diberikan dalam laporan ini, diurutkan berdasarkan item berdampak tertinggi dalam hal total detik yang dapat disimpan.

Monitor Kinerja Chrome DevTools

Untuk analisis yang lebih rinci tentang kinerja dan masalah terkait CWV, saya sering beralih ke Monitor Kinerja Chrome dalam DevTools dan beberapa indikator CWV utama yang saya gunakan diberi nomor pada tangkapan layar di bawah.

1. Pertama, Anda harus memastikan bahwa Anda menjalankan monitor kinerja pada resolusi yang benar, karena elemen LCP dan CLS akan sering berubah pada resolusi yang berbeda. Saya telah mengatur milik saya ke 350 x 636 piksel untuk mereplikasi tampilan seluler PageSpeed ​​Insights.
2. Sebelum menjalankan laporan, Anda mungkin juga ingin menyimulasikan konektivitas dan kekuatan perangkat seluler. Saya sering memilih Fast 3g dan 4x CPU slowdown.
3. Memilih metrik LCP setelah laporan dibuat mengidentifikasi apa elemen terbesarnya. Ini harus sedekat mungkin dengan FCP (First Contentful Paint) mungkin. Jika ada celah, Anda akan ingin mengidentifikasi dan merampingkan pengiriman elemen terbesar.
4. Tugas CPU yang panjang disorot oleh diagonal merah pada bilah abu-abu. Hal ini sering kali disebabkan oleh JavaScript yang lebih berat, yang diwakili oleh bilah kuning dan akan memengaruhi metrik interaktivitas Anda (FID, TBT, dan TTI). Menelusuri bilah di bawah biasanya akan mengarah ke file dan fungsi JavaScript yang menyinggung.
5. Pergeseran Tata Letak disorot oleh bilah merah ini dan memilihnya biasanya akan menyorot elemen apa yang telah digeser. Sejumlah besar ini akan menciptakan nilai CLS yang lebih tinggi.
6. Tampilan bingkai bisa menjadi cara yang bagus untuk menyoroti secara visual bagaimana konten muncul dan tata letak digeser saat dimuat. Untuk nilai CLS tinggi, sering kali jelas dari bingkai apa penyebabnya. Dalam contoh ini, spanduk cookie besar menyebabkan pergeseran tata letak saat konten didorong ke bawah.

Ekstensi Chrome Vital Web

Vital SERP Inti

Ekstensi SERP Vitals menampilkan indikator praktis untuk metrik LCP, FID, dan CLS langsung di hasil pencarian. Ini bagus untuk analisis pesaing dan dapat memberikan indikasi cepat tentang seberapa cepat halaman web mungkin sebelum Anda mengunjunginya.

Data dikompilasi secara anonim dari pengguna nyata oleh Laporan Pengalaman Pengguna Chrome (CrUX). Namun, ini tidak tersedia untuk setiap situs, karena situs baru atau situs dengan lalu lintas sedikit tidak akan mengumpulkan poin data yang cukup.

Vital Web

Ekstensi Web Vitals yang praktis mengukur 3 metrik CWV utama untuk pengguna desktop di Chrome secara real-time, dan pewarnaan lampu lalu lintasnya memberikan indikator cepat saat Anda menelusuri situs web. Karena tidak bergantung pada data pengguna yang dikumpulkan secara eksternal, sangat bagus bagi pengembang yang bekerja di lingkungan lokal untuk mengetahui masalah apa pun sejak dini.

Mercu suar

Lighthouse Extensions menyediakan rute cepat ke fitur pelaporan yang sama yang tersedia dalam Chrome DevTools dan menarik Data Lab menggunakan Lighthouse API daripada Data Lapangan dari pengguna dunia nyata melalui CrUX.

Laporan kinerja sangat mirip dengan analisis seluler PageSpeed ​​Insights, memberikan diagnostik dan rekomendasi yang serupa. Laporan tambahan juga dibuat untuk SEO, Aksesibilitas, dan Praktik Terbaik.

Visualizer Kecepatan Situs Treoo

Visualiser di https://treo.sh/sitespeed menunjukkan metrik CWV dari waktu ke waktu, dapat difilter menurut perangkat, konektivitas, dan wilayah geografis. Ini diperbarui setiap minggu dan menggunakan data dari laporan CrUX.

Dalam contoh di bawah untuk bbc.co.uk, kita dapat melihat bagaimana metrik CLS turun secara signifikan dalam 3 bulan terakhir, memberikan hasil 'lulus' hijau untuk semua metrik inti. Ini adalah cara yang bagus untuk menganalisis kinerja metrik CWV dari waktu ke waktu atau untuk melakukan analisis pesaing.

Memvisualisasikan permintaan Pihak Ketiga

Metrik interaktivitas untuk FID, TTI, dan TBT seringkali sulit dipecahkan. PageSpeed ​​Insights dapat berguna dalam hal mengidentifikasi beberapa skrip pihak ketiga terberat, tetapi terkadang visualisasi yang layak dapat mengomunikasikan dampak skrip ini dengan lebih mudah.

Alat pemetaan Permintaan https://requestmap.herokuapp.com/ sangat bagus untuk ini. Peta yang dihasilkan berisi node untuk setiap permintaan pihak ketiga, dengan node yang lebih besar mewakili skrip dampak yang lebih tinggi. Jika metrik interaktivitas Anda buruk, kemungkinan Anda akan melihat banyak simpul di peta ini.

Berikut adalah contoh dari situs yang memiliki waktu 26 detik untuk metrik TTI Waktu untuk Interaktif. Pandangan sekilas ke peta menunjukkan widget obrolan langsung, diwakili oleh banyak node biru tua di bagian atas, terhitung lebih dari setengah dari total permintaan.

Alat peta permintaan juga merupakan cara yang bagus untuk menentukan dari mana skrip atau aset lain dimuat. Kita dapat melihat di bawah ini beberapa node yang datang langsung dari node kuning Google Pengelola Tag dalam contoh ini.

Air Terjun di WebPageTest

Laporan WebPageTest memberikan lebih banyak detail daripada PageSpeed ​​Insights dan dapat dibuat dari berbagai perangkat dan lokasi.

Saya sering menggunakan alat ini untuk analisis air terjun, yang memvisualisasikan urutan pemuatan semua aset pada halaman. Ini bisa sangat berguna saat mencoba merampingkan konten 'paro atas' penting Anda. Misalnya, jika Anda mengoptimalkan LCP dan elemen paruh atas terbesar adalah gambar atau tipografi, Anda mungkin ingin menerapkan pramuat pada file gambar dan font terbesar, dan memeriksa aset yang dimuat sebelumnya ini muncul di bagian atas air terjun .

Tidak yakin bagaimana CWV akan memengaruhi situs Anda, hubungi kami hari ini.