Kinerja Web 101

Kinerja Web 101

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

D83b3739651001461f48763639b90b50?s=128

Irfan Maulana

April 11, 2020
Tweet

Transcript

  1. Kinerja Web 101 Irfan Maulana Principal Engineer @ Tokopedia Selasa,

    14 April 2020 19:30 WIB
  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
  3. Beda Web dengan Apps Apps Kamu mungkin cuma akan mengunduhnya

    sekali Web Kamu harus mengunduhnya setiap saat
  4. Jadi, pikirkan sumber daya yang akan kalian kirimkan!

  5. Kenapa Web tetap dicintai? Lebih mudah didistribusikan Lebih mudah dicari

    Mudah diakses tanpa pemasangan Mudah membagikan halaman tertentu Selalu terbaru
  6. Kenapa kinerja web menjadi penting? Pengguna aktif Sumber: https://developers.google.com/web/fundamentals/performance/why-performance-matters Konversi

    Pengalaman Pengguna Mengenai Kamu!
  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!
  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
  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
  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”
  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
  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
  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
  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
  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/
  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
  17. Baca lebih lanjut https://mazipan.space/best-practice-loading-a-web/

  18. Silahkan sampaikan pertanyaan!

  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
  20. Terima Kasih.