Guide d'optimisation pour WordPress – Partie 3

Plan du dossier

• Optimiser l’administration WordPress
• Optimiser la Base De Donnée (BDD)
• Optimiser les images
• Optimiser la feuille de style en cascade (CSS)
• Optimiser les scripts
• Optimisations diverses
• Analyser les performances

1. L’échelle

Commençons par un conseil tout simple mais efficace : respecter l’échelle. Qu’est ce que j’entends par là ? Si vous utilisez une image, comme Image d’un article, sur la page d’accueil (ex : Protuts), que la taille de cette dernière est du 80×80 px, ne mettez pas une image plus grande (ex : 120×120 px) que du 80×80 px.

2. Le nombre d’images

Deuxième conseil évident mais là encore efficace : plus vous avez d’images sur votre page et plus c’est long à charger ! Que vous utilisez beaucoup d’images dans un article, dans le cas de listes par exemple, c’est logique ; mais trop d’images dans la page d’accueil et les archives du blog risque fort de vous pénaliser. Supprimez les images inutiles !

Remarque : si votre hébergeur vous impose une limite de bande passante, il est important de réduire le nombre d’images et de les optimiser pour réduire leurs poids.

3. L’hébergement

Pour réduire le nombre de requêtes et les temps de chargement, hébergez toujours les images sur votre propre FTP : c’est ce que je fais pour les bannières 125×125 de mes partenaires. Ainsi, je ne ralentis pas leur connexion en leur « picorant » quelques kilos de bande passante : tout le monde est gagnant.
Même chose pour les images de vos posts, du design…

Remarque : il vaut mieux disposer de suffisamment d’espace disque sur votre FTP pour appliquer cette méthode (au moins 1 Go).

4. Le format de l’image

Un moyen très efficace d’optimiser ces images est de les convertir dans un format approprié, dit « Optimisé pour le web ». Toutes vos images doivent être en jpg (images des articles), gif (design) ou png 8 (articles et design). Pour convertir vos images dans le bon format, plusieurs solutions sont disponibles :

• Adobe Photoshop Elements 7 (75 €) : dispose d’une fonction optimiser pour le web (c’est ce que j’utilise pour mes images)


Menu Optimiser pour le web d'Adobe Photoshop Elements 7

• Adobe Fireworks CS4 (300 €) : même chose que le précédent
• Smush.it : site web qui réduit gratuitement le poids de vos images mais ne les convertis pas

5. CSS Sprites

Cette technique consiste à regrouper plusieurs images en une seule pour réduire le nombre de requêtes et optimiser le temps de chargement. Cette méthode est très employée par le site d’Apple, par exemple, pour sa barre de navigation. Et pour vous faciliter le tout, le site Project Fondue a créé un générateur d’images en sprite et CSS en ligne : vous uploadez un fichier ZIP contenant vos images, saisissez quelques paramètres (comme la taille de l’image) et vous cliquez sur Generate Sprites Images et CSS.

Vous n’avez plus qu’à copier coller le CSS dans votre feuille de style et récupérer votre image en Sprites. Pour couronner le tout, le site est en Français !

Si vous souhaitez apprendre en détail comment créer des images en Sprites CSS, lisez ce tutoriel en Anglais de CSS Tricks.

Remarque : d’après le site, cette technique pose quelques soucis aves Opéra et Safari. A vérifier lors de l’application de cette méthode.

Conclusion

Pour ce 3ème jour, vous devez :

• utilisez les bonnes dimensions
• réduire le nombre d’images (prenez Google comme exemple !)
• toujours héberger les images sur son serveur
• choisir le bon format (très important)
• utiliser la technique du CSS Sprites (très efficace)

Je vous donne rendez-vous à demain où nous verrons comment optimiser la feuille de style en cascade (CSS) de votre blog ! Et n’hésitez pas à me faire part de vos remarques, suggestions, retours d’expériences…

9 commentaires pour “Guide d'optimisation pour WordPress – Partie 3”

1. Guide d’optimisation pour WordPress - Partie 7 | PROTUTS.net dit :

   2 juillet 2009 à 10 h 59 min

   [...] Guide d’optimisation pour WordPress – Partie 3 [...]

   Répondre
2. Guide d’optimisation pour WordPress – Partie 3 | PROTUTS.net dit :

   6 septembre 2009 à 23 h 56 min

   [...] is the original post: Guide d’optimisation pour WordPress – Partie 3 | PROTUTS.net Comments0 Leave a Reply Click here to cancel [...]

   Répondre
3. Optimisations diverses pour votre blog WordPress [J+6 - 7JOPW] | Protuts v4 dit :

   29 décembre 2009 à 21 h 54 min

   [...] Optimiser les images [...]

   Répondre
4. Optimiser la feuille de style en cascade (CSS) [J+4 - 7JOPW] | Protuts v4 dit :

   29 décembre 2009 à 21 h 55 min

   [...] Optimiser les images [...]

   Répondre
5. Optimiser l'administration WordPress [J+1 - 7JOPW] | Protuts v4 dit :

   29 décembre 2009 à 21 h 56 min

   [...] Optimiser les images [...]

   Répondre
6. Afficher les articles relatifs sous forme de miniature pour votre blog WordPress | Protuts v4 dit :

   30 décembre 2009 à 18 h 01 min

   [...] : redimensionnez vos images à la bonne taille pour optimiser le temps de chargement (cf. Guide d’optimisation WordPress). Dans le cas présent, nous avons utilisé des images au format 80px par [...]

   Répondre
7. Optimiser les scripts de votre site WordPress [J+5 - 7JOPW] | Protuts v4 dit :

   30 décembre 2009 à 18 h 15 min

   [...] Optimiser les images [...]

   Répondre
8. Analyser les performances de son blog WordPress [J+7 - 7JOPW] | Protuts v4 dit :

   30 décembre 2009 à 18 h 16 min

   [...] Optimiser les images [...]

   Répondre
9. Optimiser la base de donnée [J+2 - 7JOPW] | Protuts v4 dit :

   30 décembre 2009 à 18 h 22 min

   [...] Optimiser les images [...]

   Répondre