Lịch sử của Core Web Vitals

• Core Web Vitals đo hiệu năng website bắt đầu từ nỗ lực hợp tác của nhiều nhóm tại Google từ năm 2014 nhằm vượt qua các giới hạn của dự án AMP và xác định các chỉ số hiệu năng theo tiêu chuẩn mở có thể áp dụng cho mọi website
• Tháng 5/2020, ba chỉ số cốt lõi (LCP cho tốc độ tải, FID cho độ phản hồi tương tác, CLS cho độ ổn định hiển thị) được công bố chính thức, được thiết kế là các chỉ số có thể đo ngoài thực tế phản ánh trải nghiệm người dùng thật
• Năm 2021, chúng được đưa vào yếu tố xếp hạng tìm kiếm thông qua bản cập nhật Page Experience của Google Search, đồng thời loại bỏ yêu cầu độc quyền AMP khỏi Top Stories để tạo ra môi trường cạnh tranh web mở
• Thông qua tối ưu hóa trình duyệt Chrome, cải tiến ở các CMS lớn như WordPress, và hợp tác với các framework JavaScript, tính đến năm 2023 đã tiết kiệm tổng cộng hơn 10.000 năm thời gian chờ của người dùng, và đến năm 2024 đạt 30.000 năm tiết kiệm
• Core Web Vitals tiếp tục phát triển, như thay FID bằng INP trong năm 2024 và giới thiệu Soft Navigation API cho SPA, qua đó góp phần xây dựng một hệ sinh thái web nhanh, ổn định và lấy người dùng làm trung tâm

---

Bối cảnh và động lực: từ AMP đến chỉ số web mở

• Trong nhiều năm, Google đã nhấn mạnh tốc độ và trải nghiệm người dùng là nguyên tắc cốt lõi của web, nhưng vẫn còn nhiều trang cung cấp trải nghiệm chậm chạp
• Năm 2010, Google Search bắt đầu dùng tốc độ website làm tín hiệu xếp hạng tìm kiếm, đây là một trong những nỗ lực ban đầu đưa hiệu năng vào SEO
• Khoảng năm 2015, dự án AMP (Accelerated Mobile Pages) được giới thiệu để cung cấp các trang được tối ưu cho tải nhanh, nhưng đã phát sinh vấn đề về tính mở và tính linh hoạt do đây là môi trường khép kín được phân phối qua bộ nhớ đệm của Google
• Năm 2018, thông qua Speed Update, tốc độ trang được áp dụng vào xếp hạng tìm kiếm trên di động; đồng thời Google Ads cũng đưa vào điểm tốc độ trang đích di động để nhấn mạnh rằng trải nghiệm nhanh hơn mang lại tỷ lệ chuyển đổi tốt hơn
• Để thoát khỏi cách tiếp cận chỉ dành cho AMP, các nhóm Chrome và Search đã hợp tác để bắt đầu xác định các chỉ số hiệu năng web mở có thể áp dụng cho mọi trang mà không cần framework đặc biệt
  • Phân tích hàng triệu trang để xác định tiêu chuẩn công khai cho các trang web nhanh và thân thiện với người dùng
  • Đặt mục tiêu là các chỉ số có thể đo ngoài thực tế phản ánh trải nghiệm người dùng thật
  • Muốn tìm ra các chỉ số có tương quan với kết quả như mức độ tương tác của người dùng

Định nghĩa Core Web Vitals: ba trụ cột của trải nghiệm người dùng

• Tháng 5/2020, Google chính thức công bố sáng kiến Web Vitals và giới thiệu Core Web Vitals tập trung vào “những khía cạnh cốt lõi của trải nghiệm người dùng áp dụng cho mọi trang web”

• Core Web Vitals ban đầu gồm ba chỉ số cốt lõi

  • Largest Contentful Paint(LCP): chỉ số tốc độ tải đo thời điểm nội dung chính được render, vượt ra ngoài First Contentful Paint hay onload để tập trung vào lúc người dùng thực sự nhìn thấy nội dung có ý nghĩa
  • First Input Delay(FID): chỉ số độ phản hồi tương tác đo độ trễ giữa tương tác đầu tiên của người dùng và phản hồi của trình duyệt, nắm bắt việc trang có phản ứng ngay hay bị trì hoãn bởi script nặng
  • Cumulative Layout Shift(CLS): chỉ số độ ổn định hiển thị đo mức độ bố cục trang bị xê dịch trong quá trình tải; tổng hợp các lần dịch chuyển bố cục ngoài dự kiến, trong đó CLS thấp đồng nghĩa với trải nghiệm ổn định và dễ chịu

• Việc lựa chọn chỉ số được tiến hành dựa trên nghiên cứu và thử nghiệm sâu rộng

  • Amar Sagoo, Annie Sullivan, Vivek Sekhar và những người khác đã phát hiện mối tương quan giữa số liệu hiệu năng khách quan và cảm nhận của người dùng thông qua nghiên cứu tương tác người-máy
  • Thời gian tải lý tưởng là trong 2–3 giây, phản hồi đầu vào là trong 100ms, và dịch chuyển bố cục phải được giảm thiểu tối đa
  • Phân tích dữ liệu người dùng thực tế để đặt ra các ngưỡng mục tiêu thực tiễn: LCP dưới 2,5 giây, FID dưới 100ms, CLS dưới 0,1 (theo phân vị thứ 75)
  • Các trang đáp ứng những ngưỡng này có xác suất người dùng rời trang thấp hơn 24%

• Google đã nỗ lực để các chỉ số này trở nên chuẩn hóa và cởi mở

  • Công bố bản thảo đặc tả web thông qua WICG và các nhóm tiêu chuẩn hiệu năng web
  • Triển khai để có thể đo được trên Chrome và các trình duyệt khác thông qua PerformanceObserver API
  • Tháng 5/2020 ra mắt thư viện JavaScript web-vitals mã nguồn mở để nhà phát triển có thể nhúng vào website và đo LCP, FID, CLS của người dùng thực tế
  • Addy Osmani phát triển tiện ích mở rộng Core Web Vitals hiển thị các chỉ số theo thời gian thực
  • Phản ánh nỗ lực rộng khắp nhằm khiến chúng dễ tiếp cận và hữu ích cho toàn bộ hệ sinh thái

Page Experience: Core Web Vitals trong xếp hạng Google Search

• Nhóm Google Search đã nhanh chóng áp dụng Core Web Vitals như một phần của bản cập nhật Page Experience

• Ngày 28/5/2020, Google Search Central công bố rằng các chỉ số này sẽ được đưa vào thuật toán xếp hạng

  • Khi hai trang có mức độ liên quan nội dung tương tự nhau, trang mang lại trải nghiệm người dùng tốt hơn sẽ được xếp hạng cao hơn
  • Tín hiệu Page Experience kết hợp Core Web Vitals với các tín hiệu UX hiện có khác như tính thân thiện với di động, bảo mật HTTPS và tránh interstitial gây cản trở
  • Nội dung chất lượng vẫn là yếu tố quan trọng nhất, và website nhanh hơn sẽ không vượt qua website liên quan hơn chỉ vì tốc độ
  • Trong trường hợp ngang ngửa hoặc chênh lệch rất nhỏ, Web Vitals tốt có thể trở thành yếu tố quyết định

• Thông báo đáng chú ý nhất là loại bỏ yêu cầu AMP khỏi carousel Top Stories

  • Trước đây, Google News/Top Stories trên di động yêu cầu AMP, nhưng sau bản cập nhật Page Experience, các trang không dùng AMP cũng có thể được đưa vào nếu đáp ứng Core Web Vitals và các tiêu chí khác
  • “AMP không còn là điều kiện bắt buộc cho Top Stories trên di động, mà được mở cho mọi trang có trải nghiệm trang tốt”
  • Điều này thể hiện niềm tin của Google rằng web mở có thể được cải thiện mà không cần bị hút vào framework AMP

• Google đã cung cấp đủ thời gian thông báo trước cho hệ sinh thái

  • Nhận thức rằng năm 2020 là một năm khó khăn vì đại dịch COVID-19, Google tuyên bố thay đổi xếp hạng sẽ không được áp dụng cho đến năm 2021 và hứa cảnh báo ít nhất 6 tháng
  • Trong bản cập nhật tháng 11/2020, Google cho biết thay đổi xếp hạng Page Experience sẽ bắt đầu từ tháng 5/2021
  • Cuối cùng, bản cập nhật Page Experience bắt đầu rollout vào giữa tháng 6/2021 và được áp dụng hoàn toàn vào cuối tháng 8 (đối với tìm kiếm trên di động)
  • Bản cập nhật tương tự cho tìm kiếm trên desktop được triển khai vào tháng 2–3/2022

• Khi bản cập nhật được áp dụng, thuật toán xếp hạng của Google bắt đầu dùng Core Web Vitals như một trong hàng trăm tín hiệu

  • Những trang đạt ngưỡng “tốt” ở cả ba chỉ số CWV được xem là có trải nghiệm trang tốt
  • Google tạo báo cáo Page Experience trong Google Search Console để chủ sở hữu website có thể dùng dữ liệu Chrome UX Report kiểm tra tỷ lệ trang vượt qua ngưỡng
  • Điều này cung cấp phản hồi trực tiếp cho webmaster và chuyên gia SEO về cách website hoạt động dưới góc nhìn tín hiệu trải nghiệm trang

• Google từng cân nhắc hiển thị huy hiệu cho các trang có trải nghiệm trang tốt trong kết quả tìm kiếm, nhưng không thêm biểu tượng huy hiệu vĩnh viễn

  • Phần thưởng chủ yếu đến dưới dạng tăng hạng xếp hạng thay vì nhãn hiển thị rõ ràng
  • Trong một thời gian, Google có hiển thị chỉ báo “Page Experience” tạm thời trong Search Console và trong các thử nghiệm kết quả tìm kiếm
  • Điểm cốt lõi: Google đang công khai tạo động lực cho hiệu năng và UX, và việc đạt Core Web Vitals tốt không chỉ làm người dùng hài lòng mà còn có thể cải thiện độ hiển thị của trang trên tìm kiếm

Công cụ và dữ liệu: Chrome UX Report và đo lường hiệu năng

• Google đã thực hiện khoản đầu tư quy mô lớn vào công cụ và dữ liệu cho Web Vitals

• Chrome UX Report (CrUX) là trung tâm của nỗ lực này

  • Là bộ dữ liệu công khai về các chỉ số trải nghiệm người dùng thực tế đã tồn tại từ năm 2017, thu thập dữ liệu hiệu năng đã được ẩn danh cho hàng triệu website từ hàng triệu người dùng Chrome
  • Khi Core Web Vitals ra mắt, CrUX ngay lập tức bắt đầu báo cáo LCP, FID, CLS cho mọi URL nguồn trong bộ dữ liệu
  • Bất kỳ ai cũng có thể truy vấn dữ liệu hiệu năng thực tế
  • Sau khi cung cấp quyền truy cập qua BigQuery, Google ra mắt CrUX API và CrUX Dashboard để giúp nhà phát triển và chuyên gia SEO dễ dàng xem website của mình (hoặc của đối thủ) hoạt động thế nào với các chỉ số CWV ngoài thực tế
  • Việc giới thiệu CrUX History API cũng cung cấp dữ liệu chuỗi thời gian cho các chỉ số này, cho phép theo dõi tiến độ qua nhiều tháng

• Về mặt công cụ dành cho nhà phát triển, quá trình tích hợp diễn ra nhanh chóng

  • Đến cuối năm 2020, phần lớn công cụ hiệu năng của Google đã được cập nhật để nhấn mạnh Core Web Vitals
  • Lighthouse (công cụ kiểm tra mã nguồn mở được dùng trong Chrome DevTools và PageSpeed Insights) đã tích hợp chẩn đoán và điểm số liên quan đến CWV
    • Thêm các mục kiểm tra như “Largest Contentful Paint là X giây (mục tiêu <2,5 giây)” và đưa ra gợi ý cải thiện
  • Chrome DevTools bổ sung bảng Core Web Vitals và các dấu mốc trên timeline để có thể kiểm tra phần tử LCP hoặc sự dịch chuyển bố cục trong lúc tải trang
  • PageSpeed Insights (PSI) được thiết kế lại toàn diện để tập trung vào CWV
    • Hiển thị nổi bật ở phía trên dữ liệu thực tế về LCP, FID (sau này là INP), CLS lấy từ CrUX
  • Google Search Console cung cấp báo cáo Core Web Vitals chuyên dụng nhóm các trang theo từng chỉ số vào các nhóm “Tốt”, “Cần cải thiện”, “Kém”, giúp chủ sở hữu website xác định chính xác khu vực có vấn đề
  • Công việc phát triển công cụ do Elizabeth Sweeny, Paul Irish, Addy Osmani và những người khác dẫn dắt

• Cộng đồng phát triển web cũng hưởng ứng bằng các công cụ bên thứ ba

  • Các nhà cung cấp dịch vụ Real User Monitoring (RUM) đã nhanh chóng tích hợp Core Web Vitals
  • mPulse của Akamai, Browser agent của New Relic, Dynatrace, Datadog, SpeedCurve và các dịch vụ khác đã lập tức hỗ trợ LCP, FID, CLS như các chỉ số hạng nhất
  • Cloudflare cũng giới thiệu dịch vụ Browser Insights có thể thu thập Web Vitals bằng cách chèn script
  • Nhờ sự tồn tại của thư viện JS web-vitals, mọi công cụ phân tích đều có thể dễ dàng thu thập các chỉ số này
  • Đến năm 2021, Core Web Vitals đã trở nên phổ biến trên dashboard của các công cụ giám sát hiệu năng web
  • Tính sẵn có rộng khắp này giúp nâng cao nhận thức và cung cấp dữ liệu để nhà phát triển thúc đẩy cải thiện hiệu năng

• Dữ liệu từ Chrome User Experience Report cũng rất cần thiết để theo dõi tiến triển của toàn bộ web

  • Trong suốt năm 2021 và 2022, tỷ lệ lưu lượng có CWV “tốt” tăng lên đều đặn
  • Điều này thường được báo cáo trong Web Almanac hằng năm của HTTP Archive hoặc trong các bài cập nhật trên blog của chính Google
  • Việc có các chỉ số đo lường được và công khai tạo ra một dạng cạnh tranh tích cực
  • Chủ sở hữu website và nhà cung cấp nền tảng bắt đầu khoe thành tích và nỗ lực cải thiện Core Web Vitals

Tác động và cải tiến: làm cho web nhanh hơn và ổn định hơn

Tối ưu hóa trình duyệt Chrome

• Khi Core Web Vitals được thiết lập, nó đã kích hoạt nỗ lực quy mô lớn và đa chiều nhằm cải thiện các chỉ số này trên toàn bộ hệ sinh thái web

• Đội ngũ kỹ thuật Google Chrome đã rà soát kỹ lưỡng trình duyệt để tối ưu cách Chrome tải và render trang web

  • Xét đến lượng người dùng khổng lồ của Chrome, ngay cả cải tiến nhỏ ở cấp độ trình duyệt cũng mang lại lợi ích cho toàn bộ web
  • Bao gồm các tối ưu hóa lớn được phát hành trong Chrome giai đoạn 2020–2023

• Ưu tiên nội dung cho LCP

  • Chrome được thay đổi để ưu tiên tải nội dung quan trọng
  • Trình duyệt xác định một vài hình ảnh đầu tiên trong HTML (thường bao gồm hình ảnh LCP) và gán độ ưu tiên mạng cao hơn
  • Việc ưu tiên như vậy cho 5 hình ảnh đầu tiên đã giúp LCP trên một số trang cải thiện từ 3,1 giây xuống 2,5 giây
  • Các tiêu chuẩn web mới như thuộc tính fetchpriority (cơ chế Priority Hints) được giới thiệu để nhà phát triển có thể đánh dấu hình ảnh hoặc iframe với mức ưu tiên cao cho LCP

• Back/Forward Cache (BFCache)

  • Trước đây Chrome về mặt lịch sử không lưu toàn bộ trang vào BFCache do độ phức tạp kỹ thuật, nhưng trong những năm gần đây đã bật BFCache cho nhiều trang
  • Đến năm 2023, Chrome đã đạt được mức tăng tỷ lệ trúng BFCache đáng kể trên cả desktop và Android
  • Người dùng quay lại trang bằng nút “quay lại” có thể thấy trang gần như ngay lập tức (LCP bằng 0, độ trễ đầu vào bằng 0, vì trang chưa bị unload)
  • Các nền tảng lớn như Amazon đã hưởng lợi từ BFCache của Chrome, và sau các cải tiến của Chrome (phiên bản M112), họ báo cáo mức tăng 22,7 điểm phần trăm trong việc sử dụng back/forward cache

• Prerendering (NoState Prefetch/Prerender2)

  • Chrome đã phát hành một trình prerender mới (Prerender2) cho phép trình duyệt tải và render hoàn chỉnh một trang trong nền rồi chuyển sang ngay lập tức khi người dùng điều hướng
  • Ban đầu được dùng cho Google Search (prerender kết quả đầu tiên) và dự đoán URL người dùng nhập, giúp rút ngắn LCP đáng kể
  • Chrome báo cáo rằng prerender tìm kiếm trên omnibox mang lại cải thiện LCP trung vị 500–700 ms (khoảng 15–25%) cho các lần điều hướng đó
  • Chrome đang triển khai tính năng này một cách thận trọng (để tránh dự đoán sai hoặc các vấn đề về quyền riêng tư)

• Tối ưu hóa mạng và lập lịch

  • Đội ngũ Chrome đã xác định và xử lý nhiều độ trễ nhỏ khác nhau trong phản hồi đầu vào
  • Giới thiệu tính năng preconnect khi nhấn con trỏ (khi người dùng bắt đầu chạm/nhấp, trước khi nhả ra) để rút ngắn vài mili giây trong quá trình thiết lập kết nối cho việc điều hướng theo liên kết
  • Mang lại LCP nhanh hơn trung bình khoảng 6–10 ms trong điều hướng khác nguồn
  • Cải thiện cách luồng chính của trình duyệt xử lý tác vụ khi mở nhiều tab để giảm tranh chấp
  • Bằng cách điều chỉnh lập lịch tác vụ và sử dụng các cơ chế như EcoQOS của Windows 11 cho tab nền, Chrome đã cải thiện INP khoảng 5% và LCP khoảng 2% trong các kịch bản tải nặng

• Cải tiến rendering và JavaScript engine

  • Việc tái cấu trúc kiến trúc RenderingNG của Chrome (hoàn tất khoảng năm 2021) đã giúp việc render hiệu quả hơn
  • Nâng cấp độ ưu tiên tải hình ảnh (để hình ảnh LCP không bị chặn phía sau các tác vụ khác kém quan trọng hơn) cùng với việc căn thời điểm garbage collection thông minh hơn của V8 (chạy trong lúc rảnh) bảo đảm trải nghiệm mượt mà hơn
  • Các nhà phát triển Chrome phát hiện cách trình duyệt đa tiến trình truy cập cookie gây ra hiện tượng jank
    • Mọi lệnh gọi document.cookie đều phải được lấy đồng bộ từ một tiến trình riêng biệt
    • Bằng cách giới thiệu quản lý phiên bản bộ nhớ dùng chung cho cookie, Chrome đã tối ưu truy cập cookie và loại bỏ nhiều lần nhảy tiến trình dư thừa
    • Giảm độ trễ đầu vào trong trường hợp website liên tục spam việc đọc cookie ở mọi tương tác

• Tất cả các tối ưu hóa này của Chrome đã mang lại khác biệt có thể đo lường được

  • Đến cuối năm 2023, Google báo cáo rằng thời gian tải trang trung bình trên Chrome nhanh hơn 166ms so với trước khi Core Web Vitals tồn tại
  • Tác động là rất lớn trên toàn bộ web: cộng dồn phần thời gian được tiết kiệm, nhóm Chrome ước tính chỉ riêng trong năm 2023, các cải thiện về tốc độ đã giúp người dùng tiết kiệm hơn 10.000 năm thời gian chờ trang tải xong, cùng với hơn 1.200 năm chờ trang phản hồi thao tác nhập liệu
  • Tỷ lệ lưu lượng đáp ứng ngưỡng CWV ở mức "tốt" cũng tăng mạnh
  • Khi mới công bố, chỉ khoảng 1/3 lượt tải trang được xem là tốt theo tiêu chuẩn CWV, nhưng đến năm 2023, khoảng 68% lượt truy cập trang trên desktop và 64% trên di động trong Chrome đã đáp ứng cả ba ngưỡng CWV

Cải thiện trên toàn hệ sinh thái web

• Những cải thiện này không chỉ đến từ phía Google; cộng đồng phát triển web rộng lớn hơn, cùng các framework và nhà cung cấp nền tảng, cũng đã vào cuộc để xử lý các vấn đề hiệu năng được Core Web Vitals chỉ ra

• Tối ưu hóa hình ảnh và lazy loading

  • Nhận thấy hình ảnh thường là nội dung lớn nhất và là nguyên nhân phổ biến gây ra LCP, các web framework và CMS đã triển khai các mặc định thông minh hơn
  • HTML gốc loading="lazy" cho hình ảnh ngoài màn hình đã được chuẩn hóa (với sự hỗ trợ từ Chrome và các bên đóng góp cho tiêu chuẩn web như Yoav Weiss, Addy Osmani) và được WordPress cùng các nền tảng khác áp dụng, giúp giảm mạnh việc tải hình ảnh không cần thiết
  • Sau khi WordPress bật lazy loading cho hình ảnh theo mặc định vào năm 2020, họ tiếp tục cải thiện để không lazy-load hình ảnh banner đầu tiên nhằm tránh làm chậm LCP
  • Thuộc tính mới <img fetchpriority="high"> nhanh chóng được các framework tận dụng để ưu tiên hiển thị hình ảnh chính nhằm tăng tốc độ tải

• WordPress Performance Team

  • WordPress chiếm khoảng 40% tổng số website, nên hiệu năng của nó có sức ảnh hưởng rất lớn
  • Ban đầu, các website WordPress bị tụt lại trong điểm CWV, và một báo cáo năm 2021 cho thấy tỷ lệ vượt ngưỡng của các site WordPress thấp hơn một số hệ sinh thái khác, từ đó gióng lên hồi chuông cảnh báo
  • Cộng đồng đã phản hồi bằng cách thành lập Core Performance Team chuyên trách (bao gồm các bên đóng góp từ Google và các công ty khác) để cải thiện tốc độ của WordPress core một cách có hệ thống
  • Công việc đó đã cho thấy kết quả trong các bản phát hành gần đây
    • WordPress 6.3 (2023) bao gồm hàng loạt tối ưu hóa cho quá trình render theme và tải tài nguyên, mang lại các theme lõi tải nhanh hơn 27% với block theme và 18% với classic theme so với WordPress 6.2 theo chỉ số LCP
    • Trên thực tế, hàng triệu website đã nhanh hơn chỉ bằng cách nâng cấp WordPress
  • Nhóm WordPress cũng tối ưu xử lý hình ảnh, thêm cơ chế cache cho một số tác vụ tốn kém, và đặt hiệu năng ở mức ưu tiên ngang với tính năng mới
  • Kết quả là tỷ lệ website WordPress có điểm CWV tốt đã tăng vọt (một số dữ liệu cho thấy tỷ lệ site WP đáp ứng toàn bộ CWV đã tăng hơn 4 lần trong giai đoạn 2020 đến 2022)

• Wix và các trình dựng website

  • Những nền tảng website được host sẵn khác như Wix, Squarespace, Duda cũng coi Core Web Vitals là chất xúc tác cho việc cải thiện hiệu năng
  • Wix đã thực hiện các đợt cải tổ hạ tầng lớn (cache, máy chủ nhanh hơn, mã phía client tốt hơn) và tăng tỷ lệ các website Wix đạt điểm CWV tốt lên nhiều lần
  • Trong một case study, Wix cho biết họ đã nâng tỷ lệ website có CWV "tốt" từ 4% lên hơn 33% trong khoảng một năm
  • Điều này chứng minh rằng một sự chuyển dịch văn hóa theo hướng lấy hiệu năng làm trung tâm ở cấp nền tảng có thể mang lại lợi ích cho số lượng người dùng khổng lồ
  • Các trình dựng website khác như Duda cũng thường quảng bá rằng phần lớn website khách hàng của họ đạt CWV tốt, vì nền tảng đã tích hợp sẵn các best practice (hình ảnh responsive, phân phối qua CDN, template hiệu quả, v.v.)
  • Áp lực cạnh tranh này khiến các nền tảng phải tự thúc đẩy cải tiến nội bộ, ngay cả khi chủ website riêng lẻ không phải là chuyên gia hiệu năng

• JavaScript framework (Chrome Aurora)

  • Nhóm Chrome Aurora được thành lập vào giữa năm 2020 như một lực lượng đặc nhiệm đặc biệt trong Chrome để hợp tác với các JavaScript framework phổ biến
  • Các thành viên Aurora (Addy Osmani, Kara Erickson, Houssein Djirdeh và những người khác) đã làm việc chặt chẽ với tác giả của các framework như React/Next.js, Angular, Nuxt, Gatsby để xác định các điểm nghẽn phổ biến và đưa ra giải pháp
  • Sự hợp tác này đã mang lại các tính năng như
    • component next/script của Next.js (tải script bên thứ ba hiệu quả hơn ngoài main thread)
    • directive NgOptimizedImage tích hợp sẵn của Angular (tự động lazy-load hình ảnh và đặt kích thước, mức ưu tiên phù hợp)
    • module tối ưu Google Fonts cho Nuxt
  • Tác động là rất đáng kể: đến năm 2022, điểm Core Web Vitals trung vị của các website xây bằng những framework này đã cải thiện rõ rệt
    • Tỷ lệ vượt CWV của các site Next.js tăng từ 20,4% lên 27,3%
    • Angular tăng từ 7,6% lên 13,2%
    • Nuxt cải thiện từ 15,8% lên 20,2%
  • Cũng có rất nhiều ví dụ thành công riêng lẻ
    • Website thương mại điện tử Land's End sau khi áp dụng tối ưu hình ảnh của Angular đã cải thiện LCP 40% trên di động (theo kiểm thử trong lab)
    • CareerKarma dùng cơ chế tải script cải tiến của Next.js và giảm LCP 24%

• Các chỉ số kinh doanh thực tế

  • Cuối cùng, Core Web Vitals tốt hơn không chỉ để làm hài lòng Google mà còn có tương quan với mức độ hài lòng thực tế của người dùng và kết quả kinh doanh
  • Nhiều công ty đã chia sẻ case study kết nối cải thiện CWV với mức độ tương tác của người dùng
    • Trang tin Economic Times tối ưu xử lý script để cải thiện INP và đạt tăng 42% pageview, giảm 49% tỷ lệ thoát
    • Website đặt vé du lịch RedBus cải thiện INP và ghi nhận tăng 7% tỷ lệ chuyển đổi
    • Chợ trực tuyến Meesho tại Ấn Độ giảm LCP từ 6,9 giây xuống 2,5 giây, qua đó giảm khoảng 17% tỷ lệ thoát và tăng 3% tỷ lệ chuyển đổi
  • Những ví dụ này củng cố rằng hiệu năng không chỉ là chỉ số kỹ thuật đơn thuần mà còn chuyển hóa thành việc người dùng ở lại lâu hơn, đọc nhiều hơn và mua nhiều hơn
  • Các câu chuyện thành công đó càng thúc đẩy đội ngũ phát triển và sản phẩm ưu tiên Web Vitals hơn nữa

Thành quả cải thiện của toàn hệ sinh thái

• Nỗ lực kết hợp từ các nhóm trình duyệt, tác giả framework, nhà phát triển CMS và vô số lập trình viên web riêng lẻ đã cải thiện mạnh mẽ tình trạng của web
• Bằng cách thiết lập các chỉ số rõ ràng và có thể hành động, Core Web Vitals đã tạo ra một mục tiêu chung mà mọi người đều có thể theo đuổi
• Điều quan trọng là điều này đạt được mà không khóa hệ sinh thái vào công nghệ độc quyền, mà bằng cách tận dụng các tiêu chuẩn mở và dữ liệu mở
• Tính đến năm 2023, khoảng 40% website (và tỷ lệ cao hơn nhiều ở các site được quản lý tốt, mang tính thương mại) hiện đã vượt qua toàn bộ ngưỡng Core Web Vitals, trong khi đầu năm 2020 chỉ có số ít làm được
• Ngay cả những website chưa vượt hoàn toàn cũng nhìn chung nhanh hơn và mượt hơn trước đây
• Văn hóa nhận thức về hiệu năng đang lan rộng: các nhà phát triển ngày càng theo dõi các chỉ số CWV nhiều hơn (theo khảo sát, khoảng 51% lập trình viên đang chủ động theo dõi và tối ưu Web Vitals)
• Google cũng lưu ý rằng dù thúc đẩy các cải thiện tốc độ này, mức độ hài lòng của lập trình viên với nền tảng web vẫn duy trì ở mức cao
  • Điều đó cho thấy các hướng dẫn này có thể đạt được, chứ không đẩy lập trình viên vào tuyệt vọng
  • Sự cân bằng này rất quan trọng: nếu mục tiêu CWV là bất khả thi hoặc công cụ không đủ tốt, lập trình viên có thể đã phản ứng ngược; nhưng thay vào đó, cộng đồng đã cùng nhau làm cho web trở nên tốt hơn

Sự tiến hóa của các chỉ số: INP, Soft Navigation, v.v.

• Google ngay từ đầu đã thừa nhận rằng Core Web Vitals sẽ tiến hóa theo thời gian
• Bộ ba chỉ số của năm 2020 không được định sẵn là tĩnh hay hoàn chỉnh
• Các khía cạnh khác của trải nghiệm người dùng, như cuộn mượt hay các tác vụ dài ở giai đoạn sau của trang, ban đầu chưa được đề cập
• Đội ngũ Chrome Web Platform tiếp tục nghiên cứu các chỉ số mới và các cải tiến cho chỉ số hiện có

Interaction to Next Paint (INP)

• Khoảng trống rõ ràng trong CWV ban đầu là tính tương tác vượt ra ngoài cú nhấp đầu tiên
• FID chỉ đo độ trễ của lần nhập liệu đầu tiên, nên tuy quan trọng với ấn tượng ban đầu, trang vẫn có thể không phản hồi trong các tương tác khác về sau của người dùng
• Để giải quyết điều này, các Googler như Annie Sullivan và Michal Mocny đã đề xuất INP
  • Xem xét mọi tương tác của người dùng trên trang (hoặc ít nhất là rất nhiều tương tác) và báo cáo dạng độ trễ tình huống xấu nhất (hoặc phân vị thứ 98)
  • Đặt ra câu hỏi: "Khi người dùng tương tác với trang tại bất kỳ thời điểm nào, mất bao lâu cho đến khi khung hình tiếp theo được vẽ để phản hồi?", qua đó nắm bắt độ trễ trong xử lý sự kiện và rendering
• INP được triển khai từ năm 2022 như một chỉ số field thử nghiệm và được thu thập trong CrUX
• Đến đầu năm 2023, Google nhận thấy INP dự đoán tốt hơn các vấn đề phản hồi tổng thể so với FID
• Vì vậy, Google đã công bố INP sẽ thay thế FID làm Core Web Vital vào tháng 3/2024
  • Thay đổi này được thông báo cho cộng đồng phát triển với đủ thời gian chuẩn bị
  • Các công cụ như Lighthouse và PageSpeed Insights bắt đầu hiển thị INP (và gắn nhãn là "sẽ sớm trở thành CWV")
  • Web.dev cung cấp hướng dẫn cải thiện INP, thường quy về các thực hành hiệu năng nói chung: chia nhỏ long task, dùng web worker cho các phép tính nặng, v.v.
• Việc chuyển từ FID sang INP nhấn mạnh triết lý của đội ngũ CWV: lặp lại các chỉ số để bao quát tốt hơn điều thực sự quan trọng
  • Trong trường hợp này, không chỉ là tải trang mà còn là đảm bảo khả năng phản hồi nhất quán trong suốt toàn bộ lượt truy cập của người dùng

Độ mượt và hoạt ảnh

• Một khía cạnh khác mà đội ngũ Chrome đã khảo sát là độ mượt thị giác, như tốc độ khung hình hoạt ảnh và hiện tượng giật khi cuộn
• Đây vẫn chưa phải là một chỉ số CWV chính thức, nhưng đã có công việc đang diễn ra trong lĩnh vực này
• Đội ngũ Chrome cung cấp chỉ số Smoothness cho các công cụ RUM (đôi khi được báo cáo là "Jankiness" trong CrUX) để định lượng những thứ như hoạt ảnh bị khựng
• Các heuristic cũng được đưa vào trình duyệt để giảm jank
  • Ví dụ, bằng cách điều chỉnh cách các sự kiện cảm ứng được đồng bộ với khung hình hiển thị, Chrome đã tăng gấp đôi độ mượt của việc cuộn ngay trong trình duyệt trên Android (được mô tả chi tiết trong bài Fast and Curious tháng 8/2023)
• Trong tương lai, có thể sẽ xuất hiện một Web Vital chính thức cho "smoothness", hoặc INP có thể được mở rộng để bao quát một số độ trễ liên quan đến hoạt ảnh
• Điểm cốt lõi là Google nhận thức rõ các khía cạnh này và đang tích cực thử nghiệm

Soft Navigation (SPA)

• Một hạn chế trong định nghĩa CWV ban đầu là nó tập trung vào tải trang đầy đủ (còn gọi là "hard navigation")
• Tuy nhiên, các Single-Page Application (SPA) hiện đại thường chỉ tải một lần rồi cập nhật nội dung và tuyến đường một cách động mà không reload toàn bộ
• Những soft navigation này (khi nhấp liên kết nhưng nội dung thay đổi qua JavaScript thay vì thực hiện điều hướng đầy đủ của trình duyệt) ban đầu không được nắm bắt trong phép đo LCP hoặc CLS
  • Từ góc nhìn của trình duyệt, đó vẫn là cùng một trang, nên một cập nhật DOM lớn không kích hoạt LCP mới
• Điều này đồng nghĩa rằng với SPA, nhà phát triển phải dựa vào các phép đo tùy chỉnh để đánh giá "chuyển trang" bên trong ứng dụng, và dữ liệu CrUX (field) cũng không nhìn thấy các lần điều hướng tiếp theo đó (chỉ ghi nhận CWV của lần tải trang ban đầu)
• Để khắc phục điều này, Chrome đã đề xuất Soft Navigation API
  • Yoav Weiss xứng đáng nhận toàn bộ công lao cho công việc này
  • Giữa năm 2023, Chrome bắt đầu thử nghiệm phát hiện điều hướng SPA bằng heuristic
  • Đến giữa năm 2025, một origin trial cho Soft Navigations API được phát hành
• Như các kỹ sư Chrome Barry Pollard và Michal Mocny giải thích, soft navigation là khi "JavaScript chặn điều hướng (ví dụ qua History API hoặc router của framework) và cập nhật nội dung của trang hiện tại trong khi cũng cập nhật URL bằng history.pushState mà không cần reload toàn bộ"
• API mới cho phép trình duyệt (và nhà phát triển) đánh dấu các sự kiện này và về bản chất coi chúng như một page view mới
• Điều quan trọng là điều này cho phép đo Core Web Vitals trong SPA như thể các thay đổi tuyến đường mềm này là những lần tải trang
• Với API này, các chỉ số như LCP có thể được reset tại thời điểm soft navigation và nắm bắt nội dung lớn nhất của view mới (sử dụng khái niệm mục "interaction-to-next-paint" trong Performance Timeline)
• Tương tự, CLS có thể được tách theo từng lần điều hướng, còn INP có thể được gắn với view hiện tại
• Đây là một bước tiến lớn để đưa CWV vào thế giới của các ứng dụng định tuyến phía client (vốn cực kỳ phổ biến)
• Tính đến cuối năm 2025, Soft Nav API vẫn đang trong giai đoạn trial và nhà phát triển có thể opt-in cũng như gửi phản hồi
• Theo thời gian, dự kiến Chrome sẽ hỗ trợ đầy đủ các chỉ số soft nav và dữ liệu field (CrUX) cũng sẽ tích hợp chúng
• Sự tiến hóa này thừa nhận rằng hành trình người dùng gồm nhiều bước, chứ không chỉ là tải trang đích ban đầu, và nền tảng web cần đo lường cũng như tối ưu toàn bộ hành trình đó

Sự tiến hóa trong tương lai

• Google cho biết họ sẽ tiếp tục cải thiện các chỉ số hằng năm
• Chúng ta có thể thấy các điều chỉnh như ngưỡng mới
  • Ví dụ, nếu web nhìn chung trở nên nhanh hơn rõ rệt, mục tiêu LCP "tốt" trong tương lai có thể nghiêm ngặt hơn 2,5 giây
  • Hoặc là các chỉ số hoàn toàn mới nếu xuất hiện khoảng trống rõ ràng
• Mọi bổ sung đều sẽ đi qua quy trình công khai (xác định tiêu chuẩn hiệu năng web, thảo luận với các nhà cung cấp trình duyệt khác, v.v.), như trường hợp của INP
• Google cũng có kế hoạch tích hợp thêm nhiều tín hiệu trải nghiệm trang theo thời gian
  • Ví dụ, các thử nghiệm về quyền riêng tư và bảo mật như hiển thị huy hiệu "trang nhanh" trong Chrome nếu một site sử dụng các thực hành tốt
• Tuy nhiên, trong bối cảnh xếp hạng Search, Google gần đây đã đơn giản hóa thông điệp
  • Đến năm 2023, Google cho biết sẽ không còn một bộ tăng hạng "trải nghiệm trang" tường minh vượt lên trên các tín hiệu riêng lẻ
  • Về bản chất, các cân nhắc về trải nghiệm trang được tích hợp tinh tế hơn vào thuật toán xếp hạng cốt lõi
  • Nhưng từ góc nhìn của chủ sở hữu website thì không có gì thay đổi
  • Những trang nhanh, phản hồi tốt và ổn định vẫn có ý nghĩa nền tảng đối với cả sự hài lòng của người dùng lẫn SEO tốt

Tổng kết

• Lịch sử của Core Web Vitals là câu chuyện về việc nền tảng web vươn lên để đáp ứng thách thức
  • Bắt đầu từ nhận thức rằng chất lượng trải nghiệm người dùng cần được đo lường và xứng đáng được tưởng thưởng, rồi chuyển thành một phong trào rộng khắp chạm đến chỉ số, trình duyệt, xếp hạng tìm kiếm, công cụ, framework và các nền tảng hosting
  • Chỉ trong vài năm ngắn ngủi, nó đã thúc đẩy những cải thiện đáng kể trên toàn bộ bức tranh hiệu năng web
  • Hành trình vẫn đang tiếp diễn: với các đổi mới sắp tới như đo lường soft navigation cho SPA và việc tiếp tục tinh chỉnh chỉ số, cam kết của ngành đối với trải nghiệm web nhanh và dễ chịu vẫn rất mạnh mẽ
• Core Web Vitals không chỉ là một bộ chỉ số mà còn chứng tỏ là chất xúc tác cho một web lành mạnh hơn, nhanh hơn và lấy người dùng làm trung tâm hơn
  • Đó là một di sản được xây dựng nhờ sự hợp tác của rất nhiều người, và là di sản sẽ mang lại lợi ích cho mọi người dùng web