Không khai báo width/height cho ảnh gây layout shift

Khi mới bắt đầu học làm website, hầu hết sinh viên và lập trình viên trẻ thường chỉ chú trọng vào giao diện hiển thị sao cho đẹp mắt mà bỏ qua các chỉ số tối ưu trải nghiệm người dùng. Một trong những lỗi phổ biến nhất trên các trang web hiện nay là quên khai báo thuộc tính width và height cho thẻ ảnh hoặc iframe. Hành động tưởng chừng như rất nhỏ này lại là nguyên nhân chính dẫn đến hiện tượng nhảy khung hình hay còn gọi là layout shift. Khi người dùng đang đọc bài viết, nội dung đột ngột bị đẩy xuống dưới do hình ảnh tải xong, gây ra sự khó chịu cực kỳ lớn và làm tăng tỷ lệ thoát trang nhanh chóng.

Trình duyệt web cần biết trước không gian dành cho các thành phần đa phương tiện để dựng khung bố cục HTML ban đầu. Nếu bạn không cung cấp kích thước cụ thể, trình duyệt sẽ mặc định chiều cao của ảnh là 0 pixel cho đến khi toàn bộ tệp hình ảnh được tải thành công từ máy chủ. Ngay khi tệp ảnh tải xong, trình duyệt buộc phải tính toán lại toàn bộ khung hình và đẩy các phần tử văn bản xung quanh xuống dưới để nhường chỗ. Quá trình tái dựng này được gọi là reflow, không chỉ tốn tài nguyên xử lý của thiết bị mà còn trực tiếp phá hỏng điểm số Core Web Vitals của website trên Google Search Console.

1. Cumulative Layout Shift (CLS) là gì và tác hại khi quên width/height?

Chỉ số Cumulative Layout Shift, viết tắt là CLS, là một trong ba chỉ số cốt lõi của Google Core Web Vitals dùng để đo lường tính ổn định thị giác của trang web. Giá trị CLS lý tưởng mà Google khuyến nghị cho mọi website là dưới 0.1 điểm. Khi ảnh không có thuộc tính kích thước, mỗi hình ảnh hiển thị trễ có thể đóng góp từ 0.05 đến 0.2 điểm CLS tùy thuộc vào diện tích vùng dịch chuyển trên màn hình. Nếu bài viết của bạn chứa 5 đến 10 hình ảnh minh họa không được khai báo kích thước, tổng điểm CLS có thể dễ dàng vượt mốc 0.5 điểm, khiến trang web bị đánh giá kém và sụt giảm thứ hạng SEO đáng kể.

2. Cơ chế render trình duyệt và giải pháp với aspect-ratio

Trong quá khứ, các lập trình viên thường lo ngại việc đặt cố định width và height trong HTML sẽ làm hỏng tính năng responsive trên điện thoại di động. Tuy nhiên, kể từ năm 2019, tất cả các trình duyệt hiện đại như Chrome, Firefox, Safari và Edge đã tự động tính toán thuộc tính aspect-ratio dựa trên hai thuộc tính width và height bạn khai báo trong HTML. Nhờ đó, trình duyệt có thể dự đoán chính xác tỷ lệ khung hình và giữ sẵn khoảng trống trước khi ảnh tải về, ngay cả khi bạn kết hợp với các thuộc tính CSS như max-width 100% và height auto để làm giao diện co giãn theo màn hình.

• ✓Thẻ img đại diện cho bài viết, hình ảnh đại diện (thumbnail) sản phẩm.
• ✓Hình ảnh quảng cáo, banner chạy dạng slider động ở đầu trang.
• ✓Khung nhúng video từ YouTube, Vimeo hoặc bài viết từ Facebook, TikTok.
• ✓Bản đồ tương tác Google Maps nhúng vào trang liên hệ của doanh nghiệp.

3. Hướng dẫn sửa lỗi code HTML/CSS thực chiến cho ảnh

Việc xử lý lỗi layout shift đối với tệp ảnh rất đơn giản nhưng đòi hỏi sự tỉ mỉ trong quá trình thiết lập mã nguồn. Bạn chỉ cần thêm thuộc tính width="800" height="450" trực tiếp vào thẻ img trong file HTML, với số liệu tương ứng là kích thước gốc thực tế của bức ảnh. Sau đó, trong tệp CSS dùng chung, bạn hãy khai báo thuộc tính img { max-width: 100%; height: auto; display: block; }. Sự kết hợp này đảm bảo rằng trình duyệt vừa dự trữ được khoảng trống ban đầu để giữ ổn định CLS, vừa giúp hình ảnh co giãn linh hoạt và mượt mà trên mọi màn hình điện thoại di động mà không hề bị méo hay vỡ khung.

4. Xử lý iframe nhúng YouTube và Google Maps triệt để

Tương tự như hình ảnh, các đoạn mã nhúng iframe từ bên thứ ba như video YouTube, Google Maps hay khung bình luận Facebook cũng là thủ phạm nguy hiểm gây ra chỉ số CLS cực kỳ cao. Để xử lý iframe responsive mà không bị layout shift, giải pháp tối ưu nhất hiện nay là sử dụng thuộc tính CSS aspect-ratio. Bằng cách khai báo thuộc tính aspect-ratio: 16 / 9 cùng với width: 100% cho iframe trong CSS, bạn đã chủ động yêu cầu trình duyệt giữ đúng tỷ lệ khung hình chuẩn 16:9 cho video. Việc áp dụng đúng kỹ thuật này giúp loại bỏ hoàn toàn hiện tượng xê dịch giao diện, nâng cao trải nghiệm người dùng và giúp điểm Google Lighthouse đạt mức tối đa.