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

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

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

Jadi, pikirkan sumber daya yang akan kalian kirimkan!

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

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

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!

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

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

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”

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

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

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

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

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/

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

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

Silahkan sampaikan pertanyaan!

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

Terima Kasih.