Jak zachęcić przeglądarkę do szybszego pobierania obrazów z pliku CSS?

Używam CSS do umieszczania wielu moich zdjęć (jako tła <div>) i często stwierdzam, że ładują się one bardzo powoli w ten sposób. Wydają się być ostatnią rzeczą do załadowania. Nawet małe, małe ikony wyświetlają się w ten sposób. Czy istnieje sposób, aby określić przeglądarkę jako priorytet obrazów? Czy może pobrać wcześniej obrazy z pliku CSS i renderować je wcześniej?

CSS służy do stylizacji, a nie treści. Przeglądarki (słusznie) próbują wyświetlać zawartość przed dodaniem stylów, dlatego powód, dla którego obrazy w arkuszach stylów są zwykle pobierane jako ostatnie. Jeśli obrazy są ważne dla treści, dodaj je za pomocą standardowych <IMG>tagów HTML .

Użyj bezwzględnych identyfikatorów URI z arkusza stylów i dodaj obrazy z tagów IMG do ukrytego <div>na stronie (zakłada to, że używasz tych samych obrazów na każdej stronie; najlepiej w stopce, aby wszystkie były ładowane i buforowane przy każdym wywołaniu strony ).

Obrazy na stronie mają pierwszeństwo, a po buforowaniu obrazów będą renderowane natychmiast po kolejnych żądaniach strony.

W przypadku przeglądarek obsługujących typ identyfikatora URI danych (informacje można znaleźć na stronie http://en.wikipedia.org/wiki/Data_Uri ), aby uwzględnić obraz w samym CSS.

Ma to jednak kilka wad:

• Dane są ładowane ponownie, gdy CSS jest buforowany, a nie osobno buforowane, ale chyba że CSS zmienia się regularnie, nie stanowi większego problemu.
• Brak dziedziczenia CSS i takie środki mogą czasem (marnować przepustowość), kiedy trzeba będzie wielokrotnie dołączyć tę samą grafikę lub zmienić klasy użyte w dokumencie.
• Obrazy są kodowane w standardzie base64, gdy są używane w ten sposób, co oznacza, że ​​zajmują więcej przepustowości (chociaż problem z przepustowością jest znacznie mniej znaczący, jeśli wysyłasz dane skompresowane).
• Musisz podać alternatywne style dla przeglądarek, które nie obsługują identyfikatorów URI danych, z których niektóre są dalekie od rzadkich (na przykład IE6 i IE7).

W tej chwili nie ma możliwości określenia, które pliki należy pobrać jako pierwsze. Do Twojej wiadomości, obrazy określone w plikach CSS jako obrazy tła są pobierane jako ostatnie, prawdopodobnie dlatego, że przeglądarka widzi je jako niezawierające treści, a zatem ma niższy priorytet, więc unikaj ich używania do ważnych obrazów, które chcesz szybko załadować.

Używaj duszków CSS , szczególnie w przypadku ikon.

Zrób zdjęcia tak małe, jak to możliwe. Możesz użyć smush.it, aby usunąć niepotrzebne bajty.