Kinerja Web 101 - Edisi 2022

Penjabaran mengenai kinerja web: kenapa memilih web, kenapa kinerja web itu penting, berbagai aksi yang bsai dikerjakan untuk memperbaiki kinerja web sampai pada prinsip yang harus dipegang ketika melakukan pekerjaan berkaitan dengan perbaikan kinerja web.

Transcript

1. KINERJA WEB 101 Edisi 2022 Irfan Maulana Principal Engineer Web Platform - Tokopedia
2. Irfan Maulana (mazipan) 2013-2015 2015-2018 2018-2019 2019-sekarang SML Tech Blibli.com Bizzy Tokopedia
3. Hal yang akan dibahas 04 05 06 01 02 03 Kenapa memilih web? Kenapa kinerja web penting? Bagaimana mengukurnya? Aksi yang bisa dikerjakan Kesimpulan Prinsip pekerjaan
4. Kenapa memilih web? Berbagai alasan kenapa kita masih membuat web, kenapa web masih dicintai penggunanya, dan kenapa web menjadi solusi yang terbaik bagi kalian dan pengguna.
5. Kenapa memilih web? Dapat dibagikan ke orang lain dengan sangat mudah Tidak perlu memasang aplikasi tambahan, bisa langsung diakses Dapat dengan mudah dicari melalui berbagai mesin pencarian MUDAH DIBAGIKAN MUDAH DIAKSES MUDAH DICARI Memperbarui konten tanpa perlu meminta pengguna melakukan aksi tambahan SELALU TERBARUKAN
6. Kenapa kinerja web penting? Berbagai studi kasus yang menyatakan bahwa kinerja web bisa memberikan dampak positif atau negatif terhadap bisnis kalian.
7. Mempertahankan pengguna Meningkatkan traffic dari search engine dan pendaftaran 15% Meningkatkan konversi 7%, menurunkan bounce-rate 7%, meningkatkan jumlah halaman per sesi 10% Mengurangi waktu tunggu yang dirasakan sebanyak 40% Mengurangi waktu muat rata-rata 850ms Situs berkinerja tinggi melibatkan dan mempertahankan pengguna lebih baik daripada situs berkinerja rendah. Pinterest COOK https://s.id/webperf-pinterest https://s.id/webperf-cook
8. Meningkatkan konversi Situs lambat berdampak negatif pada pendapatan, dan situs cepat terbukti meningkatkan rasio konversi. AutoAnything Ketika AutoAnything mengurangi waktu muat hingga setengahnya, mereka melihat peningkatan penjualan sebesar 12% hingga 13%. Furniture Village Retailer Furniture Village mengaudit kecepatan situs mereka dan mengembangkan rencana untuk mengatasi masalah yang mereka temukan, yang menghasilkan pengurangan 20% dalam waktu buka halaman dan 10% peningkatan rasio konversi. https://s.id/autoanything https://s.id/furniture-village
9. Pengalaman pengguna Dalam hal pengalaman pengguna, kecepatan itu penting. Sebuah studi konsumen menunjukkan bahwa respons stres terhadap penundaan kecepatan seluler mirip dengan menonton film horor atau memecahkan masalah matematika, dan lebih besar daripada menunggu di antrian kasir di toko ritel. https://s.id/case-study-ericsson
10. Mengenai manusia Situs dan aplikasi yang berkinerja buruk juga dapat menimbulkan biaya nyata bagi orang-orang yang menggunakannya. https://s.id/case-study-ericsson
11. Bagaimana mengukurnya? Cara umum yang dikerjakan banyak orang untuk mengukur sebuah web performa.
12. Mengukur kinerja web Sebaiknya punya data historis agar bisa dipantau perkembangannya dari waktu ke waktu. Lighthouse, PageSpeed Insight Webpagetest.org, GTMetrix, SiteSpeed.io Google Analytics, New Relic, Akamai mPulse, RayGun, AppDynamics
13. Aksi yang bisa dikerjakan Kumpulan berbagai aksi nyata yang bisa dikerjakan baik secara umum maupun spesifik untuk meningkatkan performa web.
14. Mempercepat request-response Perbaikan kinerja web dimulai dari bagian paling belakang. Server yang mumpuni Edge/CDN untuk mendekatkan jaringan Cache, set http header Kurangi waktu proses di server Kurangi waterfall request (setup http/2, async process)
15. Memampatkan sumber daya Pastikan sumber daya yang digunakan sudah optimal Gunakan pemampatan di semua lini (Brotli/gzip) Minify & optimize JS, CSS, HTML Kurangi penggunaan static text Kurangi kualitas gambar
16. Memperkecil sumber daya Semakin kecil sumber daya yang harus dimuat, akan lebih baik Buang kode duplikasi dan tidak dibutuhkan Perhatikan penambahan kode, penggunaan pustaka dari pihak ketiga, cari alternatif pembanding, ukur sebelum dipakai, evaluasi setelah digunakan Gunakan tipe gambar yang optimal (webp, avif)
17. Kurangi jumlah permintaan Semakin sedikit permintaan sumber daya, akan lebih baik Gabungkan yang bisa digabungkan Gunakan cara muat yang tidak saling tunggu Evaluasi penggunaan vendor analitik Internal CSS pada bagian kritis Cache permintaan yang sama dengan sebelumnya
18. Kirim hanya yang dibutuhkan Pastikan sumber daya yang dikirim, sudah tepat guna Pecah kode (code-splitting), tunda pengiriman (lazy-load), muat saat dibutuhkan Muat bagian yang terlihat pertama kali, sisanya tunda Pastikan tidak ada sumber daya dari halaman lain yang termuat Sesuaikan dimensi gambar dengan penampungnya, sediakan beberapa ukuran, adaptasikan
19. Atur prioritas Sumber daya kritis harus didahulukan Bagian teratas, harus didahulukan, gunakan preload untuk memaksa prioritasnya lebih tinggi Bagian di bawah dan kemungkinan besar akan dikunjungi, bisa di prefetch https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
20. Adaptasi dengan pengguna Pahami kondisi pengguna, sesuaikan Pahami kemampuan device, kondisi memori, kondisi baterai, kondisi jaringan dan dukungan fitur. Sesuaikan sumber daya yang akan dikirimkan Buang polyfill/shim yang tidak dibutuhkan pada peramban modern. Bisa bedakan sumber daya berdasarkan jenis dan versi peramban Utamakan penggunaan fitur bawaan, sebelum melirik ke pustaka pihak ketiga https://addyosmani.com/blog/adaptive-loading/
21. Baca selengkapnya web.dev/fast
22. Prinsip pekerjaan Prinsip utama yang harus dipahami oleh kalian yang ingin bergelut dalam bidang optimalisasi kecepatan web
23. Prinsip perbaikan kinerja web BERTAHAP BERKELANJUTAN KOLABORASI DATA YANG UTAMA
24. Kesimpulan Rangkuman dari sesi presentasi Kinerja Web 101
25. Kesimpulan Web memiliki keunggulan dan kelemahannya tersendiri Di web, pada prinsipnya: lebih kecil lebih baik, lebih sedikit lebih baik, sesuaikan dengan kebutuhan dan kondisi pengguna Diperlukan kerja bersama, bertahap, berkelanjutan, dan mengutamakan data pada saat mengerjakan perbaikan kinerja web
26. TERIMA KASIH! Credit: template by slidesgo