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

Kinerja Web 101 - Edisi 2022

Kinerja Web 101 - Edisi 2022

Penjabaran mengenai kinerja web: kenapa memilih web, kenapa kinerja web itu penting, berbagai aksi yang bsai dikerjakan untuk memperbaiki kinerja web sampai pada prinsip yang harus dipegang ketika melakukan pekerjaan berkaitan dengan perbaikan kinerja web.

Irfan Maulana

March 02, 2022
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

Transcript

  1. KINERJA WEB 101
    Edisi 2022
    Irfan Maulana
    Principal Engineer Web Platform - Tokopedia

    View Slide

  2. Irfan Maulana (mazipan)
    2013-2015
    2015-2018
    2018-2019
    2019-sekarang
    SML Tech
    Blibli.com
    Bizzy
    Tokopedia

    View Slide

  3. Hal yang akan dibahas
    04
    05
    06
    01
    02
    03
    Kenapa memilih web?
    Kenapa kinerja web
    penting?
    Bagaimana
    mengukurnya?
    Aksi yang bisa
    dikerjakan
    Kesimpulan
    Prinsip pekerjaan

    View Slide

  4. Kenapa memilih
    web?
    Berbagai alasan kenapa kita masih membuat web,
    kenapa web masih dicintai penggunanya, dan kenapa
    web menjadi solusi yang terbaik bagi kalian dan
    pengguna.

    View Slide

  5. Kenapa memilih web?
    Dapat dibagikan ke
    orang lain dengan
    sangat mudah
    Tidak perlu
    memasang aplikasi
    tambahan, bisa
    langsung diakses
    Dapat dengan mudah
    dicari melalui
    berbagai mesin
    pencarian
    MUDAH DIBAGIKAN MUDAH DIAKSES
    MUDAH DICARI
    Memperbarui konten
    tanpa perlu meminta
    pengguna melakukan
    aksi tambahan
    SELALU TERBARUKAN

    View Slide

  6. Kenapa kinerja web
    penting?
    Berbagai studi kasus yang menyatakan bahwa kinerja
    web bisa memberikan dampak positif atau negatif
    terhadap bisnis kalian.

    View Slide

  7. Mempertahankan pengguna
    Meningkatkan traffic dari search
    engine dan pendaftaran 15%
    Meningkatkan konversi 7%,
    menurunkan bounce-rate 7%,
    meningkatkan jumlah halaman per
    sesi 10%
    Mengurangi waktu tunggu yang
    dirasakan sebanyak 40%
    Mengurangi waktu muat rata-rata
    850ms
    Situs berkinerja tinggi melibatkan dan mempertahankan
    pengguna lebih baik daripada situs berkinerja rendah.
    Pinterest COOK
    https://s.id/webperf-pinterest
    https://s.id/webperf-cook

    View Slide

  8. Meningkatkan konversi
    Situs lambat berdampak negatif pada pendapatan, dan situs
    cepat terbukti meningkatkan rasio konversi.
    AutoAnything
    Ketika AutoAnything mengurangi waktu muat hingga setengahnya, mereka melihat peningkatan
    penjualan sebesar 12% hingga 13%.
    Furniture Village
    Retailer Furniture Village mengaudit kecepatan situs mereka dan mengembangkan rencana untuk
    mengatasi masalah yang mereka temukan, yang menghasilkan pengurangan 20% dalam waktu buka
    halaman dan 10% peningkatan rasio konversi.
    https://s.id/autoanything
    https://s.id/furniture-village

    View Slide

  9. Pengalaman pengguna
    Dalam hal pengalaman pengguna, kecepatan itu penting.
    Sebuah studi konsumen menunjukkan bahwa respons stres terhadap
    penundaan kecepatan seluler mirip dengan menonton film horor atau
    memecahkan masalah matematika, dan lebih besar daripada menunggu
    di antrian kasir di toko ritel.
    https://s.id/case-study-ericsson

    View Slide

  10. Mengenai manusia
    Situs dan aplikasi yang berkinerja buruk juga dapat menimbulkan biaya
    nyata bagi orang-orang yang menggunakannya.
    https://s.id/case-study-ericsson

    View Slide

  11. Bagaimana
    mengukurnya?
    Cara umum yang dikerjakan banyak orang untuk
    mengukur sebuah web performa.

    View Slide

  12. Mengukur kinerja web
    Sebaiknya punya data historis agar bisa dipantau
    perkembangannya dari waktu ke waktu.
    Lighthouse, PageSpeed Insight
    Webpagetest.org, GTMetrix, SiteSpeed.io
    Google Analytics, New Relic, Akamai mPulse, RayGun, AppDynamics

    View Slide

  13. Aksi yang bisa
    dikerjakan
    Kumpulan berbagai aksi nyata yang bisa dikerjakan
    baik secara umum maupun spesifik untuk
    meningkatkan performa web.

    View Slide

  14. Mempercepat request-response
    Perbaikan kinerja web dimulai dari bagian paling belakang.
    Server yang mumpuni
    Edge/CDN untuk mendekatkan jaringan
    Cache, set http header
    Kurangi waktu proses di server
    Kurangi waterfall request (setup http/2, async process)

    View Slide

  15. Memampatkan sumber daya
    Pastikan sumber daya yang digunakan sudah optimal
    Gunakan pemampatan di semua lini (Brotli/gzip)
    Minify & optimize JS, CSS, HTML
    Kurangi penggunaan static text
    Kurangi kualitas gambar

    View Slide

  16. Memperkecil sumber daya
    Semakin kecil sumber daya yang harus dimuat, akan lebih baik
    Buang kode duplikasi dan tidak dibutuhkan
    Perhatikan penambahan kode, penggunaan pustaka dari pihak ketiga, cari alternatif pembanding,
    ukur sebelum dipakai, evaluasi setelah digunakan
    Gunakan tipe gambar yang optimal (webp, avif)

    View Slide

  17. Kurangi jumlah permintaan
    Semakin sedikit permintaan sumber daya, akan lebih baik
    Gabungkan yang bisa digabungkan
    Gunakan cara muat yang tidak saling tunggu
    Evaluasi penggunaan vendor analitik
    Internal CSS pada bagian kritis
    Cache permintaan yang sama dengan sebelumnya

    View Slide

  18. Kirim hanya yang dibutuhkan
    Pastikan sumber daya yang dikirim, sudah tepat guna
    Pecah kode (code-splitting), tunda pengiriman (lazy-load), muat saat dibutuhkan
    Muat bagian yang terlihat pertama kali, sisanya tunda
    Pastikan tidak ada sumber daya dari halaman lain yang termuat
    Sesuaikan dimensi gambar dengan penampungnya, sediakan beberapa ukuran, adaptasikan

    View Slide

  19. Atur prioritas
    Sumber daya kritis harus didahulukan
    Bagian teratas, harus didahulukan, gunakan preload untuk memaksa prioritasnya lebih tinggi
    Bagian di bawah dan kemungkinan besar akan dikunjungi, bisa di prefetch
    https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

    View Slide

  20. Adaptasi dengan pengguna
    Pahami kondisi pengguna, sesuaikan
    Pahami kemampuan device, kondisi memori, kondisi baterai, kondisi jaringan dan dukungan fitur.
    Sesuaikan sumber daya yang akan dikirimkan
    Buang polyfill/shim yang tidak dibutuhkan pada peramban modern. Bisa bedakan sumber daya
    berdasarkan jenis dan versi peramban
    Utamakan penggunaan fitur bawaan, sebelum melirik ke pustaka pihak ketiga
    https://addyosmani.com/blog/adaptive-loading/

    View Slide

  21. Baca selengkapnya
    web.dev/fast

    View Slide

  22. Prinsip pekerjaan
    Prinsip utama yang harus dipahami oleh kalian yang
    ingin bergelut dalam bidang optimalisasi kecepatan
    web

    View Slide

  23. Prinsip perbaikan kinerja web
    BERTAHAP BERKELANJUTAN
    KOLABORASI DATA YANG UTAMA

    View Slide

  24. Kesimpulan
    Rangkuman dari sesi presentasi Kinerja Web 101

    View Slide

  25. Kesimpulan
    Web memiliki keunggulan dan kelemahannya tersendiri
    Di web, pada prinsipnya: lebih kecil lebih baik, lebih sedikit lebih baik, sesuaikan dengan kebutuhan
    dan kondisi pengguna
    Diperlukan kerja bersama, bertahap, berkelanjutan, dan mengutamakan data pada saat
    mengerjakan perbaikan kinerja web

    View Slide

  26. TERIMA KASIH!
    Credit: template by slidesgo

    View Slide