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

Mengukur dan meningkatkan performa website

Mengukur dan meningkatkan performa website

Bagaimana mengukur dan meningkatkan performa website

Irfan Maulana

June 10, 2022
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

Transcript

  1. Performa Website
    Irfan Maulana untuk temu midtrans
    Mengukur & meningkatkan
    11 Juni 2022

    View Slide

  2. Saat ini bekerja di Tokopedia,
    sebagai Principal Engineer
    untuk tim Web Platform.
    Blog: mazipan.space
    Twitter: @Maz_Ipan
    Ini saya!

    View Slide

  3. Saya tidak mewakili tempat saya bekerja, materi yang disampaikan bukan
    merupakan pandangan dari tempat saya bekerja, melainkan pendapat
    personal.
    Materi dibuat dengan asumsi kondisi dari saya alami yang bisa jadi tidak
    sesuai dengan kondisi terkini kalian, kesalahan dan segala resiko yang
    ditimbulkan dikarenakan perbedaan penerjemahan maksud maupun
    pengaplikasian sebagian materi tanpa berkonsultasi, bukan menjadi
    tanggung jawab saya.
    Materi dimaksudkan untuk tujuan pembelajaran dan tidak diperkenankan
    untuk kegiatan komersial.
    Penafian

    View Slide

  4. 06
    05
    04
    Performa web
    Alur perbaikan
    Alat ukur
    Kenapa web?
    Teori teknis
    Kesimpulan
    Agenda sesi
    03
    02
    01

    View Slide

  5. Web?
    Kenapa memilih

    View Slide

  6. Mudah dicari
    Dapat dicari dengan
    mudah melalui mesin
    pencarian
    Mudah dibagi
    Cukup menghafal
    atau menyalin alamat
    web
    Mudah diakses
    Tidak perlu
    memasang aplikasi
    tambahan untuk bisa
    mengakses
    Terbarukan
    Kecepatan perbaikan
    tanpa perlu
    memperbarui lewat
    toko aplikasi

    View Slide

  7. Hal yang harus diketahui tentang performa web
    Web
    Performa

    View Slide

  8. Kenapa perlu peduli?
    Sebuah website bisa membutuhkan
    puluhan megabyte untuk bisa dimuat
    dengan penuh
    Tidak akan ada masalah, kalau diakses dari
    jaringan fiber optik dan perangkat desktop
    yang mumpuni
    Dibutuhkan uang nyata yang harus
    dihabiskan oleh pengguna, untuk bisa
    menggunakan sebuah website
    Tapi bagaimana kalau diakses dari
    perangkat handphone yang cukup jadul
    atau dari jaringan internet yang belum
    begitu memadai?

    View Slide

  9. Relativitas performa web
    Cepat buat saya, belum tentu
    cepat buat kalian
    Bahkan bila selesai loading
    bersamaan, bisa jadi salah satu
    terasa lebih cepat dari yang lain
    Terlihat cepat, tapi kok lama
    merespons interaksi

    View Slide

  10. Tipe metrik
    Kecepatan yang dirasakan
    Seberapa cepat halaman dapat dimuat dan
    merender semua elemen visualnya
    Responsivitas pemuatan
    Seberapa cepat halaman dapat memuat
    dan mengeksekusi JavaScript agar bisa
    merespons interaksi dengan cepat
    Responsif di runtime
    Setelah halaman dimuat, seberapa cepat
    dapat merespons interaksi pengguna
    Stabilitas visual
    Apakah elemen pada halaman berubah
    atau bergerak dengan cara yang tidak
    diharapkan dan berpotensi mengganggu
    interaksi?
    Kelancaran
    Apakah transisi dan animasi di-render
    dengan kecepatan frame yang konsisten
    dan mengalir lancar dari satu keadaan ke
    keadaan berikutnya?

    View Slide

  11. Metrik yang biasa dibahas
    CLS
    FID
    LCP
    TTFB
    TBT
    FCP
    TTI
    Core Web Vitals Metrik Pendukung
    INP
    Experimental
    https://web.dev/metrics/

    View Slide

  12. Buat e-commerce
    SEO jadi pilar penting
    Dan performa web adalah bagian penting
    dari SEO
    Banyak memiliki fitur
    E-commerce biasanya memiliki fitur yang
    kaya, dan butuh penanganan yang baik untuk
    tetap berada dalam performa yang baik
    Pengalaman pengguna
    Semakin baik performa web, semakin kecil
    kemungkinan pengguna kabur
    Tingkat Konversi
    Semakin betah, semakin tinggi kesempatan
    pengguna di konversi
    Pengguna loyal
    Semakin puas dengan performa web, maka
    kemungkinan akan kembali juga semakin
    tinggi

    View Slide

  13. Performa
    Web
    Alat ukur

    View Slide

  14. Jenis pengukuran
    Lab Lapangan
    Pengukuran langsung dengan
    data nyata yang dikumpulkan
    langsung dari pengguna asli
    Pengukuran dalam lingkungan
    yang terkontrol agar
    didapatkan hasil yang stabil

    View Slide

  15. Pilih yang mana?
    Terbaik untuk
    pengembangan
    Data poin terbatas
    Mengambil kondisi
    percentile teratas
    Terbaik untuk
    penilaian kinerja
    Data poin ribuan
    Kondisi multi varian
    Data Lab Data Lapangan

    View Slide

  16. Alat ukur yang tersedia
    Data Lab Data Lapangan
    Chrome DevTools
    Lighthouse
    Webpagetest
    Chrome UX Report
    Search Console

    View Slide

  17. Search Console

    View Slide

  18. PageSpeed Insight
    pagespeed.web.dev

    View Slide

  19. Chrome DevTools

    View Slide

  20. mazipan.space/speed

    View Slide

  21. webperf-ecommerce-id.
    vercel.app

    View Slide

  22. Performa
    Web
    Alur Perbaikan

    View Slide

  23. Alur perbaikan
    Cek dampak dari perbaikan
    terhadap metrik yang tersedia
    Test
    Lakukan pengujian
    dan buat analisa
    Rekam
    Simpan hasil pengujian
    sebagai berkas pembanding
    Measure Impact Fix
    Lakukan perbaikan
    berdasar rekomendasi

    View Slide

  24. Jadi cepat, dan tetap cepat
    Membuat menjadi cepat itu
    satu hal, membuatnya
    tetap cepat itu hal yang
    lain
    https://web.dev/how-to-stay-fast/

    View Slide

  25. Seandainya memang
    semudah itu…

    View Slide

  26. Kenapa jadi sulit?
    Penyebab turunnya performa web,
    seringkali bukan karena akar masalah
    teknis
    Perbaikan performa web bukan pekerjaan
    yang berhenti dengan satu tiket
    Semakin dini menyadari penurunan performa,
    semakin baik
    Semakin keren webnya, semakin banyak fitur
    yang ditambahkan, seringnya tidak
    berbanding lurus dengan perbaikan performa
    Pemilihan kerangka kerja modern oleh
    pengembang web, tidak selalu berdampak
    baik pada performa
    Perbaikan performa tidak bisa dikerjakan oleh
    tim pengembang web sendirian tanpa
    bantuan dari tim lainnya

    View Slide

  27. Jadi bagaimana dong?

    View Slide

  28. Ada yang perlu ditanyakan dulu
    Apakah organisasi kalian sudah paham
    pentingnya performa web bagi bisnis
    kalian?
    Apakah berbagai tim sudah siap bekerja
    bersama-sama mencari jalan tengah bagi
    perbaikan performa web?
    Apakah kesadaran akan performa web sudah
    siap menjadi budaya bagi semua tim?
    Apakah organisasi kalian siap berinvestasi
    untuk perbaikan performa web?
    Apakah struktur organisasi kalian sudah
    memungkinkan untuk penyelesaian masalah
    yang melibatkan tim dari divisi berbeda?
    Apakah pengembang web di tim kalian sudah
    siap belajar tingkat lanjut untuk perbaikan
    performa web?
    https://web.dev/fast/#build-a-performance-culture

    View Slide

  29. Mulai dari mana?
    Kesadaran organisasi
    Mempersiapkan peralatan
    Menjadikannya budaya
    Menyediakan ruang
    belajar & eksplorasi
    03
    05
    01
    02
    04
    Perbaikan berkelanjutan

    View Slide

  30. Performa
    Web
    Teori teknis

    View Slide

  31. Ingat prinsipnya
    Lebih sedikit, lebih baik
    Lebih kecil, lebih baik
    Lebih dekat, lebih baik

    View Slide

  32. Bagaimana peramban bekerja
    Pahami apa yang terjadi di belakang layar, ketika kamu mengetik
    sebuah alamat website pada sebuah peramban, kemudian mengetik
    ENTER, bagaimana peramban tersebut bekerja, mencari diman
    server tersebut berada, meletakan sumber daya, membuat koneksi,
    dan meminta berbagai sumber daya yang dibutuhkan.
    https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work
    https://developer.mozilla.org/en-US/docs/Web/Performance/Understanding_latency

    View Slide

  33. Memahami urutan permintaan
    Pada dasarnya, pintu masuk dari website adalah file HTML, darinya
    akan terbuat permintaan tambahan akan sumber daya yang
    dibutuhkan.
    Urutan permintaan sumber daya menjadi penting karena secara
    umum akan dilakukan berurutan, hal ini bisa dimanipulasi dan
    memang sudah seharusnya dioptimalkan. Sadar bahwa ada
    beberapa sumberdaya yang bersifat menghambat terhadap
    permintaan berikutnya sampai selesai diunduh, di-parse dan
    dieksekusi.

    View Slide

  34. Jalur kritis
    Ini adalah proses peramban membentuk dokumen web setelah
    berkas berhasil diunduh. Peramban akan mengikuti jalur atau
    langkah-langkah yang sudah didefinisikan.
    Mengoptimalkan jalur kritis dari proses render untuk
    memprioritaskan tampilan yang dibutuhkan oleh pengguna akan
    menghasilkan peningkatan yang signifikan terhadap waktu muat.
    https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path

    View Slide

  35. Pahami kondisi pengguna
    Keadaan pengguna saat mengakses website kita bisa
    berbeda-beda, memahami kelebihan dan kekurangan dari keadaan
    mereka untuk kemudian menyesuaikan konten yang disajikan bisa
    sangat membantu kita dalam mengoptimalkan performa web
    https://web.dev/adaptive-serving-based-on-network-quality/

    View Slide

  36. Budget performa web
    Membuat tetap cepat, itu hal yang berbeda. Tujuan utamanya adalah
    mencegah terjadinya regresi atau penurunan dari performa web
    pada masa yang akan datang.
    Set standard atau baseline, jalankan test secara berkelanjutan,
    kabarkan sedini mungkin.
    https://web.dev/performance-budgets-101/

    View Slide

  37. Core Web Vitals
    Inisiatif Google untuk memberikan panduan
    terpadu akan sinyal berkualitas yang utama dalam
    usaha memberikan pengalaman pengguna yang
    terbaik di web

    View Slide

  38. LCP - Largest Contentful paint
    web.dev/lcp
    web.dev/optimize-lcp
    Respon server
    lambat
    Penghambat
    render JS & CSS
    Sumber daya
    lambat dimuat
    Render di klien

    View Slide

  39. CLS - Cumulative Layout Shift
    web.dev/cls
    web.dev/optimize-cls
    Gambar tanpa
    dimensi
    Ads, Embeds,
    iFrame tanpa
    dimensi
    Konten yang
    disuntikan
    secara dinamis
    Web font

    View Slide

  40. FID - First Input Delay
    web.dev/fid
    web.dev/optimize-fid
    Waktu eksekusi
    JS yang lama
    Bundle JS yang
    besar
    Long tasks
    JS yang
    menghambat
    render

    View Slide

  41. Kesimpulan
    Performa web

    View Slide

  42. Perbaikan performa web dikerjakan
    bersama-sama, kesadaran akan
    pentingnya mesti dipunyai semua divisi
    Perbaikan performa web dikerjakan
    secara berkelanjutan, sedini mungkin
    dilakukan pengujian dan direkam
    perkembangannya
    Telah disediakan Core Web Vital,
    sebagai metrik utama yang bisa
    dipantau. Metrik pendukung juga akan
    berdampak pada ketiganya
    Memahami peramban bekerja, urutan dan prioritas dari
    permintaan, jalur kritis dari proses rendering, serta
    pemahaman terhadap kondisi pengguna akan membantu
    kita dalam melakukan perbaikan
    Data Lab digunakan dalam proses pengembangan, Data
    Lapangan memberikan kita validasi nyata akan proses
    perbaikan yang kita kerjakan

    View Slide

  43. web.dev/fast
    developer.mozilla.org/
    docs/Learn/Performance

    View Slide

  44. speakerdeck.com/mazipan

    View Slide

  45. CREDITS: This presentation template was created by Slidesgo,
    including icons by Flaticon, infographics & images by Freepik
    Terima
    kasih!

    View Slide