Membuat laporan kecepatan web untuk blog pribadi Irfan Maulana Pemilik blog mazipan.space 17 Maret 2021 19:00 WIB facebook.com/groups/phpid

> Kenalan Saya Irfan Maulana Menjadi Pemrogram sejak 2013-an Terjerumus menjadi Front End sejak 2015-an Pemilik blog mazipan.space

> Mengenai blog saya Iseng menulis di Blog sejak jaman kuliah (2011-an) Bermula dengan platform WP Sampai nyobain berbagai JamStack Nuxt.js -> Gatsby -> Next.js Domain juga gonta-ganti sih Sekarang lagi senang dengan domain: mazipan.space

> Kecepatan web Ada beberapa segmen sebenarnya: - First visit performance - Second (repeat) visit performance - Runtime performance Tapi yang paling mudah diukur ya, seberapa cepat web kalian dimuat untuk pertama kali? “First Visit Performance” Nah, performa yang dimaksud pada sesi kali ini ya itu.

> Mengapa kita mesti peduli? Menahan pengunjung pergi, hanya karena web terlalu lambat Memberikan kesempatan lebih besar bagi pengunjung mengerjakan hal yang kita harapkan Memprioritaskan pengunjung, memberikan kenyamanan ekstra Buat kita para pembangun web, bagian dari Engineering Excellent

> Mengukur kecepatan web Paling populer ya pakai Lighthouse: ada di Chrome DevTools, ada Chrome Extension-nya juga Lewat 3rd parties: web.dev/measure, PageSpeed Insight, WebPageTest Custom lewat CLI: Lighthouse-CLI, PWMetrics

> Laporan terbuka Menyajikan laporan hasil pengujian ke khalayak luas, sehingga tidak perlu lagi dilakukan pengujian setiap waktu. Mempertimbangkan pengujian kecepatan web membutuhkan waktu yang lumayan lama dan sumber daya yang tidak sedikit.

> Ide awal Membuat penjadwalan secara berkala: Cron Job Menghasilkan laporan berupa JSON file statis: LH CLI atau 3rd party API Mampu memperbarui data dan tampilan secara otomatis pula: Integrasi dengan CI/CD

> Udah ada yang pakai? mazipan.space/speed

> Udah ada yang pakai? adibfirman.space/speed

> Gimana bikinnya tuh? Prasyarat: - Blognya statis (atau menggunakan web statis generator) - Kode sumber terbuka dan menggunakan Github - Sudah terpasang fitur auto deploy ketika ada commit baru

> Gimana bikinnya tuh? Langkah 1: - Buat API Key baru dari PageSpeed Insight - Jangan pasang larangan (restriction) dulu ya di API Key nya Cek TKP gan >>> https://mazipan.space/s/buat-psi-api

> Gimana bikinnya tuh? Langkah 2: Letakkan di Secret untuk Github Actions. Caranya masuk ke Settings > Secrets > new Repository Secret

> Gimana bikinnya tuh? Langkah 3: - Buat berkas yaml baru untuk menjalankan Github Actions ini. Misal: .github/workflows/generate_psi.yml - Trigger dengan Cron Job sesuai yang kalian harapkan Misal: 30 2 * * * (setiap hari jam 2:30)

> Gimana bikinnya tuh? Langkah 4: Gunakan actions/checkout@v2 untuk mengambil kode sumber

> Gimana bikinnya tuh? Langkah 5: Gunakan mazipan/psi-gh-action untuk membuat laporan otomatis

> Hasilnya apaan sih?

> Hasilnya apaan sih?

> Hasilnya apaan sih?

> Kenapa JSON file sih? - JSON relatif mudah dikonsumsi oleh berbagai macam framework yang berbeda-beda - Kalian bisa berkreasi sendiri dengan UI nya untuk menampilkan data ini Males ah mas mikir lagi? Yowes, nyontek yang udah aja kalau gitu! Nyoh mas >>> mazipan.space/s/nyontek-dong

> Penasaran bikin kaya gini? Baca cerita dibalik pembuatannya: mazipan.space/open-web-perf-report-for-personal-blog

> Hal yang bisa dipelajari - Sebagai programmer web, kalian perlu mempermudah pengguna untuk tau seberapa sehat (baca: cepat) blog kalian - Coba lihat konsep kerjanya, kalaupun gak sesuai dengan kondisi kalian, kan bisa disesuaikan sendiri. - Otomasi itu penting banget buat programmer, makanya sedari awal pikirin, masa saya mau deploy dengan Upload lewat FTP sih? - Kalau udah ada orang yang buatin, ya pakai aja. Gak cocok? Ya kita bikin sendiri lah.

Terima kasih.