Gabungkan alat Google untuk mengaudit, meningkatkan, 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 untuk situs Anda akan dibahas dalam panduan ini, tetapi tempat alur kerja tersebut dimulai bergantung pada apakah Anda mengumpulkan data lapangan sendiri. Titik akhirnya 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—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 sebelumnya 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 simulasi throttling di simulasi lingkungan desktop atau seluler. Meskipun simulasi kondisi jaringan dan perangkat yang lebih lambat tersebut berguna saat mencoba mendiagnosis masalah performa, simulasi ini 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 "cold load" halaman web sebagai pengunjung yang benar-benar baru. Ini sering kali merupakan pemuatan terlambat, 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 mungkin 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 men-debug serta melakukan 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 Data Web Inti melalui Laporan Pengalaman Pengguna Chrome (CrUX). Ini adalah set data publik yang dikumpulkan dari pengguna Chrome yang sebenarnya. Ini adalah tulang punggung dari banyak alat Google dan pihak ketiga yang melaporkan Core Web Vitals situs.
Namun, CrUX memiliki keterbatasan. Fitur ini sering kali dapat memberi tahu Anda kapan ada masalah, tetapi sering kali tidak memiliki data yang memadai untuk memberi tahu Anda alasannya.
Kumpulkan data lapangan Anda sendiri jika memungkinkan
Set data terbaik untuk meningkatkan performa situs di lapangan adalah yang Anda buat. Hal ini dimulai dengan mengumpulkan data kolom dari pengunjung situs Anda. Cara 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) dan biasanya menyediakan berbagai alat untuk mempelajari data yang dihasilkan. Di organisasi besar dengan resource yang signifikan, ini mungkin merupakan metode yang lebih disukai.
Namun, Anda mungkin bukan bagian dari organisasi besar—atau bahkan organisasi yang memiliki kemampuan untuk membeli solusi pihak ketiga. Dalam kasus ini, library web-vitals 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 lapangan sendiri, mungkin ada peluang bagi Anda untuk menggunakan library web-vitals guna mengirim Data Web 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 menetapkan alur kerja, ringkasan umum tentang setiap alat dapat membantu Anda memahami alat mana yang mungkin—atau mungkin tidak—paling cocok untuk Anda.
Laporan Pengalaman Pengguna Chrome (CrUX)
Seperti yang disebutkan sebelumnya, CrUX adalah set data publik dari data kolom yang dikumpulkan dari segmen pengguna Google Chrome yang 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 origin, atau sebagai API harian di tingkat URL atau origin, asalkan URL atau origin memiliki sampel yang cukup dalam set data CrUX. Data CrUX tersedia melalui berbagai alat CrUX untuk akses terprogram dan alat visual untuk digunakan oleh pengguna.
Kapan harus menggunakan CrUX
Meskipun Anda mengumpulkan data kolom sendiri, CrUX tetap berguna. Meskipun CrUX mewakili sebagian pengguna Chrome, sebaiknya bandingkan data kolom situs Anda untuk melihat kesesuaiannya dengan data CrUX. Masing-masing memiliki kelebihan dan kekurangan, yang dapat menghasilkan perbedaan. Jika Anda tidak mengumpulkan data kolom apa pun untuk situs Anda, CrUX sangat berharga untuk memberikan ringkasan tingkat tinggi—asalkan situs Anda terwakili 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 lagi-lagi sering kali tidak ditampilkan di alat lain.
Kapan tidak menggunakan CrUX
CrUX hanya mewakili pengguna Chrome, dan hanya sebagian pengguna Chrome. Solusi RUM lengkap dapat mencakup lebih banyak pengalaman di Chrome dan browser lain yang mendukung metrik Data Web.
Situs yang tidak menerima cukup traffic tidak akan ditampilkan dalam set data CrUX. Jika demikian, Anda harus mengumpulkan data lapangan sendiri untuk memahami performa situs 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 disediakan CrUX adalah rata-rata bergulir selama 28 hari sebelumnya, data ini bukan 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 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 mengelompokkan data lebih lanjut untuk mengidentifikasi masalah. Apakah pengguna yang login mendapatkan 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 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 cocok untuk menilai performa CrUX di tingkat halaman atau tingkat origin, baik untuk pengguna seluler maupun desktop. Ini adalah pilihan yang baik untuk ringkasan awal Data Web Inti untuk halaman atau situs. Laporan ini juga memungkinkan Anda melihat data Data Web Inti untuk situs lain seperti pesaing.
PSI juga menyediakan data Lighthouse, yang memberikan rekomendasi berguna untuk meningkatkan Data Web Inti Anda—jika metriknya sesuai. Jika tidak sesuai, rekomendasi Lighthouse mungkin kurang relevan.
Karena dijalankan dari server, Lighthouse dapat membentuk dasar pengukuran 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 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 tertentu yang sedang diuji, hal ini juga akan membatasi kegunaannya dalam menghubungkan data kolom tingkat origin ke diagnostik lab tingkat halaman. Memiliki data kolom tingkat origin masih merupakan informasi yang sangat berguna sebagai ringkasan performa situs dan audit Lighthouse dapat membantu, tetapi kehati-hatian ekstra harus digunakan dalam hal ini.
Terakhir, jika data tingkat halaman tersedia di CrUX, tetapi berbeda dengan data lab Lighthouse, rekomendasi dari Lighthouse mungkin memiliki nilai terbatas. Hal ini dapat terjadi terutama untuk masalah CLS pasca-muat, dan untuk interaktivitas Core Web Vitals (FID dan INP) saat audit berbasis lab kurang berguna.
Search Console
Search Console mengukur traffic dan performa penelusuran situs Anda, termasuk Data Web Inti. Fitur ini hanya tersedia untuk pemilik situs yang telah mengonfirmasi kepemilikan situs mereka.
Fitur berharga dari Search Console 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 kolom dari CrUX.
Kapan harus menggunakan Search Console
Search Console sangat cocok bagi developer dan non-developer untuk menilai performa penelusuran dan halaman dengan cara yang tidak dapat dilakukan alat Google lainnya. Presentasi data CrUX dan pengelompokan halaman berdasarkan kesamaannya menawarkan insight baru tentang pengaruh peningkatan performa terhadap seluruh kategori halaman.
Kapan tidak menggunakan Search Console
Search Console mungkin tidak cocok untuk project yang menggunakan berbagai alat pihak ketiga yang mengelompokkan halaman berdasarkan kesamaan, atau jika situs tidak ditampilkan 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 gagal dalam Core Web Vitals tertentu secara keseluruhan, tetapi halaman contoh semuanya tampaknya lulus Core Web Vitals yang sama. Hal ini dapat terjadi jika grup berisi halaman long tail atau halaman yang jarang dikunjungi yang mungkin lebih lambat dimuat, karena halaman tersebut cenderung tidak di-cache. Jika volume halaman ini di longtail cukup, 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. Alat ini menampilkan 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, tempat pengujian regresi performa diperlukan untuk mempertahankan pengalaman pengguna yang baik.
Kapan tidak menggunakan Lighthouse
Lighthouse (atau Lighthouse CI) bukan pengganti data kolom. Lighthouse terutama merupakan alat diagnostik yang mencantumkan potensi masalah dan praktik terbaik dari pemuatan halaman yang telah ditentukan. Rekomendasi yang ditampilkannya mungkin tidak selalu cocok 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 pertama kali dibuka, layar Metrik Live akan menampilkan metrik Data Web Inti saat ini, dengan kemampuan untuk mengimpor data lapangan dari CrUX. Metrik ini berguna sebagai tampilan performa "live" saat Anda berinteraksi dengan halaman untuk mencoba menemukan masalah performa—terutama untuk masalah pasca-muat 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 direkam. Tampilan ini menawarkan insight mendalam tentang semua hal yang diamati di seluruh dimensi seperti aktivitas jaringan, rendering, gambar, dan skrip, serta Data Web Inti halaman. Laporan ini juga mencakup insight, 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 dengan cepat memahami karakteristik performa halaman saat ini, dan juga menemukan potensi masalah saat halaman diakses.
Tampilan rekaman aktivitas sangat berguna untuk men-debug masalah responsivitas yang memengaruhi INP. Setelah interaksi yang lambat merespons diidentifikasi dan dapat diulang, panel Performa dapat memberikan banyak data tentang apa yang terjadi di browser untuk membantu memahami masalah, 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. Data ini bukan pengganti data kolom.
Tampilan rekaman aktivitas berisi banyak informasi proses debug, tetapi karena itu, rekaman aktivitas mungkin sulit dipahami oleh developer pemula atau mereka yang memiliki peran non-developer. Namun, tampilan metrik live yang digunakan untuk membuka panel ini mengatasi hal ini dengan menyediakan antarmuka yang lebih mudah digunakan bagi pengguna yang tidak memerlukan detail lengkap.
Alur kerja tiga langkah untuk memastikan Data Web Inti situs Anda tetap sehat
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:
- Evaluasi kondisi situs dan identifikasi titik 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 Data Web Inti secara keseluruhan di origin, dan informasi spesifik di setiap URL.
- Search Console dapat berguna untuk mengidentifikasi halaman yang perlu ditingkatkan kualitasnya dengan fitur pengelompokan halaman yang berfungsi dengan baik untuk situs Anda.
- Jika Anda memiliki data RUM, data tersebut sering kali merupakan opsi terbaik untuk mengidentifikasi halaman atau segmen traffic tertentu yang mengalami masalah.
Baik Anda menganalisis data lapangan yang dikumpulkan sendiri atau data CrUX, langkah pertama ini sangat penting. Jika Anda tidak mengumpulkan data lapangan, data CrUX mungkin sudah cukup untuk memandu Anda—sekali lagi, asalkan situs Anda terwakili 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 pertama kali mulai mengoptimalkan, sebaiknya mulailah dengan halaman beranda, karena biasanya halaman ini merupakan salah satu halaman yang paling populer di banyak situs.
Konsentrasi pada bagian pengalaman pengguna Anda yang sebenarnya di PSI pada awalnya. Anda akan melihat hingga empat tampilan data: seluler dan desktop untuk URL yang dimasukkan dan seluruh origin. Bandingkan keduanya dan lihat perbedaannya. Perangkat seluler biasanya memiliki performa yang lebih rendah daripada desktop karena merupakan perangkat yang lebih terbatas resource-nya dan beroperasi dalam kondisi jaringan yang berpotensi kurang stabil. Jika URL dan data origin berbeda secara signifikan, coba pahami alasannya: halaman beranda sering kali merupakan halaman pertama yang dikunjungi (yaitu halaman landing), sehingga dapat lebih lambat daripada halaman origin karena pengguna menerima beban penuh dari cache browser yang tidak dioptimalkan. Halaman berikutnya kemungkinan akan dimuat lebih cepat, karena aset bersama akan di-cache, sehingga menurunkan data tingkat origin gabungan.
PSI juga menampilkan ketiga metrik Data Web Inti (LCP, CLS, dan INP) serta metrik TTFB dan FCP diagnostik. Apakah ada Core Web Vitals yang gagal, dan seberapa besar kegagalannya? Hal ini akan menunjukkan tempat untuk memusatkan upaya Anda.
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 mempersulit untuk memenuhi nilai minimum 2,5 detik yang direkomendasikan 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 waktu satu detik lagi, yang lagi-lagi dapat menunjukkan 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 dan subbagian resource, yang juga membantu Anda mendiagnosis masalah LCP.
Untuk CLS, lihat skor CLS CrUX dan Lighthouse untuk melihat apakah ini adalah masalah CLS pemuatan (yang akan terdeteksi dan diberi saran oleh Lighthouse), atau masalah CLS pasca-pemuatan yang tidak akan terdeteksi 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 yang terjadi selama pemuatan halaman awal, yang kemungkinan akan memengaruhi INP. INP dapat 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 jika 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 berhasil mengidentifikasinya.
Laporan Core Web Vitals di Search Console menampilkan gambaran besar 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 untuk halaman tersebut.
Langkah 2: Men-debug dan mengoptimalkan
Pada langkah 1, Anda seharusnya telah mengidentifikasi halaman yang memerlukan peningkatan performa, dan juga metrik Data Web Inti yang ingin Anda tingkatkan. Anda dapat menggunakan alat Google untuk mendapatkan informasi lebih lanjut guna memahami akar masalah untuk mengidentifikasi masalah tersebut.
- Lihat audit Lighthouse untuk mendapatkan panduan umum 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. Anda juga dapat menjalankan Lighthouse dari Chrome DevTools, yang berguna untuk memvalidasi perbaikan secara lokal, meskipun Panel Performa (dibahas berikutnya) adalah alat yang lebih komprehensif untuk mengidentifikasi dan memperbaiki masalah performa secara lokal.
Poin utamanya adalah memvalidasi bahwa audit Lighthouse mereplikasi masalah yang Anda coba pecahkan (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 mendukung TBT.
Jika metrik Lighthouse menyarankan masalah yang serupa dengan masalah yang Anda coba pecahkan, berbagai informasi dalam auditnya dapat membantu mengidentifikasi masalah dan menyarankan solusi.
Anda dapat memfilter audit hanya ke Data Web Inti 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 mendiagnosis.
Menganalisis secara real time dengan layar metrik live Chrome DevTools
Layar metrik live Chrome DevTools di panel Performa menampilkan Data Web Inti secara real time selama pemuatan halaman dan saat menjelajahi halaman. Oleh karena itu, INP 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 bermanfaat untuk membantu mengidentifikasi masalah performa, dan bahkan dapat mengambil informasi kolom dari CrUX. Untuk informasi selengkapnya, 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 jangka waktu yang direkam.
Insight performa tersedia di panel samping Insight. Tindakan ini juga akan menampilkan metrik Core Web Vitals beserta nilai kolom untuk metrik tersebut jika tersedia.
Jalur Pergeseran Tata Letak menyoroti pergeseran tata letak dan mengkliknya 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 link ini untuk mengetahui detail selengkapnya.
Tugas Panjang (yang dapat menyebabkan masalah INP) juga ditandai dengan segitiga merah dalam diagram api.
Fitur ini—serta informasi di bagian lain panel Performa—dapat membantu Anda menentukan apakah perbaikan memiliki efek pada Core Web Vitals 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 sangat penting untuk mengumpulkan data lapangan Anda sendiri, karena data lapangan memperhitungkan faktor-faktor yang tidak dapat dilakukan data lab.
Lihat melakukan debug performa di lapangan untuk mengetahui informasi selengkapnya.
Langkah 3: Pantau perubahan
Setelah memperbaiki masalah, Anda ingin memastikan masalah tersebut memiliki efek yang diperlukan dan masalah baru tidak mengganggu Data Web Inti. 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.
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 tunduk pada variabilitas), atau hanya untuk audit performa, sebagai alat linting untuk mencegah praktik buruk dalam kode.
Melihat tren kondisi situs dengan data kolom
Meskipun Anda harus berupaya mendeteksi dan memperbaiki semua masalah performa sebelum masalah tersebut muncul di produksi, memantau data kolom menggunakan RUM sangat penting untuk menemukan masalah yang terlewat. Ada banyak produk RUM komersial yang tersedia dan dapat membantu Anda melakukannya. 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 memerlukan 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 menciptakan pengalaman pengguna yang baik dan tetap berada dalam nilai minimum yang ditentukan untuk Data Web Inti yang baik.