Besoin de créer une sidebar spécifique à votre thème WordPress, sans avoir à changer de thème ? Rien de plus facile… Voici la procédure pour « customiser » votre site, sans avoir passer par de profonds changements…
Les étapes :
Nous allons commencer en créant un document à l’aide de votre logiciel de développement préféré (pour ma part Notepad++). Dans ce cas précis, nous allons créer une sidebar qui sera spécifiquement utilisée pour la page d’accueil.
Nommez donc ce fichier en « sidebar-accueil.php » et collez-y le code suivant :
Cela faisait un moment que je souhaitais trouver une solution permettant d’accélérer les performances d’un de mes sites tournant sur WordPress. Bien que rapide à la base, je souhaitais en effet mesurer l’impact d’un site encore plus rapide, que ce soit en termes d’expérience utilisateur, ou en termes de référencement naturel.
Mais pas toujours évident de savoir comment s’y prendre…
Alors voici un aperçu de ce que j’ai du mettre en place sur le site guide-irlande.com, pour obtenir un site Web qui fuse littéralement…
Tout d’abord, voici la situation de départ sur GT Metrix :
Site sans système de cache
Pas brillant hein ? Alors démarrons notre optimisation :
Étape 1 : un hébergeur dimensionné à son site Web
Cela peut paraître logique, mais un site Web, pour bien fonctionner, doit reposer sur un hébergeur de qualité. Pour cela, j’ai fait le choix d’Infomaniak, uun hébergeur suisse dont la réputation n’est plus à faire. Très sérieux, il propose du mutualisé haut de gamme, pour un prix compétitif (120€ l’année avec le nom de domaine).
Fiable, il génère également des backups automatiques journaliers de votre site Web et de ses bases de données SQL.
Côté performance, cela n’a rien à voir avec les hébergeurs que j’ai pu tester précédemment. Infomaniak délivre des sites Webs rapides et efficaces…
Étape 2 : un thème WordPress clean
Mais un hébergeur, le meilleur soit-il, ne peut rien faire contre un site Web ou un thème mal codé… Et c’est là que nous entrons en jeu !
Bien que mon thème n’ait pas vraiment été mal codé, il lui manque effectivement pas mal d’optimisations… A commencer par la mise en place de sprites, où simplement, la mise en place de fonctionnalités php dans le fichier functions.php. Cela ne mange pas de pain, et permet souvent de se passer de plugins lourds et inutiles…
Ainsi, je peux mettre en place un système de pagination ou un fil d’ariane sans plugin, ce qui permet d’économiser des lignes de codes et des ressources serveur.
Étape 3 : le plugin Smush It pour vos images
En performances, le moindre octet compte. Voilà pourquoi il est très important de mettre à disposition des images compressées correctement. En effet, une image trop lourde peut saborder complètement vos efforts, et demander des temps supplémentaires de chargement de votre page.
Pour remédier au problème, nous vous conseillons d’utiliser le plgin WordPress Smush It, qui compresse vos images sans perte de qualité. Génial pour gagner quelques octets, à condition de posséder des images inférieures à 1Mo (c’est une restriction du plugin).
Étape 4 : un bon plugin de cache
C’est maintenant que les choses sérieuses commencent… Après avoir nettoyé votre thème des fonctions inutiles, ne reste plus qu’à choisir un bon plugin de cache.
J’en ai testé 2 pour ma part :
WP-Rocket : un plugin premium 100% français
W3 Total Cache : un plugin gratuit un tantinet plus compliqué
Bien que WP-Rocket propose des performances tout à fait remarquables (cf mon article sur le sujet), j’ai préférer choisir W3 Total Cache, qui plus complet, va nous permettre de régler plus finement le cache de notre site Web. (Attention, ce plugin s’adresse plutôt à des connaisseurs qu’à des novices. WP-Rocket fait sinon très bien son boulot, mais ne dispose que d’un nombre limité de réglages possibles).
Globalement, W3 Total Cache va nous permettre :
de mettre en cache les pages et la base de donnée du site
de minifier et de concaténer les fichiers HTML, JS et CSS
de mettre en place un système CDN
Pour cela, un paramétrage minutieux est nécessaire…
Au final, le résultat n’est pas trop mal, mais n’atteint pas non plus le score espéré.
Site avec W3 Total Cache
Visant le double A sur GT Metrix (histoire de satisfaire mon ego), je décide alors de suivre les conseils préconisés par GTMetrix, et de mettre en place le fameux système de CDN.
Étape 5 : mise en place du CDN Cloudflare
Un CDN Kézako ?
Pour ceux qui ne sauraient pas encore ce qu’est un CDN, il s’agit d’un réseau de serveurs, répartis dans le monde entier, coopérant ensemble afin de délivrer à l’internaute le contenu d’une page le plus rapidement possible en fonction de sa zone géographique.
Ce système a pour avantage de booster le temps de réponse d’un site, d’optimiser l’expérience utilisateur, tout en réduisant les coûts de bande passante (plutôt appréciable pour votre hébergeur).
Cloudflare
Je me suis donc décidée à explorer les différentes solutions CDN du marché, et celle de Cloudflare a su retenir mon attention.
Tout d’abord parce que le système est GRATUIT, archi-simple d’utilisation, et qu’il permet de bénéficier d’un CDN, sans avoir à délocaliser¨physiquement les fichiers de votre serveur.
(Plutôt bien pensé, si vous ne souhaitez pas devenir dépendant d’une solution tierce : Cloudflare permet un retour en arrière possible, sans avoir à rapatrier les données sur votre serveur d’hébergement.).
Côté mise en place, Cloudflare est intuitif et facile à intégrer. Après création de votre compte Cloudflare sur leur site dédié, il vous suffit de :
Renseigner le nom de domaine de votre site
Reparamétrer vos DNS comme indiqué auprès du registrar gérant votre nom
Installer et activer le plugin WordPress Cloudflare sur votre site
Simple comme bonjour donc !
Du côté du paramétrage
Une fois vos DNS changés et propagés, et votre plugin Cloudflare installé, ne reste plus qu’à aller affiner le paramétrage de votre CDN. Car Cloudflare propose différents niveaux de prestations, qui sont pour le moins impressionnants au vu de la gratuité du service.
Ainsi, Cloudflare vous propose non seulement une fonction de CDN, mais aussi un service de sécurité de votre site et d’optimisation des performances.
Au programme, Cloudflare propose donc :
la minification des fichiers JS, HTML et CSS
l’exécution asynchrone de vos javascripts
la protection de vos images, en empêchant le hotlinking
la protection des adresses mails apparaissants en clair sur vos pages
la protection de votre site, en empêchant toute attaque de bot
Le résultat
Le résultat est plutôt bluffant. Cette fois-ci, pas de doute possible, le site est rapide, et met moins d’une seconde à charger, tandis que le nombre de requête par page à diminué de moitié.
Site avec Cloudflare
Mon double A est désormais effectif sur GT Metrix, et un module gratuit, présent sur Cloudflare permet de mesurer la bande passante économisée depuis l’installation du CDN.
Les chiffres sont d’ailleurs impressionnants, et c’est Infomaniak qui va être content !
Côté expérience utilisateur, le confort de navigation est amélioré, et l’affichage des pages est immédiat.
Bref, Cloudflare est plutôt efficace, et fonctionne à merveille lorsqu’il est couplé à W3Total Cache. Ne reste plus qu’à patienter quelques semaines et voir si le CDN a un impact positif sur le nombre de pages vues !
On a toujours besoin d’optimiser son site Web, d’améliorer ses performances, d’alléger son serveur… Et pour cela, il est important de choisir un système de cache efficace.
C’est le défi que ce sont fixés 3 experts WordPress français, en lançant leur propre plugin de cache connu sous le nom de WP Rocket. Un plugin premium ambitieux, qui souhaite concurrencer les plus grands… Regardons-y de plus près…
Un plugin de cache simple d’utilisation
Peu d’options, pour des performances optimales !
En se penchant sur le site de l’extension, le ton est vite donné : avec WP Rocket, votre site se transforme en fusée. J’ai donc décidé de tenter l’expérience, en achetant la licence pour un seul site, pour la modique somme de 29€.
Je souhaitais l’installer sur le de Guide-Irlande.com, qui tournait jusqu’alors avec le plugin W3 Total Cache, un plugin très performant, mais souvent jugé trop complexe dans le paramétrage.
Après installation de WP Rocket, et quelques petits couacs rencontrés (l’installation de WP Rocket implique la désinstallation et la suppression complète de W3 Total Cache du serveur), j’ai pu mesurer les résultats.
Et autant le dire : ils sont impressionnants.
Après minification et concaténation du css, activation du lazy load, le résultat est plutôt sympa… Les pages fusent, les images sont affichées en un claquement de doigts, et l’expérience utilisateur est optimale.
Sur GTMetrix, les résultats le confirment : WP Rocket permet d’obtenir un site Web performant, sans aller s’embarrasser dans des paramétrages trop complexes.
Le résultat est à la hauteur pour un plugin avec si peu de paramètres à administrer. L’essentiel est natif, ce qui permet d’obtenir un score satisfaisant, sans passer trop de temps dans les tests et optimisation.
Pratique donc pour les gens ne souhaitant pas s’éterniser avec un plugin de cache trop complexe.
De plus, le temps d’affichage semble plus rapide qu’avec W3 Total Cache (contrairement aux chiffres annoncés par GT Metrix). Mais bien sûr, il est difficile de faire la part des choses entre les chiffres de GT Metrix et le ressenti utilisateur qui semble lui, nettement meilleur…
Après plus d’un mois d’utilisation, je compte encore poursuivre quelques semaines avec ce plugin pour me prononcer définitivement entre les 2 plugins.
En tout cas, l’extension française est encore toute neuve : sortie cet été 2013, elle a encore de belles perspectives d’évolution devant elle et les mises à jours vont bon train. De plus, le support est très efficace et l’équipe n’hésite pas à prendre le temps de vous répondre. Alors n’hésitez pas à le suivre de près : ce plugin va vite devenir un incontournable !
Pas toujours évident de choisir le plugin WordPress adapté à vos besoins SEO… Il faut avouer qu’ils sont légions sur WordPress, et qu’ils vous promettent tous monts et merveilles, pour apparaître en pôle position sur Google, Yahoo ou encore Bing…
Après plusieurs années de recherches, de tests, et de mesure, un seul plugin me semble actuellement en mesure de remplir à la perfection la mission qu’il s’est fixé. Je vous le donne en mille : il s’agit bel et bien de WordPress SEO by Yoast.
Un Plugin SEO, pourquoi faire ?
Enfonçons immédiatement une porte ouverte : OUI, WordPress est nativement optimisé pour le référencement. Toutefois, ces optimisations trouvent rapidement leurs limites, et se heurtent alors à des problématiques récurrentes, comme le Duplicate Content (pour ne citer que lui).
Voilà pourquoi un plugin SEO est nécessaire : il permet de pallier aux manquements de WordPress, et ainsi, d’obtenir un site Web aux petits oignons, qui sera optimisé, plus efficace, et surtout plus visible sur les moteurs de recherche (ce qui entraînera donc une augmentation potentielle du trafic).
WordPress SEO by Yoast : anatomie d’un plugin qui va booster votre visibilité
Pourquoi ce plugin, plutôt qu’un autre ?
Le plugin développé par Yoast, présente de très nombreux avantages. Véritable solution SEO, il permet d’obtenir une solution complète, sans avoir à installer d’autres plugins complémentaires.
Ainsi, il génère à lui seul :
des fichiers sitemaps XML sur mesure,
dispose également d’un système de fil d’ariane entièrement paramétrable,
intègre la gestion de micro-formats
intègre des fonctions propres aux réseaux sociaux,
permet également d’administrer la présentation du flux RSS.
et bien d’autres fonctions encore…
Mettons les mains dans le cambouis
Installation
Penchons-nous maintenant sur le fameux plugin en question. WordPress SEO by Yoast est téléchargeable à partir de sa page WordPress, disponible ici. Une fois téléchargé, il suffit de :
dézipper l’archive
la basculer sur votre serveur à l’aide de votre FTP préféré dans le dossier wp-content/plugins/.
activer le plugin dans la page de votre administration WordPress, sur la page « Extensions ».
A noter qu’il est possible, si vous aviez déjà utilisé un autre plugin auparavant, d’exporter les données de l’ancien plugin, pour les transférer sur WordPress SEO by Yoast. Ces transferts de données sont possibles si vous utilisiez HeadSpace2, All-In-One SEO, ou encore WooThemes SEO framework. Pour cela, rendez-vous sur l’onglet « Importer/Exporter » de WordPress SEO by Yoast, et suivez leurs instructions.
IMPORTANT : une fois votre export réalisé, désactivez et supprimez totalement votre ancienne extension. La co-existence de 2 plugins SEO pourrait en effet provoquer d’importants dysfonctionnements, et plomber votre référencement.
Paramétrage
Ne reste plus qu’à paramétrer la bête pour bénéficier de la pleine puissance de ce plugin. Voici pas à pas, et onglets par onglets comment paramétrer chaque Options. Ces paramétrages peuvent bien sûr être revus en fonction de votre site Web, et de sa structure.
Le Tableau de bord
Cette page n’est pas primordiale, mais possède tout de même une fonctionnalité sympa. Elle va vous permettre de rentrer les valeurs de vérifications pour Google Webmaster Tools, mais aussi pour Bing et Alexa. Plutôt pratique pour centraliser vos balises meta de vérification.
Titres & Métas
Cette page va vous permettre de paramétrer la gestion de vos titres de page (balise Title).
Onglet général :
Forcez la réécriture des titres : cochez la case
Ne pas indexer les sous-pages des archives : cochez la case
Utiliser la balise meta-keywords : décochez la case
Ajouter la balise meta robot « noodp » : cochez la case
Ajouter la balise méta robots noydir sur tout le site : cochez la case
Masquez les liens RSD : cochez la case
Masquer les liens manifestes WLW : cochez la case
Masquer le lien court pour les articles : cochez la case
Masquer les liens RSS : décochez la case
Accueil :
Le plugin vous propose de paramétrer à la main le titre et la description du site
Articles :
On vous propose ici de définir la structure de vos titres pour vos articles, pages, et médias. Choissisez une structure simple, composée du titre de votre page, ainsi que le nom du site. Pour cela, vous pouvez vous appuyer du dernier onglet « Aide », qui liste les différents codes à intégrer pour votre titre.
Taxonomie :
Même chose que pour l’onglet Articles. Ici, vous pouvez choisir la structure des vos titres pour les différentes taxonomies de WordPress. Choisissez également une structure simple et claire.
Autres :
Là encore, même principe. Vous pouvez définir vos titres pour les archives de l’auteur, les archives par date, ou encore pour des pages spéciales, de type recherche, ou page 404.
Réseaux sociaux
Cette page va vous permettre d’intégrer les données des réseaux sociaux sur lesquels votre site est implanté. Pas la peine bien sûr de renseigner ces informations, si vous n’êtes pas présent sur Facebook, Twitter ou Google (agissez au cas par cas).
Onglet Facebook :
Cochez Add Open Graph meta data.
Facebook Page URL : renseignez l’url de votre page Facebook si vous en avez-une
Réglages généraux : renseignez l’adresse url de l’image, ainsi que sa description. Il s’agit de l’image et la description utilisée dans l’Open Graph.
Onglet Twitter :
Cochez la case : « Ajoutes des métadonnées carte Twitter »
Renseignez ensuite votre nom d’utilisateur Twitter
Onglet Google+ :
Choisissez kl’auteur qui sera utilisé pour le rel= »author »
Renseignez l’url de votre page Google+
Sitemap XML
Les sitemap permettent d’informer Google, de la totalité des pages existantes de votre site. Bien que ce soit un élément moins déterminant, il est important de correctement l’utiliser, afin de faciliter le travail d’indexation des moteurs.
Cocher la case pour activer la fonctionnalité sitemap XML.
Cochez également les 2 cases Notifier Yahoo et Notifier Ask (ça ne mange pas de pain)
Cochez ensuite les post types à exclure de vos sitemap (cela varie en fonction de votre site)
Excluez les taxonomies que vous ne souhaitez pas intégrer au sitemap
Enfin, vous pouvez définir un nombre d’entrée maximum par sitemap. Cela n’est valable que pour les très gros sites
Permaliens
C’est ici que vous allez pouvoir améliorer la réécriture de vos permaliens.
Cocher la case pour enlever le répertoire de base de la catégorie (/category/.
Forcez également l’ajout d’une barre oblique
Redirigez le lien URL des pièces-jointes au lien URL de l’article parent.
Supprimez les variables « ?replytocom »
Décochez la case « rediriger les liens URL lais vers des permaliens propres.
Réglages des liens canoniques : laissez le réglage par défaut
Liens internes
Cette rubrique est à mons sens mal traduite, et devrait plutôt s’intituler « Fil d’ariane ». Elle va en effet vous permettre d’intégrer un fil d’ariane, sans extension WordPress supplémentaire.
Pour cela, activez l’afficahe du fil d’ariane, définissez un séparateur type,le texte d’ancrage de la page d’accueil (le nom de votre site le plus souvent), et intégrez le code php fournit dans votre thème WordPress.
RSS
Ici, vous allez pouvoir améliorer la présentation de votre flux RSS, en ajoutant du contenu avant chaque article, et en revendiquant la paternité, et donc la propriété de votre contenu.
Agissez à votre convenance, ici, il n’y a pas de règle stricte.
Dernière étape
Voilà pour les réglages ! A vous ensuite d’affiner en fonction de vos besoins spécifiques, et de vous servir de l’extension pour chaque article et page, en définissant un titre, un mot-clef, ainsi qu’une description pour chaque contenu. N’hésitez pas à suivre les conseils du plugins, en vous basant sur vvotre nombre de mots employés, la densité de mot-clef, la structuration sémantique et syntaxique de votre contenu, ainsi que votre maillage interne…etc.
Résultats observés
Le résultat est rapide et sans appel : la plupart des sites sur lesquels j’ai installé le plugin ont vu leur trafic doubler, voire tripler. Les positionnements du site ont positivement été améliorés, et notamment sur des requêtes hautement concurrentielles.
Mieux encore : ces positionnements semblent s’être installés dans la durée, et progressent encore au fil du temps.
