photo credit: Hyperfinch

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. Utiliser Firebug

Firebug est une extension Firefox absolument indispensable pour tout webmaster. Elle permet de modifier en temps réel le design de son site, mais également d’analyser les temps de chargement des différents objets d’une page (images, css, scripts…) sous forme de ligne du temps. Pour cela, installer Firebug, cliquez sur le petit icône en forme d’insecte dans la barre d’état du logiciel, puis sur l’onglet Réseau. Faites CTRL+F5 pour vider le cache et actualiser la page : admirez le résultat !

Extension Firebug, onglet Réseau

En savoir plus pour utiliser Firebug dans IE et autres navigateurs

2. Utiliser YSlow

YSlow est également une extension à Firefox qui vient se rajouter à Firebug (il convient donc d’installer en premier lieu Firebug). Elle a été développée par les ingénieurs de Yahoo et est spécialement conçue pour analyser en profondeur les performances de votre blog. Après l’analyse, une note allant de A à F vous est attribué (A étant la meilleure note). Cette note est une moyenne de plusieurs autres notes sur le CSS, le contenu, les cookies, les JS, le serveur et les images soit 22 points au total. Cliquez sur l’une des notes obtenues pour avoir une explication simple du résultat, ou sur Read More, pour en savoir d’avantage sur ce point d’analyse de manière plus détaillée.

Extension YSlow de Yahoo, onglet Grade (note)

Parcourez les différents onglets de l’extension pour obtenir des tas d’informations sur votre blog :

Extension YSlow de Yahoo, onglet Statistics

3. Liens utiles

Je vous conseille vivement de consulter la totalité de ces liens pour compléter et terminer cette semaine dédiée à l’optimisation de WordPress. Les différents points que j’ai abordé durant ces derniers jours ne sont qu’une partie infime de l’optimisation d’un site.

Best Practices for Speeding Up Your Website par Yahoo

Speed Up Your Pages And Improve Your YSlow Score With The Coral Content Distribution Network par Haacked

WordPress Optimization Bible par Wladimir Prelovac (disponible sur Homo Sapiens Internetus en Français)

How to Minimize Load Time for Fast User Experiences par UxBooth

The Mystery of CSS Sprites : Techniques, tools and tutorials par Smashing Magazine

Conclusion

Pour terminer cette semaine, voici la check list finale du projet “7 Jours pour Optimiser les Performances de son blog WordPress” :

1. Optimiser l’administration WordPress
   • Mettre à jour WordPress
   • Supprimer les plugins inutiles
   • Mettre à jour les extensions restantes
   • Supprimer tout ce qui est inutile dans la sidebar
   • Activer Gears
2. Optimiser la Base De Donnée (BDD)
   • Supprimer les résidus de tables d’anciens plugins
   • Supprimer les post revisions
   • Optimiser le tout
3. Optimiser les images
   • 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)
4. Optimiser la feuille de style en cascade (CSS)
   • Supprimez les commentaires
   • Supprimez les styles sans propriété
   • Fusionnez les propriétés
   • Ne pas répétez du code inutilement
   • Bien positionner l’appel à votre fichier CSS
   • Héberger sur votre FTP le(s) fichier(s)
   • Compressez la feuille de style pour une optimisation maximale
5. Optimiser les scripts
   • Supprimez les scripts inutiles
   • Bien positionner ces scripts
   • Externaliser vos scripts
   • Héberger sur son serveur le maximum de scripts
   • Compresser les scripts
6. Optimisations diverses
   • Choisir un bon hébergeur (2 critères importants)
   • Utiliser des URLs complètes
   • Mettez un / à la fin d’un lien
   • Installer WP Super Cache (en fonction de votre site)
7. Analyser les performances
   • Utiliser Firebug
   • Utiliser YSlow
   • Consulter les liens utiles

Un souci, un problème, une remarque, votre avis sur le dossier, n’hésitez pas à vous exprimer ! Bonne optimisation à tous

photo credit: chrisdlugosz

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’hébergeur

Mot qui revient souvent dans le projet, l’hébergeur est très important : il est en grande partie responsable des performances de votre site. Deux critères sont en prendre en compte pour accroître les temps de chargement :

• la bande passante : illimitée de préférence (cas de Protuts).
• emplacement géographique du serveur : le plus près de chez vous ! Pourquoi ? Si votre site est tout en français, ce seront des visiteurs français qui le visiteront, donc ils seront situés en France, c’est pourquoi, il vaut mieux que le serveur soit situé le plus près possible de vos visiteurs. Dans mon cas, j’ai choisi un serveur suisse (Kreativmedia) qui offre d’excellentes prestations de services à un prix très raisonnable. Les serveurs américains, qui en apparence offrent de meilleurs services, ne sont pas forcément les plus performants.

2. Indiquez l’emplacement exacte

Au lieu d’utiliser une requête php pour indiquer une URL, écrivez là réellement :

Par défaut :

Ecrivez plutôt :

Seul inconvénient, si vous changez de thème, vous devrez refaire tous les liens.

3. Améliorer vos URLs

Une astuce toute simple mais qui accélère la vitesse de chargement consiste à écrire une adresse suivie d’un slash :

En général :

Écrivez plutôt :

4. WP Super Cache

WP Super Cache est un plugin WordPress qui a pour but d’optimiser les performances de votre blog : il génère des pages HTML statiques et les mets en cache pour éviter d’avoir à réexécuter le processus de scripts php. Ce plugin est vraiment utile sur des sites à fortes fréquentations, en manque de bande passante. Toutefois, mon avis est partagé sur cette extension :

• conflits avec d’autres plugins
• erreurs dans son utilisation
• si vous mettez souvent à jour vos pages, ce n’est pas une bonne solution
• …

Pour en savoir plus sur WP Super Cache :

Article de Lyxia.org sur Optimiser les performances de votre blog WordPress avec WP Super Cache : installation et utilisation du plugin y sont détaillées

Conclusion

Voici vos tâches à effectuer pour aujourd’hui :

• Choisir un bon hébergeur (2 critères importants)
• Utiliser des URLs complètes
• Mettez un / à la fin d’un lien
• Installer WP Super Cache (en fonction de votre site)

Ne ratez pas demain la dernière journée du projet 7 jours pour optimiser les performances de votre blog WordPress. Il y sera question d’analyses des résultats et de bien plus encore…

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. Supprimez les scripts inutiles

Les scripts sont très utile dans WordPress, et dans tout site web en général. Mais, il ne faut pas en abuser. De la même façon que pour les plugins, supprimez tout ce qui n’est pas absolument indispensable pour le visiteur puis ensuite pour le site lui-même. En principe, les scripts sont situés, soient dans l’un des fichiers php de votre blog comme sidebar.php, soient dans un fichier externe js auquel vous faites appel via une ligne de code comme ceci :

2. Positionnement des scripts

Alors que la ligne de code pour appeler votre fichier CSS doit être placée dans le header, c’est l’inverse pour les scripts. Ces derniers doivent être placés dans le footer juste avant la balise </html> et après la balise </body> pour qu’ils soient chargés après le contenu de la page.

3. Externaliser vos scripts

Plutôt que de placer la totalité du code d’un script dans la sidebar par exemple, il est préférable de créer un fichier externe, fichier auquel vous ferez appel par la suite via une ligne de code. Les thèmes bien conçus ont normalement un dossier js ou javascript créé avec tous les fichiers de scripts à l’intérieur. Si ce n’est pas le cas, dans un but purement de “rangement”, créer un dossier javascript à l’intérieur du dossier de votre thème.

Exemple de dossier Javascript

Ensuite, ouvrez le bloc-note Windows, collez-y le code du script, puis enregistrer le fichier. Fermez le bloc-note et renommez l’extension du fichier .txt en .js via l’explorateur Windows. Uploadez le(s) fichier(s) sur votre serveur FTP. Pour appeler votre script, ouvrez, via WordPress, le pied de page (footer.php) et appelez le script comme ceci :

4. Hébergement des scripts

Dans une très grande majorité des cas, le fichier du script n’est pas situé sur votre serveur ce qui augmente le nombre de requêtes et ralentit le chargement de votre site. Là encore, le mieux est d’héberger le maximum des scripts sur son propre serveur. Par exemple, si vous avez inséré un module Twitter sur votre site, il est préférable de placer les deux lignes encadrées par des balises scripts d’une part dans le footer, et d’autre part, de télécharger puis d’uploader dans le dossier javascript le fichier blogger.js pour accroitre considérablement la vitesse de chargement du module.

Attention : le deuxième script ne doit pas être hébergé sur votre propre serveur : en effet, il contient vos tweets ! Il vous faudrait le mettre constamment à jour.

5. Minifier les scripts

Les CSS peuvent être compressés, et bien les scripts aussi ! Grâce au site web Javascript Compressor, vous allez pouvoir minifier tous vos scripts en deux clics de souris. Pour ce faire, copiez le code de votre script puis collez le dans le champ Paste your code. Cliquez sur Compress et admirez le résultat.

Javascript Compresseur : d'après le ratio, le poids du fichier vient d'être divisé par 2 !

Il ne vous reste plus qu’à collez le nouveau code dans votre fichier .js.

Conclusion

Petit récapitulatif des tâches à effectuer en ce jour de la fête du travail :

• Supprimez les scripts inutiles
• Bien positionner ces scripts
• Externaliser vos scripts
• Héberger sur son serveur le maximum de scripts
• Compresser les scripts

Si vous avez des questions, n’hésitez pas ! Je vous donne rendez-vous dès demain pour continuer à optimiser votre blog WordPress !

Afin d’effectuer une comparaison, relever le poids du fichier CSS avant puis après les différentes optimisations, et indiquez le dans les commentaires ;). Effectuez une copie du fichier avant toutes modifications : on ne sait jamais !

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. Supprimer les commentaires

Tout fichier CSS et en particulier si c’est un thème graphique réalisé par des designers, est parsemé de commentaires pour aider à s’y retrouver notamment lorsque l’on met à jour le design. Pour autant, ces commentaires occupent pas mal de place dans le poids du fichier : ils peuvent être supprimés sans aucun risque. Pour les repérer, c’est très simple, ils sont encadrés par /* Exemple */.

Attention : les premières lignes du fichier CSS sont dites des commentaires mais elles sont indispensables pour WordPress : ne les supprimez pas !

2. Supprimer les styles sans propriété

Un style sans propriété ne sert strictement à rien dans votre fichier. Il se présente sous cette forme :

3. Fusionnez les propriétés

Il existe plusieurs façons d’écrire certaines propriétés CSS. Mais certaines “façons” sont plus courtes que d’autres, et par conséquent, alourdissent moins le fichier. Par exemple, au lieu d’écrire :

Écrivez plutôt :

4. Ne répétez pas du code inutilement

J’ai utilisé cette technique pour les boutons dans le header (Twitter, Demande de Tutoriel, Email et RSS). Plutôt que de recréer pour chacun d’entre-eux, le style a:link, a:hover… j’ai procédé comme ceci :

5. Le positionnement du fichier CSS

Placez toujours la ligne de code d’appel du fichier CSS dans le header et en tête de liste des autres appels de fichiers. Ainsi, ce sera la première chose que le navigateur chargera. La ligne de code pour appeler le fichier CSS se présente ainsi :

6. L’hébergement

De la même façon que pour les images, héberger toujours les feuilles de styles sur votre propre FTP.

Bonus : compressez votre fichier CSS

Le site CSS Drive propose un outil en ligne pour compresser au maximum votre feuille de style. Toutefois, même si le poids s’en trouvera fortement réduit, vous perdrez toute clarté dans votre fichier : plus de hiérarchies, de commentaires, de sauts de lignes… A vous de voir…

CSS Drive, compresseur de fichiers CSS

Conclusion

Aujourd’hui, vous devez :

• Supprimez les commentaires
• Supprimez les styles sans propriété
• Fusionnez les propriétés
• Ne pas répétez du code inutilement
• Bien positionner l’appel à votre fichier CSS
• Héberger sur votre FTP le(s) fichier(s)
• Compressez la feuille de style pour une optimisation maximale

Voilà de quoi vous occuper jusqu’à demain, où nous verrons comment optimiser les scripts de votre blog

#1 - Sauvegarder vos données personnelles

Sous Vista, un dossier utilisateur regroupe l’ensemble de vos données (documents, musiques, images, vidéos, téléchargements, etc.). Il est donc très facile de les retrouver en vue d’en faire une copie. Toutefois, n’oubliez pas de faire de même pour tous les comptes utilisateurs pour éviter de mauvaises surprises…

Cette étape n’est pas nécessaire si vous disposez d’une partition prévue à cet effet. Cela dit, rien ne vous empêche de faire une copie complète sur un support externe (disque dur, DVD, Blu-ray, etc.).

#2 - Sauvegarder vos préférences d’application

C’est sans doute la partie la plus fastidieuse car chaque application utilisée regorge de données importantes. Nous allons voir ici quelles sont celles à traiter en priorité.

Navigateur Internet, exemple avec Mozilla Firefox

Favoris, extensions, thèmes, mot de passe, etc. autant de données très importantes qu’il convient de mettre à l’abri en vue de les restaurer ultérieurement. A ce sujet, je vous invite à lire ou à relire ce dossier regroupant les 5 manières de sauvegarder ses marque-pages et plus dans Firefox.

Client mail, exemple avec Outlook 2007

Si votre profil de messagerie contient plusieurs milliers d’e-mails, il serait judicieux de les sauvegarder. Ajoutez à cela les tâches, les calendriers, les contacts, etc. pour ne rien oublier !

Pour cela, voici la méthode consistant à exporter facilement la totalité de ses mails dans Outlook 2007 via un fichier PST qui regroupe en réalité l’ensemble de vos différents dossiers.

Microsoft Office 2007

Si vous avez l’habitude de créer des modèles de documents, de télécharger de nouveaux thèmes graphiques et plus, il convient alors de connaître les différents emplacements nécessaires qui les contiennent en vue, bien entendu, de les sauvegarder.

Pour ce faire, voici comment sauvegarder les fichiers personnalisés dans Microsoft Office 2007.

#3 - Télécharger les derniers drivers

Un PC reformaté, c’est aussi un PC sans aucun pilotes - drivers, en anglais. Cela signifie que la plupart de vos périphériques ne fonctionneront pas correctement même s’ils sont reconnus par Windows.

Ainsi, je vous recommande de télécharger sur le net les derniers drivers sur les sites constructeurs ou autres sites spécialisés. Cela dit, si votre PC est relativement récent, vous pouvez toujours utiliser le CD fourni à l’achat.

Le pilote le plus important à réinstaller en priorité dans sa version mise à jour est celui de la carte graphique. Ensuite, celui du WIFI ou de l’Ethernet seront nécessaires pour vous connecter dans les plus brefs délais à Internet.

#4 - Sauvegarder votre clé WEP / WPA

Il s’agit de la clé nécessaire pour vous connecter au Web. Ne la perdez donc pas en la notant sur un bout de papier !

Pour la connaître, rendez-vous dans les propriétés de la connexion réseau concernée puis dans l’onglet Sécurité. Cochez Afficher les caractères puis recopiez cette dernière.

#5 - Télécharger les Service Pack

Chaque version de Windows possède un ou plusieurs packs de mises à jour que l’on nomme Service Pack - SP en abrégé. Afin de vous éviter à devoir les télécharger par la suite, faites dès à présent. En effet, vous bénéficierez ainsi rapidement d’un système plus performant ce qui vous permettra de gagner du temps.

Notez qu’il est nécessaire d’installer le SP1 avant le SP2. Vous pouvez néanmoins, passez cette étape et utilisez Windows Update pour les installer par la suite :

#6 -Sauvegarder vos profils de jeux

Si vous êtes un gamer, il serait triste perdre vos longues heures de jeux et d’avoir à recommencer depuis le début. Recherchez les différentes parties enregistrées dans les dossiers de jeux correspondants ou bien dans vos dossiers personnels. Généralement, le pseudo est repris dans l’intitulé du dossier.

#7 - Sauvegarder vos polices

Les polices de caractères sont stockées dans le dossier C:WindowsFonts

Procédez à une copie du dossier pour ne perdre celles que vous auriez téléchargées sur Internet ou qui se seraient installées avec une application.

Cette liste n’est certainement pas exhaustive. Je vous invite donc à la compléter en indiquant vos méthodes de sauvegarde préférées, si vous utilisez des logiciels spécialisés, etc. La parole vous est donnée chers lecteurs !

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

Capture d'écran du site Smush.it (une extension pour WordPress y est proposée)

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…

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 - Supprimer les tables inutilisées

Hier, je vous ai dit de supprimer les plugins inutiles de votre FTP. Sauf que certaines extensions inscrivent des tables dans la base de donnée et ces dernières ne se suppriment pas lors de la désinstallation du plugin. Par exemple, si vous avez effacé WP Print, la table wp_print existe toujours dans la BDN.

Pour la supprimer, commencez par accédez à l’administration de votre hébergeur, puis ouvrez la base de donnée (cherchez un icône ou un lien nommé BDN, Base de donnée, PhpMyAdmin, MySql…).

Cochez la ou les table(s) désirée(s), puis, via la liste déroulante Pour la sélection, optez pour Supprimer.

Fonction Supprimer une table dans PhpMyAdmin

Attention : l’effet est immédiat ! Soyez prudent dans vos actions ! La base de donnée c’est l’équivalent du Registre Windows.

#2 - Supprimer les “Post Revisions”

Une des nouveautés de WordPress 2.7 est la sauvegarde de chaque enregistrement d’un article : un post possède donc plusieurs versions. Cela permet de revenir en arrière en cas d’erreurs sans avoir à tout refaire. C’est un peu le même principe que Shadow Copy dans Windows Vista. Même si à la base, cette fonctionnalité est utile (ça m’a sauvé la vie plusieurs fois), il n’est pas vraiment utile de conserver toutes les versions d’article une fois ce dernier publié. En effet, les Post Revisions occupent une place importante dans la base de donnée. Pour les supprimer, deux méthodes :

• En utilisant WordPress : je déconseille, c’est très extrêmement long et fastidieux !
• En entrant une commande MySql est le tour est joué :

1. Cliquez sur le petit icône SQL dans la barre latérale gauche.
   

   Icône SQL dans PhpMyAdmin

2. Sous l’onglet SQL, copiez-collez ce morceau de code dans le champ Exécuter une ou des requêtes sur la base XXXXX :
   1. DELETE FROM wp_posts WHERE post_type = "revision";
3. Cliquez sur le bouton Exécuter pour terminer l’opération.

Fonction Supprimer les versions d'article dans PhpMyAdmin

Remarque : histoire de comparer le poids avant et après l’exécution de la commande, regardez la table wp_posts à la colonne Taille.

#3 - Optimiser la BDN

Effectuons maintenant la plus grosse optimisation de la BDN qui, si vous ne l’avez jamais fait risque de réduire jusqu’à 80% le poids de votre BDN (dans mon cas, j’étais passé de 15 Mo à 2.7 Mo !). La méthode est simple et rapide :

Cliquez sur le lien Tout cocher. Dans la liste déroulante Pour la sélection, optez pour Optimiser la table.

Fonction Optimiser la table dans PhpMyAdmin

C’est tout !

Remarque : avant d’effectuer l’optimisation, regardez le poids total de votre BDN pour comparer.

Conclusion

Petit récapitulatif des tâches à effectuer sur la BDN :

• Supprimer les résidus de tables d’anciens plugins
• Supprimer les post revisions
• Optimiser le tout

Un allègement de la base de donnée accélère non seulement l’administration WordPress mais également votre site à tous les niveaux que ce soit. Demain, nous nous concentrerons sur l’optimisation des images !

photo credit: cloneofsnake

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. Mettre à jour WordPress

Commençons en douceur ! Vérifiez que votre administration WordPress est à jour afin de bénéficier des dernières avancées en la matière (performances, sécurité, stabilité…). Pour ce faire, cliquez sur Outils puis sur le sous menu Mettre à jour.

Onglet Outils, sous menu Mise à jour de WordPress

• Si votre version est à jour, le texte suivant apparaît : Vous avez la dernière version de WordPress. Il n’est pas nécessaire de faire une mise à jour.
• Si non procédez à la mise à jour en suivant les instructions à l’écran (c’est automatique et rapide)

2. Supprimer les plugins inutiles

Les extensions (=plugins) sont absolument indispensables dans WordPress, mais pas toutes ! Il faut savoir qu’à chaque installation d’un plugin, ce dernier aura tendance à plus ou moins ralentir le chargement de votre site (que ce soit au niveau de l’administration que du site lui même). En effet, dans la majorité des cas, l’extension fait appel à un fichier CSS (feuille de style), un ou plusieurs fichiers JS (JavaScript), créé des tables supplémentaires dans la base de donnée, etc… bref il est nécessaire de peser l’utile et l’inutile (voir le totalement inutile) pour réduire le nombre de requêtes et alléger le poids de la page. C’est ce que j’ai fait lors du passage de la V3 à la V4 pour G&T, en supprimant notamment WP-Email, WP Print et WP Ratings : les deux premiers parce que n’importe quel navigateur propose ces fonctionnalités, le troisième parce que tous mes articles valent 5/5 (ou presque ;D).

Donc, cliquez sur l’onglet Extensions, puis désactiver les plugins qui ne sont pas utiles d’une part pour administrer le blog, et d’autre part, pour vos visiteurs. Une fois les extensions désactivées, supprimez les physiquement de votre hébergeur via votre logiciel FTP de votre choix (ex: Filezilla).

Pour en savoir plus sur l’utilisation de Filezilla et la gestion des plugins :

Dossier : Réaliser un blog sous WordPress (partie 1) : Installation de WordPress sur un hébergeur

Dossier : Réaliser un blog sous WordPress (partie 4) : Choix des extensions et installation

3. Mettre à jour les plugins

Maintenez que vous avez supprimé les extensions inutiles, il est nécessaire, comme pour WordPress, de les mettre à jour. Pour vous faciliter la vie, la version 2.7 de WordPress vous averti du nombre de mises à jour disponibles via un petit cercle orange situé à côté de l’onglet Extensions.

Onglet Extensions de WordPress (ici, une mise à jour disponible)

Pour en savoir plus sur la mise à jour d’un plugin :

Dossier : Réaliser un blog sous WordPress (partie 4) : Choix des extensions et installation

Remarque : si vous avez effectué des modifications dans les fichiers du plugins (CSS, JS, PHP…), elles seront perdues avec la mise à jour.

4. Optimisation de la sidebar

La barre latérale de votre site (sidebar.php) doit elle aussi bénéficier d’un petit nettoyage de printemps :

• Désactiver les widgets inutiles via Apparence puis Widgets
• Supprimer tout morceau de code inutiles rajoutés dans le fichier sidebar.php (ex : un module Flickr - sauf dans le cas d’un portfolio…, horloges, compteur de visites, compteur twitter, compteur feedburner, classement wikio, classement alexa, classement technorati… et j’en passe). Comparez le poids en KO de votre page avant puis après le nettoyage (via Filezilla par exemple) : si vous gagnez ne serait ce qu’1 KO c’est déjà ça ! Mais vous pouvez faire mieux ! Posez-vous toujours cette question : cette fonction est-elle vraiment utile ?

En supprimant tout ce qui est inutile dans la sidebar, le nombre de requêtes risque de diminuer considérablement, le poids des pages va s’alléger et, au final, les temps d’accès et de chargement de votre site vont diminuer.

Pour en savoir plus sur la gestion des widgets :

Dossier : Réaliser un blog sous WordPress (partie 3) : Choix du thème à utiliser et configuration

5. Activer Gears

Une des nouveautés de la version 2.7, est l’apparition de l’outil Gears. Certains d’entre vous le connaissent probablement s’ils utilisent le mode offline de Google. Cet outil permet réellement d’accroître la rapidité de l’administration WordPress surtout avec des connexions bas débits.

Pour en savoir plus sur l’activation de Gears :

Accélérer WordPress avec Google Gears

Remarque : activer Gears accélère uniquement l’administration pour votre ordinateur. Cela n’optimise en aucun cas les performances d’accès au site, temps de chargement, réduction du nombre de requêtes… Mais c’est un véritable plus pour accroître la rapidité de l’administration donc de votre productivité !

Conclusion

Récapitulons : vos tâches aujourd’hui sont :

• Mettre à jour WordPress
• Supprimer les plugins inutiles
• Mettre à jour les extensions restantes
• Supprimer tout ce qui est inutile dans la sidebar
• Activer Gears

Grâce à cela, nous pourrons partir sur de bonnes bases pour s’attaquer au reste du programme ! Demain, nous irons faire un tour dans les méandres de votre blog : la base de donnée !

N’hésitez pas à poster des commentaires (retours d’expériences, problèmes quelconques…) !

L’idée

Projet "7 jours pour optimiser les performances de son blog WordPress"

Ce projet a véritablement un seul but principal : maximiser les performances de votre blog WordPress pour générer d’avantage de trafic.

Conséquences

Grâce à toutes les méthodes et techniques qui seront décrites à travers les articles, et que vous essaierez de mettre en place sur votre blog, vous obtiendrez :

• plus de visiteurs
• plus de pages vues
• plus de commentaires
• une augmentation du PageRank Google
• plus de revenus

Toutefois, je tiens à préciser que pour obtenir de tels bénéfices, il vous faudra du temps, de la patience et beaucoup de travail ! Il n’existe pas une méthode miracle pour générer du trafic mais plutôt une combinaison de plusieurs techniques à utiliser.

Comment ça marche ?

C’est très simple ! Dès demain, et ce, durant toute la semaine, un article quotidien sera publié sur Geek&Tech avec, comme d’habitude, des captures d’écrans, des exemples, des liens… en essayant d’être le plus clair possible. Bien évidemment, vous pourrez soumettre vos retours d’expérience via les commentaires mais aussi partager vos précieux conseils pour optimiser son blog.

Afin de ne rien manquer, je vous conseille vivement de vous abonner gratuitement :

• au flux RSS des articles
• à la newsletter
• et de me suivre sur Twitter

Plan du dossier

• Jour 1 : Optimiser WordPress
• Jour 2 : Optimiser la BDN
• Jour 3 : Optimisation des images
• Jour 4 : Optimiser les CSS
• Jour 5 : Optimiser les scripts
• Jour 6 : Optimisations diverses
• Jour 7 : Analyser les résultats obtenus

Il ne me reste plus qu’à vous donner rendez-vous pour toute la semaine prochaine, c’est à dire, dès demain !

Crédit : roflwaffle07

#1 - Couper les connexions WIFI / Ethernet

Le WIFI ou connexion Internet sans fil consomme énormément de ressources. Pour un usage mobile, cette fonctionnalité devient inutile à moins de se trouver à proximité d’un hotspot et que l’on souhaite également s’y connecter.

Dans le cas contraire,  désactivons cette interface énergivore. Pour ce faire, plusieurs méthodes :

• Appuyez sur les touches Fn + F2 (cette dernière touche peut varier en fonction des modèles de PC) ;
• Utilisez un interrupteur directement accessible sur l’engin (dépend là encore des modèles) ;
• Ouvrez le menu Démarrer puis recherchez le Centre de mobilité Windows. Cliquez ensuite sur le bouton Désactiver le sans fil ;

Capture d'écran - Centre de mobilité Windows sous Vista

Concernant les connexions Ethernet - réseaux câblés, débranchez simplement le cordon. La fonctionnalité ne sera pas désactivée complètement - car plus compliqué à réactiver par la suite en comparaison au WIFI, mais toute chose reliée au PC en moins économise de l’énergie.

#2 - Réduire la luminosité de l’écran

Autre poste de consommation importante, l’affichage et son degré de luminosité plus ou moins élevé. Pour économiser au maximum, appuyez sur les touches Fn + F5 pour diminuer l’intensité d’affichage de l’écran. La touche indiquée ici dépend de votre modèle d’ordinateur. Elle est généralement représentée par un soleil.

Vous pouvez une fois de plus utilisez le Centre de mobilité Windows pour configurer la luminosité en abaissant simplement le curseur prévu à cet effet.

#3 - Basculer en plan d’alimentation économique

La zone de notification Windows est pourvue d’une icône en forme de batterie. Cliquez donc dessus puis cochez Économies d’énergie. De cette manière, l’utilisation du processeur et de la carte graphique seront réduites à leur minimum. Vous remarquerez au passage que l’interface Aero s’est désactivée - vu qu’elle nécessite l’usage de la carte graphique.

Capture d'écran - Mode d'alimentation, Économies d'énergie

A première vue, il pourrait être utile de basculer en mode économique juste avant de partir en déplacement de sorte que le PC se lance directement en mode d’économies d’énergies. Personnellement, je ne vous le recommande pas car le PC mettra beaucoup plus de temps à démarrer et paradoxalement aura besoin de plus d’énergies pour se lancer correctement. Ceci est particulièrement vrai sous Windows Vista.

#4 - Libérer les ports USB

Chaque port USB consomme de l’électricité et a donc un impact négatif sur l’autonomie de la batterie. Une règle simple consiste donc à débrancher tous les périphériques sans exception.

Utilisez votre touchpad - pavé tactile, en guise de souris. Si vous ne pouvez vous passer d’une souris alors éteignez votre touchpad via le bouton prévu à cet effet sur votre PC.

#5 - Fermer les applications inutiles

Toute application en mémoire consomme de l’énergie. Contentez-vous de n’utiliser qu’une application à la fois : navigateur Internet, client mail, messagerie instantanée, logiciels de bureautique, etc.

En aucun cas, ne pratiquez l’une des activités suivantes :

• Jeux vidéo ;
• Montage vidéo ;
• Retouche photo ;

N’hésitez pas à tuer les processus inutiles. Pour cela, pressez simultanément les touches Ctrl + Maj + Echap puis cliquez sur l’onglet Processus. Effectuez ensuite un classement par utilisation mémoire en cliquant sur l’intitulé de la colonne en question. Identifiez les éléments fautifs inutiles puis faites un clic droit Terminer le processus.

Capture d'écran - Gestionnaire des tâches, "killing process"

Un moyen très rapide de fermer des systèmes de mises à jour - qui tenteront de se connecter à Internet sans succès si vous avez appliqué le premier conseil, les clients mails tels que Outlook qui tourne en tâche de fond malgré leur fermeture, etc.

#6 - Éteindre la webcam

Là encore, si la webcam reste allumée en permanence, coupez-là via le bouton prévu à cet effet ou à l’aide du logiciel fourni lors de l’achat. Notez cependant qu’il est fort probable qu’elle ne s’allume qu’à la demande. Dans ce cas, passez au point suivant.

#7 - Fermer la sidebar de Vista

Si vous utilisez la barre latérale qui contient les différents widgets alors fermez complètement celle-ci. N’oubliez pas qu’elle ne fait que se réduire dans la zone de notification dans un premier temps. Il faut donc faire un clic droit sur l’icône en question pour la faire disparaître complètement.

#8 - Arrêter l’exécution de Windows DreamScene

Cela va de soi mais l’utilisation de DreamScene - arrière-plan vidéo animé disponible uniquement pour la version Ultimate de Vista, nécessite énormément de ressources système et donc d’énergie.

Pour l’arrêter, faites un clic droit sur le Bureau puis Interrompre DreamScene.

Pour les fans de DreamScene, vous pouvez télécharger 24 vidéos HD de qualité.

#9 - Désactiver les système de sécurité

Si vous n’êtes pas connecté à Internet et que vous n’envisagez pas de connecter des périphériques de stockage amovibles dont vous ne connaissez pas la source (clé USB, carte SD, CD, DVD, etc.), alors vous n’avez aucun besoin d’utiliser une suite de sécurité (antivirus, antispyware, etc.).

En effet, ces logiciels utilisent pour la plupart une protection en temps réel qui vérifie vos données en continu et ralentit donc leur accès. Au final, c’est la batterie qui en prend un coup.

Fermez donc toutes ces applications ou du moins mettez-les au point mort. Pour aller plus loin, tuez carrément le processus comme indiqué au point 5. Rassurez -vous, les processus seront automatiquement restaurés lors du prochain redémarrage.

#10 - Utiliser un système d’exploitation préchargé sur la carte mère

Cette fonctionnalité récente n’est pas encore disponible sur la majorité des ordinateurs portables. Certaines séries de portables ASUS - technologie Express Gate, l’ont mais cela reste à vérifier pour les autres constructeurs.

Quoiqu’il en soit, il existe une touche permettant de démarrer un système d’exploitation alternatif - à base de Linux, directement à partir de la carte mère. Ainsi, en quelques secondes vous pourrez lancer des applications de base (navigateur Internet, lecteur multimédia, etc.) dans un environnement ultra-restreint et donc peu consommateur d’énergies.

Idéal pour des usages courts et spécifiques et donc en déplacement ! Bien qu’encore au stade expérimental, il est fort à parier que de plus en plus de modèles seront équipées de cette nouvelle technologie.

Bonus

#1 - Utiliser la mise en veille prolongée

Lorsque vous aurez atteint le seuil critique d’utilisation de votre batterie alors dépêchez-vous d’enregistrer votre travail puis passez en mode veille prolongée pour le restaurer dès que vous aurez accès à une alimentation sur secteur.

Pour en savoir plus, consultez l’article Activer / désactiver la mise en veille prolongée.

#2 - Entretenir sa batterie

Il est recommandé de ne pas décharger complètement une batterie et d’enlever cette dernière lorsque vous ne prévoyez pas de l’utiliser. Toutefois, si vous êtes souvent victime de micro-coupures ou de baisse de tension répétées pour de multiples raisons, je vous conseille de la laisser brancher - je parle en connaissance de cause…

#3 - Acheter une batterie secondaire

C’est sans doute la solution la plus simple mais comptez tout de même 100 € pour une batterie équivalente. Attention à bien vous renseigner sur le type de batterie compatible.

#4 - Lectures complémentaires

Je vous recommande également la lecture de cet article intitulé Augmenter l’autonomie de PC portable sur le site Eclairement.

Si vous êtes parvenus à mettre en œuvre une bonne partie de ces conseils, vous devriez constater un gain non négligeable quand à la durée d’utilisation de votre ordinateur portable. Dans ma situation, je suis parvenu à économiser près de 15 minutes sur un portable qui pourtant est très énergivore en raison de sa configuration axée jeux vidéo. Si vous aussi vous connaissez d’autres solutions d’optimisation de la batterie, laissez un commentaire !