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

Irfan Maulana

March 14, 2021
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  9. > Udah ada yang pakai?
    mazipan.space/speed

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. > Hasilnya apaan sih?

    View full-size slide

  18. > Hasilnya apaan sih?

    View full-size slide

  19. > Hasilnya apaan sih?

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  23. Terima kasih.

    View full-size slide