Ảnh ảnh hưởng thế nào đến Core Web Vitals - và cách khắc phục
Ảnh là nguyên nhân của phần lớn lỗi LCP (Largest Contentful Paint). Nếu Core Web Vitals của bạn đang đỏ, nhiều khả năng thủ phạm là ảnh. Đây chính xác là cách khắc phục.
Thử ngay - miễn phí, không cần đăng ký.
Nén ảnh thông minh →Ảnh và LCP (Largest Contentful Paint)
LCP đo thời điểm phần tử lớn nhất hiển thị tải xong. Với hầu hết các trang, đó là một ảnh. Google muốn LCP dưới 2,5 giây.
Cách khắc phục LCP:
- Dùng WebP/AVIF: Tệp nhỏ hơn 25-50% = tải về nhanh hơn. Chuyển đổi ngay.
- Đổi kích thước ảnh: Phục vụ đúng kích thước cho khung chứa. Đổi kích thước tại đây.
- Tải trước ảnh hero:
<link rel="preload" as="image" href="hero.webp"> - Dùng CDN: Phục vụ ảnh từ máy chủ biên gần người dùng.
- Đặt fetchpriority:
<img fetchpriority="high">cho ảnh ở màn hình đầu tiên.
Ảnh và CLS (Cumulative Layout Shift)
CLS đo sự xô lệch bố cục bất ngờ. Ảnh không có kích thước khiến trang bị giật khi ảnh tải xong.
Cách khắc phục CLS:
- Luôn đặt width và height:
<img width="800" height="600"> - Dùng CSS aspect-ratio:
aspect-ratio: 16/9;như một giải pháp hiện đại - Tránh tải chậm ở màn hình đầu tiên: Đừng thêm
loading="lazy"cho ảnh hero
Danh sách sửa nhanh
- Nén thông minh tất cả ảnh (chất lượng tối ưu tự động)
- Đổi kích thước theo kích thước hiển thị thực tế
- Thêm thuộc tính width/height cho mọi thẻ
<img> - Tải trước ảnh LCP
- Tải chậm mọi thứ nằm dưới màn hình đầu tiên
- Kiểm tra lại bằng PageSpeed Insights
Câu hỏi thường gặp
Điểm LCP thế nào là tốt?
Dưới 2,5 giây là "Tốt" (xanh lá). 2,5-4 giây là "Cần cải thiện" (vàng). Trên 4 giây là "Kém" (đỏ). Chỉ riêng việc tối ưu ảnh thường đã có thể đưa bạn từ đỏ sang xanh.
Tôi có nên tải chậm tất cả ảnh không?
Không! Đừng tải chậm ảnh ở màn hình đầu tiên (nhất là ảnh hero/LCP). Chỉ tải chậm những ảnh ban đầu nằm ngoài màn hình. Tải chậm quá mức thực ra còn làm LCP tệ hơn.
Sẵn sàng chưa? 100% miễn phí, chạy trong trình duyệt của bạn.
Nén ảnh thông minh →