Alat developer favorit Anda kini dapat mengukur Data Web Inti.
Inisiatif Data Web yang baru-baru ini diumumkan memberikan panduan terpadu tentang sinyal kualitas yang penting untuk semua situs agar dapat memberikan pengalaman pengguna yang luar biasa di web. Dengan senang hati kami umumkan bahwa semua alat populer Google untuk developer web kini mendukung pengukuran Data Web Inti, sehingga membantu Anda mendiagnosis dan memperbaiki masalah pengalaman pengguna dengan lebih mudah. Hal ini mencakup Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, alat ukur web.dev, ekstensi Chrome Data Web dan API (!) Chrome UX Report baru.
Karena Google Penelusuran kini menyertakan Data Web Inti sebagai dasar untuk mengevaluasi pengalaman halaman, metrik ini harus tersedia dan dapat ditindaklanjuti semaksimal mungkin.
Untuk memulai perjalanan Anda dalam mengoptimalkan pengalaman pengguna dengan Data Web Inti, coba alur kerja berikut:
- Menggunakan laporan Data Web Inti baru di Search Console untuk mengidentifikasi grup halaman yang perlu diperhatikan (berdasarkan data lapangan).
- Setelah Anda mengidentifikasi halaman yang perlu diperbaiki, gunakan PageSpeed Insights (didukung oleh Lighthouse dan Chrome UX Report) untuk mendiagnosis masalah lab dan kolom pada halaman. PageSpeed Insights (PSI) tersedia melalui Search Console atau Anda dapat memasukkan URL di PSI secara langsung.
- Siap untuk mengoptimalkan situs Anda secara lokal di lab? Gunakan Lighthouse dan Chrome DevTools untuk mengukur Data Web Inti dan mendapatkan panduan yang dapat ditindaklanjuti tentang apa yang harus diperbaiki. Ekstensi Chrome Data Web dapat memberi Anda tampilan metrik secara real-time di desktop.
- Perlu dasbor kustom Core Web Vitals? Gunakan Dasbor CrUX yang diperbarui atau Chrome UX Report API baru untuk data lapangan atau PageSpeed Insights API untuk data lab.
- Mencari panduan? web.dev/measure dapat mengukur halaman Anda dan menunjukkan kepada Anda serangkaian panduan dan codelab yang diprioritaskan untuk pengoptimalan, menggunakan data PSI.
- Terakhir, gunakan Lighthouse CI pada permintaan pull untuk memastikan tidak ada regresi dalam Data Web Inti sebelum men-deploy perubahan ke produksi.
Dengan pengantar tersebut, mari kita pelajari pembaruan spesifik untuk setiap alat.
Mercusuar
Lighthouse adalah alat audit situs otomatis yang membantu developer mendiagnosis masalah dan mengidentifikasi peluang untuk meningkatkan pengalaman pengguna di situs mereka. Alat ini mengukur berbagai dimensi kualitas pengalaman pengguna di lingkungan lab, termasuk performa dan aksesibilitas. Versi terbaru Lighthouse (6.0, dirilis pertengahan Mei 2020) mencakup audit tambahan, metrik baru, dan skor performa yang baru disusun.
Lighthouse 6.0 memperkenalkan tiga metrik baru pada laporan tersebut. Dua dari metrik baru ini—Largest Contentful Paint (LCP) dan Cumulative Layout Shift (CLS)—merupakan penerapan lab Core Web Vitals dan memberikan informasi diagnostik penting untuk mengoptimalkan pengalaman pengguna. Mengingat pentingnya menilai pengalaman pengguna, metrik baru tidak hanya diukur dan disertakan dalam laporan, metrik baru juga diperhitungkan dalam penghitungan skor performa.
Metrik baru ketiga yang disertakan di Lighthouse—Total Blocking Time (TBT)—berkaitan baik dengan metrik kolom First Input Delay (FID), metrik Data Web Inti lainnya. Mengikuti rekomendasi yang diberikan dalam laporan Lighthouse dan mengoptimalkan skor Anda akan menyiapkan Anda untuk memberikan pengalaman terbaik kepada pengguna.
Semua produk yang didukung Lighthouse diupdate untuk mencerminkan versi terbaru, termasuk Lighthouse CI yang memungkinkan Anda mengukur Data Web Inti dengan mudah pada permintaan pull sebelum digabungkan dan di-deploy.
Untuk mempelajari lebih lanjut update terbaru pada Lighthouse, lihat postingan blog What's New in Lighthouse 6.0 kami.
PageSpeed Insights
PageSpeed Insights (PSI) melaporkan performa lab dan kolom halaman di perangkat seluler dan desktop. Alat ini memberikan ringkasan tentang pengalaman pengguna di dunia nyata (dengan teknologi Laporan UX Chrome) dan serangkaian rekomendasi yang dapat ditindaklanjuti tentang cara pemilik situs meningkatkan pengalaman halaman (disediakan oleh Lighthouse).
PageSpeed Insights dan PageSpeed Insights API juga telah diupgrade untuk menggunakan Lighthouse 6.0 pada prinsipnya dan kini mendukung pengukuran Data Web Inti di bagian lab dan kolom laporan. Data Web Inti dianotasi dengan pita biru seperti yang ditunjukkan di bawah.
Meskipun Search Console memberikan ringkasan bagus tentang grup halaman yang perlu diperhatikan kepada pemilik situs, PSI membantu mengidentifikasi peluang per halaman untuk meningkatkan pengalaman halaman. Di PSI, Anda dapat melihat dengan jelas apakah halaman Anda memenuhi nilai minimum untuk pengalaman yang baik di semua Data Web Inti atau tidak di bagian atas laporan, yang ditunjukkan dengan lulus penilaian Data Web Inti atau tidak lulus penilaian Data Web Inti.
CrUX
Chrome UX Report (CrUX) adalah set data publik dari data pengalaman pengguna yang sebenarnya di jutaan situs. Alat ini mengukur versi lapangan dari semua Data Web Inti. Tidak seperti data lab, data CrUX berasal dari pengguna yang ikut serta di lapangan. Dengan menggunakan data ini, pengembang dapat memahami distribusi pengalaman pengguna dunia nyata di situs web mereka sendiri atau bahkan situs web pesaing. Meskipun tidak ada RUM di situs Anda, CrUX dapat memberikan cara yang cepat dan mudah untuk menilai Data Web Inti Anda. Set data CrUX di BigQuery mencakup data performa terperinci untuk semua Data Web Inti dan tersedia dalam ringkasan bulanan di tingkat asal.
Satu-satunya cara untuk mengetahui performa situs bagi pengguna adalah dengan benar-benar mengukur performanya di lapangan saat pengguna tersebut memuat dan berinteraksi dengan situs. Jenis pengukuran ini umumnya disebut sebagai Pemantauan Pengguna Asli—atau disingkat RUM. Meskipun tidak ada RUM di situs Anda, CrUX dapat memberikan cara yang cepat dan mudah untuk menilai Data Web Inti Anda.
Memperkenalkan CrUX API
Hari ini, dengan senang hati kami umumkan CrUX API, cara cepat dan gratis untuk mengintegrasikan alur kerja pengembangan Anda dengan mudah dengan pengukuran kualitas tingkat URL dan origin untuk metrik kolom berikut:
- Largest Contentful Paint (LCP)
- Pergeseran Tata Letak Kumulatif (CLS)
- Penundaan Input Pertama
- First Contentful Paint (LCP)
Developer dapat membuat kueri untuk origin atau URL dan menyegmentasikan hasil menurut faktor bentuk yang berbeda-beda. API diperbarui setiap hari dan merangkum data dari 28 hari sebelumnya (tidak seperti set data BigQuery, yang digabungkan setiap bulan). API ini juga memiliki kuota API publik longgar yang sama seperti yang kami tempatkan di API kami yang lain, PageSpeed Insights API (25.000 permintaan per hari).
Berikut adalah demo yang menggunakan CrUX API untuk memvisualisasikan metrik Data Web Inti dengan distribusi untuk baik, perlu peningkatan, dan buruk:
Dalam rilis mendatang, kami berencana memperluas API untuk memungkinkan akses ke dimensi dan metrik set data CrUX tambahan.
Dasbor CrUX yang Diperbarui
Dasbor CrUX yang baru didesain ulang memungkinkan Anda melacak performa origin dari waktu ke waktu dengan mudah, dan sekarang Anda dapat menggunakannya untuk memantau distribusi semua metrik Data Web Inti. Untuk memulai dasbor, lihat tutorial kami di web.dev.
Kami telah memperkenalkan halaman landing Data Web Inti baru untuk semakin mempermudah Anda melihat performa situs secara sekilas. Kami menantikan masukan Anda terkait semua alat CrUX. Untuk menyampaikan pendapat dan pertanyaan Anda, hubungi kami melalui akun Twitter @ChromeUXReport atau Google Group.
Panel Performa Chrome DevTools
Men-debug peristiwa Pergeseran Tata Letak di bagian Pengalaman
Panel Performa Chrome DevTools memiliki bagian Pengalaman baru yang dapat membantu Anda mendeteksi pergeseran tata letak yang tidak terduga. Fitur ini berguna untuk menemukan dan memperbaiki masalah ketidakstabilan visual pada halaman yang menyebabkan Pergeseran Tata Letak Kumulatif.
Pilih Pergeseran Tata Letak untuk melihat detailnya di tab Ringkasan. Untuk memvisualisasikan tempat terjadinya perpindahan tersebut, arahkan kursor ke kolom Dipindahkan dari dan Dipindahkan ke.
Men-debug kesiapan interaksi dengan Total Waktu Pemblokiran di footer
Metrik Total Blocking Time (TBT) dapat diukur di alat lab dan merupakan proxy yang sangat tepat untuk Penundaan Input Pertama. TBT mengukur jumlah total waktu antara First Contentful Paint (FCP) dan Time to Interactive (TTI) tempat thread utama diblokir cukup lama untuk mencegah responsivitas input. Pengoptimalan performa yang meningkatkan TBT di lab harus meningkatkan FID di lapangan.
TBT kini ditampilkan di footer panel Performance Chrome DevTools saat Anda mengukur performa halaman:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Performa.
- Klik Record.
- Muat ulang halaman secara manual.
- Tunggu hingga halaman dimuat, lalu hentikan perekaman.
Untuk informasi selengkapnya, lihat Yang Baru di DevTools (Chrome 84).
Search Console
Laporan Data Web Inti baru di Search Console membantu Anda mengidentifikasi grup halaman di seluruh situs yang perlu diperhatikan, berdasarkan data (bidang) nyata dari CrUX. Performa URL dikelompokkan berdasarkan status, jenis metrik, dan grup URL (grup halaman web serupa).
Laporan ini didasarkan pada tiga metrik Data Web Inti: LCP, FID, dan CLS. Jika URL tidak mencapai jumlah minimum data pelaporan untuk metrik ini, URL tersebut tidak akan disertakan dalam laporan. Coba laporan baru untuk mendapatkan gambaran menyeluruh tentang performa untuk origin Anda.
Setelah mengidentifikasi jenis halaman yang memiliki masalah terkait Data Web Inti, Anda dapat menggunakan PageSpeed Insights untuk mempelajari saran pengoptimalan tertentu untuk halaman representatif.
web.dev
https://pagespeed.web.dev/ memungkinkan Anda mengukur performa halaman dari waktu ke waktu, dengan menyediakan daftar panduan dan codelab yang diprioritaskan tentang cara meningkatkannya. Pengukuran ini didukung oleh PageSpeed Insights. Alat pengukuran kini juga mendukung metrik Data Web Inti, seperti yang ditunjukkan di bawah:
Ekstensi Data Web
Ekstensi Data Web mengukur tiga metrik Data Web Inti secara real time untuk Google Chrome (desktop). Fitur ini berguna untuk menemukan masalah di awal selama alur kerja pengembangan dan sebagai alat diagnostik untuk menilai performa Data Web Inti saat Anda menjelajahi web.
Ekstensi tersebut kini tersedia untuk diinstal dari Chrome Web Store. Semoga hal ini berguna bagi Anda. Kami menyambut baik kontribusi apa pun untuk meningkatkannya serta masukan tentang repositori GitHub project.
Sorotan singkat
Kita telah sampai di akhir materi. Apa yang dapat Anda lakukan selanjutnya:
- Gunakan Lighthouse di DevTools untuk mengoptimalkan pengalaman pengguna dan memastikan Anda menyiapkan diri untuk meraih kesuksesan dengan Data Web Inti di lapangan.
- Gunakan PageSpeed Insights untuk membandingkan performa lab dan Data Web Inti kolom Anda.
- Coba Chrome User Experience Report API baru untuk dengan mudah mengakses seberapa baik performa origin dan URL Anda terhadap Data Web Inti selama 28 hari terakhir.
- Gunakan bagian Experience dan footer di panel Performance DevTools untuk mempelajari secara mendalam dan melakukan debug terhadap Data Web Inti tertentu.
- Gunakan laporan Data Web Inti Search Console untuk mendapatkan ringkasan tentang performa situs asal Anda di lapangan.
- Gunakan Ekstensi Data Web untuk melacak performa halaman terhadap Data Web Inti secara real time.
Kami akan membahas lebih lanjut alat Data Web Inti di web.dev Live pada bulan Juni. Daftar untuk mendapatkan info terbaru tentang acara ini!
~ oleh Elizabeth dan Addy, WebPerf Janitors