Cara Menggunakan PageSpeed ​​Insights API untuk Memantau Kinerja Halaman

Ada alat untuk membantu memantau kinerja halaman dan menilai peningkatan Anda. Salah satu yang terbaik adalah Wawasan PageSpeed. Ini tersedia sebagai aplikasi web dan sebagai tab Mercusuar di DevTools Chrome (DevTools yang sama juga tersedia di Edge, Opera, Brave, dan Vivaldi).

Performa halaman web menjadi lebih penting dari sebelumnya. Pengguna mengharapkan pengalaman apik dan responsif yang menyaingi aplikasi desktop. Selain itu, Data Web Inti Google mengukur performa halaman – ini memengaruhi PageRank dan upaya Pengoptimalan Mesin Telusur Anda.

WordPress menjalankan lebih dari sepertiga dari semua situs web tetapi kinerjanya dipengaruhi oleh hosting yang tidak efektif, tema yang lambat, dan ketergantungan yang berlebihan pada plugin. Anda dapat memperbaiki sebagian besar masalah dengan beralih ke host web yang bagus dan menggunakan teknik kinerja praktik terbaik.

Mengakses Mercusuar

Mulai Lighthouse dengan membuka halaman yang ingin Anda periksa dan menekan Ctrl/Cmd + Shift + I atau memilih Alat Pengembang dari Alat lainnya di menu. Beralih ke tab Lighthouse dan klik tombol Analisis Muatan Halaman . Hasilnya ditampilkan setelah beberapa detik:

Anda dapat menelusuri persentase tingkat atas untuk menemukan informasi lebih lanjut dan petunjuk yang membahas masalah yang diketahui. Alat ini sangat berharga tetapi ada kelemahannya:

• Anda harus memulai proses secara manual untuk setiap halaman yang Anda uji.
• Tidak mudah untuk mencatat bagaimana faktor-faktor tersebut membaik atau memburuk dari waktu ke waktu.
• Ada banyak data untuk diperiksa dan mudah terjadi kesalahan.
• Rincian teknis disediakan untuk pengembang. Ini mungkin luar biasa bagi klien dan manajer yang menginginkan ikhtisar singkat tentang kemajuan.
• Pengoperasian lighthouse dapat dipengaruhi oleh perangkat lokal dan kecepatan jaringan yang dapat menyebabkan asumsi yang salah.

PageSpeed ​​Insights API menyediakan cara untuk memecahkan masalah ini sehingga pengujian dapat diotomatisasi, direkam, dan dibandingkan.

Apa itu PageSpeed ​​Insights API?

Google menyediakan REST API PageSpeed ​​Insights gratis yang mengembalikan data dalam format JSON yang berisi semua metrik Lighthouse dan lainnya. Ini memungkinkan Anda untuk mengotomatiskan halaman berjalan, menyimpan data yang dihasilkan, meninjau perubahan dari waktu ke waktu, dan menampilkan informasi yang tepat yang Anda butuhkan.

PageSpeed ​​Insights API meniru cara Google melihat situs Anda. Anda dapat menjalankan laporan setiap beberapa hari atau setiap kali Anda merilis pembaruan kinerja.

Hasilnya sangat membantu tetapi tidak selalu menunjukkan pengalaman pengguna yang sebenarnya. Performance API browser adalah opsi yang lebih baik saat Anda ingin memantau kinerja dunia nyata di semua perangkat dan jaringan pengguna Anda.

Mulai Cepat PageSpeed ​​Insights API

Salin alamat berikut ke browser web Anda dan edit url untuk menilai kinerja halaman Anda:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

Firefox sangat ideal karena memiliki penampil JSON bawaan meskipun Chrome memiliki ekstensi yang menyediakan fungsi yang sama. Skor Kinerja Mercusuar keseluruhan disorot di bawah ini:

Anda dapat mengubah string kueri URL API untuk halaman dan preferensi Anda sendiri. Satu-satunya parameter yang diperlukan adalah url , mis

url=https://mysite.com/page1

Tes desktop dijalankan secara default tetapi Anda dapat memintanya secara eksplisit dengan:

strategy=desktop

atau beralih ke seluler dengan:

strategy=mobile

Hanya uji kinerja yang dijalankan kecuali Anda menentukan satu atau beberapa kategori minat:

category=performance
category=accessibility
category=best-practices
category=seo
category=pwa

Bahasa tertentu dapat ditentukan dengan menyetel lokal – seperti bahasa Prancis:

locale=fr-FR

dan detail kampanye Google Analytics dapat diatur dengan:

utm_campaign=<campaign>
utm_source=<source>

Layanan ini gratis untuk permintaan yang jarang, tetapi Anda perlu mendaftar kunci Google API jika Anda ingin menjalankan banyak pengujian dari alamat IP yang sama dalam waktu singkat. Kunci ditambahkan ke URL dengan:

key=<api-key>

Anda dapat membuat string kueri URL dengan menentukan parameter pilihan Anda yang dipisahkan dengan karakter ampersand (&). URL API berikut menguji halaman di https://mysite.com/ menggunakan perangkat seluler untuk menilai kriteria kinerja dan aksesibilitas:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility

Anda dapat membuat URL Anda sendiri atau menggunakan alat pembuat URL Google PageSpeed ​​API jika Anda memerlukan bantuan lebih lanjut.

Hasil JSON PageSpeed ​​Insights API

Pengujian biasanya akan menghasilkan sekitar 600 Kb data JSON bergantung pada kategori yang Anda pilih, jumlah aset di halaman, dan kompleksitas tangkapan layar (disematkan dalam format base64).

Kuantitas data menakutkan, ada beberapa duplikasi, dan dokumentasi hasil tidak selalu jelas. JSON dibagi menjadi empat bagian seperti yang dijelaskan di bawah ini.

loadingExperience

Ini adalah metrik yang dihitung untuk pengalaman pemuatan halaman pengguna akhir. Ini mencakup informasi seperti Data Web Inti CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS, dan FIRST_INPUT_DELAY_MS. Detail dan nilai "kategori" mengembalikan CEPAT, RATA-RATA, LAMBAT, atau TIDAK ADA jika tidak ada pengukuran yang dilakukan. Contoh:

 "loadingExperience": { "metrics": { "CUMULATIVE_LAYOUT_SHIFT_SCORE": { "percentile": 0, "distributions": [ { "min": 0, "max": 10, "proportion": 0.970 }, { "min": 10, "max": 25, "proportion": 0.017 }, { "min": 25, "proportion": 0.012 } ], "category": "FAST" },

originLoadingExperience

Ini adalah metrik gabungan yang dihitung untuk semua pengalaman pemuatan halaman pengguna. Bagian-bagiannya identik dengan loadingExperience di atas dan situs dengan lalu lintas yang lebih sedikit kemungkinan tidak akan menunjukkan perbedaan angka.

mercusuarResult

Ini adalah bagian terbesar dan berisi semua metrik Lighthouse. Ini memberikan informasi tentang tes:

• requestUrl – URL yang Anda minta
• finalUrl – halaman aktual yang diuji setelah mengikuti semua pengalihan
• lighthouseVersion – versi perangkat lunak
• fetchTime – waktu pengujian dijalankan
• userAgent – ​​string agen pengguna dari browser yang digunakan untuk pengujian
• lingkungan – informasi agen pengguna yang diperluas
• configSettings – pengaturan diteruskan ke API

Ini diikuti oleh bagian "audit" dengan banyak bagian termasuk javascript yang tidak digunakan, aturan css yang tidak digunakan, berat byte total, pengalihan, ukuran dom, elemen cat konten terbesar, waktu respons server, jaringan -permintaan, pergeseran tata letak kumulatif, cat pertama yang bermakna, gambar mini tangkapan layar, dan tangkapan layar halaman penuh.

Sebagian besar metrik audit menyediakan bagian "detail" yang berisi faktor-faktor seperti "keseluruhanSavingsBytes" dan "keseluruhanSavingsMs" yang memperkirakan manfaat penerapan peningkatan kinerja.

Bagian "tangkapan layar" halaman penuh dan thumbnail berisi data gambar base64 yang disematkan.

Bagian "metrik" memberikan ringkasan semua metrik dalam larik "item", mis

 "metrics": { "id": "metrics", "title": "Metrics", "description": "Collects all available metrics.", "score": null, "scoreDisplayMode": "informative", "details": { "type": "debugdata", "items": [{ "observedFirstVisualChange": 234, "observedFirstContentfulPaint": 284, "interactive": 278, "observedFirstPaintTs": 1579728174422, "observedDomContentLoaded": 314, // ... etc ... }] }, "numericValue": 278, "numericUnit": "millisecond" },

Bagian "audit" diikuti oleh "kategori" yang memberikan skor Lighthouse keseluruhan untuk kategori terpilih yang diteruskan pada URL API:

 "categories": { "performance": { "id": "performance", "title": "Performance", "score": 0.97, "auditRefs": [ //...

“Skor” adalah angka antara 0 dan 1 yang biasanya ditampilkan sebagai persentase pada laporan Lighthouse. Secara umum, skor:

• 0,9 hingga 1,0 bagus
• 0,5 hingga di bawah 0,9 menunjukkan perlunya perbaikan
• di bawah 0,5 buruk dan membutuhkan perhatian lebih mendesak

Bagian “auditRefs” menyediakan daftar semua metrik dan bobot yang digunakan untuk menghitung setiap skor.

analisisUTCTimestamp

Akhirnya, waktu analisis dilaporkan. Ini harus identik dengan waktu yang ditampilkan di lighthouseResult.fetchTime.

Metrik Hasil JSON yang Berguna

Saya sarankan Anda menyimpan dan memeriksa hasil JSON di editor teks. Beberapa memiliki pemformat JSON bawaan atau tersedia sebagai plugin. Atau, Anda dapat menggunakan alat online gratis seperti:

• Pemformat & Validator JSON
• Pemformat JSON
• jsonformatter.io

Metrik berikut mungkin berguna. Ingatlah untuk menyetel opsi kategori terkait pada URL seperlunya.

Metrik Ringkasan

Skor keseluruhan dari 0 hingga 1:

Metrik Kinerja

Ini termasuk skor Data Web Inti dari 0 hingga 1:

Skor kinerja berguna lainnya meliputi:

Anda biasanya dapat memperoleh angka dan unit aktual seperti:

• lighthouseResult.audits.total-byte-weight.numericValue –
  total ukuran halaman, misalnya 450123
• lighthouseResult.audits.total-byte-weight.numericUnit –
  satuan yang digunakan untuk total ukuran halaman, misalnya “byte”

Atau, "displayValue" biasanya berisi pesan yang dapat dibaca dengan gambar dan satuan:

• lighthouseResult.audits.server-response-time.displayValue –
  pesan tentang waktu respons, misalnya "Dokumen root memerlukan waktu 170 md"
• lighthouseResult.audits.dom-size.displayValue –
  pesan tentang jumlah elemen dalam DOM, misalnya “543 elemen”

Buat Dasbor Kinerja Tanpa Kode

Umpan API langsung dapat dibaca dan diproses di banyak sistem termasuk Microsoft Excel. (Agak aneh, Google Sheets tidak mendukung umpan JSON tanpa plugin lebih lanjut atau kode makro. Ini mendukung XML.)

Untuk mengimpor skor kinerja keseluruhan langsung ke Excel, mulai spreadsheet baru, alihkan ke tab Data , dan klik Dari Web . Masukkan URL PageSpeed ​​Insights API Anda dan tekan OK:

Klik Hubungkan di dialog berikutnya dan pertahankan pengaturan default (Anonim). Anda akan melanjutkan ke alat Pengaturan Kueri :

Klik Rekam di sebelah kanan metrik hasil mercusuar . Kemudian klik yang sama pada kategori dan kinerja untuk menelusuri hierarki objek JSON:

Klik ikon Ke Tabel di bagian atas dari opsi menu klik kanan.

Anda kemudian dapat mengklik panah filter di judul tabel untuk menghapus semua selain skor sebelum mengklik OK :

Terakhir, klik Tutup & Muat untuk menampilkan skor performa langsung di spreadsheet Anda:

Anda dapat mengikuti proses yang sama untuk metrik minat lainnya.

Buat Dasbor Kinerja Web

Demonstrasi Codepen ini menyediakan formulir di mana Anda dapat memasukkan URL dan memilih analisis desktop atau seluler untuk mendapatkan hasil.

Kode tersebut membuat URL Wawasan PageSpeed, memanggil API, lalu merender berbagai hasil ke dalam tabel ringkasan yang lebih cepat dilihat daripada laporan Lighthouse standar:

Fungsi startCheck() asinkron dipanggil saat formulir dikirimkan. Itu membatalkan acara kirim dan menyembunyikan hasil sebelumnya:

 // make API request async function startCheck(e) { e.preventDefault(); show(resultTable, false); show(status); show(error, false);

Itu kemudian membangun apiURL dari data formulir dan menonaktifkan bidang:

 const form = e.target, fields = form.firstElementChild, data = new FormData(form), qs = decodeURIComponent( new URLSearchParams(data).toString() ), apiURL = form.action + '?' + qs; fields.disabled = true;

Fetch API digunakan untuk memanggil URL PageSpeed, mendapatkan respons, dan mengurai string JSON menjadi objek JavaScript yang dapat digunakan. Blok coba/tangkap memastikan kegagalan ditangkap:

 try { // call API and get result const response = await fetch(apiURL), result = await response.json();

Objek hasil diteruskan ke fungsi showResult() . Ini mengekstrak properti dan menempatkannya ke dalam tabel hasil atau elemen HTML lainnya yang memiliki atribut data-point yang disetel ke properti PageSpeed ​​API, misalnya

<td data-point="lighthouseResult.categories.performance.score"></td>

Akhir dari blok percobaan:

 // output result showResult(result); show(status, false); show(resultTable); }

Terakhir, blok tangkapan menangani kesalahan dan bidang formulir diaktifkan kembali sehingga pengujian lebih lanjut dapat dijalankan:

 catch(err) { // API error console.log(err); show(status, false); show(error); } fields.disabled = false; }

Opsi Pengembangan Lebih Lanjut

Kode contoh di atas mengambil hasil dari PageSpeed ​​Insights API saat Anda memintanya. Laporan lebih dapat dikonfigurasi daripada Lighthouse tetapi eksekusi tetap merupakan proses manual.

Jika Anda bermaksud mengembangkan dasbor Anda sendiri, mungkin praktis untuk membuat aplikasi kecil yang memanggil PageSpeed ​​Insights API dan menyimpan JSON yang dihasilkan dalam catatan database baru dengan URL yang diuji dan tanggal/waktu saat ini. Sebagian besar basis data memiliki dukungan JSON meskipun MongoDB cocok untuk tugas tersebut. Pekerjaan cron dapat memanggil aplikasi Anda berdasarkan waktu – mungkin sekali sehari pada dini hari.

Aplikasi sisi server kemudian dapat mengimplementasikan REST API-nya sendiri untuk persyaratan pelaporan Anda, misalnya mengembalikan perubahan dalam metrik kinerja tertentu antara dua tanggal. Itu dapat dipanggil oleh JavaScript sisi klien untuk menampilkan tabel atau bagan yang mengilustrasikan peningkatan kinerja dari waktu ke waktu.

Jika Anda ingin membuat laporan kompleks dengan jumlah data yang signifikan, sebaiknya hitung terlebih dahulu angkanya sekali sehari pada saat data PageSpeed ​​baru tersedia. Lagi pula, Anda tidak ingin menunjukkan bagaimana peningkatan kinerja pada laporan yang membutuhkan waktu beberapa menit untuk dibuat!

Ringkasan

Alat Mercusuar Chrome luar biasa tetapi sering mengevaluasi banyak halaman merupakan tugas yang berat. PageSpeed ​​Insights API memungkinkan Anda menilai kinerja situs menggunakan teknik terprogram. Keuntungan-keuntungan:

• Tes kinerja dapat diotomatisasi. Anda tidak bisa lupa untuk menjalankan tes.
• Hasil dikumpulkan di server Google sehingga perangkat lokal dan faktor kecepatan jaringan memiliki pengaruh yang lebih kecil.
• Metrik menyertakan informasi yang biasanya tidak tersedia di Lighthouse.
• Metrik penting dapat direkam dan dipantau dari waktu ke waktu untuk memastikan kinerja halaman meningkat dengan setiap pembaruan.
• Informasi kinerja, aksesibilitas, dan SEO dapat ditampilkan pada laporan yang disederhanakan sehingga tersedia sekilas untuk pengembang, manajer, dan klien.