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

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. 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
  2. Beda Web dengan Apps Apps Kamu mungkin cuma akan mengunduhnya

    sekali Web Kamu harus mengunduhnya setiap saat
  3. Kenapa Web tetap dicintai? Lebih mudah didistribusikan Lebih mudah dicari

    Mudah diakses tanpa pemasangan Mudah membagikan halaman tertentu Selalu terbaru
  4. 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!
  5. 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
  6. Meningkatkan kemampuan menerima dan mengirim permintaan • Tingkatkan kemampuan peladen

    (server) • Gunakan penyedia layanan yang mumpuni • Pasang HTTP/2 • Gunakan CDN untuk mendekatkan dengan pengguna
  7. 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”
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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/
  13. 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
  14. 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