Mengotomatiskan audit dengan AutoWebPerf

Alat modular baru yang memungkinkan pengumpulan data performa secara otomatis dari beberapa sumber.

AutoWebPerf (AWP) adalah alat modular yang memungkinkan pengumpulan data performa secara otomatis dari beberapa sumber. Saat ini ada banyak alat yang tersedia untuk mengukur performa situs untuk cakupan yang berbeda (lab dan lapangan), seperti Laporan UX Chrome, 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 yang cermat dan aktif menjadi semakin penting. Engineer di balik alat ini telah melakukan audit performa selama bertahun-tahun dan mereka membuat AWP untuk mengotomatiskan bagian aktivitas harian mereka yang manual, berulang, dan memakan waktu. Saat ini, AWP telah mencapai tingkat kematangan dan siap dibagikan secara luas sehingga siapa pun dapat memanfaatkan otomatisasi yang diberikannya.

Alat ini dapat diakses di repositori publik AutoWebPerf di GitHub.

Apa kegunaan AWP?

Meskipun beberapa alat dan API tersedia untuk memantau performa halaman web, sebagian besar mengekspos data yang diukur pada waktu tertentu. Untuk memantau situs secara memadai dan mempertahankan performa halaman utama yang baik, sebaiknya terus lakukan pengukuran Data Web Inti dari waktu ke waktu dan amati trennya.

AWP mempermudahnya 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 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 bagus untuk mengikuti 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 konektor
  • Modul gatherer

Mesin ini mengambil daftar pengujian dari konektor (misalnya, dari file CSV lokal), menjalankan audit performa melalui pengumpulan yang dipilih (seperti PageSpeed Insights), dan menulis hasilnya ke konektor output (misalnya, Google Spreadsheet).

Diagram arsitektur AWP.

AWP dilengkapi dengan sejumlah pengumpulan dan konektor yang telah diimplementasikan sebelumnya:

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 ini:

{
  "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 menghasilkan output 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 seperti Unix untuk menjalankan AWP sebagai tugas cron harian:

0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

Anda dapat menemukan lebih banyak cara untuk mengotomatiskan audit harian dan pengumpulan hasil di repositori GitHub AWP.

Memvisualisasikan hasil audit di Data Studio

Selain terus mengukur Data Web Inti, Anda harus dapat mengevaluasi tren dan menemukan potensi regresi dengan metrik pengguna sebenarnya (RUM) atau data Chrome UX Report (CrUX) yang dikumpulkan oleh AWP. Perhatikan bahwa Laporan UX Chrome (CrUX) adalah agregasi bergerak 28 hari, sehingga sebaiknya gunakan juga data RUM Anda sendiri bersama dengan CrUX agar Anda dapat menemukan regresi lebih cepat.

Data Studio adalah alat visualisasi gratis yang dapat Anda gunakan untuk 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 Cumulative Layout Shift dalam beberapa minggu terakhir, yang berarti regresi dalam stabilitas tata letak untuk halaman tertentu. Dalam skenario ini, Anda ingin memprioritaskan upaya untuk menganalisis masalah yang mendasari halaman ini.

Screenshot hasil Data Web Inti di Data Studio.

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 Spreadsheets API untuk mengetahui langkah-langkah mendetail tentang cara menyiapkan AWP dengan spreadsheet sebagai sumber data untuk divisualisasi 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.