Vì sao tốc độ quan trọng
Một nửa người đóng website tải lâu hơn 3 giây. Khách không phải ai cũng có điện thoại mới trên Wi-Fi nhanh – có người dùng điện thoại cũ trên tàu. Trưởng dự án nghĩ cả họ.
Tin tốt: tăng tốc lớn nhất từ một thứ – ảnh. Ảnh từ điện thoại dễ 5 MB; website chỉ cần một phần mười.
Xem thử: đo bằng Lighthouse
Lighthouse là công cụ đo tích hợp trong Chrome:
- Mở website (bản live, không localhost).
- F12 → tab Lighthouse → Analyze page load.
- Bạn có điểm 0–100 cho hiệu năng, khả năng tiếp cận, SEO – và quan trọng nhất, danh sách mẹo cụ thể cần cải thiện.
Mẹo thường gặp và cách xử lý:
| Mẹo Lighthouse | Làm gì |
|---|---|
| Properly size images | thu nhỏ ảnh (xem bên dưới) |
| Serve images in next-gen formats | lưu dạng WebP |
| Image elements do not have width/height | thêm thuộc tính width và height |
| Links do not have descriptive text | thay vì “click here”, nói link đi đâu |
Thu nhỏ ảnh
- Kích thước: website chỉ cần khoảng 1200px rộng (ảnh hero) hoặc 600px (ảnh thường). Resize trong editor bất kỳ, kể cả online (ví dụ squoosh.app).
- Định dạng: WebP nhỏ hơn JPG khoảng một phần ba cùng chất lượng.
- Lazy loading: ảnh dưới màn hình chỉ tải khi khách cuộn xuống:
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />Đến lượt bạn 💪
- Đo website bằng Lighthouse và ghi điểm hiệu năng – đó là vạch xuất phát.
- Tìm 3 ảnh lớn nhất (F12 → tab Network → sắp theo Size).
- Thu nhỏ (kích thước + WebP) và thêm
loading="lazy"cho mọi ảnh trừ ảnh đầu trên cùng. - Đo lại và so sánh điểm. Ghi trong
LAUNCH.md: trước → sau. - Bonus: test website trên điện thoại tắt Wi-Fi. Thế nào?
💡
Đừng kỳ vọng 100 điểm. Cả website lớn cũng 70–90. Quan trọng là tiến bộ: từ 60 lên 85 là thắng mà khách thực sự nhận ra.
✅
Kiểm tra: Bạn biết điểm Lighthouse trước và sau. Ảnh đã resize, WebP, và lazy loading. Website tải nhanh hơn rõ trên di động.
Những điều cần nhớ
- Tốc độ = khách ở lại. 3 giây là giới hạn.
- Lighthouse nói chính xác cần cải thiện gì.
- Đòn bẩy lớn nhất: ảnh nhỏ hơn (kích thước, WebP, lazy loading).
© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung