Tại sao thiếu thuộc tính width/height hình ảnh khiến điểm CLS bị thảm hại?

Nguyên nhân số 1 chiếm tới 80% trường hợp bị dính điểm phạt CLS (Cumulative Layout Shift) thảm hại trên Google PageSpeed chính là: Thẻ hình ảnh <img> thiếu thuộc tính width và height! Đây là lỗi tưởng chừng rất nhỏ nhưng tàn phá trải nghiệm người dùng nghiêm trọng.

1. Cơ chế trình duyệt xử lý hình ảnh khi không có width/height

1. Trình duyệt tải xong mã HTML, thấy thẻ <img src="banner.png" /> không có kích thước.
2. Trình duyệt tạm thời coi tấm ảnh có kích thước 0x0 pixel và dàn xếp các đoạn văn bản bên dưới ngay sát phía trên.
3. Khi file ảnh banner.png tải xong từ server về, trình duyệt mới biết ảnh to 1200x600px. Trình duyệt lập tức **ĐẨY toàn bộ văn bản xuống dưới 600px** ➔ Tạo ra cú trượt vỡ bố cục thảm hại!

2. 2 Giải pháp triệt tiêu lỗi thiếu width/height

Giải pháp 1: Khai báo thuộc tính width và height trên thẻ img HTML

Khai báo tỉ lệ kích thước gốc của tấm ảnh:

<img
  src="/banner.webp"
  alt="Banner"
  width="1200"
  height="600"
  className="w-full h-auto"
/>

Trình duyệt tự động tính toán thuộc tính aspect-ratio: 1200 / 600 và **dành sẵn khoảng trống 600px ngay từ khi mới tải trang**, ảnh tải xong chỉ việc chèn vào khung có sẵn mà KHÔNG đẩy văn bản xuống!

Giải pháp 2: Sử dụng Component <Image /> trong Next.js

Next.js cung cấp component <Image /> bắt buộc khai báo width và height (hoặc fill), giúp tự động triệt tiêu 100% lỗi CLS do hình ảnh (xem bài tối ưu ảnh Next/Image).

Kết luận

Khai báo kích thước hình ảnh là tiêu chuẩn bắt buộc trong phát triển Web hiện đại. Uwmee Software tự động hóa khai báo kích thước và aspect-ratio cho mọi hình ảnh trên website Next.js. Đọc thêm bài viết tối ưu khối ảnh LCP.