Pelajari fitur terbaru di PageSpeed Insights untuk membantu Anda mengukur dan mengoptimalkan halaman dan kualitas situs dengan lebih baik.
Selama bertahun-tahun, PageSpeed Insights (PSI) telah berkembang menjadi sumber terpadu untuk kolom dan data lab. Alat ini mengintegrasikan informasi dari diagnostik Chrome UX Report (CrUX) dan Lighthouse untuk memberikan insight yang membantu meningkatkan performa situs Anda.
Hari ini, dengan senang hati kami umumkan versi PSI yang telah diupdate! Meskipun merupakan elemen penting dalam rangkaian alat kecepatan kami, code base PSI berusia sepuluh tahun, berisi banyak kode lama, dan harus didesain ulang. Kami menggunakannya sebagai kesempatan untuk mengatasi masalah terkait antarmuka di PSI yang terkadang menyulitkan pengguna untuk membuka laporan. Tujuan utama kami adalah untuk:
- Membuat UI menjadi lebih intuitif dengan membedakan secara jelas antara data yang berasal dari lingkungan sintetis dan data yang dikumpulkan dari pengguna di lapangan.
- Mengkomunikasikan dengan jelas cara penghitungan Data Web Inti di UI.
- Modernkan tampilan dan nuansa PSI dengan memanfaatkan Desain Material.
Postingan ini memperkenalkan fitur baru di PSI yang akan dirilis nanti pada tahun ini.
Apa yang baru?
Desain ulang UI PSI bertujuan meningkatkan penyajian data laporan serta menambahkan kejelasan dan perincian pada data yang tersedia dalam laporan. UI baru ini bertujuan untuk lebih intuitif dan membantu developer menemukan insight performa lab dan lapangan untuk halaman mereka dengan cepat. Perubahan mendasar pada UI mencakup:
Pemisahan data lapangan dan lab yang jelas
Kami telah mengubah UI untuk memisahkan data kolom secara jelas dari data lab. Label untuk "Data Kolom" dan "Data Lab" telah diganti dengan teks yang menunjukkan arti data dan bagaimana data tersebut dapat membantu. Kami juga telah menempatkan bagian Data {i>field<i} ke atas. Skor performa berbasis lab tradisional, yang saat ini ditampilkan di bagian atas, telah dipindahkan ke bagian data Lab untuk menghindari ambiguitas terkait asal skor.
Penilaian Data Web Inti
Hasil penilaian Data Web Inti, yang sebelumnya muncul sebagai satu kata "lulus" atau "gagal" di Field Data, kini terlihat sebagai subbagian terpisah dengan ikon yang berbeda.
Perhatikan bahwa tidak ada perubahan pada proses penilaian Data Web Inti. Metrik Data Web Inti FID, LCP, dan CLS, dapat digabungkan di tingkat halaman atau asal. Untuk agregasi yang memiliki data yang cukup di ketiga metrik tersebut, agregasi akan lulus penilaian Data Web Inti jika persentil ke-75 dari ketiga metrik tersebut Baik. Jika tidak, agregasi tidak akan lulus penilaian. Jika agregasi tidak memiliki data FID yang memadai, agregasi akan lulus penilaian jika persentil ke-75 LCP dan CLS Baik. Jika LCP atau CLS memiliki data yang tidak memadai, agregasi tingkat halaman atau asal tidak dapat dinilai.
Label untuk performa seluler dan desktop
Kami mengubah menu navigasi di bagian atas dan menyertakan link untuk perangkat seluler dan desktop secara terpusat di halaman laporan. Link tersebut kini mudah dilihat dan menunjukkan platform yang menampilkan data secara jelas. Tindakan ini juga akan membantu menjadikan menu navigasi lebih bersih.
Ringkasan Asal
Ringkasan Asal, yang memberikan skor CrUX gabungan untuk semua halaman dari asal, saat ini muncul dengan mengklik kotak centang. Kami telah memindahkan bagian laporan ini ke tab baru, "Asal", di bagian Data Kolom.
Informasi tambahan yang bermanfaat
Laporan ini kini menyertakan bagian informasi baru di bagian bawah setiap kolom dan kartu lab yang membagikan detail berikut terkait data sampel:
- Periode pengumpulan data
- Durasi kunjungan
- Perangkat
- Koneksi jaringan
- Ukuran sampel
- Versi Chrome
Informasi ini akan memperjelas perbedaan antara data lab dan lapangan, serta membantu pengguna yang sebelumnya tidak yakin akan perbedaan antara kedua sumber data (lab dan kolom) tersebut.
Luaskan tampilan
Kami memiliki fitur "Luaskan tampilan" baru yang menambahkan fungsi lihat perincian ke bagian data lapangan dan memungkinkan Anda melihat detail terperinci untuk metrik Data Web Inti.
Gambar halaman
Kami telah menghapus gambar halaman yang dimuat, yang muncul tepat di sebelah data kolom. Gambar dan thumbnail halaman yang menampilkan urutan pemuatan akan tersedia di bagian data lab.
Untuk mendapatkan dokumentasi produk terbaru, buka https://developers.google.com/speed/docs/insights/.
Update pada web.dev/measure
Untuk mengurangi inkonsistensi antara berbagai alat dalam kotak peralatan performa, kami juga memperbarui web.dev/measure agar langsung didukung oleh PageSpeed Insights API.
Sebelumnya, developer akan menjalankan laporan melalui alat PSI dan /measure dan melihat nomor Lighthouse yang berbeda. Salah satu alasan utama terjadinya perbedaan adalah karena /measure berasal dari semua pengujian dari AS (karena sebelumnya memiliki backend cloud yang berbasis di AS).
Dengan /measure yang memanggil API yang sama secara langsung dengan UI PSI, developer akan mendapatkan pengalaman yang lebih konsisten saat menggunakan PSI dan /measure. Kami juga membuat beberapa penyesuaian pada /pengukuran berdasarkan cara pengguna menggunakan alat ini. Artinya, pengalaman login untuk /measure akan dihentikan, tetapi fungsi yang paling sering digunakan—melihat beberapa kategori—akan tetap tersedia untuk digunakan.
PSI hari ini
Meninjau kembali, mari kita lihat apa yang ditawarkan laporan PageSpeed Insights saat ini. Laporan PSI menyertakan data performa untuk perangkat seluler dan desktop di setiap tab dan menyarankan cara untuk meningkatkan kualitas halaman. Komponen utama laporan dalam setiap kasus serupa dan terdiri dari hal berikut:
Skor Performa: Skor performa muncul di bagian atas laporan PSI dan merangkum performa halaman secara keseluruhan. Skor ini ditentukan dengan menjalankan Lighthouse untuk mengumpulkan dan menganalisis data lab tentang halaman tersebut. Skor 90 ke atas dianggap baik, 50-90 perlu peningkatan, dan di bawah 50 buruk.
Data Kolom: Data kolom, yang berasal dari set data laporan CrUX, memberikan insight tentang pengalaman pengguna di dunia nyata. Data tersebut mencakup metrik seperti First Contentful Paint (FCP), dan mengukur Core Web Vitals (First Input Delay (FID), Largest Contentful Paint (LCP), dan Cumulative Layout Shift (CLS). Bersama dengan nilai metrik, Anda juga dapat melihat distribusi halaman yang nilai metrik tertentu-nya adalah Baik, Perlu Peningkatan, atau Buruk, yang masing-masing ditandai dengan batang hijau, kuning, dan merah. Distribusi dan skor ditampilkan berdasarkan pemuatan halaman untuk pengguna dalam set data CrUX. Skor dihitung selama 28 hari terakhir dan tidak tersedia untuk halaman baru yang mungkin tidak menyediakan cukup data pengguna sungguhan.
Ringkasan Asal: Pengguna dapat mengklik kotak Tampilkan Ringkasan Asal guna melihat skor gabungan untuk metrik untuk semua halaman yang ditayangkan dari origin yang sama selama 28 hari terakhir.
Data Lab: Skor performa lab, yang dihitung menggunakan Lighthouse, membantu men-debug masalah performa, saat dikumpulkan di lingkungan yang terkendali. Laporan ini menunjukkan performa menggunakan metrik seperti First Contentful Paint, Largest Contentful Paint, Speed Index, Kumulatif Pergeseran Tata Letak, Waktu untuk Interaktif, dan Total Waktu Pemblokiran. Setiap metrik diberi skor dan diberi label dengan ikon yang menunjukkan Baik, Perlu peningkatan, atau Buruk. Bagian ini memberikan indikasi yang baik tentang bottleneck performa pra-rilis dan dapat membantu mendiagnosis masalah, tetapi mungkin tidak menangkap masalah di dunia nyata.
Audit: Bagian ini mencantumkan semua audit yang dijalankan oleh Lighthouse dan mencantumkan audit yang diteruskan beserta peluang peningkatan dan informasi diagnostik tambahan.
Tantangan desain PSI saat ini
Seperti yang terlihat pada screenshot di atas, titik data yang berbeda dari data lab dan lapangan tidak diisolasi dengan jelas, dan developer yang baru mengenal PSI mungkin tidak mudah memahami konteks data dan apa yang harus dilakukan selanjutnya. Kebingungan ini telah menghasilkan banyak postingan blog "Cara" terkait pemecahan laporan PSI.
Dengan desain ulang ini, kami berharap dapat mempermudah penafsiran laporan bagi developer sehingga mereka dapat bergerak cepat dari membuat laporan PSI ke menindaklanjuti insight yang disertakan di dalamnya.
Pelajari lebih lanjut
Untuk mengetahui detail selengkapnya tentang update alat performa, tonton keynote untuk Chrome Dev Summit 2021. Kami akan menginformasikan tanggal rilis PSI dan perubahan pada web.dev/measure.
Terima kasih kepada Milica Mihajlija, Philip Walton, Brendan Kenny, dan Ewa Gasperowicz atas masukannya terkait artikel ini