Tối ưu hóa hiệu suất Website

Tốc độ là thứ người dùng cảm nhận đầu tiên khi vào một website. Trang tải chậm khiến khách rời đi trước khi kịp xem nội dung, và tốc độ cũng là một trong các yếu tố Google xét đến khi xếp hạng.

Bài viết này đi qua các kỹ thuật tối ưu phổ biến, theo thứ tự từ dễ làm và hiệu quả cao trước.

Đo trước khi tối ưu

Đừng tối ưu theo cảm tính. Hãy đo bằng PageSpeed Insights hoặc Lighthouse trong Chrome DevTools để biết trang đang chậm ở đâu. Ba chỉ số cần chú ý là nhóm Core Web Vitals:

• LCP (Largest Contentful Paint): thời gian hiện xong phần nội dung lớn nhất, nên dưới 2,5 giây.
• INP (Interaction to Next Paint): độ trễ khi người dùng thao tác, nên dưới 200 mili giây.
• CLS (Cumulative Layout Shift): mức độ bố cục bị xô lệch khi tải, nên dưới 0,1.

Tối ưu hình ảnh

Hình ảnh thường chiếm phần lớn dung lượng trang, nên đây là nơi tối ưu cho hiệu quả rõ nhất.

• Dùng định dạng hiện đại như WebP hoặc AVIF thay cho JPEG, PNG.
• Xuất ảnh đúng kích thước hiển thị, không dùng ảnh 4000px cho ô 400px.
• Thêm loading="lazy" cho ảnh nằm dưới màn hình đầu tiên.
• Khai báo width và height để trình duyệt giữ chỗ trước, tránh xô lệch bố cục.

Tận dụng cache

1. Cache trình duyệt: đặt header Cache-Control để file CSS, JS, ảnh không phải tải lại ở lần truy cập sau.
2. CDN: phân phối file tĩnh từ máy chủ gần người dùng nhất.
3. Cache phía server: lưu kết quả các trang hoặc truy vấn tốn thời gian để không phải tính lại mỗi lần.

Giảm dung lượng CSS và JavaScript

• Minify để bỏ khoảng trắng, chú thích thừa.
• Bật nén Gzip hoặc Brotli trên máy chủ.
• Thêm defer cho script không cần chạy ngay để không chặn việc hiển thị trang.
• Loại bỏ thư viện, đoạn mã không còn dùng.
• Với ứng dụng lớn, chia nhỏ mã (code splitting) để mỗi trang chỉ tải phần nó cần.

Tối ưu cơ sở dữ liệu

Với website động, thời gian máy chủ phản hồi phụ thuộc nhiều vào truy vấn dữ liệu.

• Đánh index cho các cột thường dùng để tìm kiếm, sắp xếp.
• Tránh lỗi N+1: lấy dữ liệu liên quan trong một truy vấn thay vì lặp từng dòng.
• Chỉ lấy những cột cần dùng và phân trang các danh sách dài.

Danh sách kiểm tra nhanh

1. Đo bằng PageSpeed Insights, ghi lại điểm ban đầu.
2. Nén và đổi định dạng hình ảnh.
3. Bật nén và cache trên máy chủ.
4. Rà soát script, font, thư viện bên thứ ba.
5. Đo lại và so sánh.

Tối ưu hiệu suất không phải việc làm một lần. Mỗi khi thêm tính năng hay nội dung mới, hãy đo lại để chắc rằng website vẫn nhanh.