Cách tối ưu Khối ảnh LCP (Largest Contentful Paint) lấy 100 điểm Google PageSpeed

Chỉ số LCP (Largest Contentful Paint - Thời gian hiển thị phần tử lớn nhất) đóng chiếm tới **25% tổng số điểm Google PageSpeed**. Trong 90% các trang web, phần tử LCP chính là tấm ảnh Banner nổi bật ở đầu trang (Hero Banner). Nếu tấm ảnh đầu trang này nạp chậm, website của bạn sẽ bị đánh tụt điểm PageSpeed thảm hại!

1. 3 Sai lầm khiến tấm ảnh LCP nạp chậm rì

1. Bật Lazy Loading cho tấm ảnh đầu trang: Trình duyệt trì hoãn không tải ảnh LCP cho đến khi cuộn chuột → Làm thời gian LCP tăng lên 3-4 giây!
2. Dùng dung lượng ảnh PNG/JPEG chưa nén: Tấm ảnh dung lượng 2MB chưa nén qua WebP/AVIF.
3. Không khai báo kích thước ảnh cố định: Khiến trình duyệt không biết trước diện tích để dành chỗ.

2. 3 Bước tối ưu tấm ảnh LCP đạt điểm 100 trong Next.js

Bước 1: Bật thuộc tính priority cho component <Image /> đầu trang

Thuộc tính priority bảo với Next.js: "Đây là ảnh LCP quan trọng nhất trang, hãy tự động gắn thẻ fetchpriority='high' và Preload ngay lập tức!"

import Image from 'next/image';
import heroBanner from '@/assets/banner.webp';

export default function HeroSection() {
  return (
    <Image
      src={heroBanner}
      alt="Uwmee Software Thiết kế Website"
      priority={true}
      quality={85}
      className="w-full h-auto"
    />
  );
}

Bước 2: Cấu hình nén tự động định dạng AVIF & WebP

Trong file next.config.js, bật định dạng AVIF giúp giảm thêm 20% dung lượng so với WebP (xem bài tối ưu nén ảnh WebP/AVIF).

Bước 3: Khai báo đầy đủ thuộc tính sizes cho giao diện di động

Giúp Next.js phân phối tấm ảnh kích thước nhỏ hơn cho điện thoại di động thay vì bắt máy di động phải nạp tấm ảnh 4K dành cho máy tính Desktop.

Kết luận

Tối ưu chính xác tấm ảnh LCP đầu trang là chìa khóa vàng giúp website của bạn chinh phục mốc điểm 100/100 Google PageSpeed. Uwmee Software cam kết điểm tối ưu tốc độ Google PageSpeed xanh mượt cho mọi dự án bàn giao. Đọc thêm bài viết Responsive Web Design là gì.