Meilleures pratiques lors du chargement d'images pour améliorer la vitesse de chargement des pages
Je travaille sur l'optimisation de la vitesse de chargement d'une page. Voici quelques analyses:
Notez que les images, bien que ne représentant que 65% de la taille totale (1,1 Mo), sont de loin les ressources les plus lentes à charger: 96% du temps.
Je voudrais savoir quelles sont les pratiques recommandées pour optimiser la vitesse de chargement, en ne prenant en compte que les images .
Certaines des techniques que nous appliquons déjà:
- compression d'image
- images hébergées sur un domaine sans cookie et CDN
- spriting tout ce qui peut être sprited
- en-têtes http:
keep aliveetExpiresà un an.
Disclaimer: Je suis passé à traversledisponibledocumentation , je pense qu'en me concentrant sur l'optimisation du chargement d'images, je ne crée pas une copie ou une question subjective.
Ne servir que des images à l'échelle. Les images peuvent être réduites en plusieurs tailles côté serveur, puis diffusées en fonction de vos besoins. WordPress est un exemple bien connu de ce type de traitement d'images.
Bien que les outils de pingdom.com vous fournissent des données assez précises, vous devez vous rappeler que les tests effectués par pingdom ne vous donneront pas des données précises, car elles se résument finalement au navigateur de l'utilisateur final. Les navigateurs gèrent ce genre de choses différemment.
Aborder la question directement; Vous laissez de côté les détails concernant où et comment vos images sont stockées. J'ai constaté que si les images étaient stockées sur un CDN, les résultats de votre test s'amélioreraient considérablement. J'aime vraiment vraiment beaucoup.
Je dois admettre que je n'arrive pas à comprendre pourquoi vos images font 1 Mo au total, de quel genre de site Web est-il fou? Avec un fichier png correctement optimisé et compressé d’une moyenne d’environ 20 Ko, vous devez disposer d’un tas d’images que vous devez charger.
Une erreur très courante, en ce qui concerne les images sur les sites Web, est que les concepteurs croient que les images doivent absolument être enregistrées avec un minimum de compression (pensez à FLAC pour la musique). Laissez-moi illustrer avec des images.
Cette image est enregistré à "Qualité 100%" soit 171Ko. Cette image est une version optimisée enregistrée avec une qualité "60%" et une taille de 42 Ko.
Personnellement, je ne vois aucune différence, mais vous économisez 75% de la bande passante en utilisant une version optimisée + compressée appropriée. Ces images sont au format jpg, mais elles sont pratiquement les mêmes dans tous les formats.
Vous pouvez, dans les 5 minutes, trouver au moins 10 sites Web présentant ce problème. On dit que le journal danois BT.dk a amélioré de 50% leurs temps de chargement en optimisant leurs images (et qu'ils ont beaucoup de travail)
Si ce sujet vous intéresse, voici un excellent article à ce sujet .
1er: optimiser les images: diminuer la taille, les combiner ou les supprimer si possible
2ème: images de serveur à partir de CDN
3ème: images de serveur de plusieurs domaines, mieux vaut ne pas utiliser le sous-domaine du site pour éviter les cookies
4ème: utilisez "lazy loader", chargez les images en défilement