Automasi Tes Performa Website Menggunakan Lighthouse x Sitespeed.io Melalui Jenkins

Photo by Miguel Á. Padriñán from Pexels

Di artikel ini saya ingin membagikan cara Tim Engineering Niagahoster mengukur performa website pada perangkat desktop dan mobile.

Cara ini kami lakukan menggunakan Lighthouse dan Sitespeed.io di Jenkins.

Sitespeed.io merupakan open source tools set yang dapat digunakan untuk mempermudah proses pemantauan dan pengukuran performa website.

Sitespeed.io memiliki docker images dengan Chrome, Firefox, Xvfb, dan semua software yang dibutuhkan untuk merekam video di layar browser.

Rekaman akan dianalisis untuk mendapatkan visual metrics yang diinginkan, misalnya kecepatan website, performance, SEO, accessibility, dan lain-lain.

Terdapat beberapa alasan mengapa integrasi Sitespeed.io dan Lighthouse sesuai dengan konteks Niagahoster.

1. Sitespeed.io bersifat open source sehingga menjanjikan skalabilitas untuk pertumbuhan yang lebih baik di masa mendatang.
2. Setelah code deployment, Niagahoster memiliki kebutuhan pengukuran performa website Sitespeed.io dapat diintegrasikan melalui CI/CD maupun Github Actions.
3. Niagahoster perlu mengetes beberapa URL dalam waktu bersamaan dan laporan performa yang terpusat. Saat ini belum dapat dicapai dengan Lighthouse CLI.

Cara konfigurasi & persiapannya saya terangkan pada bagian di bawah ini.

Lakukan Persiapan Konfigurasi Sitespeed.io Terlebih Dahulu…

Sebelum mempersiapkan konfigurasi Sitespeed.io melalui Jenkins, langkah paling awal adalah menyimpan daftar URL yang ingin diuji dalam format txt.

Beri nama file urls.txt yang berisi baris URL seperti di bawah ini.

https://www.google.com
https://www.wikipedia.org

Untuk mengecek apakah URL website yang akan diuji telah sesuai keinginan, gunakan budget file.

Di dalam file tersebut Anda dapat membuat aturan berapa skor website yang dikategorikan berhasil memenuhi standar (pass) dan gagal (fail).

Mari lihat contoh file budget.json berikut ini. File yang dimaksud dapat menjadi tolok ukur apakah target URL telah memenuhi persyaratan dari segi Best Practice, Privacy, Performance Score, dan lainnya.

Sample dashboard from Sitespeed.io

Skor website di Sitespeed.io secara umum mengacu pada metrik Coach.

Apabila Anda ingin menggunakan Lighthouse sebagai acuan skor pengujian, budget perlu diset secara mandiri seperti di bawah ini.

{
  "budget": {
    "requests": {
        "total": 100
    },
    "transferSize": {
        "total": 400000
    },
    "thirdParty": {
        "requests": 0
    },
    "score": {
      "bestpractice": 80,
      "privacy": 90,
      "performance": 80
    },
    "lighthouse": {
      "performance": 90,
      "accessibility": 90,
      "best-practices": 90,
      "seo": 90,
      "pwa": 90
    }
  }
}

Langkah-langkah Konfigurasi Sitespeed.io Melalui Jenkins

Anda perlu menginstal Jenkins terlebih dahulu. Langkah instalasi Jenkins dapat Anda ikuti di sini.

Berikut adalah langkah-langkah yang dapat dilakukan untuk mengatur Jenkins Job Anda:

1. Klik New Item untuk membuat job baru.
2. Pilih Freestyle Project setelah memasukkan Item Name, kemudian klik OK.
3. Agar file urls.txt dan budget.json Anda dapat dites, Anda perlu menyalin file tersebut ke docker. Salah satu caranya adalah dengan menambahkan parameter di job yang telah Anda buat dengan memilih This project is parameterized di bagian Job Notifications.
4. Di bagian Build dan Add to Build Step, pilih Execute Shell.
5. Masukkan command untuk mengeksekusi test. Beberapa hal yang harus Anda perhatikan:

• Lighthouse akan mengeksekusi test menggunakan mobile emulator secara default. Anda harus menentukan secara spesifik perangkat apa yang ingin Anda gunakan untuk desktop, misalnya User Agent & Device Emulator apa yang ingin Anda gunakan untuk menjalankan test.
• Semakin banyak jumlah iterasi eksekusi test, semakin akurat hasil pengujian Anda. Anda dapat menuliskan -n 1 pada dokumen teks.

Contoh command untuk mengeksekusi test di desktop emulator adalah sebagai berikut.

docker run --rm -v ${WORKSPACE}:/sitespeed.io sitespeedio/sitespeed.io:17.8.3-plus1 -n 1 --desktop urls.txt 
--outputFolder output --budget.configPath budget.json 
--lighthouse.settings.formFactor desktop 
--lighthouse.settings.screenEmulation.mobile false 
--lighthouse.settings.screenEmulation.width=1024 
--lighthouse.settings.screenEmulation.height=768 
--lighthouse.settings.screenEmulation.deviceScaleFactor=2
--lighthouse.settings.throttling.rttMs 40 
--lighthouse.settings.throttling.throughputKbps 10240 
--lighthouse.settings.throttling.cpuSlowdownMultiplier 1
--lighthouse.settings.emulatedUserAgent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4420.0 Safari/537.36 Chrome-Lighthouse"

Berikut contoh command untuk mengeksekusi test di mobile emulator.

docker run --rm -v ${WORKSPACE}:/sitespeed.io sitespeedio/sitespeed.io:18.0.0-plus1 -n 1 --mobile urls.txt
--outputFolder output --budget.configPath budget.json

Anda juga dapat memasukkan konfigurasi tambahan dengan menuliskan command di bawah ini.

docker run sitespeed.io/sitespeed.io:18.0.1 --help

6. Tambahkan Publish HTML Reports di bagian Post-build Actions. Masukkan rincian berikut, kemudian klik Save.

• HTML Directory to archive: output
• Index page[s]: index.html
• Report title: Performance Report

7. Klik Build Now untuk memulai.

Tim Engineering Niagahoster terus mengeksplorasi cara baru untuk meningkatkan performa website. Tujuan kami hanya satu yaitu pengguna dapat semakin nyaman ketika berinteraksi dengan website Niagahoster.

Sitespeed.io hanyalah salah satu bentuk eksplorasi kami. Tool ini memang multiguna dan sangat mudah dioperasikan sesuai kebutuhan.

Dalam konteks Niagahoster, misalnya, Tim Engineering melakukan integrasi dengan dashboard (https://dashboard.sitespeed.io/), CI/CD tools, maupun piranti pengujian performa lainnya.

Semoga artikel ini bermanfaat. Until then, stay curious!