Tại sao trang web của bạn chậm - Danh sách kiểm tra tối ưu hóa hình ảnh cho năm 2026

Theo dữ liệu của HTTP Archive, hình ảnh chiếm khoảng 42% tổng dung lượng trung bình của trang web. Trang web trung bình có dung lượng khoảng 2,3 MB và khoảng 1 MB trong số đó là hình ảnh. Nhưng đó là mức trung bình - các trang web được tối ưu hóa kém thường cung cấp 5-15 MB hình ảnh trên mỗi trang. Mỗi megabyte bổ sung sẽ tăng thêm khoảng 1-2 giây thời gian tải trên kết nối di động thông thường. Một trang 10 MB mất 8-12 giây để tải đầy đủ trên 4G và hầu hết khách truy cập sẽ thoát sau 3 giây.

Vấn đề hầu như luôn là một trong hai nguyên nhân: hình ảnh có kích thước quá lớn (phân phối hình ảnh 4000px trong vùng chứa 800px) hoặc hình ảnh không được nén đủ (tiết kiệm ở chất lượng 100% trong khi 80% giống nhau về mặt hình ảnh). Thường thì đó là cả hai.

Đây là cách tối ưu hóa có tác động cao nhất. Nếu CSS của bạn hiển thị hình ảnh có chiều rộng 800 pixel thì tệp hình ảnh phải rộng khoảng 800 pixel - không phải 4000 pixel. Việc cung cấp hình ảnh quá khổ sẽ lãng phí băng thông trên các pixel bị trình duyệt loại bỏ. Mở công cụ dành cho nhà phát triển của trình duyệt, kiểm tra hình ảnh của bạn và so sánh kích thước được hiển thị với kích thước (tệp) tự nhiên. Nếu kích thước tự nhiên lớn hơn gấp 2 lần kích thước hiển thị thì bạn đang lãng phí dữ liệu.

Đối với các thiết kế đáp ứng trong đó hình ảnh có thể hiển thị ở các kích thước khác nhau trên các màn hình khác nhau, hãy sử dụng thuộc tính srcset để cung cấp nhiều kích thước hình ảnh. Trình duyệt chọn cái tốt nhất cho màn hình của khách truy cập. Một cách tiếp cận phổ biến: cung cấp hình ảnh có chiều rộng 400px, 800px, 1200px và 1600px. Tạo các biến thể kích thước này từ bản gốc của bạn và để trình duyệt chọn.

Nếu bạn vẫn chỉ phân phối các tệp JPEG và PNG vào năm 2026, thì bạn đang bỏ lỡ 25-50% khả năng tiết kiệm kích thước tệp. WebP có hỗ trợ trình duyệt gần như phổ biến (97% + trên toàn cầu) và tạo ra các tệp nhỏ hơn 25-35% so với JPEG ở cùng chất lượng. AVIF đạt được khả năng nén thậm chí còn tốt hơn — nhỏ hơn khoảng 50% so với JPEG — và khả năng hỗ trợ trình duyệt hiện ở mức trên 92%.

Việc thực hiện rất đơn giản: chuyển đổi hình ảnh của bạn sang WebP (hoặc AVIF nếu nền tảng của bạn hỗ trợ nó). Để có khả năng tương thích tối đa, hãy sử dụng phần tử hình ảnh HTML để phân phát AVIF cho các trình duyệt hỗ trợ nó, WebP làm dự phòng và JPEG làm dự phòng cuối cùng. Hầu hết các nền tảng CMS hiện đại và trình tạo trang tĩnh đều có plugin hoặc tính năng tích hợp để xử lý việc này một cách tự động.

Tải chậm trì hoãn việc tải hình ảnh bên dưới chế độ xem hiển thị. Trình duyệt của khách truy cập chỉ tải xuống hình ảnh khi họ cuộn gần chúng, thay vì tải tất cả hình ảnh trên trang cùng một lúc. Điều này cải thiện đáng kể thời gian tải trang ban đầu, đặc biệt là trên các trang có nhiều hình ảnh như danh mục đầu tư, phòng trưng bày hoặc bài đăng blog dài. Trong HTML, việc này đơn giản như việc thêm đang tải="lười biếng" vào thẻ img của bạn. Hầu hết các nền tảng CMS hiện nay đều thực hiện việc này theo mặc định.

Cảnh báo quan trọng: không tải từng phần các hình ảnh hiển thị trong khung nhìn ban đầu (trong màn hình đầu tiên). Hình ảnh chính, biểu tượng và bất kỳ hình ảnh nào hiển thị mà không cần cuộn sẽ tải ngay lập tức. Việc tải chậm những thứ này thực sự làm tổn hại đến điểm LCP của bạn vì nó làm chậm quá trình hiển thị nội dung hình ảnh quan trọng nhất.

Hầu hết hình ảnh trên web có thể được nén tới chất lượng 75-85% mà không bị giảm chất lượng. Sự khác biệt giữa chất lượng 100% và 85% trong ảnh JPEG thường không thể nhìn thấy được bằng mắt người, nhưng sự khác biệt về kích thước tệp là 2-3 lần. Chạy hình ảnh của bạn thông qua một máy nén và so sánh trước và sau. Bạn sẽ ngạc nhiên về việc bạn có thể làm chúng nhỏ hơn đến mức nào mà không có bất kỳ sự xuống cấp rõ ràng nào.

Mạng phân phối nội dung lưu trữ các bản sao hình ảnh của bạn trên các máy chủ trên khắp thế giới, do đó, khách truy cập tải xuống hình ảnh từ một máy chủ gần họ thay vì từ máy chủ gốc của bạn ở nửa vòng trái đất. Đối với các trang web có khán giả toàn cầu, CDN có thể giảm thời gian tải hình ảnh xuống 40-60%. Nhiều nhà cung cấp CDN cũng cung cấp khả năng tối ưu hóa hình ảnh tự động — họ sẽ thay đổi kích thước, nén và chuyển đổi định dạng một cách nhanh chóng dựa trên thiết bị và trình duyệt của khách truy cập.

Cloudflare (có sẵn cấp miễn phí), BunnyCDN và Amazon CloudFront là những lựa chọn phổ biến. Nếu bạn đang sử dụng WordPress, chỉ riêng gói miễn phí của Cloudflare cũng có thể tạo ra sự khác biệt rõ rệt. Đối với các trang web tĩnh trên nền tảng như Netlify hoặc Vercel, phân phối CDN được tích hợp sẵn.

Danh sách kiểm tra đầy đủ theo thứ tự tác động: (1) thay đổi kích thước hình ảnh để hiển thị kích thước, (2) nén ở chất lượng 75-85%, (3) chuyển đổi sang WebP hoặc AVIF, (4) triển khai tải từng phần cho hình ảnh ở màn hình bên dưới, (5) sử dụng srcset đáp ứng cho nhiều kích thước màn hình, (6) phân phát qua CDN, (7) đặt tiêu đề bộ nhớ đệm thích hợp để khách truy cập quay lại không tải xuống lại hình ảnh. Hãy xem qua danh sách này và chạy PageSpeed ​​Insights sau mỗi bước. Hầu hết các trang web đều nhận thấy sự cải thiện lớn nhất chỉ từ bước 1-3.