Quy tắc 3 giây trong hiệu suất web

Bạn chỉ có ba giây.

Sau đó, người dùng sẽ rời đi.

Nghiên cứu của Google cho thấy 53% người dùng di động sẽ rời bỏ một trang web nếu nó mất hơn 3 giây để tải.

Các trang web chậm làm bạn mất tiền. Cải thiện thời gian tải trên di động thêm 0,1 giây sẽ giúp tăng tỷ lệ chuyển đổi bán lẻ lên 8,4%.

Hiệu suất không chỉ là một chỉ số kỹ thuật. Nó là một chỉ số kinh doanh.

Để chiến thắng, bạn phải hiểu rõ Core Web Vitals:

• LCP (Largest Contentful Paint): Tốc độ người dùng nhìn thấy nội dung chính. Mục tiêu là dưới 2,5 giây. • INP (Interaction to Next Paint): Tốc độ trang phản hồi với các lần nhấp chuột. Mục tiêu là dưới 200ms. • CLS (Cumulative Layout Shift): Độ ổn định của bố cục trang. Mục tiêu là dưới 0,1.

Đừng đoán mò nữa, hãy bắt đầu tối ưu hóa. Đây là cách để chiến thắng thời gian:

Tối ưu hóa JavaScript

• Gửi ít mã hơn. Sử dụng dynamic imports để chỉ tải mã khi cần thiết. • Sử dụng tree-shaking. Chuyển từ CommonJS sang ES modules để loại bỏ các phần mã thừa. • Chuyển các tác vụ nặng sang Web Workers. Giữ cho luồng chính (main thread) luôn sẵn sàng cho các thao tác của người dùng. • Sử dụng defer hoặc async. Đừng để các script chặn quá trình phân tích cú pháp HTML của bạn.

CSS và Rendering

• Inline critical CSS. Chỉ tải những gì hiển thị ở phần đầu trang (above the fold) trước. • Tránh layout thrashing. Gom nhóm các thao tác đọc và ghi để ngăn chặn việc tính toán lại liên tục. • Sử dụng transform và opacity để tạo hiệu ứng chuyển động. Những thuộc tính này sử dụng GPU và tránh gây xê dịch bố cục. • Sử dụng content-visibility: auto. Bỏ qua việc render cho các nội dung nằm ngoài màn hình.

Chiến lược hình ảnh

• Sử dụng các định dạng hiện đại. WebP và AVIF có dung lượng nhỏ hơn nhiều so với JPEG. • Thiết lập các thuộc tính width và height. Điều này giúp ngăn chặn xê dịch bố cục (CLS). • Lazy-load các hình ảnh nằm dưới phần đầu trang. Đừng lazy-load hình ảnh LCP chính (hero image). • Sử dụng srcset. Cung cấp các hình ảnh nhỏ hơn cho người dùng di động.

Mạng và Bộ nhớ đệm (Caching)

• Sử dụng CDN. Đưa nội dung đến gần người dùng hơn để giảm độ trễ. • Bật nén. Sử dụng Brotli hoặc Zstandard để thu nhỏ kích thước tệp. • Sử dụng bộ nhớ đệm một cách triệt để. Sử dụng các header cache bất biến (immutable) cho các tài nguyên đã được hash. • Duy trì hoạt động của bfcache. Tránh sử dụng sự kiện unload để đảm bảo việc điều hướng tiến/lùi diễn ra tức thì.

Mục tiêu rất đơn giản: tránh làm việc.

Mã nguồn nhanh nhất là mã nguồn mà người dùng không bao giờ phải tải về. Yêu cầu nhanh nhất là yêu cầu mà trình duyệt không bao giờ phải thực hiện.

Nguồn: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1