Thành phần Image trong Next.js: Giải pháp cho hiện tượng Layout Shift

Bạn đã bao giờ gặp tình huống đang đọc dở thì nội dung trang web bất ngờ nhảy loạn xạ vì ảnh tải xong chưa? Vấn đề thường gặp này, gọi là Cumulative Layout Shift (CLS), ảnh hưởng tiêu cực đến trải nghiệm người dùng và SEO.

Chuyển đổi bố cục tích lũy (CLS) là gì?

CLS là một chỉ số Core Web Vital, đo lường mức độ thay đổi bố cục bất ngờ xảy ra khi tải trang. Một điểm CLS tốt rất quan trọng vì nó đồng nghĩa với trải nghiệm người dùng tốt hơn, thứ hạng SEO cao hơn và một trang web trông chuyên nghiệp hơn.

Vấn đề với thẻ <img> chuẩn

Thông thường, việc sử dụng thẻ <img> truyền thống của HTML có thể dẫn đến hiện tượng layout shift. Nguyên nhân là do trình duyệt không biết kích thước ảnh cho đến khi tải xong.

Văn bản trang tải trước, sau đó ảnh bắt đầu tải xuống. Cuối cùng, khi ảnh được tải xong, nó đẩy nội dung xuống dưới, gây ra hiện tượng “nhảy” khó chịu.

Vị cứu tinh: Thành phần Image trong Next.js

Để giải quyết vấn đề này, Next.js cung cấp thành phần Image, cho phép chỉ định kích thước ảnh trước, giúp trình duyệt dành sẵn không gian để tải ảnh mà không ảnh hưởng đến bố cục.

// Good Practice
import Image from 'next/image';

function ProductCard() {
  return (
    <Image
      src="/product.jpg"
      alt="Product description"
      width={640}
      height={480}
      priority={false}
      loading="lazy"
    />
  );
}

Các tính năng chính ngăn chặn sự thay đổi bố cục

1. Kích thước bắt buộc

Việc đặt thuộc tính width và height là bắt buộc, giúp dành sẵn không gian cho ảnh ngay cả trước khi tải, ngăn chặn layout shift.

2. Responsive Sizing

Thành phần này cũng tự động điều chỉnh theo kích thước màn hình, duy trì tỷ lệ khung hình của ảnh, tránh layout shift trên các thiết bị khác nhau.

3. Placeholder tự động

Một tính năng nổi bật khác của thành phần Image là khả năng sử dụng placeholder mờ, chiếm giữ đúng không gian cần thiết. Điều này giúp bố cục ổn định trong khi ảnh tải, mang lại trải nghiệm mượt mà hơn.

Best practice khi sử dụng thành phần Image trong Next.js

Thực hiện theo các thực hành này sẽ giúp bạn tận dụng tối đa thành phần Image trong Next.js.

1. Luôn đặt kích thước:

Việc xác định kích thước giúp trình duyệt biết chính xác không gian mà hình ảnh sẽ chiếm, tránh thay đổi bố cục.

   // Good
   <Image src="/hero.jpg" width={1200} height={600} alt="Hero image" />

   // Bad (missing dimensions)
   <Image src="/hero.jpg" alt="Hero image" />

2. Sử dụng placeholder làm mờ cho hình ảnh quan trọng

Thêm placeholder làm mờ cho hình ảnh phía trên sẽ mang lại hiệu ứng tải mượt mà

   <Image src="/hero.jpg" width={1200} height={600} alt="Hero image" placeholder="blur" />

3. Đặt mức độ ưu tiên cho hình ảnh quan trọng

Đối với hình ảnh nổi bật hoặc hình ảnh quan trọng khác, hãy đặt thuộc tính priority thành true để tải nhanh hơn.

   <Image src="/hero.jpg" width={1200} height={600} alt="Hero image" priority />

Tránh một số lỗi thường gặp

1. Đừng bỏ qua văn bản thay thế

Văn bản thay thế rất cần thiết cho khả năng truy cập, giúp trình đọc màn hình có thể truy cập hình ảnh của bạn.

 // Bad
   <Image src="/product.jpg" width={400} height={300} />

   // Good
   <Image src="/product.jpg" width={400} height={300} alt="Red ceramic coffee mug with floral pattern" />

2. Xử lý URL hình ảnh bên ngoài một cách cẩn thận

Nếu bạn đang sử dụng hình ảnh từ nguồn bên ngoài, hãy định cấu hình tên miền trong next.config.js:

   module.exports = {
     images: {
       domains: ['example.com'],
     },
   };

Để kiểm tra sự cải thiện CLS, bạn có thể sử dụng các công cụ như Chrome DevTools (tab Performance), Lighthouse Audits và Core Web Vitals trong Google Search Console.

Việc sử dụng thành phần Image của Next.js cùng với việc tuân thủ các phương pháp tốt nhất này sẽ đảm bảo quá trình tải mượt mà, bố cục ổn định và trải nghiệm trang web chuyên nghiệp hơn.

Cảm ơn các bạn đã theo dõi!