What's What in Performance Metrics and Core Web Vitals

Whatʼs What in Performance Metrics & Core Web Vitals Eka
@ekafyi web.dev LIVE Extended GDG Bandung 11 Juli 2020

Eka @ekafyi web.dev LIVE Extended GDG Bandung 11 Juli 2020
Why measure performance? Sebagai acuan untuk memastikan performa situs yang baik. Delay 1 detik di perangkat seluler mempengaruhi tingkat konversi s/d 20%. Performa ↑ = traffic, sesi user, konversi, pendapatan ↑ Source: Think with Google, 2019 Why Performance Matters

How should we measure performance? Performa dipengaruhi banyak faktor (device, server, konektivitas, dll). Kriteria apa yang digunakan?

Which one loads faster? Source: rigor.com

User-centric performance metrics Is it ... happening? - terjadi useful? - berguna usable? - dapat digunakan delightful? - menyenangkan More info: web.dev/user-centric-performance-metrics

Tools to measure performance Lighthouse Chrome DevTools PageSpeed Insights Chrome UX Report ...and many more

Use PageSpeed Insights to analyze any web page developers.google.com/speed/pagespeed/insights . Masukkan URL dan klik "Analyze" . Dapatkan hasil untuk Mobile dan Desktop

Lighthouse Performance Score Nilai didapat dari analisa Data Lab Lighthouse. Terdiri dari 6 metrics dengan bobot berbeda: FCP, SI, LCP, TTI, TBT, CLS. Interactive tool: googlechrome.github.io/lighthouse/scorecalc

Perf Score Metrics Lighthouse v6 dan v5

Data Lab Berasal dari simulasi dengan setting device & network yang sudah ditentukan. Metrics konsisten dan terisolasi dari variasi eksternal. Berguna untuk development.

Data Lapangan Berasal dari data pengguna - Chrome UX Report. Menggambarkan kondisi nyata. Berguna untuk Marketing & Growth tools. PageSpeed Insights juga menyediakan origin summary sebagai perbandingan. “Apakah hanya halaman ini yang lambat atau semua halaman dari situs ini?”

+ = Kombinasikan data lab dan lapangan untuk hasil optimal

New SET OF METRICS appeared!

Web Vitals Essential metrics for a healthy site Inisiatif dari Google, menyediakan panduan terpadu berisi tanda-tanda kualitas yang esensial untuk menciptakan pengalaman pengguna web yang baik

Core Web Vitals Bagian dari inisiatif Web Vitals, berupa sekumpulan metrics yang perlu diterapkan ke semua halaman web Terintegrasi dengan berbagai tools (eg. Lighthouse kategori “Performance”, PageSpeed Insights, CrUX) Pemilik situs bisa berfokus pada metrics paling berpengaruh

Core Web Vitals 2020: Tiga aspek UX, masing-masing diwakili satu metric inti Fast Loading Responsive Interactivity Visual Stability source: web.dev/vitals

Performance Metrics Overview FCP First Contentful Paint Field Lab LCP Largest Contentful Paint Field Lab CWV CLS Cumulative Layout Shift Field Lab CWV FID First Input Delay Field CWV TBT Total Blocking Time Lab TTI Time To Interactive Lab SI Speed Index Lab

Speed Index, FCP, LCP Fast Loading Metrics terkait rendering isi halaman di viewport Tujuan: User dapat segera melihat isi halaman "Is it happening?" "Is it useful?"

SI Speed Index Lab15% Mengukur seberapa cepat isi halaman dapat terlihat jelas selama proses loading. Meng-capture proses loading halaman dan membandingkan perkembangan antar frame secara visual.

SI Speed Index Lab15% Source: https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fcovid19.go.id

FCP First Contentful Paint Field Lab15% Mengukur waktu sampai konten DOM pertama ditampilkan.

LCP Largest Contentful Paint CWV Field Lab25% Mengukur waktu sampai elemen konten terbesar ditampilkan di viewport. Pengganti First Meaningful Paint (Lighthouse v5). Hanya untuk elemen tertentu ( <img> , <video> , block-level) yang terlihat di viewport.

LCP Largest Contentful Paint CWV Field Lab25% Source: web.dev/lcp

LCP - Implementation

CLS Visual Stability Metric baru yang mengukur stabilitas visual Tujuan: Agar user tidak terganggu saat mengkonsumsi dan berinteraksi dengan isi halaman. “Is it delightful?”

CLS Cumulative Layout Shift CWV Field Lab5% Menghitung total pergeseran layout tak terduga dari isi halaman yang terlihat. Biasanya disebabkan oleh gambar tanpa dimensi dan konten client-rendered (contoh: alert, iklan).

CLS Cumulative Layout Shift CWV Field Lab5% Source: web.dev/cls

CLS - Implementation

TTI, TBT, FID Responsive Interactivity Metrics terkait kemampuan main thread browser merespon interaksi Tujuan: Agar user dapat segera berinteraksi dengan isi halaman (mengklik button, mengisi input, dll) “Is it usable?”

TTI Time to Interactive Lab15% Mengukur sampai halaman menjadi interaktif sepenuhnya. Contoh masalah di SSG/SSR: Seluruh elemen dirender dengan cepat (FCP & LCP ), tapi main thread masih sibuk melakukan hydration.

TTI Time to Interactive Lab15% TTI ≥ FCP. Agar dapat interaktif, harus ada elemen yang sudah dirender. "Long task" = task berdurasi > 50 ms "Quiet window" = saat main thread bebas selama ≥ 5 detik (tidak ada long task, ≤ 2 GET request) TTI terjadi saat selesainya long task terakhir sebelum quiet window. Source: web.dev/tti

TBT Total Blocking Time Lab25% Mengukur jumlah blocking time antara FCP dan TTI. Dihitung setelah > 50 ms untuk masing-masing long task.

TBT Total Blocking Time Lab25% Jika durasi task 250 ms, blocking time = 200 ms. Contoh → TBT 345 ms Source: web.dev/tbt

Perbedaan TBT vs TTI TTI mengukur waktu sampai main thread bebas. TBT mengukur seberapa sibuk main thread sebelum TTI tercapai.

Persamaan TBT dan TTI Keduanya adalah metric lab untuk memprediksi FID, dengan cara mengukur aktivitas main thread. Makin baik TBT dan TTI, besar kemungkinan FID baik .

FID First Input Delay CWV Field Mengukur waktu saat pengguna melakukan interaksi untuk pertama kali sampai browser dapat merespon interaksi tersebut.

FID First Input Delay CWV Field Source: web.dev/fid

FID - Implementation

Conclusion Perf metrics membantu kita mengukur dan memperbaiki performa halaman web, menggabungkan data lab dan lapangan. Core Web Vitals adalah metrics inti yang “meringkas” perf metrics lainnya. Tools, not goals. Goals = Good user experience.

Thank you ⚡

What's What in Performance Metrics and Core Web...

What's What in Performance Metrics and Core Web Vitals

More Decks by Eka

Other Decks in Programming

Featured

Transcript