Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Membuat laporan kecepatan web untuk blog

Membuat laporan kecepatan web untuk blog

Bagaimana membuatkan laporan terbuka kecepatan muat sebuah web untuk blog pribadi

D83b3739651001461f48763639b90b50?s=128

Irfan Maulana

March 14, 2021
Tweet

Transcript

  1. Membuat laporan kecepatan web untuk blog pribadi Irfan Maulana Pemilik

    blog mazipan.space 17 Maret 2021 19:00 WIB facebook.com/groups/phpid
  2. > Kenalan Saya Irfan Maulana Menjadi Pemrogram sejak 2013-an Terjerumus

    menjadi Front End sejak 2015-an Pemilik blog mazipan.space
  3. > 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
  4. > 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.
  5. > 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
  6. > 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
  7. > 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.
  8. > 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
  9. > Udah ada yang pakai? mazipan.space/speed

  10. > Udah ada yang pakai? adibfirman.space/speed

  11. > 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
  12. > 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
  13. > Gimana bikinnya tuh? Langkah 2: Letakkan di Secret untuk

    Github Actions. Caranya masuk ke Settings > Secrets > new Repository Secret
  14. > 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)
  15. > Gimana bikinnya tuh? Langkah 4: Gunakan actions/checkout@v2 untuk mengambil

    kode sumber
  16. > Gimana bikinnya tuh? Langkah 5: Gunakan mazipan/psi-gh-action untuk membuat

    laporan otomatis
  17. > Hasilnya apaan sih?

  18. > Hasilnya apaan sih?

  19. > Hasilnya apaan sih?

  20. > 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
  21. > Penasaran bikin kaya gini? Baca cerita dibalik pembuatannya: mazipan.space/open-web-perf-report-for-personal-blog

  22. > 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.
  23. Terima kasih.