Tối ưu hóa trải nghiệm người dùng với thành phần Image trong Next.js: Giải pháp hiệu quả cho hiện tượng Cumulative Layout Shift (CLS)
Bạn có bao giờ cảm thấy khó chịu khi đang đọc một trang web thì mọi thứ bỗng nhiên nhảy loạn xạ khi bức ảnh tải xong? Hiện tượng này được gọi là Cumulative Layout Shift (CLS) và nó có thể ảnh hưởng nghiêm trọng đến trải nghiệm người dùng cũng như thứ hạng SEO của trang web.
Cumulative Layout Shift (CLS) là gì?
CLS là một chỉ số quan trọng trong Core Web Vitals, được dùng để đo lường sự thay đổi bố cục không mong muốn xảy ra khi trang web được tải. Một chỉ số CLS tốt không chỉ đảm bảo trải nghiệm người dùng tốt hơn mà còn góp phần cải thiện thứ hạng SEO và tạo ra hình ảnh chuyên nghiệp cho trang web.
Vấn đề với thẻ <img> truyền thống
Khi sử dụng thẻ <img> chuẩn trong HTML, thường xảy ra trường hợp làm giảm chất lượng trải nghiệm người dùng. Nguyên nhân là do trình duyệt không thể xác định kích thước ảnh cho đến khi nó tải xong. Hậu quả là văn bản tải trước nhưng hình ảnh thì lại mất thêm thời gian để tải, dẫn đến hiện tượng “nhảy” nội dung khó chịu khi ảnh xuất hiện.
Giải pháp từ Next.js: Thành phần Image
Để khắc phục vấn đề này, Next.js cung cấp thành phần Image, cho phép lập trình viên chỉ định kích thước của ảnh ngay từ đầu. Điều này giúp trình duyệt giữ khoảng trống cho ảnh và ngăn chặn việc thay đổi bố cục trong khi ảnh đang tải.
javascript
import Image from 'next/image';
function ProductCard() {
return (
<Image
src="/product.jpg"
alt="Mô tả sản phẩm"
width={640}
height={480}
priority={false}
loading="lazy"
/>
);
}Tính năng nổi bật của thành phần Image giúp ngăn chặn layout shift
1. Kích thước bắt buộc
Cung cấp kích thước width và height là bắt buộc, giúp trình duyệt chuẩn bị không gian cho ảnh ngay cả trước khi nó tải, từ đó ngăn cản hiện tượng layout shift.
2. Kích thước linh hoạt
Thành phần Image trong Next.js cũng tự động điều chỉnh theo kích thước màn hình, giúp duy trì tỷ lệ khung hình gốc của ảnh, đồng thời ngăn ngừa layout shift trên các thiết bị khác nhau.
3. Placeholder tự động
Một tính năng đặc biệt của thành phần Image là khả năng sử dụng placeholder mờ, điều này giữ cho bố cục ổn định trong lúc ảnh tải và mang lại trải nghiệm mượt mà hơn cho người dùng.
Thực hành tốt nhất khi sử dụng thành phần Image trong Next.js
Để tận dụng tối đa thành phần Image, bạn nên làm theo những nguyên tắc sau:
1. Luôn chỉ định kích thước
Việc chỉ định kích thước cho ảnh giúp trình duyệt xác định chính xác không gian cần thiết, tránh việc thay đổi bố cục không mong muốn.
javascript
// Tốt
<Image src="/hero.jpg" width={1200} height={600} alt="Hình ảnh nổi bật" />
// Xấu (thiếu kích thước)
<Image src="/hero.jpg" alt="Hình ảnh nổi bật" />2. Sử dụng placeholder mờ cho ảnh quan trọng
Áp dụng placeholder mờ cho những hình ảnh quan trọng để tạo cảm giác tải mượt mà.
javascript
<Image src="/hero.jpg" width={1200} height={600} alt="Hình ảnh nổi bật" placeholder="blur" />3. Đặt mức độ ưu tiên cho hình ảnh quan trọng
Đối với những hình ảnh nổi bật, hãy đặt thuộc tính priority thành true để tăng tốc độ tải.
javascript
<Image src="/hero.jpg" width={1200} height={600} alt="Hình ảnh nổi bật" priority />Những lỗi thường gặp cần tránh
1. Đừng quên văn bản thay thế
Văn bản thay thế rất quan trọng cho khả năng truy cập, giúp các người dùng sử dụng màn hình có thể hiểu được nội dung hình ảnh.
javascript
// Xấu
<Image src="/product.jpg" width={400} height={300} />
// Tốt
<Image src="/product.jpg" width={400} height={300} alt="Cốc gốm đỏ với hoa văn" />2. Cẩn thận với URL hình ảnh bên ngoài
Nếu sử dụng hình ảnh từ nguồn bên ngoài, hãy chắc chắn rằng bạn đã cấu hình tên miền trong file next.config.js:
javascript
module.exports = {
images: {
domains: ['example.com'],
},
};Để kiểm tra sự cải thiện chỉ số 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 áp dụng thành phần Image trong Next.js cùng với các thực hành tốt nhất này sẽ giúp bạn có được một trang web ổn định hơn về bố cục và trải nghiệm người dùng tốt hơn. Cảm ơn bạn đã theo dõi bài viết này!
source: viblo
