Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Web? Kenapa memilih

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Hal yang harus diketahui tentang performa web Web Performa

Slide 8

Slide 8 text

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?

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Performa Web Alat ukur

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Search Console

Slide 18

Slide 18 text

PageSpeed Insight pagespeed.web.dev

Slide 19

Slide 19 text

Chrome DevTools

Slide 20

Slide 20 text

mazipan.space/speed

Slide 21

Slide 21 text

webperf-ecommerce-id. vercel.app

Slide 22

Slide 22 text

Performa Web Alur Perbaikan

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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/

Slide 25

Slide 25 text

Seandainya memang semudah itu…

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Jadi bagaimana dong?

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Performa Web Teori teknis

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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/

Slide 36

Slide 36 text

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/

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Kesimpulan Performa web

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

speakerdeck.com/mazipan

Slide 45

Slide 45 text

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