Gabungkan alat Google untuk mengaudit, meningkatkan, dan memantau situs Anda secara efektif.
Dipublikasikan: 28 Mei 2020
Core Web Vitals 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 di situs Anda akan dibahas dalam panduan ini, tetapi tempat alur kerja tersebut dimulai bergantung pada apakah Anda mengumpulkan data lapangan sendiri. Tempat berakhirnya mungkin bergantung pada alat Google mana yang menurut Anda berguna dalam mendiagnosis dan memperbaiki masalah pengalaman pengguna.
Core Web Vitals paling baik diukur di lapangan
Core Web Vitals dirancang khusus untuk mengukur pengalaman pengguna di situs Anda—metrik ini 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 dan mungkin tidak mencerminkan pengukuran Core Web Vitals di dunia nyata yang dialami pengguna Anda.
Misalnya, Lighthouse adalah alat berbasis lab yang menjalankan pengujian dengan throttling yang disimulasikan di lingkungan desktop atau seluler yang disimulasikan. Meskipun simulasi kondisi jaringan dan perangkat yang lebih lambat seperti ini berguna saat mencoba mendiagnosis masalah performa, simulasi tersebut hanyalah sebagian kecil 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 cold" halaman web sebagai pengunjung yang benar-benar baru. Pemuatan ini sering kali merupakan pemuatan yang paling lambat, tetapi dalam kehidupan nyata, pengunjung mungkin memiliki beberapa aset yang di-cache jika mereka pernah berkunjung sebelumnya, atau saat mereka menjelajahi situs. Pengunjung baru, dan alat, juga dapat mengalami situs secara berbeda dengan 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 dan iterasi, alat tersebut mungkin tidak mewakili jumlah pengunjung yang benar-benar menggunakan 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 Core Web Vitals melalui Chrome User Experience Report (CrUX). Ini adalah set data publik yang dikumpulkan dari pengguna Chrome yang sebenarnya. CrUX adalah tulang punggung banyak alat Google dan pihak ketiga yang melaporkan Core Web Vitals situs.
Namun, CrUX memiliki batasan. Pemantauan black-box sering kali dapat memberi tahu Anda kapan ada masalah, tetapi sering kali tidak memiliki data yang cukup untuk memberi tahu Anda mengapa masalah tersebut terjadi.
Mengumpulkan 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 lapangan dari pengunjung situs Anda. Cara melakukannya bergantung pada ukuran organisasi Anda, dan apakah Anda ingin membayar solusi pihak ketiga atau membuat solusi sendiri.
Solusi berbayar hampir pasti akan mengukur Core Web Vitals (dan metrik performa lainnya) dan biasanya menyediakan berbagai alat untuk menggali data yang dihasilkan. Di organisasi besar dengan resource yang signifikan, metode ini mungkin lebih disukai.
Namun, Anda mungkin bukan bagian dari organisasi besar—atau bahkan organisasi yang mampu membeli solusi pihak ketiga. Dalam kasus ini, library web-vitals Google akan membantu Anda mengumpulkan semua Web Vitals. Namun, Anda akan bertanggung jawab atas cara data tersebut dilaporkan, disimpan, dan dianalisis.
Jika Anda sudah menggunakan Google Analytics, tetapi belum mulai mengumpulkan data lapangan Anda sendiri, Anda dapat menggunakan library web-vitals untuk mengirim Web Vitals yang dikumpulkan di lapangan ke Google Analytics dan menggunakan BigQuery Export GA4 untuk melaporkan data tersebut.
Memahami alat Google
Terlepas dari apakah Anda mengumpulkan data lapangan sendiri atau tidak, 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 mungkin tidak—paling cocok untuk Anda.
Chrome User Experience Report (CrUX)
Seperti yang disebutkan sebelumnya, CrUX adalah set data publik dari data lapangan yang dikumpulkan dari segmen pengguna Google Chrome sungguhan 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 origin, atau sebagai API harian di tingkat URL atau origin, asalkan URL atau origin memiliki cukup sampel 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 pengguna Chrome, sebaiknya bandingkan data kolom situs Anda untuk melihat kesesuaiannya dengan data CrUX. Setiap pendekatan memiliki kelebihan dan kekurangan, yang dapat menyebabkan perbedaan. Jika Anda tidak mengumpulkan data lapangan apa pun untuk situs Anda, CrUX sangat berguna untuk memberikan ringkasan tingkat tinggi—asalkan situs Anda direpresentasikan dalam set datanya.
Anda dapat menggunakan CrUX secara langsung, atau menggunakan alat lain (termasuk yang disebutkan di bawah). Menggunakan 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 mewakili pengguna Chrome, dan bahkan, hanya sebagian pengguna Chrome. Solusi RUM lengkap dapat mencakup lebih banyak pengalaman di Chrome dan browser lain yang mendukung metrik Web Vital.
Situs yang tidak menerima cukup traffic tidak direpresentasikan dalam set data CrUX. Jika demikian, Anda harus mengumpulkan data kolom sendiri untuk memahami performa situs Anda di lapangan, 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 diberikan CrUX adalah rata-rata penggiliran selama 28 hari sebelumnya, CrUX bukanlah alat yang ideal selama pengembangan, karena perlu waktu yang cukup lama agar peningkatan tercermin dalam set data CrUX.
Terakhir, sebagai set data publik, CrUX dibatasi dalam hal jumlah informasi yang dapat disediakan, dan cara data ini dapat dikueri. Dengan mengambil data RUM sendiri, Anda dapat mengumpulkan lebih banyak detail (misalnya, elemen LCP), dan menyegmentasikan data lebih lanjut untuk mengidentifikasi masalah. Apakah pengguna yang login mengalami Core Web Vitals 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 lapangan dari CrUX dan lab dari Lighthouse untuk halaman tertentu. Lihat masing-masing bagian tersebut untuk mengetahui detail selengkapnya.
Kapan harus menggunakan PSI
PSI sangat cocok untuk menilai performa CrUX di tingkat halaman atau tingkat origin, baik untuk pengguna seluler maupun desktop. Alat ini adalah pilihan yang baik untuk ringkasan awal Core Web Vitals untuk halaman atau situs. Alat ini juga memungkinkan Anda melihat data Core Web Vitals untuk situs lain seperti pesaing.
PSI juga menyediakan data Lighthouse, yang memberikan rekomendasi berguna untuk meningkatkan Core Web Vitals Anda—jika metriknya selaras. Jika tidak selaras, rekomendasi Lighthouse mungkin kurang relevan.
Karena dijalankan dari server, Lighthouse dapat membentuk dasar pengukuran yang lebih konsisten daripada menjalankan Lighthouse dari DevTools.
Kapan PSI tidak boleh digunakan
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 nilai minimum popularitas situs. PSI kurang berguna jika data CrUX tidak tersedia untuk halaman atau origin karena hanya dapat menampilkan data lab Lighthouse dalam kasus ini.
Demikian pula, jika Anda hanya memiliki data CrUX tingkat origin, bukan URL spesifik yang diuji, hal ini juga membatasi kegunaannya dalam menghubungkan data kolom tingkat origin dengan diagnostik lab tingkat halaman. Memiliki data lapangan tingkat origin masih merupakan informasi yang sangat berguna untuk dimiliki sebagai ringkasan performa situs dan audit Lighthouse dapat membantu, tetapi perlu ekstra hati-hati dalam kasus ini.
Terakhir, jika data tingkat halaman tersedia di CrUX, tetapi berbeda dengan data lab Lighthouse, rekomendasi dari Lighthouse mungkin memiliki nilai yang terbatas. Hal ini dapat terjadi terutama untuk masalah CLS pasca-pemuatan, dan untuk Core Web Vitals interaktivitas (FID dan INP) yang audit berbasis labnya kurang berguna.
Search Console
Search Console mengukur traffic dan performa penelusuran situs Anda, termasuk Core Web Vitals. Fitur ini hanya tersedia untuk pemilik situs yang telah mengonfirmasi kepemilikan situs mereka.
Fitur Search Console yang berharga adalah mengelompokkan halaman yang serupa (misalnya, halaman yang menggunakan template yang sama) ke dalam satu penilaian grup. 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 non-developer dalam menilai performa penelusuran dan performa halaman dengan cara yang tidak dimiliki alat Google lainnya. Presentasi data CrUX dan pengelompokan halaman berdasarkan kesamaan memberikan insight baru tentang pengaruh peningkatan performa terhadap seluruh kategori halaman.
Kapan tidak menggunakan Search Console
Search Console mungkin tidak cocok untuk project yang menggunakan alat pihak ketiga yang berbeda yang mengelompokkan halaman berdasarkan kesamaan, atau jika situs tidak direpresentasikan dalam set data CrUX.
Pengelompokan halaman juga dapat membingungkan jika halaman contoh dalam grup memiliki karakteristik yang berbeda dari halaman lainnya dalam grup—misalnya, jika grup tersebut gagal dalam Core Web Vitals tertentu secara keseluruhan, tetapi semua halaman contoh tampaknya lulus Core Web Vitals yang sama. Hal ini dapat terjadi jika grup berisi halaman longtail atau halaman yang jarang dikunjungi yang mungkin lebih lambat dimuat, karena halaman tersebut cenderung tidak di-cache. Jika ada volume halaman yang memadai di longtail, halaman tersebut dapat memengaruhi rasio kelulusan grup secara keseluruhan.
Mercusuar
Lighthouse adalah alat lab yang memberikan peluang spesifik untuk meningkatkan performa halaman. Alur penggunaan 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. Lighthouse CI menyajikan laporan Lighthouse beserta permintaan pull, dan melacak metrik performa dari waktu ke waktu.
Kapan harus menggunakan Lighthouse
Lighthouse sangat cocok 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, yang memerlukan pengujian regresi performa untuk mempertahankan pengalaman pengguna yang baik.
Kapan tidak menggunakan Lighthouse
Lighthouse (atau Lighthouse CI) bukan pengganti data lapangan. Lighthouse utamanya adalah alat diagnostik yang mencantumkan potensi masalah dan praktik terbaik dari pemuatan halaman yang telah ditentukan. 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 continuous integration untuk mengatasi masalah performa sebelum mencapai produksi.
Audit yang disediakan Lighthouse juga tersedia melalui "insight" di panel Performa di Chrome DevTools, yang memberikan analisis yang lebih mendalam tentang performa halaman.
Panel Performa di Chrome DevTools
Chrome DevTools adalah kumpulan alat developer dalam browser, termasuk panel Performa. Panel Performa adalah alat lab yang terdiri dari dua "mode":
Saat panel Performa pertama kali dibuka, layar Metrik Live akan menampilkan metrik Core Web Vitals saat ini, dengan kemampuan untuk mengimpor data lapangan dari CrUX. Alat 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 mengambil profil (atau rekaman aktivitas) dari semua aktivitas halaman selama pemuatan halaman atau jangka waktu yang dicatat. Tampilan ini menawarkan insight mendalam tentang semua hal yang diamati di berbagai dimensi seperti aktivitas jaringan, rendering, painting, dan pembuatan skrip, serta Core Web Vitals halaman. Alat ini juga menyertakan insight, yang mirip dengan yang disediakan oleh Lighthouse.
Kapan harus menggunakan panel Performa
Panel Performa harus digunakan oleh developer untuk mendapatkan insight mendalam tentang performa halaman tertentu.
Tampilan metrik live dapat digunakan untuk memahami karakteristik performa halaman saat ini dengan cepat, 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 dengan 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, stack panggilan JavaScript, hingga pekerjaan rendering.
Kapan tidak menggunakan panel Performa
Panel Performa adalah alat developer yang utamanya menyediakan data lab, meskipun dengan beberapa konteks lapangan dari CrUX. Data lab bukan pengganti data lapangan.
Tampilan rekaman aktivitas berisi banyak informasi proses debug, tetapi karena itu, tampilan ini dapat sulit dipahami oleh developer pemula atau mereka yang tidak berperan sebagai 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 Core Web Vitals situs Anda tetap baik
Saat berupaya meningkatkan pengalaman pengguna, sebaiknya anggap proses ini sebagai siklus yang berkelanjutan. Untuk meningkatkan Core Web Vitals dan metrik performa lainnya, salah satu pendekatannya adalah:
- Mengevaluasi kondisi situs dan mengidentifikasi poin masalah.
- Melakukan debug dan mengoptimalkan.
- Pantau dengan alat continuous integration untuk mendeteksi dan mencegah regresi.
Langkah 1: Evaluasi kondisi situs dan identifikasi peluang peningkatan
Sebaiknya mulai dengan data lapangan untuk mengevaluasi kondisi situs.
- Gunakan PageSpeed Insights untuk melihat metrik pengalaman Core Web Vitals secara keseluruhan di origin, dan informasi spesifik tentang setiap URL.
- Search Console dapat berguna untuk mengidentifikasi halaman yang perlu ditingkatkan kualitasnya jika fitur pengelompokan halamannya berfungsi dengan baik untuk situs Anda.
- Jika Anda memiliki data RUM, data tersebut sering kali merupakan opsi terbaik untuk dapat 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 direpresentasikan 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, pengalaman tersebut dianggap "baik".
Jika Anda memiliki halaman tertentu yang ingin dilihat performanya, gunakan halaman tersebut. Untuk mendapatkan gambaran keseluruhan situs saat Anda pertama kali memulai pengoptimalan, sebaiknya mulai dengan halaman beranda, karena biasanya halaman ini merupakan salah satu halaman paling populer di banyak situs.
Fokuskan perhatian pada bagian pengalaman pengguna sebenarnya di PSI terlebih dahulu. Anda akan melihat hingga empat tampilan data: seluler dan desktop untuk URL yang dimasukkan dan seluruh origin. Bandingkan dan lihat perbedaannya. Perangkat seluler biasanya kurang berperforma dibandingkan desktop karena merupakan perangkat yang lebih terbatas resource-nya dan beroperasi dalam kondisi jaringan yang berpotensi kurang stabil. Jika data URL dan origin berbeda secara signifikan, coba pahami alasannya: halaman beranda sering kali merupakan halaman pertama yang dikunjungi (yaitu, halaman landing) sehingga dapat lebih lambat daripada origin karena pengguna merasakan dampak penuh dari cache browser yang tidak dipersiapkan. Halaman berikutnya kemungkinan akan dimuat lebih cepat, karena aset bersama akan di-cache, sehingga menurunkan data tingkat origin gabungan.
PSI juga menampilkan ketiga Core Web Vitals (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 fokus utama yang harus Anda prioritaskan.
Pahami hubungan antara angka-angka ini—terutama untuk LCP. Jika LCP lambat, seperti dalam contoh ini, lihat TTFB dan FCP yang keduanya merupakan tonggak pencapaian untuk metrik tersebut. Dalam contoh ini, kita memiliki TTFB 1,8 detik, yang akan membuatnya sangat sulit untuk memenuhi nilai minimum yang direkomendasikan sebesar 2,5 detik untuk LCP yang baik. Hal ini menunjukkan backend yang lambat (masalah server atau kurangnya CDN), jaringan yang lebih lambat, atau pengalihan yang menunda byte HTML pertama. Lihat panduan Mengoptimalkan TTFB untuk mengetahui informasi selengkapnya. FCP memerlukan waktu satu detik lagi, yang mungkin mengindikasikan jaringan yang lebih lambat. LCP tidak lama setelah FCP dalam contoh ini, yang menunjukkan bahwa resource LCP dioptimalkan dengan baik setelah halaman dimuat. CrUX kini juga menampilkan lebih banyak informasi diagnostik dalam jenis resource dan subbagian, yang juga membantu Anda mendiagnosis masalah LCP.
Untuk CLS, lihat skor CLS CrUX dan CLS Lighthouse untuk mengetahui apakah ini masalah CLS pemuatan (yang akan dideteksi dan disarankan oleh Lighthouse), atau masalah CLS pascapemuatan yang tidak akan dideteksi oleh Lighthouse. Untuk informasi selengkapnya, lihat panduan Mengoptimalkan CLS.
Untuk responsivitas, lihat skor INP. Lihat audit TBT di Lighthouse untuk mengetahui 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 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 mengidentifikasinya dengan baik.
Laporan Core Web Vitals di Search Console menampilkan gambaran umum performa situs Anda, tetapi Anda masih dapat melihat perincian halaman tertentu yang perlu diperhatikan. Dengan Search Console, Anda juga dapat:
- Identifikasi setiap grup halaman 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 yang serupa (seperti halaman detail produk di situs e-commerce).
- Dapatkan laporan mendetail yang mengelompokkan URL dalam setiap kategori kualitas pengalaman pengguna untuk perangkat seluler dan desktop.
Setelah memiliki beberapa halaman tertentu untuk dilihat, Anda dapat menggunakan PSI seperti yang dijelaskan sebelumnya untuk mengumpulkan pemahaman lebih lanjut tentang masalah pada halaman tersebut.
Langkah 2: Lakukan debug dan optimalkan
Pada langkah 1, Anda seharusnya telah mengidentifikasi halaman yang memerlukan peningkatan performa, dan juga metrik Core Web Vitals yang ingin Anda tingkatkan. Anda dapat menggunakan alat Google untuk mendapatkan informasi lebih lanjut guna memahami akar masalah dan mengidentifikasi masalahnya.
- Lihat audit Lighthouse untuk mendapatkan panduan umum untuk halaman
- Gunakan tampilan metrik live panel Performa untuk menganalisis Core Web Vitals 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 (dibahas selanjutnya) adalah alat yang lebih komprehensif untuk mengidentifikasi dan memperbaiki masalah performa secara lokal.
Poin utamanya adalah memvalidasi bahwa audit Lighthouse mereplikasi masalah yang ingin Anda selesaikan (misalnya, masalah LCP atau CLS yang lambat). 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 yang serupa dengan masalah yang Anda coba selesaikan, banyaknya informasi dalam auditnya dapat membantu mengidentifikasi masalah dan menyarankan solusi.
Anda dapat memfilter audit hanya ke Core Web Vitals yang Anda minati untuk 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 memiliki keterbatasan dalam hal seberapa banyak masalah yang dapat didiagnosis.
Menganalisis secara real time dengan layar metrik live Chrome DevTools
Layar metrik live Chrome DevTools di panel Performa menampilkan Core Web Vitals secara real time selama pemuatan halaman dan saat menjelajahi halaman. Oleh karena itu, alat ini dapat menangkap INP serta pergeseran tata letak yang terjadi setelah pemuatan. Anda juga dapat melihat informasi yang lebih mendetail tentang setiap metrik:
Tampilan ini memberikan banyak informasi yang berguna untuk membantu mengidentifikasi masalah performa, dan bahkan dapat menarik informasi kolom dari CrUX. Untuk informasi selengkapnya, Anda dapat melihat perincian dengan pelacakan.
Melihat perincian dengan panel Performa
Panel Performa di Chrome DevTools memungkinkan Anda merekam profil (atau rekaman aktivitas) dari semua perilaku halaman selama jangka waktu yang direkam.
Insight performa tersedia di panel samping Insight. Tindakan ini juga menampilkan metrik Core Web Vitals beserta nilai kolomnya jika tersedia.
Trek Pergeseran Tata Letak menandai pergeseran tata letak dan mengkliknya akan memberikan detail selengkapnya tentang elemen yang bergeser untuk proses debug CLS.
Waktu utama—seperti LCP—ditampilkan di Timings yang tersedia di bagian bawah rekaman aktivitas. Klik ini untuk mengetahui detail selengkapnya.
Tugas Berdurasi Lama (yang dapat menyebabkan masalah INP) juga ditandai dengan segitiga merah di flame chart.
Fitur ini—serta informasi di bagian lain panel Performa—dapat membantu Anda menentukan apakah perbaikan berpengaruh pada Core Web Vitals halaman.
Men-debug Core Web Vitals di lapangan
Alat lab tidak selalu dapat mengidentifikasi penyebab semua masalah Core Web Vitals yang memengaruhi pengguna Anda. Inilah salah satu alasan mengapa mengumpulkan data lapangan Anda sendiri sangat penting, karena data lapangan memperhitungkan faktor-faktor yang tidak dapat diperhitungkan 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 Core Web Vitals Anda. Hal ini memerlukan pemantauan masalah performa sebagai bagian dari alur kerja developer untuk mencegah masalah performa dirilis ke produksi, dan memantau data lapangan 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 masuk ke kode. Alat ini dapat memeriksa pengaturan waktu performa (yang dapat bervariasi), atau hanya untuk audit performa, sebagai alat linting untuk mencegah praktik buruk dalam kode.
Melihat tren kondisi situs dengan data lapangan
Meskipun Anda harus berupaya menemukan dan memperbaiki semua masalah performa sebelum masuk ke tahap produksi, memantau data lapangan menggunakan RUM sangat penting untuk menemukan masalah yang terlewat. Ada banyak produk RUM komersial yang tersedia yang dapat membantu hal ini. Library JavaScript web-vitals dapat mengotomatiskan pengumpulan data lapangan 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
Memastikan pengalaman pengguna yang cepat dan menyenangkan memerlukan pola pikir yang mengutamakan performa dan penerapan 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 batas yang ditentukan untuk Core Web Vitals yang baik.