Membuat laporan kecepatan web untuk blog

Bagaimana membuatkan laporan terbuka kecepatan muat sebuah web untuk blog pribadi

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 Slide

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

   View 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 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 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 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 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 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 Slide

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

   View Slide

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

    View 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 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 Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

17. > Hasilnya apaan sih?
    

    View Slide

18. > Hasilnya apaan sih?
    

    View Slide

19. > Hasilnya apaan sih?
    

    View 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 Slide

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

    View 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 Slide

23. Terima kasih.
    

    View Slide