Alat modular baru yang memungkinkan pengumpulan otomatis data performa dari berbagai sumber.
Apa itu AutoWebPerf (AWP)?
AutoWebPerf (AWP) adalah alat modular yang memungkinkan pengumpulan otomatis data performa dari berbagai sumber. Saat ini ada banyak alat yang tersedia guna mengukur performa situs untuk berbagai cakupan (lab dan kolom), seperti Chrome UX Report, PageSpeed Insights, atau WebPageTest. AWP menawarkan integrasi dengan berbagai alat audit dengan penyiapan yang sederhana sehingga Anda dapat terus memantau performa situs di satu tempat.
Rilis panduan Data Web berarti bahwa pemantauan halaman web yang tertutup dan aktif menjadi semakin penting. Para engineer di balik alat ini telah melakukan audit performa selama bertahun-tahun dan mereka membuat AWP untuk mengotomatiskan bagian aktivitas harian yang manual, berulang, dan memakan waktu. Saat ini, AWP telah mencapai tingkat kematangan dan siap dibagikan secara luas sehingga siapa pun bisa mendapatkan manfaat dari otomatisasi yang dihadirkannya.
Alat ini dapat diakses di repositori publik AutoWebPerf di GitHub.
Apa kegunaan AWP?
Meskipun tersedia beberapa alat dan API untuk memantau performa halaman web, kebanyakan dari alat tersebut mengekspos data yang diukur pada waktu tertentu. Untuk memantau situs secara memadai dan mempertahankan performa halaman utama yang baik, sebaiknya terus lakukan pengukuran Tanda Vital Web Inti dari waktu ke waktu dan amati trennya.
AWP mempermudah hal tersebut dengan menyediakan mesin dan integrasi API bawaan yang dapat dikonfigurasi secara terprogram untuk mengotomatiskan kueri berulang ke berbagai API pemantauan performa.
Misalnya, dengan AWP, Anda dapat menetapkan pengujian harian di halaman beranda untuk mengambil data kolom dari CrUX API dan data lab dari laporan Lighthouse dari PageSpeed Insights. Data ini dapat ditulis dan disimpan seiring waktu, misalnya, di Google Spreadsheet, lalu divisualisasikan di dasbor Data Studio. AWP mengotomatiskan bagian tugas yang berat dari seluruh proses, sehingga menjadikannya solusi bagus untuk mengikuti tren lab dan lapangan dari waktu ke waktu. Lihat Memvisualisasikan hasil audit di Data Studio di bawah untuk detail selengkapnya).
Ringkasan arsitektur
AWP adalah library berbasis modular dengan tiga jenis modul yang berbeda:
- mesin
- Modul connector
- Modul gatherer
Mesin mengambil daftar pengujian dari konektor (misalnya, dari file CSV lokal), menjalankan audit performa melalui pengumpul yang dipilih (seperti PageSpeed Insights), dan menulis hasil ke konektor output (misalnya, Google Spreadsheet).
AWP dilengkapi dengan sejumlah pengumpul dan konektor yang telah diimplementasikan:
- Pengumpul pra-implementasi:
- Konektor yang telah diimplementasikan sebelumnya:
- Google Spreadsheet
- JSON
- CSV
Mengotomatiskan audit dengan AWP
AWP mengotomatiskan audit performa melalui platform audit pilihan Anda seperti PageSpeed Insights, WebPageTest, atau CrUX API. AWP menawarkan fleksibilitas untuk memilih lokasi pemuatan daftar pengujian dan tempat menulis hasilnya.
Misalnya, Anda dapat menjalankan audit untuk daftar pengujian yang disimpan di Spreadsheet Google, dan menulis hasilnya ke file CSV, dengan perintah di bawah ini:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
Audit berulang
Anda dapat menjalankan audit berulang dengan frekuensi harian, mingguan, atau bulanan. Misalnya, Anda dapat menjalankan audit harian untuk daftar pengujian yang ditentukan dalam JSON lokal seperti di bawah ini:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
Perintah di bawah ini membaca daftar pengujian audit dari file JSON lokal, menjalankan audit pada komputer lokal, lalu menampilkan hasilnya dalam file CSV lokal:
PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Untuk menjalankan audit setiap hari sebagai layanan latar belakang secara terus-menerus, Anda dapat menggunakan perintah di bawah ini:
PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
Atau, Anda dapat menyiapkan crontab di lingkungan seperti Unix untuk menjalankan AWP sebagai cron job harian:
0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Anda dapat menemukan cara lain untuk mengotomatiskan audit harian dan pengumpulan hasil di repositori GitHub AWP.
Memvisualisasikan hasil audit di Data Studio
Selain terus mengukur Data Web Inti, penting untuk dapat mengevaluasi tren dan menemukan potensi regresi dengan metrik pengguna nyata (RUM) atau data Laporan UX Chrome (CrUX) yang dikumpulkan oleh AWP. Perhatikan bahwa Chrome UX Report (CrUX) adalah agregasi bergerak selama 28 hari. Oleh karena itu, sebaiknya gunakan juga data RUM Anda sendiri bersama dengan CrUX agar Anda dapat lebih cepat menemukan regresi.
Data Studio adalah alat visualisasi gratis yang memungkinkan Anda memuat metrik performa dengan mudah dan menggambar tren sebagai diagram. Misalnya, diagram deret waktu di bawah menunjukkan Data Web Inti berdasarkan data Laporan UX Chrome. Salah satu diagram menunjukkan peningkatan Pergeseran Tata Letak Kumulatif dalam beberapa minggu terakhir, yang berarti regresi dalam stabilitas tata letak untuk halaman tertentu. Dalam skenario ini, Anda sebaiknya memprioritaskan upaya untuk menganalisis masalah dasar halaman ini.
Untuk menyederhanakan proses menyeluruh dari pengumpulan data hingga visualisasi, Anda dapat menjalankan AWP dengan daftar URL untuk mengekspor hasil secara otomatis ke Google Spreadsheet dengan perintah berikut:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
Setelah mengumpulkan metrik harian dalam spreadsheet, Anda dapat membuat dasbor Data Studio yang memuat data langsung dari spreadsheet, dan memetakan tren ke dalam diagram deret waktu. Lihat Konektor Google Spreadsheet API untuk mengetahui langkah-langkah mendetail tentang cara menyiapkan AWP dengan spreadsheet sebagai sumber data untuk divisualisasikan di Data Studio.
Apa langkah selanjutnya?
AWP memberikan cara yang sederhana dan terintegrasi guna meminimalkan upaya penyiapan pipeline pemantauan berkelanjutan untuk mengukur Data Web Inti dan metrik performa lainnya. Untuk saat ini, AWP mencakup kasus penggunaan yang paling umum dan akan terus menyediakan lebih banyak fitur untuk mengatasi kasus penggunaan lainnya di masa mendatang.
Pelajari lebih lanjut di repositori AutoWebPerf.