Comment puis-je encourager le navigateur à télécharger les images du fichier CSS plus rapidement?
J'utilise CSS pour placer beaucoup de mes images (comme arrière-plans de <div>) et je constate souvent qu'elles se chargent très lentement de cette façon. Ils semblent être la dernière chose à charger. Même de petites images d'icône mettent un certain temps à apparaître de cette façon. Existe-t-il un moyen d'indiquer au navigateur une priorité pour les images? Ou demandez-lui de télécharger les images du fichier CSS plus tôt et de les afficher plus tôt?
CSS est pour le style, pas le contenu. Les navigateurs (à juste titre) essaient d'afficher le contenu avant d'ajouter le style, ce qui explique pourquoi les images des feuilles de style sont généralement téléchargées en dernier. Si les images sont importantes pour votre conten, ajoutez-les ensuite via les balises HTML <IMG> standard.
Utilisez des URI absolus de votre feuille de style et ajoutez les images des balises IMG à un <div> caché sur la page (cela suppose que vous utilisez les mêmes images sur chaque page; idéalement dans le pied de page afin ils sont tous chargés et mis en cache sur un appel de page donné).
Les images de la page sont prioritaires et, une fois mises en cache, elles sont immédiatement rendues lors des demandes de page suivantes.
Pour les navigateurs prenant en charge le type d’URI de données (voir http://en.wikipedia.org/wiki/Data_Uri pour plus d’informations), incluez l’image dans le fichier CSS lui-même.
Cela a cependant quelques inconvénients:
- Les données sont rechargées lorsque le CSS est, plutôt que d'être mis en cache séparément, bien que, à moins que votre CSS change régulièrement, cela ne pose pas vraiment de problème.
- En raison du manque d'héritage de CSS, il peut arriver que vous deviez inclure le même graphique plusieurs fois ou modifier les classes utilisées dans votre document (perte de bande passante).
- Les images sont codées en base64 lorsqu'elles sont utilisées de cette manière, ce qui signifie qu'elles prennent plus de bande passante (bien que le problème de bande passante soit beaucoup moins important si vous envoyez les données compressées).
- Vous devrez fournir d'autres styles pour les navigateurs ne prenant pas en charge les URI de données, dont certains sont loin d'être rares (IE6 et IE7 par exemple).
Utilisez sprites CSS , en particulier pour les icônes.
Faites vos images aussi petites que possible. Vous pouvez utiliser smush.it pour supprimer les octets inutiles.
Pour le moment, il n’existe aucun moyen de spécifier les fichiers à télécharger en premier. Pour votre information, les images spécifiées dans les fichiers CSS comme images d’arrière-plan se téléchargent dernier probablement parce que le navigateur les voit non-contenu et donc moins prioritaire, évitez de les utiliser pour les images importantes que vous souhaitez charger rapidement.