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
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
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?
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
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
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
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
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
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
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
mazipan
yuhei_fujita
dicoding
77web
onoder
miso
microcms
akase244
mski_iksm
okuzawats
itsmedreamwalker
akatsuki174
mclloyd
jmmastey
yeseniaperezcruz
aleyda
morganepeng
brad_frost
jponch
marcduiker
mraible
bryan
addyosmani
sstephenson