Mengotomatiskan audit dengan AutoWebPerf

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

Gilberto Cocchi
Gilberto Cocchi

Apa yang dimaksud dengan AutoWebPerf (AWP)?

AutoWebPerf (AWP) adalah alat modular yang memungkinkan pengumpulan data performa secara otomatis dari berbagai 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 ada beberapa alat dan API yang tersedia untuk memantau performa halaman web, sebagian besar alat dan API tersebut 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 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 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 telusur mengambil daftar pengujian dari konektor (misalnya, dari file CSV lokal), menjalankan audit performa melalui pengumpul tertentu (seperti PageSpeed Insights), dan menulis hasil ke konektor output (misalnya, Google Spreadsheet).

Diagram arsitektur AWP.

AWP dilengkapi dengan sejumlah pengumpul dan konektor yang telah diterapkan 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 untuk 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 cron job 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 Core Web Vitals, Anda harus dapat mengevaluasi tren dan menemukan potensi regresi dengan metrik pengguna sebenarnya (RUM) atau data Laporan UX Chrome (CrUX) yang dikumpulkan oleh AWP. Perhatikan bahwa Chrome UX Report (CrUX) adalah agregasi yang bergerak selama 28 hari. Oleh karena itu, sebaiknya gunakan juga data RUM Anda sendiri bersama dengan CrUX agar Anda dapat segera menemukan regresi.

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 Core Web Vitals 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 divisualisasikan di Data Studio.

Apa langkah selanjutnya?

AWP menyediakan cara yang sederhana dan terintegrasi untuk meminimalkan upaya dalam menyiapkan 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 menangani kasus penggunaan lainnya pada masa mendatang.

Pelajari lebih lanjut di repositori AutoWebPerf.