Core Web Vitals On-Page: Kỹ thuật tối ưu LCP và CLS

1. Tối ưu LCP (Largest Contentful Paint) - Tốc độ hiển thị phần tử lớn nhất

LCP đo thời gian cần thiết để phần tử lớn nhất (thường là ảnh Hero, tiêu đề H1 hoặc video) hiển thị trên màn hình.

1.1. Xử lý ảnh Hero & Multimedia

Hai việc với ảnh đầu trang đi ngược nhau nhưng phải làm cả hai. Thêm thuộc tính ưu tiên tải cao cho ảnh LCP để trình duyệt kéo nó về trước các script chưa cần, và tuyệt đối không đặt lazy load cho ảnh đó. Lazy load đặt nhầm chỗ là tự làm chậm chính phần đo điểm.

• Ưu tiên tải (Fetch Priority): Thêm thuộc tính fetchpriority="high" cho ảnh LCP để trình duyệt bắt đầu tải nó ngay lập tức, trước cả các script chưa cần thiết.
• Loại bỏ Lazy Load cho ảnh đầu trang: Tuyệt đối không dùng loading="lazy" cho ảnh LCP. Điều này sẽ làm chậm quá trình hiển thị vì trình duyệt phải chờ tính toán vị trí cuộn.
• Preload tài nguyên: Sử dụng <link rel="preload"> trong thẻ <head> cho các tệp ảnh hoặc font chữ quan trọng nhất.

1.2. Phản hồi máy chủ & TTFB

Kết xuất phía máy chủ đưa HTML về sẵn thay vì bắt trình duyệt chờ JavaScript nặng chạy xong. Khác biệt nằm ở chỗ ai làm việc: máy chủ của bạn hay thiết bị của người đọc. Với máy yếu và mạng chậm, phần chờ đó chính là toàn bộ khoảng cách giữa tốt và kém.

• Server-Side Rendering (SSR): Đảm bảo HTML được render sẵn từ máy chủ thay vì bắt trình duyệt chờ Javascript nặng nề thực thi (Client-Side Rendering).

2. Tối ưu CLS (Cumulative Layout Shift) - Chống nhảy trang

CLS đo lường mức độ thay đổi vị trí đột ngột của các phần tử trên trang trong quá trình tải.

Tối ưu không có điểm dừng tự nhiên, nên thứ quyết định hiệu quả là biết dừng đúng chỗ và chuyển sang việc khác. Khóa Học SEO Master đi vào cách chọn.

2.1. Xác định kích thước cho hình ảnh và Video

Hai cách giữ chỗ cho ảnh trước khi nó tải xong. Khai báo chiều rộng và chiều cao ngay trong thẻ HTML, hoặc dùng thuộc tính aspect-ratio trong CSS để trình duyệt tự chừa khoảng trống. Không giữ chỗ thì nội dung bên dưới bị đẩy xuống đúng lúc người ta đang đọc.

• Set Width & Height: Luôn khai báo thuộc tính rộng và cao trong HTML: <img src="..." width="800" height="600">.
• Aspect Ratio: Sử dụng thuộc tính CSS aspect-ratio để trình duyệt giữ chỗ (placeholder) cho hình ảnh ngay cả khi ảnh chưa tải xong.

2.2. Kiểm soát Fonts & Quảng cáo (Ads)

Hai nguồn gây nhảy bố cục hay bị bỏ sót là font và quảng cáo. Thuộc tính font-display swap cho trình duyệt dùng font hệ thống trong lúc chờ, còn banner thì phải đặt trong thẻ div có chiều cao cố định. Quảng cáo tải chậm mà không có chỗ chờ sẵn sẽ đẩy cả trang xuống.

• Font-display: swap: Sử dụng thuộc tính này để trình duyệt dùng font hệ thống thay thế trong khi chờ tải font tùy chỉnh, tránh hiện tượng chữ hiện ra đột ngột làm nhảy layout.
• Dành chỗ cho quảng cáo: Nếu bạn chèn banner/quảng cáo, hãy đặt chúng trong một thẻ <div> có chiều cao cố định để khi quảng cáo hiện ra, nó không đẩy nội dung phía dưới xuống.

3. Multimedia Engineering: Video và Animation

Multimedia Engineering cho video và animation là xử lý đúng để multimedia không thành kẻ thù số 1 của CWV. Video hero background nên dùng .webm nhẹ hơn .mp4, kèm muted playsinline. Luôn có poster image để LCP không trống. Animation nên dùng transform thay vì đổi top, left, width, height để tránh reflow.

Multimedia là "kẻ thù" số 1 của CWV nếu không được xử lý đúng cách.

• Video Autoplay: Nếu dùng video làm Hero background, hãy dùng định dạng .webm (nhẹ hơn .mp4) và chèn thuộc tính muted playsinline.
• Poster Image: Luôn có một tấm ảnh tĩnh (Poster) hiển thị trước khi video được tải để đảm bảo LCP không bị trống.
• Sử dụng CSS thay vì JS cho Animation: Các hiệu ứng chuyển động nên dùng thuộc tính transform thay vì thay đổi top, left, width, height để tránh kích hoạt lại quá trình Reflow (tính toán lại bố cục).

4. Bảng quy chuẩn chỉ số Core Web Vitals (2025)

Ba chỉ số có ba ngưỡng đạt riêng. LCP phải từ 2.5 giây trở xuống, CLS từ 0.1 trở xuống, INP từ 200 mili giây trở xuống; vượt qua là vùng cần cải thiện rồi tới vùng kém. Đạt hai chỉ số mà hỏng một thì trang vẫn không qua, nên phải nhìn cả ba cùng lúc.

5. Checklist thực hành Core Web Vitals On-Page

Checklist thực hành Core Web Vitals On-Page gồm năm điểm kiểm tra trong code. Ảnh LCP đầu trang có fetchpriority high và bỏ loading lazy, 100% hình ảnh khai báo width và height, web font dùng font-display swap và preload, vùng quảng cáo hoặc iframe cố định chiều cao, và Critical CSS được tách để tải trước.

Đọc hiểu “Checklist thực hành Core Web Vitals On-Page” và làm được nó là hai việc khác nhau. Khóa Học SEO tập trung vào phần thực hành, mỗi kỹ năng gắn với một việc cụ thể trên website.

• [ ] 1. Ảnh LCP: Đã thêm fetchpriority="high" và xóa loading="lazy" cho ảnh đầu trang chưa?
• [ ] 2. Kích thước ảnh: 100% hình ảnh đã được khai báo width và height trong code chưa?
• [ ] 3. Web Fonts: Đã sử dụng font-display: swap và preload các tệp font quan trọng chưa?
• [ ] 4. Placeholder: Các vùng dành cho quảng cáo hoặc iframe đã được cố định chiều cao chưa?
• [ ] 5. Critical CSS: Đã tách CSS quan trọng để tải trước, giúp trang hiển thị khung xương nhanh nhất chưa?

Core Web Vitals nằm trong buổi Technical SEO Foundation của khóa học SEO cơ bản, cạnh robots.txt, sitemap, canonical và redirect, rồi được kiểm lại ở Technical Workshop trên website học viên. Học xong, bạn đọc được chỉ số trong Google Search Console và biết trang nào cần sửa trước.

6. Kết luận & Kinh nghiệm thực chiến

Hai kinh nghiệm cuối bổ sung cho nhau. Dùng Lighthouse để kiểm giả lập và Search Console để xem trải nghiệm thật của người dùng, vì hai nguồn này hay lệch nhau. Và hạn chế nhúng script bên thứ ba, vì chatbot cùng mã theo dõi là nguyên nhân gây chậm hàng đầu.

1. Dùng công cụ Lab & Field Data: Sử dụng Lighthouse để kiểm tra giả lập (Lab) và Google Search Console để theo dõi trải nghiệm thực tế của người dùng (Field Data).
2. Tránh nhúng bên thứ ba bừa bãi: Các đoạn script từ bên thứ ba (Chatbot, Tracking pixel) là nguyên nhân hàng đầu gây lag. Hãy sử dụng kỹ thuật Delay JS để chỉ tải chúng sau khi người dùng bắt đầu tương tác.
3. Ưu tiên UX: CWV không chỉ là để chiều lòng Google, mà là để đảm bảo khách hàng không bỏ đi vì trang web của bạn quá giật lag.

Lời kết:Tối ưu Core Web Vitals là sự kết hợp tinh tế giữa lập trình và mỹ thuật dàn trang. Khi bạn làm chủ được LCP và CLS, bạn không chỉ giúp website leo Top mà còn mang lại một trải nghiệm mượt mà, chuyên nghiệp cho mọi độc giả.