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

Mengukur dan meningkatkan performa website

Mengukur dan meningkatkan performa website

Bagaimana mengukur dan meningkatkan performa website

Irfan Maulana

June 10, 2022
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

Transcript

  1. Performa Website Irfan Maulana untuk temu midtrans Mengukur & meningkatkan

    11 Juni 2022
  2. Saat ini bekerja di Tokopedia, sebagai Principal Engineer untuk tim

    Web Platform. Blog: mazipan.space Twitter: @Maz_Ipan Ini saya!
  3. 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
  4. 06 05 04 Performa web Alur perbaikan Alat ukur Kenapa

    web? Teori teknis Kesimpulan Agenda sesi 03 02 01
  5. Web? Kenapa memilih

  6. 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
  7. Hal yang harus diketahui tentang performa web Web Performa

  8. 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?
  9. 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
  10. 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?
  11. Metrik yang biasa dibahas CLS FID LCP TTFB TBT FCP

    TTI Core Web Vitals Metrik Pendukung INP Experimental https://web.dev/metrics/
  12. 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
  13. Performa Web Alat ukur

  14. 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
  15. 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
  16. Alat ukur yang tersedia Data Lab Data Lapangan Chrome DevTools

    Lighthouse Webpagetest Chrome UX Report Search Console
  17. Search Console

  18. PageSpeed Insight pagespeed.web.dev

  19. Chrome DevTools

  20. mazipan.space/speed

  21. webperf-ecommerce-id. vercel.app

  22. Performa Web Alur Perbaikan

  23. 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
  24. 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/
  25. Seandainya memang semudah itu…

  26. 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
  27. Jadi bagaimana dong?

  28. 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
  29. Mulai dari mana? Kesadaran organisasi Mempersiapkan peralatan Menjadikannya budaya Menyediakan

    ruang belajar & eksplorasi 03 05 01 02 04 Perbaikan berkelanjutan
  30. Performa Web Teori teknis

  31. Ingat prinsipnya Lebih sedikit, lebih baik Lebih kecil, lebih baik

    Lebih dekat, lebih baik
  32. 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
  33. 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.
  34. 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
  35. 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/
  36. 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/
  37. Core Web Vitals Inisiatif Google untuk memberikan panduan terpadu akan

    sinyal berkualitas yang utama dalam usaha memberikan pengalaman pengguna yang terbaik di web
  38. 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
  39. 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
  40. 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
  41. Kesimpulan Performa web

  42. 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
  43. web.dev/fast developer.mozilla.org/ docs/Learn/Performance

  44. speakerdeck.com/mazipan

  45. CREDITS: This presentation template was created by Slidesgo, including icons

    by Flaticon, infographics & images by Freepik Terima kasih!