TL;DR

Ingin mengukur dan memantau performa website Anda secara berkala / terjadwal secara otomatis? Deploy Speedlify melalui netlify dan gunakan Github Actions (cron schedule) / Zapier untuk trigger build setiap interval waktu tertentu.

Anda dapat langsung ke sini jika Anda mengerti apa yang perlu dilakukan. Namun jika anda membutuhkan panduan, tulisan ini akan menunjukkan setiap langkah yang perlu Anda lakukan.

Apa saja yang akan dibahas dalam tulisan ini?

• Cara mengkonfigurasi speedlify
• Cara mendeploy speedlify
• Menggunakan Netlify build hooks dan Github Actions untuk trigger build halaman pengukuran secara otomatis dalam waktu tertentu.

Tulisan ini tidak mencakup...

Pengukuran performa website semacam Google Analytics (SEO or visitor related analytics). Performa website yang dibahas pada tulisan ini adalah performa berdasarkan standar Lighthouse.

Mengukur Performa Website?

Saat ini banyak sekali cara untuk mengukur performa website selain menggunakan lighthouse secara local(Chrome Dev Tools). Bahkan baru belakangan ini Vercel, PaaS untuk deployment frontend menyediakan fitur yang disebut Analytics. Analytics tersebut dapat menunjukkan performa website Next.js atau Gatsby Anda secara berkala secara otomatis dan tanpa perlu banyak menyiapkan konfigurasi (almost zero-config). Namun, fitur Analytics ini dibatasi hanya dapat digunakan untuk satu projek jika akun Vercel yang anda gunakan adalah versi gratis.

Lalu, bagaimana apabila kita memiliki lebih dari satu projek / website yang ingin kita ukur performa nya secara berkala tanpa mengeluarkan biaya tambahan? Disinilah saya ingin mengenalkan dan menunjukkan cara mendeploy Speedlify, sebuah template halaman pengukuran performa website yang dibuat oleh Zach Leatherman. Speedlify dibangun menggunakan framework static site generator 11ty(eleventy).

Saya telah mencoba dan mendeploy speedlify untuk project saya disini.

fun fact: saya menemukan speedlify ini saat sedang iseng mengeksplor halaman dokumentasi 11ty (maaf tidak penting haha, just intermezzo 😄)

Yuk kita coba langsung!

Bagaimana Caranya?

Apa saja yang diperlukan?

• Akun Github
• Akun Netlify

Panduan ini ditulis dengan asumsi bahwa Anda:

• Telah memahami dasar penggunaan Git
• Familiar dengan Netlify
• Familiar dengan environment Node.js (telah menginstall node dan npm)

Saya sarankan Anda mengunjungi halaman Speedlify terlebih dahulu untuk mendapatkan gambaran seperti apa halaman monitoring yang akan kita pakai. Pada halaman tersebut juga telah disediakan link menuju repositori source code yang dapat kita pakai untuk mendeploy halaman monitoring website kita sendiri. Namun, jika Anda merasa kesulitan, Anda dapat mengikuti langkah-langkah berikut ini:

#1: Clone Repo Speedlify

Import repo speedlify ke akun github anda (https://github.com/new/import),
masukkan URL berikut: https://github.com/zachleat/speedlify/.

Setelah selesai import, clone repo tersebut ke dalam local machine anda atau jalankan command berikut ini di dalam folder local anda:

git clone https://github.com/[USERNAME_GITHUB_ANDA]/speedlify/

cd speedlify

Setelah itu jalankan npm install atau npm i.

#2: Menentukan alamat URL website yang akan anda ukur performanya

Buka folder _data/sites. Setiap file yang Anda buat dalam folder tersebut merepresentasikan satu kategori. Anda dapat menentukan lebih dari satu URL untuk setiap kategori.
Hapus semua file bawaan yang ada dalam folder _data/sites. Buatlah file [nama_kategori].js. (ganti [nama_kategori] dengan nama kategori yang Anda inginkan). Anda dapat membuat lebih dari 1 file kategori, namun perlu anda perhatikan hal berikut: https://github.com/zachleat/speedlify/#known-limitations

// _data/sites/[nama_kategori].js

module.exports = {
    name: "Nama Projek / Kategori", // optional, falls back to object key
    description: "Deskripsi Projek / Kategori",
    options: {
        frequency: 60 * 23, // 23 jam

        // Use "run" if the sites don’t share assets on the same origin
        //           and we can reset chrome with each run instead of
        //           each site in every run (it’s faster)
        // Use "site" if sites are all on the same origin and share assets.
        freshChrome: "run",
    },
    urls: [
        "https://[URL_WEB_ANDA]/",
        // dst
        // pastikan setiap URL diakhiri dengan "/"
    ]
};

Keterangan

• options
  • frequency: menentukan melakukan 1x pengukuran setiap berapa menit yang ingin kita tentukan. Jika mengisi 60*23 (1380 menit atau 23 jam) artinya kita melakukan pengukuran maksimal 1x setiap 23 jam. Value ini digunakan untuk menghindari pengukuran lebih dari 1x diluar waktu yang telah kita tentukan yang akan memakan waktu build time. Misalkan kita set 23jam, maka ketika kita mengkonfigurasi trigger build setiap 6jam, jika hasil pengukuran terakhir untuk kategori ini masih belum lewat dari 23 jam saat proses build, pengukuran untuk kategori tersebut akan dilewati.

#3: Test running di local

Jalankan npm run start. Apabila kategori yang anda masukkan sudah muncul, kita dapat lanjut ke langkah berikutnya. Ketika anda klik salah satu kategori, hasil pengukuran tidak akan muncul. Pengukuran akan dilakukan ketika kita mendeploy speedlify di netlify.
Commit perubahan dan jalankan git push untuk menerapkan perubahan yang telah anda lakukan ke repositori remote github anda.

#4: Deploy speedlify yang telah kita konfigurasi melalui Netlify

Buka dashboard Netlify anda (https://app.netlify.com/), lalu klik "New site from Git". Pilih repo speedlify anda.

Konfirmasi konfigurasi build hingga muncul tombol "Deploy Site" dan klik tombol tersebut. Netlify build akan melakukan proses build dan deployment. Jika proses build dan deployment berhasil, Anda dapat melakukan preview deployment.

Hasil halaman pengukuran yang berhasil di build akan tampak seperti berikut:

#5: Setup konfigurasi Github Action untuk trigger build Netlify secara otomatis sesuai jadwal yang ingin Anda tentukan

Untuk menerapkan pengukuran secara berkala, kita akan memanfaatkan build hooks netlify dan Github Actions. Mengapa kita perlu mengkonfigurasi trigger build secara otomatis? Karena pengukuran hanya dilakukan setiap proses build dilakukan. Tentu Anda tidak ingin melakukan trigger build secara manual bukan? Anda tidak harus memakai Github Actions jika Anda ingin menggunakan Zapier atau layanan lainnya yang mendukung cron schedule. Proses yang sama dapat kita capai menggunakan Zapier dengan Schedule by Zapier dan Webhooks by Zapier. Namun untuk saat ini Webhooks by Zapier hanya dapat dinyalakan apabila anda merupakan pengguna Zapier premium. Oleh karena itu pada panduan ini saya akan menggunakan Github Actions sebagai alternatif yang lebih ramah kantong alias gratis (not fully free, tetap ada limitation tapi akan sangat jarang untuk hit limit tersebut).

Kita akan memerlukan link build hook (webhooks) untuk trigger build di netlify. Untuk mendapatkan link tersebut, buka project speedlify di netlify dashboard anda, lalu buka halaman "Site settings". Buka pengaturan "Build & Deploy".

Kemudian buka bagian "Build hooks", klik "Add build hook".

Kita akan mendapatkan URL build hooks, copy link tersebut.

Selanjutnya kita akan mengkonfigurasi Github Actions untuk melakukan trigger build netlify secara otomatis. Bukalah folder speedlify local Anda kembali, dan tambahkan file .github/workflows/main.yml dan paste link build hooks yang telah Anda copy ke dalam file tersebut:

# .github/workflows/main.yml

# edit sesuai kebutuhan Anda
name: Trigger Netlify Build daily on Weekday
on:
  schedule:
    # jika Anda ingin menentukan sendiri waktu / interval, ganti value cron schedule di bawah ini
    # jika Anda bingung bagaimana cara mengisi value interval cron di bawah ini, kunjungi https://crontab.guru/
    # setiap jam 22:00 weekdays.
    - cron: '0 22 * * MON-FRI'
jobs:
  build:
    name: Netlify build
    runs-on: ubuntu-latest
    steps:
      - name: Curl request
        run: curl -X POST -d {} LINK_BUILD_HOOK_ANDA

Commit perubahan dan jalankan git push. Jika konfigurasi benar, Anda dapat melihatnya di tab "Actions" pada repositori remote github Anda.

Sekarang, Anda telah memiliki halaman khusus untuk memantau performa website secara berkala dan otomatis.

Limitasi / Batasan

Perlu diperhatikan bahwa semakin banyak halaman website yang Anda tambahkan ke dalam konfigurasi speedlify Anda, build time yang dibutuhkan akan semakin lama. Netlify versi gratis memiliki batasan build time maksimal 15 menit untuk setiap build dan kuota 300 menit build time setiap bulan.

Saya sendiri mengakalinya dengan membatasi pengukuran maksimal 1x setiap 23 jam, total URL website (dari seluruh kategori) yang saya ukur sekitar 5 hingga 10 URL, dan melakukan trigger build otomatis setiap hari weekday (Senin - Jumat saja) pada pukul 10 malam. Dengan konfigurasi tersebut, setiap build memakan waktu sekitar 4 - 7 menit (<15 menit), sehingga dalam sebulan maksimal saya akan menggunakan kuota build sebanyak 4.5 * 5 * 7 ~= 160 menit (<300 menit).

Terima Kasih!

Telah membaca tulisan ini. Semoga bermanfaat.

Referensi

• https://www.speedlify.dev/
• https://github.com/zachleat/speedlify/#deploy-to-netlify
• https://github.com/zachleat/speedlify/#known-limitations
• https://www.zachleat.com/web/speedlify/

Rekomendasi Alternatif

(some exhaustive list of other tools to measure your website performance)

• https://web.dev/measure/
• https://www.lightest.app/

Diskusi

Seberapa pentingkah mengukur performa website untuk Anda? Seberapa sering Anda mengukur performa website? Tools apa saja yang biasanya digunakan?