Tối ưu Core Web Vitals (LCP, INP, CLS): Bí quyết đưa điểm Google PageSpeed lên 95+ trên mobile

Core Web Vitals: Yếu tố xếp hạng SEO sống còn của Google#

Google đã chính thức coi Core Web Vitals là một trong những tín hiệu xếp hạng tìm kiếm quan trọng nhất. Nếu website của bạn bị đánh giá "Cần cải thiện" hoặc "Kém", lượng truy cập tự nhiên (Organic Search Traffic) sẽ bị sụt giảm nghiêm trọng.

Ba chỉ số vàng bạn bắt buộc phải tối ưu hóa gồm:

1. LCP (Largest Contentful Paint): Thời gian hiển thị phần tử lớn nhất màn hình ($le$ 2.5s).
2. INP (Interaction to Next Paint): Độ trễ phản hồi khi người dùng bấm/tương tác ($le$ 200ms - thay thế FID).
3. CLS (Cumulative Layout Shift): Độ xê dịch bố cục bất ngờ ($le$ 0.1).

3 Tuyệt chiêu thực chiến cải thiện từng chỉ số#

1. Tối ưu LCP: Ưu tiên tài nguyên then chốt (Fetch Priority)#

Nếu phần tử tử LCP là ảnh banner, hãy thêm thuộc tính fetchpriority="high" và preload nó ngay trong thẻ <head>:

<!-- Preload ảnh hero giúp trình duyệt tải ngay lập tức -->
<link rel="preload" as="image" href="/hero-banner.webp" fetchpriority="high">

<img src="/hero-banner.webp" alt="TopDev Community" fetchpriority="high" loading="eager" width="1200" height="630">

2. Tối ưu INP: Chia nhỏ tác vụ dài (Break Long Tasks)#

Đừng bao giờ để một hàm JavaScript chạy chiếm dụng main thread quá 50ms. Sử dụng scheduler.yield() hoặc setTimeout để nhường quyền vẽ cho trình duyệt:

async function processHugeData(items) {
  for (let i = 0; i < items.length; i++) {
    doComplexCalculation(items[i]);
    // Nhường quyền cho main thread sau mỗi 100 vòng lặp
    if (i % 100 === 0 && 'scheduler' in window) {
      await scheduler.yield();
    }
  }
}

3. Tối ưu CLS: Luôn cố định kích thước ảnh và slot quảng cáo#

Luôn khai báo width, height hoặc CSS aspect-ratio cho ảnh và các khung chứa quảng cáo Google AdSense:

/* Đặt chỗ sẵn trước khi banner quảng cáo kịp tải về */
.ad-slot-container {
  min-height: 250px;
  background-color: rgba(0, 0, 0, 0.03);
}

Góc thảo luận#

Trang web của bạn hiện đạt bao nhiêu điểm Google PageSpeed trên thiết bị di động? Chỉ số nào đang là thử thách lớn nhất đối với team bạn (LCP hay INP)?

Xem thêm nội dung liên quan:

• Lộ trình Web Performance Optimization
• Review công cụ lập trình web