Extensions WordPress

• WP Super Cache  — Envie d’accélérer l’affichage de votre site ? La mise en cache est sans doute une partie de la solution en créant des pages HTML statiques à partir de pages dynamiques. Faites quand même attention à d’éventuelles sur-consommation CPU.
• Autoptimize — Réduit le nombre de requêtes et le poids de vos fichiers en concaténant et en compressant vos ressources HTML, CSS et Javascript.
• a3 Lazy Load — Vos pages utilisent de nombreuses images, mais vous ne voulez pas sacrifier la beauté sur l’autel de la performance ? Essayez donc le chargement paresseux.
• EWWW Image Optimizer — Les images sont décidément un goulot d’étranglement au regard des performances web. Avec cette extension vous assurez à vos visiteurs qu’ils ne téléchargent que la substantifique moelle de vos images.
• WP-Optimize — Après l’optimisation du front-end, passons au back-end : allégeons notre base de données.

HTML5 Boilerplate (.htaccess)

Le fichier .htaccess concocté par HTML5 Boilerplate est un véritable concentré de bonnes pratiques pour booster votre site :

• Cross-origin access pour les webfonts.
• CORS header pour les images lorsque le navigateur en fait la demande.
• Associe votre page 404.html à une erreur 404 error document.
• Améliore l’expérience utilisateur pour les utilisateurs d’Internet Explorer.
• Encode type MIME text/html et text/plain au format UTF-8.
• Active le moteur d’URL rewriting.
• Force ou supprime www. au début d’une URL.
• Bloque l’accès aux répertoires qui n’ont pas de document par défaut.
• Bloque l’accès aux fichiers sensibles.
• Réduit les risque liés aux type MIME.
• Force la compression (gzipping).
• Précise au navigateur s’il devrait effectuer une requête pour un fichier spécifique ou s’il devrait le récupérer dans le cache du navigateur.

Testez, il en restera toujours quelques chose

Voici quelques liens pour tester les performances de votre site :

• DareBoost dont j’ai fait une présentation dans cet article.
• WooRank — Pour corriger les erreurs de votre site et prendre une longueur d’avance sur vos concurrents.
• Web Page Test — Lancer des tests de performances à partir de plusieurs endroits sur la planète avec de vrais navigateurs (IE et Chrome) et une vitesse de connexion réaliste.
• PageSpeed Insights — Améliorez la vitesse de chargement de vos pages sur tous les appareils (bureau et mobile).
• YSlow — Propose des extensions pour Google Chrome, Firefox, Opera, Safari, voire même en ligne de commande, etc.

Au final, je me retrouve avec des extensions qui font plutôt bien le job et qui m’ont permis de gagner des points sur les sites d’audit de performances. Note : comme j’ai présenté dernièrement ces extensions au fur et à mesure de leur installation, sans plan d’ensemble, il m’a semblé utile de faire un billet récapitulatif pour les avoir sous la main. Il est donc possible que je mette à jour ce billet au fur et à mesure de mes découvertes sur ce sujet.

Pour aller plus loin

• Votre site web est obèse — Découvrez d’autres leviers pour optimiser les temps de chargement selon votre profil technique : Geek, Hacker ou Guru de la performance.
• Guide complet pour accélérer et optimiser WordPress — Tout est dans le titre !
• Performance web — Quelques mots d’Eric Daspet pour des sites web rapides.

Quelle structure ?

Pour faire simple, mon nouveau thème WordPress est composé principalement d’un template pour la page d’accueil et d’un autre pour les catégories auxquelles on peut accéder par le menus situé dans le header.

home.php

La page d’accueil est gérée par le fichier home.php. Il est composé de deux boucles : la première affiche soit le dernier article publié soit un « Sticky Post » tandis que la seconde affiche les trois derniers articles issus de la même rubrique que l’article affiché dans la première boucle.

En bas de cette page, un lien permet au visiteur d’afficher tous les billets de la même catégorie pour proposer du contenu similaire au dernier billet publié. C’est à la suite de ce lien que j’aimerai ajouter un lien vers cette nouvelle « rubrique » Archives.

index.php

Le template pour les rubriques n’est ni plus ni moins que le template index.php qui prend le relais de home.php selon la hiérarchie des templates.

Les sidebars

Ces différents modèles sont chargés d’appeler la barre latérale qui accueille, quant à elle : un moteur de recherche, des articles aléatoires, de la publicité, etc.

Les menus

Le menu principal situé dans le header mène vers les têtes de rubriques du site, tandis que le menu secondaire situé dans le footer permet d’accéder à des pages spécifiques : à propos, contact, blogroll (oui, ça existe encore), lien vers le thème WordPress Basics, etc.

Des archives ?

C’est déjà bien, mais il manquait la possibilité d’afficher la totalité des articles dans l’ordre de leur parution indépendamment de leur rubrique. Comme je le disais sur Twitter, c’est tout bête, mais j’ai quand même passé un peu de temps pour trouver une solution satisfaisante. J’ai d’abord cherché du côté d’une catégorie « catch all » pour les attraper toutes. (Il y aurait bien une solution basée sur un hack de l’argument post__in qui renvoie tous les articles lorsqu’il est vide, mais saymal

1. Créer le template archives.php

Revenons à notre section pour les archives du blog. Pour éviter de revoir de fond en comble la structure du site, j’ai décidé de créer un nouveau template archives.php en précisant dans l’en-tête que je veux qu’il soit compris comme un Modèle de page accessible lors de la création d’une pages depuis l’administration de WordPress. En cherchant sur Google, je suis tombé sur un billet concernant une astuce pour afficher une page autonome, parue sur — je vous le donne Emile : ici même ^^

Bref, pour cela, il suffit d’ajouter le commentaire suivant à l’intérieur des balises PHP :

[pastacode lang= »php » message= »Création d’un Modèle de page » highlight= » » provider= »manual »]

<?php
/* Template Name: Archives */
...
...
?>

[/pastacode]

J’ai créé le fichier archives.php à partir d’index.php présent dans le thème parent, je l’ai renommé et placé dans le thème enfant.

 2. Créer une page pour les archives

La deuxième opération consiste à créer une page vide intitulée « Archive »s (slug archives) et de choisir le Modèle de page « Archives » dans le menu déroulant à droite.

3. Créer un lien ou ajouter la page dans le menu

Dernière opération : la création d’un lien menant vers cette toute nouvelle section d’archives. Pour ce faire, il y a plusieurs possibilités : ajouter la page « Archives » dans un menu ou créer un lien manuel vers cette page.

4. Tester

La peinture est encore fraîche, mais vous pouvez tester cette nouveauté ici-même depuis le bas de la page d’accueil ou dans le menu présent dans le footer (bon, je suis sympa, voici le lien vers cette page d’archives) Je me tâte pour ajouter le lien dans le menu principal au cas où l’affichage des articles à la manière d’un blog est jugé indispensable ou pas.

Je précise qu’il est très certainement possible d’arriver à ce résultat en s’y prenant autrement,  mais j’avais envie de garder la structure de mon thème basé sur WordPress Basics en faisant le moins de modifications structurelles possibles et sans utiliser d’extension (point trop n’en faut).

Les différentes options sont réparties en trois grandes parties :

Optimiseur

Permet de choisir les règles de nettoyage pour supprimer les éléments suivants :

• Révisions d’articles.
• Brouillons automatiques.
• Commentaires indésirables.
• Commentaires non-approuvés.

En ce qui concerne les révisions d’articles on peut aussi se tourner vers les fonctions suivantes à ajouter au fichier wp-config.php situé à la racine de votre site.

[pastacode lang= »php » message= »Supprimer les révisions dans WordPress » highlight= » » provider= »manual »]

define('WP_POST_REVISIONS', false);

[/pastacode]

[pastacode lang= »php » message= »Limiter le nombre de révision à 5″ highlight= » » provider= »manual »]

define('WP_POST_REVISIONS', 5);

[/pastacode]

Toutefois, si vous avez tendance à faire beaucoup de modifications avant de publier un article, vous aurez peut-être besoin d’un maximum de révision au cas où. Du coup, il peut être intéressant de lancer la purge à la demande grâce à WP-Optimize.

Plus risqué (les options sont en rouge), on peut aussi lui confier de supprimer :

• Les options transitoires (transients).
• Les pingbacks.
• Les trackbacks.

En fin de processus, WP-Optimize est capable d’optimiser les tables de la base de données.

Tables

Affiche les tables de votre base de données et donne des informations comme le nom des tables, la taille des données, la taille de l’index, le type de données, et le gain après l’optimisation. A la fin du tableau, on peut voir la taille totale de la base de données et les optimisations possibles. Pour info, j’ai pu gagner près de 60 Mo.

Réglages

Si l’on peut optimiser ses tables depuis l’onglet Optimiseur, l’onglet Réglages permet quant à lui de programmer un nettoyage automatique. Il est possible de conserver les données des dernières semaines.

Cerise sur le gâteau, cette extension est elle-même optimisée pour être utilisée depuis un appareil mobile.

→ Téléchargez WP-Optimize.

Cette extension permet d’optimiser automatiquement les images lors de l’importation dans WordPress et propose un outil d’optimisation de masse depuis la page d’accueil du plugin pour les images déjà téléchargées dans la bibliothèque de Médias (également disponible depuis l’onglet Médias > Optimisation de masse). Par ailleurs, il est possible de choisir les images à traiter en les affichant en mode Liste à la place du mode Grille depuis le menu Médias.

En ce qui concerne les options pour paramétrer EWWW Image Optimizer, je vous laisse avec le tutoriel Configurer EWWW Image Optimizer qui fait le point sur l’essentiel.

Cerise sur le gâteau, EWWW Image Optimizer est compatible avec Grand Flagallery et NextGEN.

→ Téléchargez EWWW Image Optimizer.

Utilisation

Précisez le langage que vous voulez afficher :

• HTML,
• CSS,
• Javascript,
• PHP,
• C,
• C++,
• Java,
• Sass,
• Python,
• Ruby,
• SQl,
• Coffeescript.

Choisissez votre mode d’insertion et remplissez les champs adéquats :

• Manuel (on choisit son langage et on copie-colle),
• Depuis Github,
• Gist,
• Bitbucket,
• pastebin,
• Depuis un fichier présent dans la bibliothèque.

Ça fonctionne bien ?

Oui, mais il faudra « reshortcoder » les codes présents dans les anciens articles et à-priori, pas de coloration pour les bouts de code inline.

Apparition de deux barres de défilement assez disgracieuses : une pour la balise <pre> et l’autre pour la balise <code>. J’ai contourné le problème vite fait mal fait pour l’instant en modifiant très légèrement la CSS du plugin en mettant à zéro le padding sur l’élément <pre> et en augmentant le padding à 1.5em sur l’élément <code> :

[pastacode lang= »css » message= »prism-coy.css » highlight= » » provider= »manual »]

/* Code blocks */
pre[class*="language-"] {
	/* ... */
	padding: 0;
	/* ... */
}

[/pastacode]

[pastacode lang= »css » message= »prism-coy.css » highlight= » » provider= »manual »]

code[class*="language"] {
	/* ... */
	padding: 1.5em;
	/* ... */
}

[/pastacode]

Par ailleurs, lorsqu’on ajoute du code, ce dernier n’est plus visible dans l’éditeur de WordPress quand on est en mode Visuel. Il faut passer en mode Texte pour se relire, ou alors cliquer sur l’icône de modification du code que l’on a copié-collé. Du coup, il vaut mieux préciser le champs Titre du code pour s’y retrouver.

Conclusion

Malgré les bémols précédents, Pastacode semble être la solution idéale pour ajouter la coloration syntaxique dans les blocs de code de son site sans être obligé de passer par le mode Texte. Tout peut se faire en passant par l’éditeur Visuel de WordPress.

→ Installer l’extension Pastacode.

Comment ça, je suis tracé ?

Et oui, un système de blog comme WordPress utilise des Cookies, a fortiori lorsqu’il intègre des annonces Adsense, un système de mesure d’audience ou tout simplement des boutons de partage sur les réseaux sociaux. Bref, les Cookies sont partout et c’est bien de le faire savoir.

Cookie Notice

C’est pourquoi je me suis tourné vers l’extension WordPress Cookie Notice qui permet d’afficher un message informant l’utilisateur que le fait de continuer à naviguer sur le site vaut pour acceptation. Bien sûr, légalement, ça ne suffit pas, puisqu’il faudrait, pour être en règle, que l’utilisateur puisse refuser les cookies et continuer à consulter le site sans problème.

Parmi les fonctionnalités de cette extension, j’ai noté le fait de pouvoir :

• personnaliser le message,
• ajouter un bouton pour fermer le bandeau,
• ajouter un lien vers plus d’information,
• insérer le script dans l’en-tête ou dans le footer,
• choisir l’emplacement du bandeau (en-tête ou pied de page),
• modifier les couleurs du texte et du fond,
• choisir la durée de vie du cookie (1 mois par défaut),
• désactiver les cookies non fonctionnels (qui ne gênent pas l’utilisation du site).

Vous trouvez sur la page Cookie notice de Daikin une vue d’ensemble des différents types de Cookies existants, ce qui pourra servir d’exemple pour présenter les cookies au public. Par ailleurs, cette page de la CNIL vous donnera toutes les informations nécessaires pour comprendre l’esprit de cette directive.

Si vous êtes intéressé par le sujet des mentions légales à apposer sur votre site à vocation professionnelle, vous lirez avec profit la page dédiée sur le site du Service Public.

→ Installer Cookie Notice (ou pas).

PS : A propos de tracking, hasard ou non, mais j’ai eu une annonce Adsense pour la société Daikin juste après avoir prévisualisé l’article en cours de rédaction…

Lazy load ?

Cette technique, appelée Lazy load (pour chargement paresseux) fonctionne grosso modo de la manière suivante :

1. Remplace l’attribut src de l’image par un pixel transparent,
2. Stocke l’URL de l’image dans un attribut data-truc,
3. Remplace le pixel transparent via JavaScript par l’adresse de l’image à afficher lorsque l’utilisateur fait défiler la page jusqu’à l’image en détectant l’événement scroll.

Pour quoi ?

Pour ne pas priver WordPress d’une joie et mes visiteurs d’un affichage rapide, j’ai choisi d’installer a3 Lazy Load. L’extension prend en compte les éléments suivants :

• Images contenus dans les articles, les pages, les zones de Widgets (sidebar, header et footer), ainsi qu’aux miniatures et aux gravatars.
• Vidéos Youtube, Vimeo, HTML5, etc. (consulter la liste des  contenus embarqués),
• Contenus présents dans une balise iframe (médias embarqués dans WordPress, Boutons Facebook, Profils Google+, cartes Google Maps, etc.)

Et puis quoi encore ?

a3 Lazy load est compatible avec les extensions WooCommerce, WP Super Cache et W3 Total Cache, ainsi qu’avec une architecture CDN ou encore avec des thèmes mobiles comme WPTouch ou MobilePress.

Parmi les autres points intéressants, j’ai noté les possibilités suivantes :

• Exclusion d’images ou vidéos en précisant les classes CSS concernées.
• Choix entre l’affichage d’un Preloader ou d’un effet de Fading le temps que l’image s’affiche.
• Choix entre inclure le script dans le head ou dans le footer.
• Utilisation de noscript si Javascript est aux abonnés absents.
• Compatible avec le framework jQueryMobile
• Et plein d’autres choses encore…

→ Téléchargez a3 Lazy Load

WP Super Cache

Après avoir utilisé pendant longtemps W3 Total Cache et en avoir fais les frais à une époque pour sur-consommation de CPU (bien que l’extension en elle-même ne fut peut-être pas la cause du problème), j’ai opté cette fois-ci pour WP Super Cache. Je me suis dit que l’intégration d’un plugin « Automattic » pourrait apporter un plus en terme de stabilité et de suivi.

Cette extension propose de nombreuses options réparties dans pas moins de 7 onglets, mais rassurez-vous, vous pourrez sans doute vous contenter du premier, qui regroupe les paramètres essentiels :

Easy

• Activation ou désactivation du cache.
• Teste du Cache.
• Suppression du cache.

Avancé

Vous pouvez vous contenter de cliquer sur les paramètres recommandés. Selon votre serveur, il se peut que vous deviez jongler entre plusieurs modes pour servir le cache : réécriture (.htaccess), PHP ou mise en cache de page héritée. A tester selon les warning et votre goût de l’aventure ^^.

• Possibilité de ne pas mettre en cache les fichiers contenant des paramètres d’URL,
• ou de vider le cache à chaque publication ou mise à jour d’articles.
• Support particulier pour périphériques mobiles en conjonction avec une extension comme Jetpack’s Mobile Theme Module, WPTouch, WordPress Mobile Edition ou WordPress Mobile Pack.

CDN

WP Super Cache permet d’utiliser un Content delivery network pour optimiser le parallélisme des requêtes.

Content

C’est là que l’on peut générer les statistiques du cache pour voir le nombre de fichiers impactés.

• Possibilité de supprimer les fichiers périmés,
• ou de supprimer tout le cache.

Autres onglets

• Préchargement — Précharge l’ensemble des fichiers pour transformer votre site dynamique en site statique.
• Extensions — Pour utilisateur averti (ce qui n’est pas mon cas en la matière).
• Débogage — Tout le nécessaire pour tenter de répondre à la question : « mais pourquoi ça veut pas ? »

Malgré ses qualités, WP Super Cache est moins complet que W3 Total Cache, notamment en ce qui concerne la concaténation et la minification des ressources CSS et JS. C’est pourquoi, je me suis dirigé vers une extension complémentaire.

Autoptimize

Parmi la multitude des extensions, mon choix s’est porté sur Autoptimize car l’auteur du plugin conseille WP Super Cache comme complément. Ceci permet de supposer qu’il ne devrait pas y avoir de problème de compatibilité entre les deux. Ce qui est toujours bon à prendre.

La fonction principale de ce plugin est de concaténer et de minifier les fichiers CSS et Javascript dans un fichier unique mis en cache en remplacement de la multitude de fichiers que vous avez installés (ou que d’autres extensions ont installés pour vous).

Parmi les options proposées :

HTML

• Optimiser le code HTML — Concatène et compresse votre code HTML.
• Préserver les commentaires HTML — Si vous souhaitez que vos commentaires HTML restent dans la page (nécessaire par exemple pour qu’Adsense fonctionne)

JavaScript

• Optimiser le code Javascript — Concatène et compresse votre code Javascript.
• Forcer le Javascript à charger dans l’en-tête de la page — Pour améliorer les performances, il est préférable d’inclure le Javascript à la fin du code HTML, mais cela peut parfois casser certaines pages (notamment pour les thèmes à utilisant jQuery).
• Chercher les scripts uniquement dans l’en-tête — Particulièrement intéressant en combinaison avec l’option précédente dans le cas de thèmes fonctionnant avec jQuery. Peut permettre de garder la taille du cache sous contrôle.
• Scripts à exclure — Liste des scripts que vous ne souhaitez pas optimiser.
• Ajouter une gestion des erreurs — Si votre script est cassé par des erreurs, vous pouvez essayer cette option à base de try catch.

CSS

• Optimiser le code CSS — Concatène et compresse votre code CSS.
• Données URI pour les images — Sélectionnez cette option pour inclure les petites images de fond dans le CSS lui-même au lieu d’un chargement séparé.
• Ne rechercher les styles que dans l’en-tête — N’optimise pas les CSS situées en dehors de l’en-tête. Si votre cache devient trop important, vous pouvez utiliser cette option.
• Inclure CSS principal dans l’HTML, reporter le reste —  Inclure la CSS principale dans le code HTML, mais ne charger les CSS optimisées qu’après le chargement de la page.
• Mettre les CSS dans votre code HTML — Mettre les CSS dans le code HTML. Peut améliorer les performances de votre site selon votre ratio Pages vues / Visiteurs.
• Exclure les CSS d’Autoptimise — Liste des fichiers CSS que vous souhaitez exclure de l’optimisation.

Je manque un peu de recul, mais à première vue, le combo WP Super Cache et Autoptimize a l’air de fonctionner à merveille.

• → WP Super Cache
• → Autoptimize

Dans le second cas, côté Visiteur, l’onglet affiche la valeur courante de la variable globale $wp_query, les templates utilisés et leur origine (thème parent, thème enfant ou en provenance d’une extension). A ce sujet, n’hésitez pas à jeter un œil à l’article Visualisez la hiérarchie des templates, histoire de réviser un peu

→ N’hésitez pas à installer Admin Bar Tools et à visiter la page du même nom pour prendre connaissance de toutes les possibilités que je n’ai fait effleurer.

Dans certains cas, on pourra se tourner vers les marqueurs conditionnels qui suivent la même logique que la hiérarchie des templates. Par exemple, au modèle de page page.php, correspond la fonction is_page(). Si les modifications sont minimes (ajout ou suppression de blocs), le marqueur conditionnel peut suffire, mais si les modifications sont plus importantes (changement de design) alors les modèles de pages sont nos amis.

Le codex contient bien un visuel mis à jour fin 2014 pour représenter cette hiérarchie :

Le site wphierarchy.com, créé par Rami Abraham et Michelle Schulp, propose la même chose, avec des liens contextuels en plus qui mènent vers les rubriques du codex en question, ce qui s’avère très pratique pour se rafraichir la mémoire.

Pour en savoir plus sur le codex et la manière de l’utiliser pour créer votre thème WordPress, je vous renvoie sur l’article Créer son site web avec WordPress de A à Z… avec le Codex ou vers WordPress Basics, mon Blank Theme.