Gabungkan alat Google untuk mengaudit, meningkatkan kualitas, dan memantau situs Anda secara efektif.
Dipublikasikan: 28 Mei 2020
Data Web Inti adalah sekumpulan metrik yang menilai pengalaman pengguna berdasarkan kriteria seperti performa pemuatan, responsivitas terhadap input pengguna, dan stabilitas tata letak.
Alur kerja untuk meningkatkan Core Web Vitals situs Anda akan dibahas dalam panduan ini, tetapi awal alur kerja tersebut bergantung pada apakah Anda mengumpulkan data lapangan Anda sendiri. Akhir dari perjalanan ini mungkin bergantung pada alat Google mana yang menurut Anda berguna dalam mendiagnosis dan memperbaiki masalah pengalaman pengguna.
Data Web Inti paling baik diukur di lapangan
Data Web Inti dirancang khusus untuk mengukur pengalaman pengguna di situs Anda—Data Web Inti adalah metrik yang berfokus pada pengguna. Alat berbasis lab seperti Lighthouse adalah alat diagnostik untuk menyoroti potensi masalah performa dan praktik terbaik. Alat berbasis lab dijalankan dalam kondisi tertentu yang telah ditentukan sebelumnya dan mungkin tidak mencerminkan pengukuran Data Web Inti dalam kehidupan nyata yang dialami pengguna Anda.
Misalnya, Lighthouse adalah alat berbasis lab yang menjalankan pengujian dengan pelambatan yang disimulasikan di lingkungan desktop atau seluler yang disimulasikan. Meskipun simulasi kondisi jaringan dan perangkat yang lebih lambat tersebut berguna saat mencoba mendiagnosis masalah performa, simulasi tersebut hanyalah satu bagian dari berbagai kondisi jaringan dan kemampuan perangkat, sehingga mungkin tidak mencerminkan pengalaman pengguna di situs Anda.
Alat berbasis lab seperti Lighthouse juga biasanya melakukan "pemuatan dingin" halaman web sebagai pengunjung yang benar-benar baru. Pemuatan ini sering kali paling lambat, tetapi dalam kehidupan nyata, pengunjung mungkin memiliki beberapa aset yang di-cache jika mereka pernah mengunjungi situs sebelumnya, atau saat mereka menjelajahi situs. Pengunjung baru, dan alat, juga dapat mengalami situs secara berbeda dengan adanya banner cookie atau konten lain yang ditampilkan kepada mereka.
Singkatnya, meskipun alat berbasis lab dapat memberikan indikasi potensi masalah performa dan membantu Anda melakukan debug serta iterasi, alat tersebut mungkin tidak mewakili jumlah pengunjung yang benar-benar mengalami masalah di situs Anda. Gunakan data lapangan untuk mengukur performa di dunia nyata, dan alat berbasis lab seperti Lighthouse untuk mendiagnosis cara meningkatkannya. Lihat juga bagian Kapan harus menggunakan Lighthouse.
Google mengukur Data Web Inti melalui Chrome User Experience Report (CrUX). Ini adalah set data publik yang dikumpulkan dari pengguna Chrome sebenarnya. Library ini adalah tulang punggung banyak alat Google dan pihak ketiga yang melaporkan Core Web Vitals situs.
Namun, CrUX memiliki keterbatasan. Hal ini sering kali dapat memberi tahu Anda kapan ada masalah, tetapi sering kali tidak memiliki data yang cukup untuk memberi tahu Anda mengapa.
Kumpulkan data lapangan Anda sendiri jika memungkinkan
Set data terbaik untuk meningkatkan performa situs di lapangan adalah set data yang Anda buat. Hal ini dimulai dengan mengumpulkan data kolom dari pengunjung situs Anda. Cara Anda melakukannya bergantung pada ukuran organisasi Anda, dan apakah Anda ingin membayar solusi pihak ketiga atau membuat solusi Anda sendiri.
Solusi berbayar hampir pasti akan mengukur Data Web Inti (dan metrik performa lainnya) serta biasanya menyediakan berbagai alat untuk mempelajari data yang dihasilkan. Di organisasi besar dengan sumber daya yang signifikan, metode ini mungkin lebih disukai.
Namun, Anda mungkin bukan bagian dari organisasi besar—atau bahkan organisasi yang memiliki sarana untuk membeli solusi pihak ketiga. Dalam kasus ini, web-vitals library Google akan membantu Anda mengumpulkan semua Metrik Web. Namun, Anda akan bertanggung jawab atas cara data tersebut dilaporkan, disimpan, dan dianalisis.
Jika Anda sudah menggunakan Google Analytics, tetapi belum mulai mengumpulkan data kolom Anda sendiri, Anda dapat menggunakan library web-vitals untuk mengirimkan Data Web yang dikumpulkan di kolom ke Google Analytics dan menggunakan BigQuery Export GA4 untuk melaporkan data tersebut.
Memahami alat Google
Terlepas dari apakah Anda mengumpulkan data kolom Anda sendiri, ada beberapa alat Google yang mungkin berguna dalam menganalisis Core Web Vitals. Sebelum membuat alur kerja, ringkasan umum setiap alat dapat membantu Anda memahami alat mana yang mungkin—atau tidak—paling cocok untuk Anda.
Chrome User Experience Report (CrUX)
Seperti yang disebutkan sebelumnya, CrUX adalah kumpulan data publik dari data kolom yang dikumpulkan dari segmen pengguna Google Chrome sebenarnya dari jutaan situs. Laporan ini mencakup metrik Core Web Vitals dan metrik lainnya untuk situs dengan traffic yang memadai.
CrUX tersedia sebagai set data BigQuery bulanan di tingkat asal, atau sebagai API harian di tingkat URL atau asal, asalkan URL atau asal memiliki sampel yang cukup dalam set data CrUX. Data CrUX tersedia melalui berbagai alat CrUX untuk akses terprogram dan alat visual yang dapat digunakan oleh pengguna.
Kapan harus menggunakan CrUX
Meskipun Anda mengumpulkan data lapangan sendiri, CrUX tetap berguna. Meskipun CrUX mewakili sebagian kecil pengguna Chrome, data ini berguna untuk membandingkan data kolom situs Anda guna melihat kesesuaiannya dengan data CrUX. Masing-masing memiliki kelebihan dan kekurangan, yang dapat menyebabkan perbedaan. Jika Anda tidak mengumpulkan data kolom apa pun untuk situs Anda, CrUX sangat berharga untuk memberikan ringkasan tingkat tinggi—asalkan situs Anda tercantum dalam set datanya.
Anda dapat menggunakan CrUX secara langsung, atau menggunakan alat lain (termasuk yang disebutkan di bawah). Penggunaan set data CrUX secara langsung, baik menggunakan BigQuery maupun API, berguna untuk mengekspos data yang tidak ditampilkan di alat lain. Misalnya, data tingkat negara sering kali tidak tersedia di alat lain, atau untuk melihat metrik tambahan di CrUX yang juga sering kali tidak ditampilkan di alat lain.
Kapan tidak menggunakan CrUX
CrUX hanya merepresentasikan pengguna Chrome, dan bahkan hanya sebagian kecil pengguna Chrome. Solusi RUM lengkap dapat mencakup lebih banyak pengalaman di Chrome dan browser lain yang mendukung metrik Web Vitals.
Situs yang tidak menerima cukup traffic tidak diwakili dalam set data CrUX. Jika demikian, Anda harus mengumpulkan data kolom Anda sendiri untuk memahami performa situs Anda di kolom, karena CrUX tidak akan menjadi opsi. Atau, Anda harus mengandalkan data lab, tetapi dengan batasan bahwa data tersebut mungkin tidak representatif seperti yang dijelaskan sebelumnya.
Karena data yang disediakan CrUX adalah rata-rata bergulir selama 28 hari sebelumnya, CrUX bukanlah alat yang ideal selama pengembangan, karena akan memerlukan waktu yang cukup lama agar peningkatan tercermin dalam set data CrUX.
Terakhir, sebagai set data publik, CrUX terbatas pada jumlah informasi yang dapat disediakan dan cara data ini dapat dikueri. Dengan merekam data RUM Anda sendiri, Anda dapat mengumpulkan lebih banyak detail (misalnya, elemen LCP), dan menyegmentasikan data lebih lanjut untuk mengidentifikasi masalah. Apakah pengguna yang login mengalami Data Web Inti yang lebih baik atau lebih buruk daripada pengguna yang logout? Apakah pengguna dengan LCP lambat memiliki elemen LCP tertentu? Interaksi mana yang menyebabkan nilai FID dan INP tinggi?
PageSpeed Insights (PSI)
PSI adalah alat yang melaporkan data kolom dari CrUX dan lab dari Lighthouse untuk halaman tertentu. Lihat masing-masing bagian tersebut untuk mengetahui detail selengkapnya.
Kapan harus menggunakan PSI
PSI sangat berguna untuk menilai performa CrUX di tingkat halaman atau tingkat asal, baik untuk pengguna seluler maupun desktop. Alat ini adalah pilihan yang baik untuk mendapatkan ringkasan awal Data Web Inti untuk halaman atau situs. Anda juga dapat melihat data Core Web Vitals untuk situs lain seperti situs pesaing.
PSI juga menyediakan data Lighthouse, yang memberikan rekomendasi berguna untuk meningkatkan Data Web Inti Anda—jika metriknya selaras. Jika tidak selaras, rekomendasi Lighthouse mungkin kurang relevan.
Karena dijalankan dari server, Lighthouse dapat membentuk dasar yang lebih konsisten daripada menjalankan Lighthouse dari DevTools.
Kapan tidak menggunakan PSI
PSI hanya tersedia untuk URL publik. PSI tidak dapat digunakan di situs pengembangan yang tidak dapat diakses secara publik.
Data CrUX hanya tersedia jika situs memenuhi kriteria kelayakan tertentu, termasuk ambang batas popularitas situs. PSI kurang berguna jika data CrUX tidak tersedia untuk halaman atau asal karena hanya dapat menampilkan data lab Lighthouse dalam kasus ini.
Demikian pula, jika Anda hanya memiliki data CrUX tingkat asal, bukan URL tertentu yang sedang diuji, hal ini juga membatasi kegunaannya dalam mengorelasikan data kolom tingkat asal dengan diagnostik lab tingkat halaman. Memiliki data kolom tingkat asal masih merupakan informasi yang sangat berguna sebagai ringkasan performa situs dan audit Lighthouse dapat membantu, tetapi kehati-hatian ekstra harus dilakukan dalam kasus ini.
Terakhir, jika data tingkat halaman tersedia di CrUX, tetapi berbeda dengan data lab Lighthouse, rekomendasi dari Lighthouse mungkin kurang bermanfaat. Hal ini dapat terjadi terutama untuk masalah CLS setelah pemuatan, dan untuk Data Web Inti interaktivitas (FID dan INP) yang audit berbasis labnya kurang berguna.
Search Console
Search Console mengukur performa dan traffic penelusuran situs Anda, termasuk Data Web Inti. Fitur ini hanya tersedia untuk pemilik situs yang telah mengonfirmasi kepemilikan situs.
Fitur berharga dari Search Console adalah fitur ini mengelompokkan halaman serupa (misalnya, halaman yang menggunakan template yang sama) ke dalam satu penilaian kelompok. Search Console juga menyertakan laporan Core Web Vitals berdasarkan data lapangan dari CrUX.
Kapan harus menggunakan Search Console
Search Console sangat cocok untuk developer dan orang-orang yang tidak memiliki peran developer untuk menilai performa penelusuran dan halaman dengan cara yang tidak dapat dilakukan oleh alat Google lainnya. Penyajian data CrUX dan pengelompokan halaman berdasarkan kesamaan memberikan insight baru tentang bagaimana peningkatan performa memengaruhi seluruh kategori halaman.
Kapan tidak menggunakan Search Console
Search Console mungkin tidak cocok untuk project yang menggunakan alat pihak ketiga berbeda yang mengelompokkan halaman berdasarkan kesamaan, atau jika situs tidak ditampilkan dalam set data CrUX.
Pengelompokan halaman juga dapat membingungkan jika contoh halaman dalam grup memiliki karakteristik yang berbeda dengan halaman lainnya dalam grup—misalnya, jika grup gagal dalam Data Web Inti tertentu secara keseluruhan, tetapi semua contoh halaman tampaknya lulus Data Web Inti yang sama. Hal ini dapat terjadi jika grup berisi halaman ekor panjang atau halaman yang jarang dikunjungi yang mungkin lebih lambat dimuat, karena cenderung tidak di-cache. Jika volume halaman ini dalam long tail cukup banyak, halaman tersebut dapat memengaruhi tingkat kelulusan keseluruhan grup.
Mercusuar
Lighthouse adalah alat lab yang memberikan peluang spesifik untuk meningkatkan performa halaman. Alur pengguna Lighthouse juga memungkinkan developer membuat skrip alur interaksi untuk pengujian performa di luar pemuatan halaman.
Lighthouse-CI adalah alat terkait yang menjalankan Lighthouse selama build dan deployment project untuk membantu pengujian regresi performa. Plugin ini menampilkan laporan Lighthouse beserta permintaan pull, dan melacak metrik performa dari waktu ke waktu.
Kapan harus menggunakan Lighthouse
Lighthouse sangat baik untuk menemukan peluang peningkatan performa selama pengembangan di lingkungan lokal dan staging. Lighthouse CI juga berguna dalam fase build dan deployment ke lingkungan staging dan produksi, tempat pengujian regresi performa diperlukan untuk mempertahankan pengalaman pengguna yang baik.
Kapan tidak menggunakan Lighthouse
Lighthouse (atau Lighthouse CI) bukan pengganti data lapangan. Lighthouse terutama merupakan alat diagnostik yang mencantumkan potensi masalah dan praktik terbaik dari pemuatan halaman yang telah ditentukan sebelumnya. Rekomendasi yang ditampilkan mungkin tidak selalu sesuai dengan performa yang dialami pengguna Anda.
Meskipun Lighthouse dapat digunakan untuk mendiagnosis situs produksi melalui alat seperti PageSpeed Insights, Lighthouse idealnya digunakan di lingkungan pengembangan dan integrasi berkelanjutan untuk mengatasi masalah performa sebelum mencapai produksi.
Audit yang disediakan Lighthouse juga tersedia melalui "insight" di panel Performa di Chrome DevTools, yang memberikan analisis performa halaman yang lebih mendalam.
Panel Performa di Chrome DevTools
Chrome DevTools adalah kumpulan alat pengembangan dalam browser, termasuk panel Performa. Panel Performa adalah alat lab yang terdiri dari dua "mode":
Saat panel Performa dibuka pertama kali, layar Metrik Langsung akan memberikan metrik Data Web Inti saat ini, dengan kemampuan untuk mengimpor data lapangan dari CrUX. Laporan ini berguna sebagai tampilan performa "langsung" saat Anda berinteraksi dengan halaman untuk mencoba menemukan masalah performa—terutama untuk masalah pasca-pemuatan yang mungkin Anda lihat dengan metrik CLS dan INP.
Kedua, panel Performa memungkinkan developer merekam profil (atau rekaman aktivitas) semua aktivitas halaman selama pemuatan halaman atau jangka waktu yang direkam. Tampilan ini menawarkan insight mendalam tentang semua yang diamati di seluruh dimensi seperti aktivitas jaringan, rendering, painting, dan scripting, serta Core Web Vitals halaman. Laporan ini juga mencakup insight, serupa dengan yang diberikan oleh Lighthouse.
Kapan harus menggunakan panel Performa
Panel Performa harus digunakan oleh developer untuk mendapatkan insight mendalam tentang performa halaman tertentu.
Tampilan metrik langsung dapat digunakan untuk memahami dengan cepat karakteristik performa halaman saat ini, dan juga menemukan potensi masalah saat halaman berinteraksi.
Tampilan rekaman aktivitas sangat berguna untuk men-debug masalah responsivitas yang memengaruhi INP. Setelah interaksi yang merespons buruk diidentifikasi dan dapat diulang, panel Performa dapat memberikan banyak data tentang apa yang terjadi di browser untuk membantu memahami masalahnya, mulai dari pemblokiran thread utama, hingga stack panggilan JavaScript, hingga pekerjaan rendering.
Kapan tidak menggunakan panel Performa
Panel Performa adalah alat developer yang terutama menyediakan data lab—meskipun dengan beberapa konteks kolom dari CrUX. Ini bukan pengganti data lapangan.
Tampilan rekaman aktivitas berisi banyak informasi proses debug, tetapi karena itu, tampilan ini mungkin sulit dipahami oleh developer pemula atau mereka yang memiliki peran non-developer. Namun, tampilan metrik live yang dibuka panel ini mengatasi masalah tersebut dengan menyediakan antarmuka yang lebih mudah digunakan bagi mereka yang tidak memerlukan detail lengkap.
Alur kerja tiga langkah untuk memastikan Data Web Inti situs Anda tetap dalam kondisi baik
Saat berupaya meningkatkan pengalaman pengguna, sebaiknya anggap proses ini sebagai siklus berkelanjutan. Untuk meningkatkan Core Web Vitals dan metrik performa lainnya, salah satu pendekatan yang dapat dilakukan adalah:
- Mengevaluasi kesehatan situs dan mengidentifikasi titik masalah.
- Lakukan proses debug dan pengoptimalan.
- Pantau dengan alat continuous integration untuk mendeteksi dan mencegah regresi.
Langkah 1: Evaluasi kesehatan situs dan identifikasi peluang peningkatan
Sebaiknya mulai dengan data kolom untuk mengevaluasi kesehatan situs.
- Gunakan PageSpeed Insights untuk melihat metrik pengalaman Data Web Inti secara keseluruhan di origin, dan informasi spesifik di setiap URL.
- Search Console dapat berguna untuk mengidentifikasi halaman yang perlu ditingkatkan kualitasnya. Fitur pengelompokan halaman di Search Console berfungsi dengan baik untuk situs Anda.
- Jika Anda memiliki data RUM, opsi tersebut sering kali merupakan opsi terbaik untuk mengidentifikasi halaman atau segmen traffic tertentu yang bermasalah.
Baik Anda menganalisis data lapangan yang Anda kumpulkan sendiri atau data CrUX, langkah pertama ini sangat penting. Jika Anda tidak mengumpulkan data lapangan, data CrUX mungkin cukup untuk memandu Anda—sekali lagi, asalkan situs Anda tercantum dalam set data.
Menganalisis performa situs dengan PageSpeed Insights
PageSpeed Insights menampilkan data CrUX yang mencakup data pengalaman pengguna selama 28 hari terakhir pada persentil ke-75. Artinya, jika 75% pengalaman pengguna memenuhi nilai minimum yang ditetapkan untuk metrik tertentu, maka pengalaman tersebut dianggap "baik".
Jika Anda memiliki halaman tertentu yang ingin dilihat performanya, gunakan halaman tersebut. Untuk mendapatkan gambaran umum situs saat Anda pertama kali mulai mengoptimalkan, Anda dapat memulai dengan halaman beranda, karena biasanya merupakan salah satu halaman paling populer di banyak situs.
Fokuslah pada bagian pengalaman pengguna Anda yang sebenarnya di PSI terlebih dahulu. Anda akan melihat hingga empat tampilan data: seluler dan desktop untuk URL yang dimasukkan dan seluruh asal. Bandingkan keduanya dan lihat perbedaannya. Performa perangkat seluler biasanya lebih rendah daripada desktop karena perangkat seluler memiliki lebih sedikit resource dan beroperasi dalam kondisi jaringan yang berpotensi kurang stabil. Jika URL dan data asal sangat berbeda, coba pahami alasannya: halaman beranda sering kali merupakan halaman pertama yang dikunjungi (yaitu, halaman landing) sehingga dapat lebih lambat daripada asal pengguna yang menggunakan cache browser yang tidak dipersiapkan sepenuhnya. Halaman berikutnya kemungkinan akan dimuat lebih cepat, karena aset bersama akan di-cache, sehingga menurunkan data tingkat asal gabungan.
PSI juga menampilkan ketiga Data Web Inti (LCP, CLS, dan INP) serta metrik diagnostik TTFB dan FCP. Apakah ada Core Web Vitals yang gagal, dan seberapa besar kegagalannya? Hal ini akan menunjukkan area yang perlu Anda fokuskan.
Pahami hubungan antara angka-angka ini—terutama untuk LCP. Jika LCP lambat, seperti dalam contoh ini, lihat TTFB dan FCP yang merupakan tonggak pencapaian untuk metrik tersebut. Dalam contoh ini, kita memiliki TTFB 1,8 detik, yang akan membuat kita kesulitan memenuhi nilai minimum yang direkomendasikan sebesar 2,5 detik untuk LCP yang baik. Hal ini menunjukkan backend yang lambat (masalah server atau tidak adanya CDN), jaringan yang lebih lambat, atau pengalihan yang menunda byte HTML pertama. Lihat panduan Mengoptimalkan TTFB untuk mengetahui informasi selengkapnya. FCP memerlukan satu detik lagi, yang sekali lagi dapat mengindikasikan jaringan yang lebih lambat. LCP tidak lama setelah FCP dalam contoh ini, yang menunjukkan bahwa resource LCP dioptimalkan dengan baik setelah halaman itu sendiri dimuat. CrUX kini juga menampilkan informasi diagnostik lainnya dalam jenis dan subbagian resource, yang juga membantu Anda mendiagnosis masalah LCP.
Untuk CLS, lihat skor CLS CrUX dan CLS Lighthouse untuk mengetahui apakah ini adalah masalah CLS saat pemuatan (yang akan ditangkap dan disarankan oleh Lighthouse), atau masalah CLS setelah pemuatan yang tidak akan ditangkap oleh Lighthouse. Untuk informasi selengkapnya, lihat panduan Mengoptimalkan CLS.
Untuk responsivitas, lihat skor INP. Lihat audit TBT di Lighthouse untuk melihat apakah banyak pemrosesan JavaScript terjadi selama pemuatan halaman awal, yang kemungkinan akan memengaruhi INP. INP bisa menjadi metrik yang sulit ditingkatkan, jadi lihat panduan Mengoptimalkan INP untuk mengetahui informasi selengkapnya.
Mengidentifikasi halaman yang berperforma buruk di Search Console
Meskipun PSI berguna saat Anda memiliki URL tertentu yang ingin diuji atau situs secara keseluruhan, Search Console dapat membantu menargetkan upaya Anda ke jenis halaman tertentu. Hal ini sangat berguna jika banyak halaman memiliki tema atau teknologi yang sama dan Search Console dapat berhasil mengidentifikasinya.
Laporan Core Web Vitals di Search Console menunjukkan gambaran besar performa situs Anda, tetapi Anda tetap dapat melihat perincian halaman tertentu yang perlu diperhatikan. Dengan Search Console, Anda juga dapat:
- Identifikasi grup halaman individual yang perlu ditingkatkan, dan grup halaman yang memberikan pengalaman pengguna yang baik.
- Dapatkan data terperinci tentang performa menurut URL yang dikelompokkan berdasarkan status, metrik, dan grup halaman web serupa (seperti halaman detail produk di situs e-commerce).
- Dapatkan laporan mendetail yang mengelompokkan URL dalam setiap kategori kualitas pengalaman pengguna untuk seluler dan desktop.
Setelah memiliki beberapa halaman tertentu untuk diperiksa, Anda dapat menggunakan PSI seperti yang dijelaskan sebelumnya untuk mengumpulkan pemahaman lebih lanjut tentang masalah pada halaman tersebut.
Langkah 2: Lakukan proses debug dan pengoptimalan
Pada langkah 1, Anda seharusnya telah mengidentifikasi halaman yang memerlukan peningkatan performa, dan juga metrik Data Web Inti mana yang ingin Anda tingkatkan. Anda dapat menggunakan alat Google untuk mendapatkan informasi lebih lanjut guna memahami penyebab utama masalah tersebut.
- Lihat audit Lighthouse untuk mendapatkan panduan tingkat tinggi untuk halaman
- Gunakan tampilan metrik langsung panel Performa untuk menganalisis Data Web Inti secara real time.
- Gunakan pelacakan panel Performa untuk men-debug masalah performa dan menguji perubahan kode.
Untuk panduan yang lebih mendetail, lihat panduan berikut:
Menemukan peluang dengan Lighthouse
PageSpeed Insights menjalankan Lighthouse untuk Anda. Lighthouse juga dapat dijalankan dari Chrome DevTools, yang berguna untuk memvalidasi perbaikan secara lokal, meskipun Panel Performa (yang dibahas selanjutnya) adalah alat yang lebih komprehensif untuk mengidentifikasi dan memperbaiki masalah performa secara lokal.
Poin pentingnya adalah memvalidasi bahwa audit Lighthouse mereplikasi masalah yang ingin Anda selesaikan (misalnya, masalah LCP lambat, atau CLS). Secara default, Lighthouse hanya menilai pengalaman pengguna selama pemuatan halaman. Karena merupakan alat lab, alat ini juga mengecualikan INP dan lebih memilih TBT.
Jika metrik Lighthouse menunjukkan masalah serupa dengan yang sedang Anda coba selesaikan, banyaknya informasi dalam auditnya dapat membantu mengidentifikasi masalah dan menyarankan solusi.
Anda dapat memfilter audit hanya untuk Data Web Inti yang Anda minati guna berfokus pada perbaikan masalah yang terkait dengan metrik tertentu:
Untuk INP, gunakan audit TBT untuk mengidentifikasi masalah yang berpotensi memengaruhi metrik tersebut, tetapi perlu diketahui bahwa tanpa interaksi, Lighthouse terbatas dalam kemampuannya untuk mendiagnosis.
Menganalisis secara real time dengan layar metrik aktif Chrome DevTools
Layar metrik aktif Chrome DevTools di panel Performance menampilkan Data Web Inti secara real time selama pemuatan halaman dan saat menjelajahi halaman. Oleh karena itu, INP dan pergeseran tata letak yang terjadi setelah pemuatan dapat direkam. Anda juga dapat melihat informasi yang lebih mendetail tentang setiap metrik:
Tampilan ini memberikan banyak informasi berguna untuk membantu mengidentifikasi masalah performa, dan bahkan dapat menarik informasi kolom dari CrUX. Untuk mendapatkan informasi lebih lanjut, Anda dapat melihat perincian dengan rekaman aktivitas.
Melihat perincian dengan panel Performa
Panel Performa di Chrome DevTools memungkinkan Anda merekam profil (atau rekaman aktivitas) semua perilaku halaman selama periode waktu yang direkam.
Insight performa tersedia di panel samping Insight. Bagian ini juga menampilkan metrik Core Web Vitals beserta nilai kolom untuk metrik tersebut jika tersedia.
Bagian Pergeseran Tata Letak melacak pergeseran tata letak dan mengklik bagian ini akan memberikan detail selengkapnya tentang elemen yang bergeser untuk proses debug CLS.
Waktu utama—seperti LCP—ditampilkan di Waktu yang tersedia di bagian bawah rekaman aktivitas. Klik ini untuk mengetahui detail selengkapnya.
Tugas Panjang (yang dapat menyebabkan masalah INP) juga ditandai dengan segitiga merah dalam diagram flame.
Fitur ini—serta informasi di bagian lain panel Performa—dapat membantu Anda menentukan apakah perbaikan berdampak pada Data Web Inti halaman.
Men-debug Data Web Inti di lapangan
Alat lab tidak selalu dapat mengidentifikasi penyebab semua masalah Core Web Vitals yang memengaruhi pengguna Anda. Inilah salah satu alasan mengapa pengumpulan data lapangan Anda sendiri sangat penting, karena data tersebut mempertimbangkan faktor-faktor yang tidak dapat dilakukan oleh data lab.
Lihat men-debug performa di lapangan untuk mengetahui informasi selengkapnya.
Langkah 3: Pantau perubahan
Setelah memperbaiki masalah, Anda harus memastikan bahwa perbaikan tersebut memberikan efek yang diperlukan dan masalah baru tidak mengganggu Data Web Inti Anda. Hal ini memerlukan pemantauan masalah performa sebagai bagian dari alur kerja developer untuk mencegah masalah performa dirilis ke produksi, dan memantau data kolom secara rutin untuk memastikan hal ini terjadi.
Memantau permintaan performa di lingkungan Continuous Integration (CI)
Lighthouse-CI memungkinkan Anda menjalankan audit Lighthouse secara otomatis pada commit kode untuk mencegah regresi performa memasuki kode. Hal ini dapat memeriksa pengaturan waktu performa (yang dapat bervariasi), atau hanya audit performa, sebagai alat linting untuk mencegah praktik buruk dalam kode.
Melihat tren kesehatan situs dengan data kolom
Meskipun Anda harus berupaya mendeteksi dan memperbaiki semua masalah performa sebelum masalah tersebut masuk ke produksi, memantau data lapangan menggunakan RUM sangat penting untuk menemukan masalah yang terlewat. Ada banyak produk RUM komersial yang tersedia dan dapat membantu hal ini. Library JavaScript web-vitals dapat mengotomatiskan pengumpulan data kolom situs, dan secara opsional menggunakan data ini untuk mendukung dasbor kustom dan sistem pemberitahuan.
Untuk situs tanpa solusi RUM, Anda dapat menggunakan berbagai alat CrUX sebagai analisis tren dasar data lapangan.
Kesimpulan
Untuk memastikan pengalaman pengguna yang cepat dan menyenangkan, Anda harus memiliki pola pikir yang mengutamakan performa dan mengadopsi alur kerja untuk memastikan progres. Dengan alat dan proses yang tepat untuk mengaudit, men-debug, dan memantau, Anda dapat membangun pengalaman pengguna yang luar biasa dan tetap berada dalam nilai minimum yang ditentukan untuk Data Web Inti yang baik.