Performa Website Irfan Maulana untuk temu midtrans Mengukur & meningkatkan 11 Juni 2022

Saat ini bekerja di Tokopedia, sebagai Principal Engineer untuk tim Web Platform. Blog: mazipan.space Twitter: @Maz_Ipan Ini saya!

Saya tidak mewakili tempat saya bekerja, materi yang disampaikan bukan merupakan pandangan dari tempat saya bekerja, melainkan pendapat personal. Materi dibuat dengan asumsi kondisi dari saya alami yang bisa jadi tidak sesuai dengan kondisi terkini kalian, kesalahan dan segala resiko yang ditimbulkan dikarenakan perbedaan penerjemahan maksud maupun pengaplikasian sebagian materi tanpa berkonsultasi, bukan menjadi tanggung jawab saya. Materi dimaksudkan untuk tujuan pembelajaran dan tidak diperkenankan untuk kegiatan komersial. Penafian

06 05 04 Performa web Alur perbaikan Alat ukur Kenapa web? Teori teknis Kesimpulan Agenda sesi 03 02 01

Web? Kenapa memilih

Mudah dicari Dapat dicari dengan mudah melalui mesin pencarian Mudah dibagi Cukup menghafal atau menyalin alamat web Mudah diakses Tidak perlu memasang aplikasi tambahan untuk bisa mengakses Terbarukan Kecepatan perbaikan tanpa perlu memperbarui lewat toko aplikasi

Hal yang harus diketahui tentang performa web Web Performa

Kenapa perlu peduli? Sebuah website bisa membutuhkan puluhan megabyte untuk bisa dimuat dengan penuh Tidak akan ada masalah, kalau diakses dari jaringan fiber optik dan perangkat desktop yang mumpuni Dibutuhkan uang nyata yang harus dihabiskan oleh pengguna, untuk bisa menggunakan sebuah website Tapi bagaimana kalau diakses dari perangkat handphone yang cukup jadul atau dari jaringan internet yang belum begitu memadai?

Relativitas performa web Cepat buat saya, belum tentu cepat buat kalian Bahkan bila selesai loading bersamaan, bisa jadi salah satu terasa lebih cepat dari yang lain Terlihat cepat, tapi kok lama merespons interaksi

Tipe metrik Kecepatan yang dirasakan Seberapa cepat halaman dapat dimuat dan merender semua elemen visualnya Responsivitas pemuatan Seberapa cepat halaman dapat memuat dan mengeksekusi JavaScript agar bisa merespons interaksi dengan cepat Responsif di runtime Setelah halaman dimuat, seberapa cepat dapat merespons interaksi pengguna Stabilitas visual Apakah elemen pada halaman berubah atau bergerak dengan cara yang tidak diharapkan dan berpotensi mengganggu interaksi? Kelancaran Apakah transisi dan animasi di-render dengan kecepatan frame yang konsisten dan mengalir lancar dari satu keadaan ke keadaan berikutnya?

Metrik yang biasa dibahas CLS FID LCP TTFB TBT FCP TTI Core Web Vitals Metrik Pendukung INP Experimental https://web.dev/metrics/

Buat e-commerce SEO jadi pilar penting Dan performa web adalah bagian penting dari SEO Banyak memiliki fitur E-commerce biasanya memiliki fitur yang kaya, dan butuh penanganan yang baik untuk tetap berada dalam performa yang baik Pengalaman pengguna Semakin baik performa web, semakin kecil kemungkinan pengguna kabur Tingkat Konversi Semakin betah, semakin tinggi kesempatan pengguna di konversi Pengguna loyal Semakin puas dengan performa web, maka kemungkinan akan kembali juga semakin tinggi

Performa Web Alat ukur

Jenis pengukuran Lab Lapangan Pengukuran langsung dengan data nyata yang dikumpulkan langsung dari pengguna asli Pengukuran dalam lingkungan yang terkontrol agar didapatkan hasil yang stabil

Pilih yang mana? Terbaik untuk pengembangan Data poin terbatas Mengambil kondisi percentile teratas Terbaik untuk penilaian kinerja Data poin ribuan Kondisi multi varian Data Lab Data Lapangan

Alat ukur yang tersedia Data Lab Data Lapangan Chrome DevTools Lighthouse Webpagetest Chrome UX Report Search Console

Search Console

PageSpeed Insight pagespeed.web.dev

Chrome DevTools

mazipan.space/speed

webperf-ecommerce-id. vercel.app

Performa Web Alur Perbaikan

Alur perbaikan Cek dampak dari perbaikan terhadap metrik yang tersedia Test Lakukan pengujian dan buat analisa Rekam Simpan hasil pengujian sebagai berkas pembanding Measure Impact Fix Lakukan perbaikan berdasar rekomendasi

Jadi cepat, dan tetap cepat Membuat menjadi cepat itu satu hal, membuatnya tetap cepat itu hal yang lain https://web.dev/how-to-stay-fast/

Seandainya memang semudah itu…

Kenapa jadi sulit? Penyebab turunnya performa web, seringkali bukan karena akar masalah teknis Perbaikan performa web bukan pekerjaan yang berhenti dengan satu tiket Semakin dini menyadari penurunan performa, semakin baik Semakin keren webnya, semakin banyak fitur yang ditambahkan, seringnya tidak berbanding lurus dengan perbaikan performa Pemilihan kerangka kerja modern oleh pengembang web, tidak selalu berdampak baik pada performa Perbaikan performa tidak bisa dikerjakan oleh tim pengembang web sendirian tanpa bantuan dari tim lainnya

Jadi bagaimana dong?

Ada yang perlu ditanyakan dulu Apakah organisasi kalian sudah paham pentingnya performa web bagi bisnis kalian? Apakah berbagai tim sudah siap bekerja bersama-sama mencari jalan tengah bagi perbaikan performa web? Apakah kesadaran akan performa web sudah siap menjadi budaya bagi semua tim? Apakah organisasi kalian siap berinvestasi untuk perbaikan performa web? Apakah struktur organisasi kalian sudah memungkinkan untuk penyelesaian masalah yang melibatkan tim dari divisi berbeda? Apakah pengembang web di tim kalian sudah siap belajar tingkat lanjut untuk perbaikan performa web? https://web.dev/fast/#build-a-performance-culture

Mulai dari mana? Kesadaran organisasi Mempersiapkan peralatan Menjadikannya budaya Menyediakan ruang belajar & eksplorasi 03 05 01 02 04 Perbaikan berkelanjutan

Performa Web Teori teknis

Ingat prinsipnya Lebih sedikit, lebih baik Lebih kecil, lebih baik Lebih dekat, lebih baik

Bagaimana peramban bekerja Pahami apa yang terjadi di belakang layar, ketika kamu mengetik sebuah alamat website pada sebuah peramban, kemudian mengetik ENTER, bagaimana peramban tersebut bekerja, mencari diman server tersebut berada, meletakan sumber daya, membuat koneksi, dan meminta berbagai sumber daya yang dibutuhkan. https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work https://developer.mozilla.org/en-US/docs/Web/Performance/Understanding_latency

Memahami urutan permintaan Pada dasarnya, pintu masuk dari website adalah file HTML, darinya akan terbuat permintaan tambahan akan sumber daya yang dibutuhkan. Urutan permintaan sumber daya menjadi penting karena secara umum akan dilakukan berurutan, hal ini bisa dimanipulasi dan memang sudah seharusnya dioptimalkan. Sadar bahwa ada beberapa sumberdaya yang bersifat menghambat terhadap permintaan berikutnya sampai selesai diunduh, di-parse dan dieksekusi.

Jalur kritis Ini adalah proses peramban membentuk dokumen web setelah berkas berhasil diunduh. Peramban akan mengikuti jalur atau langkah-langkah yang sudah didefinisikan. Mengoptimalkan jalur kritis dari proses render untuk memprioritaskan tampilan yang dibutuhkan oleh pengguna akan menghasilkan peningkatan yang signifikan terhadap waktu muat. https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path

Pahami kondisi pengguna Keadaan pengguna saat mengakses website kita bisa berbeda-beda, memahami kelebihan dan kekurangan dari keadaan mereka untuk kemudian menyesuaikan konten yang disajikan bisa sangat membantu kita dalam mengoptimalkan performa web https://web.dev/adaptive-serving-based-on-network-quality/

Budget performa web Membuat tetap cepat, itu hal yang berbeda. Tujuan utamanya adalah mencegah terjadinya regresi atau penurunan dari performa web pada masa yang akan datang. Set standard atau baseline, jalankan test secara berkelanjutan, kabarkan sedini mungkin. https://web.dev/performance-budgets-101/

Core Web Vitals Inisiatif Google untuk memberikan panduan terpadu akan sinyal berkualitas yang utama dalam usaha memberikan pengalaman pengguna yang terbaik di web

LCP - Largest Contentful paint web.dev/lcp web.dev/optimize-lcp Respon server lambat Penghambat render JS & CSS Sumber daya lambat dimuat Render di klien

CLS - Cumulative Layout Shift web.dev/cls web.dev/optimize-cls Gambar tanpa dimensi Ads, Embeds, iFrame tanpa dimensi Konten yang disuntikan secara dinamis Web font

FID - First Input Delay web.dev/fid web.dev/optimize-fid Waktu eksekusi JS yang lama Bundle JS yang besar Long tasks JS yang menghambat render

Kesimpulan Performa web

Perbaikan performa web dikerjakan bersama-sama, kesadaran akan pentingnya mesti dipunyai semua divisi Perbaikan performa web dikerjakan secara berkelanjutan, sedini mungkin dilakukan pengujian dan direkam perkembangannya Telah disediakan Core Web Vital, sebagai metrik utama yang bisa dipantau. Metrik pendukung juga akan berdampak pada ketiganya Memahami peramban bekerja, urutan dan prioritas dari permintaan, jalur kritis dari proses rendering, serta pemahaman terhadap kondisi pengguna akan membantu kita dalam melakukan perbaikan Data Lab digunakan dalam proses pengembangan, Data Lapangan memberikan kita validasi nyata akan proses perbaikan yang kita kerjakan

web.dev/fast developer.mozilla.org/ docs/Learn/Performance

speakerdeck.com/mazipan

CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik Terima kasih!