Bí quyết tối ưu hiệu năng Website đạt 100/100 Lighthouse với Next.js

Mở đầu bài viết, chúng ta cần hiểu rõ rằng trong kỷ nguyên số, tốc độ tải trang không chỉ quyết định trải nghiệm người dùng mà còn ảnh hưởng trực tiếp đến doanh thu và thứ hạng SEO. Theo một nghiên cứu của Google, nếu thời gian tải trang tăng từ 1 giây lên 3 giây, xác suất người dùng rời bỏ trang (bounce rate) tăng tới 32%. ## 1. Core Web Vitals là gì? Core Web Vitals là bộ chỉ số cốt lõi do Google đề xuất nhằm đánh giá chất lượng trải nghiệm thực tế của người dùng trên một trang web. Bộ chỉ số này bao gồm 3 yếu tố chính: - **LCP (Largest Contentful Paint)**: Đo lường tốc độ tải nội dung chính của trang. Tiêu chuẩn tốt là dưới 2.5 giây. - **INP (Interaction to Next Paint)**: Đo lường mức độ phản hồi của trang web sau khi người dùng tương tác (như click nút, gõ phím). Thay thế cho FID từ tháng 3/2024. - **CLS (Cumulative Layout Shift)**: Đo lường tính ổn định của giao diện, đảm bảo các phần tử không bị nhảy lung tung khi đang tải. Tiêu chuẩn là dưới 0.1. ## 2. Bí quyết tối ưu với Next.js Next.js cung cấp một loạt các tính năng out-of-the-box để giúp bạn đạt điểm tuyệt đối 100/100 trên Lighthouse một cách dễ dàng. ### 2.1 Tối ưu hình ảnh toàn diện Không bao giờ sử dụng thẻ `` thông thường. Hãy luôn sử dụng Next.js Image Component (`next/image`). Nó sẽ tự động: - Cung cấp ảnh định dạng WebP hoặc AVIF (nhẹ hơn JPEG/PNG rất nhiều). - Lazy loading ảnh ngoài màn hình. - Tránh hiện tượng CLS nhờ yêu cầu chỉ định width/height. ### 2.2 Kiến trúc App Router & Server Components Từ Next.js 13 trở đi, Server Components được mặc định kích hoạt. Hãy cố gắng fetch dữ liệu và render HTML ngay từ Server. Việc này giúp giảm lượng lớn JavaScript phải tải về client, nhờ đó chỉ số **TBT (Total Blocking Time)** được tối ưu triệt để. ```tsx // Server Component ví dụ export default async function ProductList() { const products = await getProducts(); return ( ) } ``` ### 2.3 Dynamic Imports & Lazy Loading Đối với các components nặng (như thư viện biểu đồ, video player, hay modal box), đừng import nó ở trên cùng. Hãy sử dụng `next/dynamic`: ```tsx import dynamic from 'next/dynamic' const HeavyChart = dynamic(() => import('../components/HeavyChart'), { ssr: false, loading: () =>

Loading chart...

}) ``` > 💡 **Mẹo:** Tốc độ không chỉ là một tính năng, tốc độ là một lợi thế cạnh tranh cốt lõi. Khách hàng sẽ không đủ kiên nhẫn để chờ đợi trang web của bạn load quá 3 giây. ## Tổng kết Việc đạt 100/100 Lighthouse không phải là điểm đến cuối cùng, mà đó là minh chứng cho một kiến trúc web bền vững và một trải nghiệm người dùng hoàn hảo. Bằng cách tuân thủ các quy tắc của Next.js, bạn hoàn toàn có thể chinh phục mọi chỉ số khó nhằn nhất.