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 kehidupan nyata pengguna.
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 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 "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 {i>dataset<i} publik yang dikumpulkan dari pengguna Chrome aktual. 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 kolom 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. 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 hal ini, library web-vitals Google akan membantu Anda mengumpulkan semua Data 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, mungkin ada peluang bagi Anda untuk menggunakan library web-vitals guna mengirim Web Vitals yang dikumpulkan di kolom ke Google Analytics dan menggunakan ekspor BigQuery 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 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. Hal 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 BigQuery juga dapat dilihat di Dasbor CrUX yang memungkinkan situs meninjau tren historis untuk situs mereka.
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, CrUX sangat bermanfaat untuk memberikan ringkasan umum—asalkan situs Anda diwakili 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.
Jangan 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 bergantung pada data lab, tetapi dengan batasan data tersebut mungkin tidak representatif seperti yang telah dijelaskan sebelumnya.
Karena data yang disediakan CrUX adalah rata-rata penggiliran selama 28 hari sebelumnya, ini bukan alat yang ideal selama pengembangan, karena akan perlu waktu yang cukup lama agar peningkatan dapat 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 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 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 selaras, rekomendasi Lighthouse mungkin kurang relevan.
Karena Lighthouse dijalankan dari server, maka 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 pada 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 dan bukan URL spesifik yang sedang diuji, hal ini juga membatasi kegunaannya menghubungkan data kolom tingkat origin dengan 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 Data Web Inti interaktivitas (FID dan INP) jika audit berbasis lab kurang berguna.
Search Console
Search Console mengukur traffic dan performa penelusuran situs Anda, termasuk Data Web Inti. Opsi ini hanya tersedia bagi 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 oleh alat Google lainnya. Presentasi data CrUX dan pengelompokan halaman berdasarkan kemiripan menawarkan wawasan baru tentang bagaimana peningkatan kinerja memengaruhi 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 memenuhi Core Web Vitals tertentu secara keseluruhan, tetapi halaman contoh semuanya tampaknya memenuhi 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 long tail 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, sebaiknya Lighthouse digunakan di lingkungan pengembangan dan integrasi berkelanjutan untuk mengatasi masalah performa sebelum mencapai produksi.
Panel Performa di Chrome DevTools
Chrome DevTools adalah kumpulan alat pengembangan dalam browser, termasuk panel Performance. 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 pelacakan) semua aktivitas halaman selama pemuatan halaman atau jangka waktu yang dicatat. Tampilan ini menawarkan insight mendalam tentang semua yang diamatinya di berbagai dimensi seperti aktivitas jaringan, rendering, proses menggambar, dan pembuatan skrip, serta Core Web Vitals sebuah halaman.
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 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 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 langsung yang dibuka panel tersebut mengatasi masalah 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:
- Mengevaluasi kesehatan situs dan mengidentifikasi poin masalah.
- Melakukan debug dan pengoptimalan.
- Pantau dengan alat continuous integration untuk mendeteksi dan mencegah regresi.
Langkah 1: Evaluasi kondisi situs dan identifikasi peluang peningkatan
Langkah terbaik adalah memulai dengan data lapangan untuk mengevaluasi kondisi situs.
- Gunakan PageSpeed Insights untuk melihat keseluruhan metrik pengalaman Core Web Vitals di asal, dan informasi spesifik terkait 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 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.
Pada awalnya, berkonsentrasilah pada bagian pengalaman pengguna Anda yang sebenarnya di PSI. 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 data URL dan origin sangat berbeda, coba pahami alasannya: halaman beranda sering kali merupakan halaman yang pertama kali dikunjungi (yaitu halaman landing), sehingga bisa jadi lebih lambat dibandingkan dengan pengguna asal yang membebani sepenuhnya cache browser yang tidak diprima. 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 di antara Data Web Inti yang gagal, dan seberapa banyak? Hal ini akan menunjukkan di mana Anda harus memusatkan upaya.
Pahami hubungan antara angka-angka ini—terutama untuk LCP. Jika LCP lambat, seperti dalam contoh ini, lihat TTFB dan FCP yang keduanya merupakan pencapaian untuk metrik tersebut. Dalam contoh ini, kami memiliki TTFB 1,8 detik, yang akan membuatnya sangat sulit untuk memenuhi ambang batas yang direkomendasikan 2,5 detik untuk LCP yang baik. Hal ini menunjukkan backend yang lambat (masalah server atau kekurangan CDN), jaringan yang lebih lambat, atau pengalihan yang menunda byte HTML pertama. Lihat Panduan mengoptimalkan TTFB untuk mengetahui informasi selengkapnya. FCP mengambil satu detik lagi, yang mungkin merupakan indikasi jaringan yang lebih lambat. LCP tidak lama setelah FCP dalam contoh ini, yang menunjukkan bahwa resource LCP dioptimalkan dengan baik setelah halaman dimuat.
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 bisa menjadi metrik yang sulit untuk ditingkatkan, jadi baca panduan Mengoptimalkan INP untuk mengetahui informasi selengkapnya.
Mengidentifikasi halaman 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 mengenai URL bucket di setiap kategori kualitas pengalaman pengguna untuk 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 penyebab untuk mengidentifikasi masalah.
- Jalankan audit Lighthouse untuk mendapatkan panduan tingkat 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 ini:
Menemukan peluang dengan Lighthouse
PageSpeed Insights menjalankan Lighthouse untuk Anda, tetapi untuk pengembangan lokal, Anda juga dapat menjalankan Lighthouse dari Chrome DevTools, yang berguna untuk memvalidasi perbaikan 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.
Ketika metrik Lighthouse menyarankan masalah serupa dengan yang sedang Anda coba selesaikan, banyak 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:
Meskipun tampilan ini memberikan banyak informasi bermanfaat untuk membantu mengidentifikasi masalah performa, 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 dicatat.
Waktu utama—seperti LCP, misalnya—ditampilkan di jalur Waktu. Klik link ini untuk mengetahui detail selengkapnya.
Jalur Pergeseran Tata Letak menyoroti pergeseran tata letak dan mengkliknya akan memberikan detail selengkapnya tentang elemen yang bergeser untuk proses debug CLS.
Tugas Panjang (yang dapat menyebabkan masalah INP) juga ditandai dengan segitiga merah.
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 apa pun, sebaiknya pastikan masalah tersebut memiliki 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 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 jika perlu, menggunakan data ini untuk mendukung dasbor kustom dan sistem peringatan.
Untuk situs tanpa solusi RUM, Anda dapat menggunakan Dasbor CrUX sebagai analisis tren dasar data lapangan. Laporan ini melaporkan hal berikut untuk situs di CrUX:
- Ringkasan situs, yang menyegmentasikan Data Web Inti ke dalam jenis perangkat desktop dan seluler.
- Tren historis menurut jenis metrik, yang merupakan distribusi metrik dari waktu ke waktu untuk setiap rilis bulanan data laporan CrUX yang tersedia.
- Demografi pengguna, yang menggambarkan distribusi kunjungan halaman di seluruh origin untuk pengguna di setiap demografi, termasuk jenis perangkat dan koneksi efektif.
Dasbor CrUX didasarkan pada set data BigQuery CrUX, yang diperbarui sebulan sekali. Hal ini dapat menjadi pengingat yang baik untuk memeriksa Core Web Vitals Anda secara rutin.
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 Core Web Vitals yang baik.