Mengoptimasi Core Web Vitals

Transcript

1. Mengoptimasi Core Web Vitals ⚡
3. Sumber: webmasters.googleblog.com/2020/05/evaluating-page-experience.html
4. Web Vitals Inisiatif oleh Google untuk memberikan panduan terpadu dalam meningkatkan pengalaman pengguna web yang lebih baik.
5. Core Web Vitals Sumber: addyosmani.com/blog/web-vitals-extension/
8. CLS (Content Layout Shift) “Lah kok malah klik iklan ”
9. • Mengukur ketidakstabilan konten. • Melihat seberapa banyak konten yang terlihat bergeser di viewport serta jarak elemen yang terkena dampak digeser. Sumber: web.dev/optimize-cls/
10. Penyebab Terjadi CLS • Gambar tanpa dimensi • Iklan, embed, dan iFrame tanpa dimensi • Konten yang diinjeksi secara dinamis • Font Web menyebabkan FOIT / FOUT
11. Gambar tanpa dimensi Sumber: web.dev/optimize-cls/
12. Gambar tanpa dimensi Selalu sertakan atribut ukuran lebar dan tinggi pada gambar dan elemen video Anda. <!-- set a 640:360 i.e a 16:9 - aspect ratio → <img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons"> Responsive <img width="1000" height="1000" src="puppy-1000.jpg" srcset="puppy-1000.jpg 1000w,puppy-2000.jpg 2000w,puppy-3000.jpg 3000w" alt="Puppy with balloons"/>
13. Iklan, embed dan iFrame tanpa dimensi Sumber: web.dev/optimize-cls/
14. Iklan, Embed dan iFrame • Siapkan ruang statis untuk slot iklan, embed dan iFrame • Hindari menghilangkan ruang statis jika tidak ada iklan yang ditampilkan dengan menampilkan placeholder. • Menyediakan ukuran terbesar yang memungkinkan untuk slot iklan.
15. Konten Dinamis Contoh konten dinamis: • “Sign up newsletter!” • “Related content” • “Install our native app” Menghindari situasi ini, siapkan placeholder atau menggunakan skeleton UI
16. Font Web menyebabkan FOIT/FOUT • Font fallback ditukar dengan font baru (FOUT - flash of unstyled text) • Teks "tak terlihat" ditampilkan hingga font baru dirender (FOIT - flash of invisible text)
17. Font Web menyebabkan FOIT/FOUT • font-display memungkinkan untuk mengubah perilaku rendering font kustom dengan nilai seperti auto, swap, block, fallback, dan opsional. • Menggunakan <link rel = preload> pada font web utama. • Menggabungkan <link rel = preload> dan font-display: optional.
18. FID (First Input Delay) “Habis diklik kok gaada respon ya ”
19. Mana FID-nya?
20. FID (First Input Delay) • Menangkap kesan pertama pengguna tentang interaktivitas dan daya respons situs. • Mengukur waktu dari saat pengguna pertama kali berinteraksi dengan halaman hingga saat browser benar-benar dapat merespons interaksi itu. • Di Lighthouse FID dapat diukur dengan melihat TBT (Total Blocking Time).
21. Penyebab utama buruknya FID adalah eksekusi JavaScript yang berat.
22. Eksekusi JavaScript yang berat. • Memutus long task • Gunakan web worker • Kurangi waktu eksekusi JavaScript
23. Long Task • Long Tasks adalah periode eksekusi JavaScript yang membuat pengguna mungkin merasa UI Anda tidak responsif. • Setiap bagian kode yang memblokir main-thread selama 50ms atau lebih dapat dikategorikan sebagai Long Tasks.
24. Gunakan web worker • Web worker memungkinkan untuk menjalankan JavaScript pada background main-thread. • Memindahkan operasi non-UI ke web worker terpisah dapat mengurangi waktu pemblokiran main-thread yang dapat meningkatkan FID.
25. Gunakan web worker function register_my_service_worker () { echo "<script>navigator.serviceWorker.register('/service-worker.js')</script>"; } add_action ( 'wp_head', 'register_my_service_worker' ); Menggunakan plugin PWA kemudian gunakan hook wp_register_service_worker()
26. Kurangi waktu eksekusi JavaScript Defer JavaScript yang tidak digunakan. • Saat browser menemukan tag script, browser akan menghentikan render dan mendownload, mengurai, mengompilasi dan menjalankan JavaScript tersebut.
27. Kurangi waktu eksekusi JavaScript
28. Kurangi waktu eksekusi JavaScript Async dan Defer • Kecuali ada alasan khusus untuk tidak melakukan async dan defer, semua script pihak ketiga harus dimuat dengan defer atau async secara default. <script defer src="…"></script> <script async src="…"></script>
29. LCP (Largest Contentful Paint) “Lemot banget sih ”
30. LCP (Largest Contentful Paint) • Mengukur saat elemen konten terbesar di viewport menjadi terlihat. • Dapat digunakan untuk menentukan kapan konten utama halaman telah selesai ditampilkan di layar.
31. Penyebab LCP • Waktu respons server lambat • JavaScript dan CSS yang memblokir render • Waktu muat sumber daya yang lambat • Perenderan client-side
32. Waktu respon server lambat • Optimalkan server Anda • Arahkan pengguna ke CDN terdekat • Cache assets • Tampilkan halaman HTML dari cache terlebih dahulu • Dahulukan pihak ketiga
33. Dahulukan pihak ketiga <head> … <link rel="preconnect" href="https://example.com"> <link rel="dns-prefetch" href="https://example.com"> </head>
34. JS dan CSS yang memblokir render JavaScript • Minify dan kompres file JavaScript • Defer non-critical JavaScript CSS • Minify CSS • Defer non-critical CSS • Inline critical CSS Solusi • Menggunakan plugin yang mendukung defer dan minify JS dan CSS • Menggunakan module bundler (webpack, rollup, parcel)
35. Waktu muat sumber daya yang lambat Penyebab • Elemen <img>. • Elemen <image> di dalam <svg>. • Elemen <video> (gambar placeholder-nya) • Elemen dengan background yang dimuat melalui fungsi url() Solusi • Optimalkan dan kompres gambar • Muat dahulu sumber daya penting • Kompres file teks • Mengirimkan aset yang berbeda berdasarkan koneksi jaringan (adaptive serve) • Cache aset menggunakan service worker
36. Waktu muat sumber daya yang lambat Mengoptimasi gambar • Pertimbangkan untuk tidak menggunakan gambar sejak awal. Jika tidak relevan dengan kontennya, hapuslah. • Kompres gambar. • Ubah gambar menjadi format yang lebih baru (JPEG 2000, JPEG XR, atau WebP) => saya menggunakan WebP Converter for Media. • Gunakan gambar responsif. • Pertimbangkan untuk menggunakan CDN gambar.
37. Waktu muat sumber daya yang lambat Adaptive serving if (navigator.connection && navigator.connection.effectiveType) { if (navigator.connection.effectiveType === '4g') { // Load video } else { // Load image } }
38. Kesimpulan • Gunakan Core Web Vitals sebagai alat untuk meningkatkan pengalaman pengguna pada situs web yang dimiliki. • Jangan terpaku seakan-akan Core Web Vitals ini merupakan arti sepenuhnya dari pengalaman pengguna yang baik.
39. Sumber Artikel • web.dev/optimize-lcp/ • web.dev/cls/ • web.dev/optimize-fid/ • web.dev/vitals/ • speakerdeck.com/adriantirusli/meng optimasi-core-web-vitals Video • bit.ly/web-vitals-gdg-bandung • bit.ly/2ZDJdZu • bit.ly/performance-budget-gdg-maka ssar