Sejarah Core Web Vitals

 (addyosmani.com)
14 poin oleh GN⁺ 2025-10-10 | Belum ada komentar. | Bagikan ke WhatsApp
  • Core Web Vitals untuk mengukur performa situs web bermula dari upaya sejak 2014 oleh beberapa tim di Google untuk mengatasi keterbatasan proyek AMP dan mendefinisikan metrik performa standar terbuka yang dapat diterapkan ke semua situs web
  • Pada Mei 2020, tiga metrik inti resmi diumumkan—LCP untuk kecepatan pemuatan, FID untuk respons interaksi, dan CLS untuk stabilitas visual—dan dirancang sebagai metrik yang dapat diukur di lapangan yang mencerminkan pengalaman pengguna nyata
  • Pada 2021, metrik ini diperkenalkan sebagai faktor peringkat pencarian melalui pembaruan Page Experience di Google Search, dan persyaratan eksklusif AMP di Top Stories dihapus untuk menciptakan lingkungan persaingan web terbuka
  • Melalui optimasi browser Chrome, peningkatan pada CMS utama seperti WordPress, dan kolaborasi dengan framework JavaScript, hingga 2023 waktu tunggu pengguna secara akumulatif berkurang lebih dari 10.000 tahun, dan pada 2024 mencapai 30.000 tahun yang dihemat
  • Pada 2024, FID diganti dengan INP dan Soft Navigation API untuk SPA diperkenalkan, menunjukkan evolusi berkelanjutan yang berkontribusi pada ekosistem web yang cepat, stabil, dan berpusat pada pengguna

Latar belakang dan motivasi: dari AMP ke metrik web terbuka

  • Selama bertahun-tahun Google menekankan kecepatan dan pengalaman pengguna sebagai prinsip inti web, tetapi masih banyak situs yang memberikan pengalaman lambat
  • Pada 2010, Google Search mulai menggunakan kecepatan situs sebagai sinyal peringkat pencarian, yang menjadi upaya awal memasukkan performa ke dalam SEO
  • Sekitar 2015, proyek AMP (Accelerated Mobile Pages) diperkenalkan untuk menyediakan halaman yang dioptimalkan agar dimuat cepat, tetapi muncul masalah keterbukaan dan fleksibilitas karena lingkungannya tertutup dan disajikan dari cache Google
  • Melalui Speed Update pada 2018, kecepatan halaman diterapkan pada peringkat pencarian mobile, dan Google Ads juga memperkenalkan skor kecepatan landing page mobile untuk menegaskan bahwa pengalaman yang cepat menghasilkan tingkat konversi yang lebih baik
  • Untuk keluar dari pendekatan khusus AMP, tim Chrome dan Search bekerja sama mulai mendefinisikan metrik performa web terbuka yang dapat diterapkan ke semua halaman tanpa framework khusus
    • Menganalisis jutaan halaman untuk mendefinisikan standar publik bagi halaman web yang cepat dan ramah pengguna
    • Menetapkan target berupa metrik yang dapat diukur di lapangan dan mencerminkan pengalaman pengguna nyata
    • Ingin menemukan metrik yang berkorelasi dengan hasil seperti keterlibatan pengguna

Definisi Core Web Vitals: tiga pilar pengalaman pengguna

  • Pada Mei 2020, Google secara resmi mengumumkan inisiatif Web Vitals dan memperkenalkan Core Web Vitals yang berfokus pada “aspek inti pengalaman pengguna yang berlaku untuk semua halaman web”

  • Core Web Vitals awal terdiri dari tiga metrik inti

    • Largest Contentful Paint (LCP): metrik kecepatan pemuatan yang mengukur kapan konten utama dirender, melampaui First Contentful Paint atau onload dengan fokus pada saat pengguna benar-benar melihat konten yang bermakna
    • First Input Delay (FID): metrik respons interaksi yang mengukur jeda antara interaksi pertama pengguna dan respons browser, menangkap apakah halaman merespons segera atau tertunda karena skrip yang berat
    • Cumulative Layout Shift (CLS): metrik stabilitas visual yang mengukur seberapa banyak tata letak halaman bergeser saat pemuatan, dengan menjumlahkan pergeseran tata letak yang tak terduga; CLS yang rendah berarti pengalaman yang stabil dan nyaman

  • Pemilihan metrik dilakukan berdasarkan riset dan eksperimen yang luas

    • Amar Sagoo, Annie Sullivan, Vivek Sekhar, dan lainnya menemukan korelasi antara angka performa objektif dan persepsi pengguna melalui riset interaksi manusia-komputer
    • Waktu muat ideal adalah dalam 2–3 detik, respons input dalam 100 ms, dan pergeseran layout seminimal mungkin
    • Dengan menganalisis data pengguna nyata, ditetapkan target ambang batas yang praktis: LCP di bawah 2,5 detik, FID di bawah 100 ms, dan CLS di bawah 0,1 (berdasarkan persentil ke-75)
    • Halaman yang memenuhi ambang batas ini memiliki peluang pengguna keluar dari halaman 24% lebih rendah

  • Google berupaya menjadikan metrik ini terstandarisasi dan terbuka

    • Menerbitkan draf spesifikasi web melalui WICG dan kelompok standar performa web
    • Diimplementasikan agar dapat diukur di Chrome dan browser lain melalui PerformanceObserver API
    • Pada Mei 2020, merilis library JavaScript open source web-vitals yang dapat disisipkan developer ke situs untuk mengukur LCP, FID, dan CLS pengguna nyata
    • Addy Osmani mengembangkan ekstensi Core Web Vitals yang menampilkan metrik secara real-time
    • Mencerminkan upaya luas untuk membuatnya dapat diakses dan berguna bagi seluruh ekosistem

Page Experience: Core Web Vitals dalam peringkat Google Search

  • Tim Google Search dengan cepat mengadopsi Core Web Vitals sebagai bagian dari pembaruan Page Experience

  • Pada 28 Mei 2020, Google Search Central mengumumkan bahwa metrik ini akan dimasukkan ke algoritme peringkat

    • Ketika dua halaman memiliki relevansi konten yang serupa, halaman yang memberikan pengalaman pengguna lebih baik akan diberi peringkat lebih tinggi
    • Sinyal Page Experience menggabungkan Core Web Vitals dengan sinyal UX yang sudah ada seperti mobile-friendliness, keamanan HTTPS, dan penghindaran interstitial yang mengganggu
    • Konten yang bagus tetap yang paling penting, dan situs yang cepat tidak akan melampaui situs yang lebih relevan hanya karena kecepatannya
    • Dalam kondisi imbang atau perbedaan tipis, Web Vitals yang baik bisa menjadi faktor penentu

  • Pengumuman yang paling menonjol adalah penghapusan persyaratan AMP dari carousel Top Stories

    • Sebelumnya, Google News/Top Stories di mobile mewajibkan AMP, tetapi setelah pembaruan Page Experience, halaman non-AMP juga dapat terdaftar jika memenuhi Core Web Vitals dan kriteria lainnya
    • “AMP tidak lagi wajib untuk Top Stories di mobile, dan terbuka untuk semua halaman dengan pengalaman halaman yang baik”
    • Ini menunjukkan keyakinan Google untuk mendorong peningkatan web terbuka tanpa harus mengarahkan semuanya ke framework AMP

  • Google memberikan pemberitahuan awal yang cukup kepada ekosistem

    • Menyadari bahwa 2020 adalah tahun yang sulit akibat pandemi COVID-19, Google mengumumkan bahwa perubahan peringkat tidak akan diterapkan sampai 2021 dan menjanjikan peringatan minimal 6 bulan
    • Melalui pembaruan November 2020, diumumkan bahwa perubahan peringkat Page Experience akan dimulai pada Mei 2021
    • Pada akhirnya, pembaruan Page Experience mulai diluncurkan pada pertengahan Juni 2021 dan diterapkan sepenuhnya hingga akhir Agustus (untuk pencarian mobile)
    • Pembaruan serupa untuk pencarian desktop dilakukan pada Februari–Maret 2022

  • Setelah pembaruan diterapkan, algoritme peringkat Google mulai menggunakan Core Web Vitals sebagai salah satu dari ratusan sinyal

    • Halaman yang memenuhi ambang “baik” untuk ketiga metrik CWV dianggap memiliki pengalaman halaman yang baik
    • Google membuat laporan Page Experience di Google Search Console sehingga pemilik situs dapat memeriksa persentase halaman yang lolos ambang menggunakan data Chrome UX Report
    • Ini memberi webmaster dan praktisi SEO umpan balik langsung tentang bagaimana performa situs mereka dari sudut pandang sinyal pengalaman halaman

  • Google sempat mempertimbangkan penandaan badge untuk halaman dengan pengalaman halaman yang baik di hasil pencarian, tetapi ikon badge permanen tidak pernah ditambahkan

    • Imbalannya terutama diberikan dalam bentuk kenaikan peringkat alih-alih label eksplisit
    • Untuk sementara, Google menampilkan indikator “Page Experience” dalam eksperimen Search Console dan hasil pencarian
    • Inti pesannya: Google secara terbuka memberi insentif pada performa dan UX, dan pencapaian Core Web Vitals yang baik tidak hanya memuaskan pengguna tetapi juga dapat meningkatkan visibilitas halaman di pencarian

Alat dan data: Chrome UX Report dan pengukuran performa

  • Google melakukan investasi besar-besaran pada alat dan data untuk Web Vitals

  • Chrome UX Report (CrUX) menjadi inti dari upaya ini

    • Dataset publik metrik pengalaman pengguna nyata yang sudah ada sejak 2017, mengumpulkan data performa anonim untuk jutaan situs dari jutaan pengguna Chrome
    • Saat Core Web Vitals diluncurkan, CrUX langsung mulai melaporkan LCP, FID, dan CLS untuk semua URL asal dalam dataset
    • Siapa pun dapat melakukan kueri terhadap data performa lapangan
    • Setelah menyediakan akses melalui BigQuery, Google meluncurkan CrUX API dan CrUX Dashboard sehingga developer dan praktisi SEO dapat dengan mudah melihat bagaimana situs mereka (atau pesaing mereka) berkinerja pada metrik CWV di lapangan
    • Dengan diperkenalkannya CrUX History API, data deret waktu untuk metrik ini tersedia sehingga perkembangan selama beberapa bulan dapat dilacak

  • Dari sisi alat developer, integrasi berjalan cepat

    • Pada akhir 2020, sebagian besar alat performa Google telah diperbarui untuk menonjolkan Core Web Vitals
    • Lighthouse (alat audit open source yang digunakan di Chrome DevTools dan PageSpeed Insights) mengintegrasikan diagnostik dan skor terkait CWV
      • Menambahkan audit seperti "Largest Contentful Paint adalah X detik (target <2,5 detik)" dan memberikan saran perbaikan
    • Chrome DevTools menambahkan panel Core Web Vitals dan penanda timeline sehingga elemen LCP atau pergeseran layout selama pemuatan halaman dapat dilihat
    • PageSpeed Insights (PSI) juga dirombak total agar berfokus pada CWV
      • Menampilkan dengan jelas di bagian atas data lapangan untuk LCP, FID (kemudian INP), dan CLS yang diambil dari CrUX
    • Google Search Console menyediakan laporan khusus Core Web Vitals yang mengelompokkan halaman ke dalam bucket "baik", "perlu perbaikan", dan "buruk" untuk setiap metrik, sehingga pemilik situs dapat mengidentifikasi area masalah dengan tepat
    • Pekerjaan alat ini dipimpin oleh Elizabeth Sweeny, Paul Irish, Addy Osmani, dan lainnya

  • Komunitas pengembang web juga merespons dengan alat pihak ketiga

    • Penyedia layanan Real User Monitoring (RUM) dengan cepat mengintegrasikan Core Web Vitals
    • mPulse dari Akamai, Browser agent dari New Relic, Dynatrace, Datadog, SpeedCurve, dan lainnya segera mendukung LCP, FID, dan CLS sebagai metrik kelas satu
    • Cloudflare juga memperkenalkan layanan Browser Insights yang dapat mengumpulkan Web Vitals dengan menyisipkan skrip
    • Berkat adanya library JS web-vitals, semua alat analitik dapat dengan mudah mengumpulkan metrik ini
    • Pada 2021, Core Web Vitals sudah menjadi hal umum di dashboard alat pemantauan performa web
    • Ketersediaan yang luas ini memperluas kesadaran dan menyediakan data bagi developer untuk mendorong peningkatan performa

  • Data Chrome User Experience Report juga sangat penting untuk melacak kemajuan di seluruh web

    • Sepanjang 2021 dan 2022, proporsi traffic dengan CWV "baik" terus meningkat
    • Hal ini sering dilaporkan dalam Web Almanac tahunan dari HTTP Archive maupun pembaruan blog Google sendiri
    • Memiliki metrik yang dapat diukur dan dilihat secara publik menciptakan semacam persaingan yang saling mendorong
    • Pemilik situs dan penyedia platform mulai membanggakan dan berupaya meningkatkan Core Web Vitals mereka

Dampak dan peningkatan: membuat web lebih cepat dan stabil

Optimalisasi browser Chrome

  • Setelah Core Web Vitals mapan, hal ini memicu upaya besar-besaran dan multifaset di seluruh ekosistem web untuk meningkatkan metrik tersebut

  • Tim engineering Google Chrome meninjau browser secara mendetail untuk mengoptimalkan cara Chrome memuat dan merender halaman web

    • Mengingat basis pengguna Chrome yang sangat besar, perbaikan kecil di tingkat browser pun dapat menguntungkan seluruh web
    • Termasuk optimalisasi utama yang dirilis di Chrome antara 2020 hingga 2023

  • Prioritisasi konten untuk LCP

    • Chrome diubah agar memprioritaskan pemuatan konten penting
    • Beberapa gambar pertama dalam HTML (sering kali termasuk gambar LCP) diidentifikasi dan diberi prioritas jaringan yang lebih tinggi
    • Dengan memprioritaskan lima gambar pertama seperti ini, LCP pada beberapa halaman membaik dari 3,1 detik menjadi 2,5 detik
    • Standar web baru seperti atribut fetchpriority (mekanisme Priority Hints) diperkenalkan agar developer dapat menandai gambar atau iframe dengan prioritas tinggi untuk LCP

  • Back/Forward Cache (BFCache)

    • Chrome secara historis tidak sepenuhnya menggunakan BFCache untuk halaman karena kompleksitas teknis, tetapi dalam beberapa tahun terakhir BFCache diaktifkan untuk banyak halaman
    • Pada 2023, Chrome mencapai peningkatan rasio hit BFCache yang signifikan baik di desktop maupun Android
    • Pengguna yang kembali ke halaman dengan tombol "back" dapat langsung melihatnya (LCP nol, penundaan input nol, karena halaman tidak di-unload)
    • Platform besar seperti Amazon mendapat manfaat dari BFCache di Chrome, dan setelah peningkatan Chrome (versi M112), dilaporkan penggunaan cache back/forward meningkat 22,7 poin persentase

  • Prerendering (NoState Prefetch/Prerender2)

    • Chrome merilis prerenderer baru (Prerender2) yang memungkinkan browser memuat dan merender halaman sepenuhnya di latar belakang lalu langsung menukarnya saat pengguna bernavigasi
    • Awalnya digunakan untuk Google Search (prerender hasil teratas) dan prediksi URL yang diketik, sehingga dapat memangkas LCP secara drastis
    • Chrome melaporkan bahwa prerendering pencarian omnibox memberikan peningkatan median LCP sebesar 500~700 ms (sekitar 15~25%) pada navigasi tersebut
    • Chrome meluncurkannya secara hati-hati (untuk menghindari prediksi yang salah atau masalah privasi)

  • Optimalisasi jaringan dan penjadwalan

    • Tim Chrome mengidentifikasi dan mengatasi berbagai jeda kecil dalam respons input
    • Fitur pre-connect saat pointer down diperkenalkan (saat ketukan/klik dimulai, sebelum dilepas), memangkas beberapa milidetik dari penyiapan koneksi untuk navigasi tautan
    • Ini menghasilkan LCP rata-rata sekitar 6~10 ms lebih cepat pada navigasi lintas origin
    • Cara thread utama browser menangani tugas saat banyak tab terbuka juga ditingkatkan untuk mengurangi kontensi
    • Dengan penyesuaian penjadwalan tugas dan penggunaan mekanisme seperti EcoQOS di Windows 11 untuk tab latar belakang, Chrome meningkatkan INP sekitar 5% dan LCP sekitar 2% dalam skenario dengan beban berat

  • Peningkatan rendering dan mesin JavaScript

    • Perombakan arsitektur RenderingNG di Chrome (selesai sekitar 2021) membuat rendering menjadi lebih efisien
    • Peningkatan prioritas pemuatan gambar (agar gambar LCP tidak terhambat oleh tugas lain yang kurang penting) serta timing garbage collection V8 yang lebih cerdas (berjalan saat waktu idle) menjamin pengalaman yang lebih mulus
    • Developer Chrome menemukan bahwa cara browser multi-proses mengakses cookie menyebabkan jank
      • Semua pemanggilan document.cookie harus diambil secara sinkron dari proses terpisah
      • Dengan memperkenalkan versioning shared memory untuk cookie, Chrome mengoptimalkan akses cookie dan menghilangkan banyak lompatan proses yang berulang
      • Ini mengurangi penundaan input ketika situs terus-menerus melakukan spam pembacaan cookie pada setiap interaksi

  • Semua optimalisasi Chrome ini memberikan perbedaan yang terukur

    • Hingga akhir 2023, Google melaporkan bahwa rata-rata pemuatan halaman di Chrome 166 ms lebih cepat dibanding sebelum Core Web Vitals ada
    • Dampaknya sangat besar di seluruh web: jika waktu yang dihemat dijumlahkan, tim Chrome menghitung bahwa hanya pada 2023 saja, peningkatan kecepatan telah menghemat lebih dari 10.000 tahun waktu tunggu kumulatif pengguna untuk halaman dimuat, serta lebih dari 1.200 tahun tambahan waktu tunggu agar halaman merespons input
    • Porsi trafik yang memenuhi ambang batas CWV “baik” juga naik signifikan
    • Saat pertama diumumkan, hanya sekitar 1/3 pemuatan halaman yang tergolong baik menurut standar CWV, tetapi pada 2023 sekitar 68% kunjungan halaman desktop di Chrome dan sekitar 64% di mobile memenuhi ketiga ambang batas CWV

Peningkatan ekosistem web secara luas

  • Peningkatan ini bukan hanya dari sisi Google; komunitas pengembang web yang lebih luas, framework, dan vendor platform juga ikut bergerak untuk menyelesaikan masalah performa yang diidentifikasi oleh Core Web Vitals

  • Optimasi gambar dan lazy loading

    • Menyadari bahwa gambar sering menjadi konten terbesar sekaligus penyebab umum LCP, framework web dan CMS mulai menerapkan default yang lebih cerdas
    • HTML native loading="lazy" untuk gambar di luar layar distandardisasi (dengan bantuan Chrome dan kontributor standar web seperti Yoav Weiss dan Addy Osmani) lalu diadopsi oleh WordPress dan platform lain, sehingga secara drastis mengurangi pemuatan gambar yang tidak perlu
    • Setelah WordPress mengaktifkan lazy loading untuk gambar secara default pada 2020, mereka kemudian menyempurnakannya agar gambar banner teratas tidak di-lazy-load sehingga LCP tidak tertunda
    • Atribut baru <img fetchpriority="high"> juga cepat dimanfaatkan oleh framework untuk menampilkan gambar utama lebih cepat

  • WordPress Performance Team

    • Karena WordPress digunakan oleh sekitar 40% dari seluruh situs web, performanya punya pengaruh yang sangat besar
    • Pada awalnya, situs WordPress tertinggal dalam skor CWV, dan laporan tahun 2021 menunjukkan bahwa tingkat kelulusan situs WordPress lebih rendah dibanding beberapa ekosistem lain, sehingga menjadi peringatan keras
    • Komunitas lalu merespons dengan membentuk Core Performance Team khusus (termasuk kontributor dari Google dan perusahaan lain) untuk secara sistematis meningkatkan kecepatan inti WordPress
    • Dalam rilis-rilis terbaru, upaya ini mulai membuahkan hasil
      • WordPress 6.3 (2023) menghadirkan tema inti yang memuat 27% lebih cepat untuk block theme dan 18% lebih cepat untuk classic theme dibanding WordPress 6.2 menurut metrik LCP, berkat banyak optimalisasi pada rendering tema dan pemuatan aset
      • Artinya, jutaan situs benar-benar menjadi lebih cepat hanya dengan meng-upgrade WordPress
    • Tim WordPress juga mengoptimalkan pemrosesan gambar, menambahkan caching untuk sejumlah operasi yang mahal, dan menjadikan performa setara prioritasnya dengan fitur baru
    • Hasilnya, porsi situs WordPress dengan skor CWV yang baik meningkat drastis (sebagian data menunjukkan bahwa porsi situs WP yang memenuhi semua CWV naik lebih dari 4 kali lipat antara 2020 dan 2022)

  • Wix dan website builder

    • Platform situs web terhosting lain seperti Wix, Squarespace, dan Duda juga menjadikan Core Web Vitals sebagai pemicu perbaikan performa
    • Wix melakukan perombakan besar pada infrastruktur utamanya (caching, server yang lebih cepat, kode sisi klien yang lebih baik) dan meningkatkan beberapa kali lipat porsi situs Wix yang mencapai skor CWV baik
    • Dalam studi kasus, Wix melaporkan bahwa mereka menaikkan porsi situs dengan CWV “baik” dari sekitar 4% menjadi lebih dari 33% dalam waktu kira-kira satu tahun
    • Ini membuktikan bahwa perubahan budaya platform yang berfokus pada performa dapat menguntungkan jumlah pengguna yang sangat besar
    • Builder lain seperti Duda juga kerap mengiklankan bahwa mayoritas situs pelanggan mereka mencapai CWV yang baik, karena platform tersebut menyediakan praktik terbaik secara bawaan (gambar responsif, pengiriman via CDN, template yang efisien, dan sebagainya)
    • Tekanan kompetitif ini mendorong peningkatan internal pada platform yang digunakan, bahkan ketika pemilik situs individual bukan ahli performa

  • Framework JavaScript (Chrome Aurora)

    • Tim Chrome Aurora dibentuk pada pertengahan 2020 sebagai task force khusus di dalam Chrome untuk bekerja sama dengan framework JavaScript populer
    • Anggota Aurora (Addy Osmani, Kara Erickson, Houssein Djirdeh, dan lainnya) bekerja erat dengan pembuat framework seperti React/Next.js, Angular, Nuxt, Gatsby, dan lainnya untuk mengidentifikasi bottleneck umum serta menyediakan solusinya
    • Kolaborasi ini menghasilkan fitur-fitur seperti
      • komponen next/script di Next.js (memuat skrip pihak ketiga dengan lebih efisien di luar main thread)
      • directive bawaan NgOptimizedImage di Angular (secara otomatis melakukan lazy loading gambar dan menetapkan ukuran serta prioritas yang tepat)
      • modul optimasi Google Fonts di Nuxt
    • Dampaknya cukup besar: pada 2022, skor median Core Web Vitals untuk situs yang dibangun dengan framework ini membaik secara nyata
      • tingkat kelulusan CWV situs Next.js dari 20,4% menjadi 27,3%
      • Angular dari 7,6% menjadi 13,2%
      • Nuxt dari 15,8% menjadi 20,2%
    • Ada juga banyak kisah sukses individual
      • situs e-commerce Land's End mencatat peningkatan LCP 40% di mobile (uji lab) setelah mengadopsi optimasi gambar Angular
      • CareerKarma mencatat penurunan LCP 24% dengan menggunakan pemuatan skrip yang ditingkatkan di Next.js

  • Metrik bisnis nyata

    • Pada akhirnya, Core Web Vitals yang lebih baik bukan sekadar untuk memuaskan Google, tetapi juga berkorelasi dengan kepuasan pengguna nyata dan hasil bisnis
    • Banyak perusahaan membagikan studi kasus yang menghubungkan peningkatan CWV dengan keterlibatan pengguna
      • situs berita Economic Times mengoptimalkan pemrosesan skrip untuk meningkatkan INP dan berhasil mencapai pageview naik 42% serta bounce rate turun 49%
      • situs pemesanan perjalanan RedBus meningkatkan INP dan mencatat kenaikan conversion rate 7%
      • marketplace online India Meesho menurunkan LCP dari 6,9 detik menjadi 2,5 detik dan berhasil mencapai bounce rate turun sekitar 17% serta conversion rate naik 3%
    • Contoh-contoh ini menegaskan bahwa performa bukan sekadar metrik teknis, melainkan berujung pada pengguna yang bertahan lebih lama, membaca lebih banyak, dan membeli lebih banyak
    • Kisah-kisah sukses ini makin memotivasi tim pengembang dan produk untuk memprioritaskan Web Vitals

Hasil peningkatan di seluruh ekosistem

  • Upaya gabungan dari tim browser, pembuat framework, pengembang CMS, dan banyak pengembang web individual telah secara dramatis memperbaiki kondisi web
  • Dengan menetapkan metrik yang jelas dan dapat ditindaklanjuti, Core Web Vitals menciptakan tujuan bersama yang bisa diikuti semua pihak
  • Yang penting, hal ini dicapai tanpa mengunci ekosistem pada teknologi tertutup, melainkan dengan memanfaatkan standar terbuka dan data
  • Pada 2023, sekitar 40% situs web (dan persentase yang jauh lebih tinggi untuk situs komersial yang dikelola dengan baik) kini lulus semua ambang Core Web Vitals, sementara pada awal 2020 hanya sedikit yang lulus
  • Bahkan situs yang belum sepenuhnya lulus pun umumnya kini lebih cepat dan lebih mulus daripada sebelumnya
  • Budaya kesadaran performa makin meluas: para pengembang semakin sering memantau metrik CWV (menurut survei, sekitar 51% pengembang aktif melacak dan mengoptimalkan Web Vitals)
  • Google menyebut bahwa meskipun mereka mendorong peningkatan kecepatan ini, kepuasan pengembang terhadap platform web tetap tinggi
    • Ini menunjukkan bahwa panduannya masih dapat dicapai dan tidak membuat pengembang putus asa
    • Keseimbangan ini penting; jika target CWV mustahil dicapai atau alatnya tidak memadai, pengembang bisa saja menolak, tetapi yang terjadi justru komunitas bersatu untuk membuat web menjadi lebih baik

Evolusi metrik: INP, Soft Navigation, dan lainnya

  • Google sejak awal mengakui bahwa Core Web Vitals akan berevolusi seiring waktu
  • Tiga metrik pada 2020 tidak dimaksudkan sebagai sesuatu yang statis atau lengkap
  • Aspek lain dari pengalaman pengguna, seperti scrolling yang mulus atau long task di bagian akhir halaman, belum dicakup pada awalnya
  • Tim Chrome Web Platform terus meneliti metrik baru dan peningkatan pada metrik yang sudah ada

Interaction to Next Paint (INP)

  • Kesenjangan yang jelas pada CWV awalnya adalah interaktivitas di luar klik pertama
  • FID hanya mengukur latensi input pertama, sehingga penting untuk kesan pertama, tetapi halaman bisa saja tidak responsif kemudian saat lebih banyak interaksi pengguna terjadi
  • Untuk mengatasi hal ini, Googler seperti Annie Sullivan dan Michal Mocny mengusulkan INP
    • Melihat semua interaksi pengguna pada halaman (atau setidaknya banyak di antaranya) dan melaporkan latensi semacam kasus terburuk (atau persentil ke-98)
    • Mengajukan pertanyaan, "Berapa lama waktu yang dibutuhkan dari saat pengguna berinteraksi dengan halaman pada titik mana pun hingga frame berikutnya dirender sebagai respons?", sehingga menangkap latensi pemrosesan event dan rendering
  • INP diluncurkan pada 2022 sebagai metrik lapangan eksperimental dan dikumpulkan di CrUX
  • Pada awal 2023, Google menemukan bahwa INP lebih baik dalam memprediksi masalah responsivitas secara keseluruhan dibanding FID
  • Karena itu, diumumkan bahwa pada Maret 2024 INP akan menggantikan FID sebagai Core Web Vital
    • Perubahan ini dikomunikasikan jauh hari sebelumnya kepada developer
    • Alat seperti Lighthouse dan PageSpeed Insights mulai menampilkan INP (dan menandainya sebagai "akan segera menjadi CWV")
    • Web.dev menyediakan panduan untuk meningkatkan INP, yang sering bermuara pada praktik yang sama dengan performa umum: memecah long task, menggunakan web worker untuk komputasi berat, dan sebagainya
  • Peralihan dari FID ke INP menegaskan filosofi tim CWV untuk terus mengiterasi metrik agar lebih baik dalam menangani hal yang paling penting
    • Dalam hal ini, memastikan responsivitas yang konsisten sepanjang kunjungan pengguna, bukan hanya saat page load

Kelancaran dan animasi

  • Aspek lain yang diteliti tim Chrome adalah kelancaran visual seperti frame rate animasi dan scroll jank
  • Ini belum menjadi metrik CWV resmi, tetapi ada pekerjaan yang terus berjalan di area ini
  • Tim Chrome menyediakan metrik Smoothness untuk alat RUM (kadang dilaporkan sebagai "Jankiness" di CrUX) untuk mengukur hal seperti animasi yang tersendat
  • Heuristik juga diperkenalkan di browser untuk mengurangi jank
    • Misalnya, dengan menyesuaikan cara touch event disinkronkan dengan frame display, Chrome menggandakan kelancaran scrolling bawaannya sendiri di Android (dijelaskan lebih rinci dalam posting Fast and Curious Agustus 2023)
  • Di masa depan, kita mungkin akan melihat Web Vital "smoothness" resmi, atau INP diperluas agar mencakup latensi animasi tertentu
  • Intinya, Google menyadari aspek-aspek ini dan sedang aktif bereksperimen

Soft Navigation (SPA)

  • Salah satu keterbatasan definisi awal CWV adalah fokusnya pada page load penuh (yang disebut "hard navigation")
  • Namun, Single-Page Application (SPA) modern sering dimuat sekali lalu memperbarui konten dan route secara dinamis tanpa reload penuh
  • Soft navigation seperti ini (saat mengklik tautan mengubah konten melalui JavaScript tanpa menjalankan navigasi browser penuh) tidak tertangkap dalam pengukuran LCP atau CLS pada implementasi awal
    • Dari sudut pandang browser, ini masih halaman yang sama, sehingga pembaruan DOM besar tidak memicu LCP baru
  • Ini berarti untuk SPA, developer harus mengandalkan pengukuran kustom untuk mengevaluasi "transisi halaman" di dalam aplikasi, dan data CrUX (field) juga buta terhadap navigasi lanjutan tersebut (hanya CWV page load awal yang tercatat)
  • Untuk memperbaikinya, Chrome mengusulkan Soft Navigation API
    • Yoav Weiss mendapat seluruh kredit untuk pekerjaan ini
    • Pada pertengahan 2023, Chrome memulai eksperimen untuk mendeteksi navigasi SPA secara heuristik
    • Pada pertengahan 2025, origin trial untuk Soft Navigations API dirilis
  • Seperti dijelaskan engineer Chrome Barry Pollard dan Michal Mocny, soft navigation adalah "ketika JavaScript mencegat navigasi (misalnya melalui History API atau framework router) dan memperbarui konten halaman yang ada sambil memperbarui URL melalui history.pushState tanpa reload penuh"
  • Dengan API baru ini, browser (dan developer) dapat menandai event tersebut dan pada dasarnya memperlakukannya seperti page view baru
  • Yang terpenting, ini memungkinkan pengukuran Core Web Vitals pada SPA seolah-olah perubahan route soft tersebut adalah page load
  • Dengan API ini, metrik seperti LCP dapat di-reset pada soft navigation dan menangkap konten terbesar dari view baru (menggunakan konsep entri "interaction-to-next-paint" di Performance Timeline)
  • Demikian pula, CLS dapat dipisahkan per navigasi dan INP dapat dikaitkan dengan view saat ini
  • Ini adalah kemajuan besar dalam membawa CWV ke dunia aplikasi client-side routing (yang sangat umum)
  • Hingga akhir 2025 saat ini, Soft Nav API masih dalam masa trial dan developer dapat ikut serta serta mengirimkan umpan balik
  • Seiring waktu, Chrome diperkirakan akan mendukung sepenuhnya metrik soft nav dan data lapangan (CrUX) juga akan mengintegrasikannya
  • Evolusi ini mengakui bahwa perjalanan pengguna terdiri dari beberapa langkah, bukan hanya page load landing page, dan platform web harus dapat mengukur serta mengoptimalkan keseluruhan perjalanan itu

Evolusi ke depan

  • Google mengindikasikan akan terus menyempurnakan metrik setiap tahun
  • Kita mungkin akan melihat penyesuaian seperti threshold baru
    • Misalnya, jika web secara umum menjadi jauh lebih cepat, target LCP "baik" di masa depan bisa menjadi lebih ketat daripada 2,5 detik
    • Atau metrik yang sepenuhnya baru jika muncul kesenjangan yang jelas
  • Semua penambahan akan melalui proses terbuka (pendefinisian standar performa web, diskusi dengan vendor browser lain, dan sebagainya), seperti halnya pada INP
  • Google juga berencana mengintegrasikan lebih banyak sinyal pengalaman halaman dari waktu ke waktu
    • Misalnya, eksperimen privasi dan keamanan seperti menampilkan badge "halaman cepat" melalui Chrome jika situs menggunakan praktik yang baik
  • Namun, dalam konteks peringkat Search, Google baru-baru ini menyederhanakan pesannya
    • Pada 2023, Google menyebut tidak akan ada booster peringkat "pengalaman halaman" yang eksplisit di luar sinyal individual
    • Pada dasarnya, pertimbangan pengalaman halaman diintegrasikan dengan lebih halus ke dalam algoritme peringkat inti
    • Namun, dari sudut pandang pemilik situs, tidak ada yang berubah
    • Halaman yang cepat, responsif, dan stabil tetap sangat penting baik untuk kepuasan pengguna maupun SEO yang baik

Ringkasan

  • Sejarah Core Web Vitals adalah kisah tentang platform web yang menjawab tantangan
    • Dimulai dari wawasan bahwa kualitas pengalaman pengguna harus dapat diukur dan diberi penghargaan, lalu berkembang menjadi gerakan luas yang menyentuh metrik, browser, peringkat penelusuran, alat, framework, dan platform hosting
    • Dalam kurun beberapa tahun yang singkat, hal ini mendorong peningkatan yang signifikan di seluruh performa web
    • Perjalanan ini masih berlanjut: dengan inovasi mendatang seperti pengukuran soft navigation untuk SPA dan penyempurnaan metrik yang berkelanjutan, komitmen industri terhadap pengalaman web yang cepat dan menyenangkan tetap kuat
  • Core Web Vitals terbukti bukan sekadar kumpulan metrik, tetapi katalis untuk web yang lebih sehat, lebih cepat, dan lebih berpusat pada pengguna
    • Ini adalah warisan yang dibangun lewat kolaborasi banyak pihak, dan warisan yang akan menguntungkan semua orang yang menggunakan web

Bacaan terkait

Belum ada komentar.

Belum ada komentar.