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
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!
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
mazipan
masa5555
tkikuchi1002
kosui
ryomaru0825
comucal
lwug
is_ryo
yamamuteki
danielkatz
toshi0383
hhiroshell
i35_267
caitiem20
cassininazir
aleyda
edds
mza
chriscoyier
matthewcrist
afnizarnur
62gerente
tmm1
phodgson
morganepeng