🚀 Tối Ưu Hóa Tốc Độ Tải Trang Bằng Cách Nén Hình Ảnh
Tôi từng rất chú trọng vào việc giảm 10KB từ gói JavaScript của mình. Nhưng sau đó, tôi nhìn vào hình ảnh của mình. Thật đau lòng.
Hóa ra, hình ảnh không nén là kẻ giết chết hiệu suất một cách lặng lẽ. Chúng trông ổn, nhưng lại nặng hơn cả phần còn lại của trang web cộng lại.
Vì vậy, tôi đã thực hiện một bài kiểm tra nhanh để xem sự khác biệt mà việc nén thực sự mang lại. Spoiler: không hề nhỏ.
🧪 Cài Đặt Thí Nghiệm
- Một trang landing với 6 hình ảnh chính và 12 hình ảnh thu nhỏ
- Mỗi hình ảnh: ~500KB (hỗn hợp JPEG và PNG)
- Tổng trọng lượng trang: ~6.8 MB
Thử nghiệm với Lighthouse trên kết nối 4G bị giới hạn.
🐌 Trước Khi Nén
- First Contentful Paint (FCP): 4.3 giây
- Largest Contentful Paint (LCP): 6.2 giây
- Tổng kích thước trang: ~6.8 MB
Kết quả: “Thật tuyệt, tôi sẽ đi pha một tách cà phê trong khi trang này tải.”
⚡ Sau Khi Nén
Đã chạy tất cả hình ảnh qua một công cụ nén (👋 quảng cáo không lương: tinyimage.online).
- Hình ảnh chính giảm xuống còn ~120KB mỗi cái
- Hình ảnh thu nhỏ giảm xuống còn ~30KB
- Tổng trọng lượng trang: ~1.1 MB
Số liệu mới:
- FCP: 1.2 giây
- LCP: 1.8 giây
- Tổng kích thước trang: ~1.1 MB
Kết quả: “Ôi, đã có rồi.”
📉 Sự Khác Biệt
- Kích thước trang giảm 84%
- Thời gian tải giảm 70%
- Điểm số Lighthouse: 56 → 93
Đó không phải là một tối ưu hóa nhỏ. Đó là sự khác biệt rõ rệt.
🔑 Bài Học Rút Ra
- Google quan tâm → Core Web Vitals ảnh hưởng trực tiếp đến SEO.
- Người dùng quan tâm → hầu hết mọi người rời bỏ nếu họ phải chờ hơn 3 giây.
- Bạn nên quan tâm → trang tải nhanh hơn = người dùng hài lòng hơn + doanh thu quảng cáo tốt hơn.
Và thật sự? Nhìn đồng hồ Lighthouse chuyển từ đỏ sang xanh cảm giác tuyệt hơn bất kỳ bản nâng cấp framework nào.
🛠️ Đến Lượt Bạn
Lần tới khi bạn đang phải đổ mồ hôi với cấu hình webpack hoặc tranh luận về thư viện quản lý trạng thái nào nên dùng… hãy dừng lại. Nén hình ảnh của bạn trước.
Đó là chiến thắng hiệu suất nhanh nhất mà bạn có thể đạt được.
Nếu bạn cần một khởi đầu nhanh chóng: tinyimage.online. Kéo, thả, xong ✅.
Đó là tất cả. Một thay đổi nhỏ. Một lợi ích lớn.
