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

Mengoptimasi Core Web Vitals

Mengoptimasi Core Web Vitals

adriantirusli

August 08, 2020
Tweet

More Decks by adriantirusli

Other Decks in Programming

Transcript

  1. Web Vitals Inisiatif oleh Google untuk memberikan panduan terpadu dalam

    meningkatkan pengalaman pengguna web yang lebih baik.
  2. • Mengukur ketidakstabilan konten. • Melihat seberapa banyak konten yang

    terlihat bergeser di viewport serta jarak elemen yang terkena dampak digeser. Sumber: web.dev/optimize-cls/
  3. Penyebab Terjadi CLS • Gambar tanpa dimensi • Iklan, embed,

    dan iFrame tanpa dimensi • Konten yang diinjeksi secara dinamis • Font Web menyebabkan FOIT / FOUT
  4. 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"/>
  5. 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.
  6. Konten Dinamis Contoh konten dinamis: • “Sign up newsletter!” •

    “Related content” • “Install our native app” Menghindari situasi ini, siapkan placeholder atau menggunakan skeleton UI
  7. 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)
  8. 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.
  9. 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).
  10. Eksekusi JavaScript yang berat. • Memutus long task • Gunakan

    web worker • Kurangi waktu eksekusi JavaScript
  11. 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.
  12. 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.
  13. 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()
  14. 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.
  15. 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>
  16. 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.
  17. Penyebab LCP • Waktu respons server lambat • JavaScript dan

    CSS yang memblokir render • Waktu muat sumber daya yang lambat • Perenderan client-side
  18. Waktu respon server lambat • Optimalkan server Anda • Arahkan

    pengguna ke CDN terdekat • Cache assets • Tampilkan halaman HTML dari cache terlebih dahulu • Dahulukan pihak ketiga
  19. 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)
  20. 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
  21. 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.
  22. Waktu muat sumber daya yang lambat Adaptive serving if (navigator.connection

    && navigator.connection.effectiveType) { if (navigator.connection.effectiveType === '4g') { // Load video } else { // Load image } }
  23. 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.
  24. 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