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

Kinerja Web 101 - Edisi 2022

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.

Irfan Maulana

March 02, 2022
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

Transcript

  1. 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
  2. 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.
  3. 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
  4. Kenapa kinerja web penting? Berbagai studi kasus yang menyatakan bahwa

    kinerja web bisa memberikan dampak positif atau negatif terhadap bisnis kalian.
  5. 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
  6. 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
  7. 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
  8. Mengenai manusia Situs dan aplikasi yang berkinerja buruk juga dapat

    menimbulkan biaya nyata bagi orang-orang yang menggunakannya. https://s.id/case-study-ericsson
  9. 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
  10. Aksi yang bisa dikerjakan Kumpulan berbagai aksi nyata yang bisa

    dikerjakan baik secara umum maupun spesifik untuk meningkatkan performa web.
  11. 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)
  12. 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
  13. 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)
  14. 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
  15. 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
  16. 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
  17. 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/
  18. Prinsip pekerjaan Prinsip utama yang harus dipahami oleh kalian yang

    ingin bergelut dalam bidang optimalisasi kecepatan web
  19. 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