Làm cách nào tôi có thể khuyến khích trình duyệt tải xuống hình ảnh từ tệp CSS nhanh hơn?

Tôi sử dụng CSS để đặt nhiều hình ảnh của mình (làm nền cho <div>) và tôi thường thấy rằng chúng tải rất chậm theo cách này. Chúng dường như là thứ cuối cùng để tải. Ngay cả những hình ảnh biểu tượng nhỏ cũng mất một lúc để hiển thị theo cách này. Có cách nào để cho trình duyệt ưu tiên cho hình ảnh không? Hoặc lấy nó để tải xuống các hình ảnh trong tệp CSS sớm hơn và hiển thị chúng sớm hơn?

CSS là để tạo kiểu, không phải nội dung. Các trình duyệt (phải) thử và hiển thị nội dung trước khi thêm kiểu dáng, do đó lý do tại sao hình ảnh trong biểu định kiểu thường được tải xuống lần cuối. Nếu hình ảnh quan trọng đối với nội dung của bạn thì hãy thêm chúng thông qua các <IMG>thẻ HTML tiêu chuẩn .

Sử dụng URI tuyệt đối từ biểu định kiểu của bạn và thêm hình ảnh từ thẻ IMG vào ẩn <div>trên trang (điều này giả sử bạn đang sử dụng cùng một hình ảnh trên mỗi trang; lý tưởng là ở chân trang để tất cả chúng được tải và lưu vào bộ nhớ cache trên bất kỳ cuộc gọi trang nào ).

Hình ảnh trên trang được ưu tiên và, sau khi hình ảnh được lưu vào bộ nhớ cache, chúng sẽ hiển thị ngay lập tức cho các yêu cầu trang tiếp theo.

Đối với các trình duyệt hỗ trợ loại URI dữ liệu (xem http://en.wikipedia.org/wiki/Data_Uri để biết thông tin) để đưa hình ảnh vào chính CSS.

Điều này có một vài nhược điểm:

• Dữ liệu được tải lại khi CSS, thay vì được lưu trữ riêng, trừ khi CSS của bạn thay đổi thường xuyên, đây không phải là vấn đề.
• CSS thiếu tính kế thừa và có nghĩa là có thể có thời gian (lãng phí băng thông) khi bạn phải bao gồm cùng một đồ họa nhiều lần hoặc thay đổi các lớp được sử dụng trong tài liệu của bạn.
• Các hình ảnh được mã hóa base64 khi được sử dụng theo cách này có nghĩa là chúng chiếm nhiều băng thông hơn (mặc dù vấn đề băng thông ít quan trọng hơn nếu bạn gửi dữ liệu được nén).
• Bạn sẽ cần cung cấp các kiểu thay thế cho các trình duyệt không hỗ trợ URI dữ liệu, một số trong số đó không phổ biến (ví dụ IE6 và IE7).

Cho đến bây giờ không có cách nào để xác định tập tin tải xuống đầu tiên. FYI, hình ảnh quy định trong file CSS dưới dạng hình nền tải về cuối cùng có lẽ vì trình duyệt nhìn thấy chúng không có nội dung và do đó một ưu tiên thấp hơn để tránh việc sử dụng chúng cho hình ảnh quan trọng mà bạn muốn tải nhanh chóng.

Sử dụng các họa tiết CSS , đặc biệt là cho các biểu tượng.

Làm cho hình ảnh của bạn nhỏ nhất có thể. Bạn có thể sử dụng smush.it để loại bỏ các byte không cần thiết.