Alat modular baru yang memungkinkan pengumpulan data performa otomatis dari berbagai sumber.
Apa itu AutoWebPerf (AWP)?
AutoWebPerf (AWP) adalah alat modular yang memungkinkan pengumpulan data performa otomatis dari berbagai sumber. Saat ini ada banyak alat yang tersedia untuk mengukur performa situs untuk berbagai cakupan (lab dan lapangan), seperti Chrome UX Report, PageSpeed Insights, atau WebPageTest. AWP menawarkan integrasi dengan berbagai alat audit dengan penyiapan sederhana sehingga Anda dapat terus memantau performa situs di satu tempat.
Rilis panduan Data Web berarti pemantauan halaman web secara cermat 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 manual, berulang, dan memakan waktu dari aktivitas harian mereka. Saat ini, AWP telah mencapai tingkat kematangan dan siap dibagikan secara luas sehingga siapa pun dapat memanfaatkan otomatisasi yang ditawarkannya.
Alat ini dapat diakses di repositori publik AutoWebPerf di GitHub.
Untuk apa AWP?
Meskipun beberapa alat dan API tersedia untuk memantau performa halaman web, sebagian besar alat dan API tersebut menampilkan data yang diukur pada waktu tertentu. Untuk memantau situs secara memadai dan mempertahankan performa yang baik pada halaman utama, sebaiknya lakukan pengukuran Data Web Inti secara berkelanjutan 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 menyetel pengujian harian di halaman beranda untuk mengambil data lapangan dari CrUX API dan data lab dari laporan Lighthouse dari PageSpeed Insights. Data ini dapat ditulis dan disimpan dari waktu ke waktu, misalnya, di Google Spreadsheet, lalu divisualisasikan di dasbor Data Studio. AWP mengotomatiskan bagian berat dari seluruh proses, sehingga menjadi solusi yang tepat untuk memantau tren lab dan lapangan dari waktu ke waktu. Lihat Memvisualisasikan hasil audit di Data Studio di bawah untuk mengetahui detail selengkapnya).
Ringkasan arsitektur
AWP adalah library berbasis modular dengan tiga jenis modul yang berbeda:
- mesin
- Modul connector
- Modul pengumpul
Mesin ini 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 sebelumnya:
- Pengumpul yang telah diimplementasikan sebelumnya:
- 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 tempat memuat daftar pengujian, dan tempat menulis hasilnya.
Misalnya, Anda dapat menjalankan audit untuk daftar pengujian yang disimpan di Google Spreadsheet, dan menulis hasilnya ke file CSV, dengan perintah di bawah:
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:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
Perintah di bawah membaca daftar pengujian audit dari file JSON lokal, menjalankan audit di komputer lokal, lalu menampilkan hasil ke 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 mirip 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 lainnya untuk mengotomatiskan audit harian dan pengumpulan hasil di repositori GitHub AWP.
Memvisualisasikan hasil audit di Data Studio
Selain mengukur Data Web Inti secara berkelanjutan, penting untuk dapat mengevaluasi tren dan menemukan potensi regresi dengan metrik pengguna sebenarnya (RUM) atau data Chrome UX Report (CrUX) yang dikumpulkan oleh AWP. Perhatikan bahwa Chrome UX Report (CrUX) adalah agregasi bergerak 28 hari, sehingga sebaiknya gunakan juga data RUM Anda sendiri bersama CrUX agar Anda dapat mendeteksi regresi lebih cepat.
Data Studio adalah alat visualisasi gratis yang dapat Anda gunakan untuk memuat metrik performa dengan mudah dan menarik tren sebagai diagram. Misalnya, diagram deret waktu di bawah menunjukkan Data Web Inti berdasarkan data Laporan UX Chrome. Salah satu diagram menunjukkan peningkatan Cumulative Layout Shift dalam beberapa minggu terakhir, yang berarti regresi dalam stabilitas tata letak untuk halaman tertentu. Dalam skenario ini, Anda sebaiknya memprioritaskan upaya untuk menganalisis masalah mendasar pada halaman ini.
Untuk menyederhanakan proses end-to-end 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 memvisualisasikannya di Data Studio.
Apa langkah selanjutnya?
AWP menyediakan cara yang sederhana dan terintegrasi untuk meminimalkan upaya penyiapan pipeline pemantauan berkelanjutan guna 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 menangani kasus penggunaan lainnya pada masa mendatang.
Pelajari lebih lanjut di repositori AutoWebPerf.