La vitesse du site Web basé sur des images
J'ai un site WordPress qui est basé à 90% sur des images.
J'ai installé Wp-Super-Cache, il semble maintenant se charger un peu plus vite.
J'ai fait un test de vitesse sur Pingdom Tools:
- Taille de la page 4.7MB
- Temps de charge
- Demandes 153
- Perf. grade 74/100
Et aussi le temps passé par type de contenu:
- Image 88.23%
Donc, le problème est évidemment les images.
Mon plan est d’essayer autant que possible d’optimiser la taille des images, puis d’ajouter le support CDN.
Est-ce suffisant pour améliorer le chargement des images?
Servez vos images via un réseau de diffusion de contenu. Amazon propose Cloudfront, qui offre des services très bon marché et permet à Origin Pull de signifier que les images sont hébergées sur votre serveur pour le stockage Origin, mais mises en cache et livrées à partir des points de terminaison du CDN les plus proches du client. Fondamentalement, vous configurez vos images pour qu'elles soient diffusées via un CNAME sur votre domaine, par exemple media.example.com, qui pointe vers le nom de domaine complet attribué au serveur d'images Amazon.
Votre serveur peut alors se concentrer sur le contenu au lieu d’être principalement un serveur d’images. La seule raison qui justifie l'optimisation du service d'imagerie après cela est lorsque les TTL de contenu expirent et que le CDN doit être rechargé. Nous avons réduit le trafic de nos serveurs à un quart de ce que nous avions du mal à mettre en œuvre le système Origin Pull.
Je viens de découvrir hier que Google a un add-on de PageSpeed pour les navigateurs que je vous suggérerai d'utiliser car il résout les problèmes de performances en donnant la priorité à leur importance. Il fonctionne également dans le navigateur (Chrome ou Firefox) en tant qu’add-on. Cela explique également davantage les problèmes et les solutions si vous n'êtes pas sûr de la signification réelle de chaque élément.
J'ai couru PageSpeed sur votre site et mes soupçons sur les images non optimisées ont été confirmés et c'était la chose numéro un répertoriée. Une fois entièrement optimisé, vous pouvez réduire la taille de vos images de 43% (plus de 1,5 Mo). Vous pouvez en apprendre plus à ce sujet sur la page des meilleures pratiques qui parle de optimisation des images .
Quelques autres choses importantes que vous pouvez faire sont Gzipping votre contenu (ne gzip pas les images, cependant). Cela peut vous faire économiser un demi-Mo presque. Vous pouvez rencontrer des problèmes avec le site Web PageSpeed pour confirmer que vos fichiers sont compressés, mais le site Web que j'ai lié et l'add-on de PageSpeed pourraient fonctionner mieux pour vous.
Il indique également que vos images sont trop grandes pour la taille que vous les utilisez. Cela peut vous faire économiser environ 0,25 Mo.
Il suggère également minifiant vos fichiers javascript et css.
PageSpeed propose davantage de suggestions, mais celles-ci devraient réduire considérablement la taille de votre page.
Je vous recommande également de vérifier le fonctionnement de votre plug-in de mise en cache, car PageSpeed suggère également d'ajouter des en-têtes d'expiration à certains fichiers (c'est simple si vous avez accès à votre fichier .htaccess).
Globalement, obtenez PageSpeed ou YSlow pour votre navigateur. Ils vous diront des choses similaires (j'ai juste une préférence pour l'ancien car il fonctionne dans le panneau des outils de développement de Chrome).
Je suggère une sorte de système de chargement progressif, de sorte que les images plus loin de la page ne se chargent pas dès que la page le fait.