$30 off During Our Annual Pro Sale. View Details »

Kinerja Web 101

Kinerja Web 101

Pengetahuan dasar untuk memahami hal yang harus dilakukan untuk mengoptimalkan kinerja sebuah web

Irfan Maulana

April 11, 2020
Tweet

More Decks by Irfan Maulana

Other Decks in Technology

Transcript

  1. Kinerja Web 101
    Irfan Maulana
    Principal Engineer @ Tokopedia
    Selasa, 14 April 2020 19:30 WIB

    View Slide

  2. 2013 2015 2018 2019
    2013
    Java Developer
    SML Technologies
    2015
    Frontend Dev
    Blibli.com
    2018
    Frontend Dev
    Bizzy.co.id
    2019
    Principal Eng
    Tokopedia
    Perjalanan Karir Saya

    View Slide

  3. Beda Web dengan Apps
    Apps
    Kamu mungkin cuma akan mengunduhnya sekali
    Web
    Kamu harus mengunduhnya setiap saat

    View Slide

  4. Jadi, pikirkan sumber daya
    yang akan kalian kirimkan!

    View Slide

  5. Kenapa Web tetap dicintai?
    Lebih mudah didistribusikan
    Lebih mudah dicari
    Mudah diakses tanpa pemasangan
    Mudah membagikan halaman tertentu
    Selalu terbaru

    View Slide

  6. Kenapa kinerja web menjadi penting?
    Pengguna aktif
    Sumber: https://developers.google.com/web/fundamentals/performance/why-performance-matters
    Konversi
    Pengalaman
    Pengguna
    Mengenai
    Kamu!

    View Slide

  7. Bagaimana Mengukurnya?
    ● Lighthouse, PageSpeed Insight, Web.dev
    measure
    ● WebPageTest, GTMetrix, SiteSpeed.io
    ● GA, New Relic, Akamai mPulse, RayGun,
    AppDynamics
    Jangan cuma diukur,
    disimpan juga ya data
    pergerakannya!

    View Slide

  8. Hal-hal yang bisa kita lakukan
    ● Meningkatkan kemampuan menerima dan mengirimkan
    permintaan
    ● Memperkecil dan memampatkan ukuran sumber daya yang
    dikirimkan
    ● Kirimkan HANYA yang dibutuhkan oleh pengguna
    ● Kurangi jumlah yang harus dikirimkan
    ● Atur prioritas pengiriman
    ● Adaptasikan dengan keadaan pengguna

    View Slide

  9. Meningkatkan kemampuan menerima dan
    mengirim permintaan
    ● Tingkatkan kemampuan peladen (server)
    ● Gunakan penyedia layanan yang mumpuni
    ● Pasang HTTP/2
    ● Gunakan CDN untuk mendekatkan
    dengan pengguna

    View Slide

  10. Memampatkan sumber daya
    ● Pastikan selalu kirimkan sumber data dalam bentuk sudah ter-gzip
    atau brotli
    ● JS, CSS dan HTML sebisa mungkin harus sudah di “minify”, di
    “optimize” dan dibuang kode mati di dalamnya.
    ● Kurangi penggunaan text karena tidak bisa di “minify”

    View Slide

  11. Memperkecil sumber daya
    ● Hapus kode yang tidak dibutuhkan, gabungkan kode yang bersifat
    duplikasi
    ● Perhatikan benar-benar penggunaan pustaka dari luar, cek
    bundlephobia.com terlebih dahulu dan cek komposisi kode kalian
    dengan BundleAnalyzer setelahnya
    ● Kurangi kualitas gambar (atau media lainnya) dan
    pilih tipe yang tepat

    View Slide

  12. Kirimkan hanya yang dibutuhkan
    ● Pecahkan kode (code-splitting) dan tunda pengiriman (lazy load)
    pada saat dibutuhkan saja
    ● Prioritaskan sumber daya yang terlihat di layar saat pertama kali
    dan tunda yang berada di bawah layar
    ● Kirimkan sumber daya sesuai dengan halamannya
    ● Sesuaikan dimensi gambar dengan penampungnya,
    kirimkan gambar dalam beberapa versi ukuran

    View Slide

  13. Kurangi jumlah yang permintaan
    ● Gabungkan permintaan ke peladen
    yang tidak harus saling tunggu
    ● Gunakan cara muat yang tidak memblokir proses
    ● Utamakan Internal CSS pada bagian kritis
    ● Gunakan sprite pada gambar
    yang datang secara bersamaan
    ● Kurangi vendor pelacakan dari pihak luar
    ● Cache semua sumber daya statis

    View Slide

  14. Atur prioritas pengiriman
    ● Naikan prioritas untuk sumber daya kritis, gunakan preload
    ● Turunkan prioritas yang tidak digunakan saat pertama namun
    dibutuhkan secepatnya pada aksi berikutnya,
    gunakan prefetch
    Sumber: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

    View Slide

  15. Adaptasikan dengan keadaan pengguna
    ● Bedakan sumber daya untuk pengguna dengan kecepatan
    internet cepat dan lambat serta pengguna dengan peramban
    modern dan lawas
    ● Tidak perlu melakukan “transpile” dan mengirimkan “polyfill” pada
    peramban modern
    ● Sebisa mungkin gunakan fitur bawaan dari peramban,
    cek terlebih dahulu dukungan dari peramban
    Sumber: https://addyosmani.com/blog/adaptive-loading/

    View Slide

  16. Mengenai pekerjaan optimasi kinerja web
    ● Web bukan hanya tanggung jawab si pemrogram saja,
    memastikan semua pihak mengerti dan bertanggung jawab
    bersama merupakan hal wajib di awal.
    ● Optimasi bukan pekerjaan yang sekali selesai, dibutuhkan
    konsistensi untuk secara berkelanjutan memantau dan
    memperbaikinya.
    ● Jangan melakukan optimasi tanpa data, data penting bagi kita
    untuk merekam kondisi terkini dan capaian yang sudah didapat

    View Slide

  17. Baca lebih lanjut
    https://mazipan.space/best-practice-loading-a-web/

    View Slide

  18. Silahkan sampaikan pertanyaan!

    View Slide

  19. Temukan saya di dunia maya!
    Facebook : s.id/fb-mazipan
    Twitter : s.id/tw-mazipan
    Linkedin : s.id/in-mazipan
    Github : s.id/gh-mazipan
    Blog : mazipan.space

    View Slide

  20. Terima Kasih.

    View Slide