fbpx
Freelance en webmarketing, SEO, communication et graphisme

Comment bien optimiser WordPress ? Ne fais pas les mĂȘmes erreurs que moi !!! #GoogleFriendlyDream

J’ai le plaisir aujourd’hui de te prĂ©senter la premiĂšre grande erreur que j’ai commise sur le Workshop BITN : crĂ©er sa marque de vĂȘtement en ligne
 J’ai nommĂ© : ne pas optimiser WordPress !!! FiĂšre de moi et remplie d’une envie d’avancer, j’ai rapidement voulu voir du concret. J’avais pourtant pensĂ© Ă  tout : UX, UI, conversion, identitĂ©, produit
 Tout Ă©tait beau, pensĂ© et rĂ©flĂ©chit… MAIS (eh oui, il y a toujours un “mais”), mon site Ă©tait devenu terriblement lent. À en faire fuir les visiteurs et les robots de Google. Et le pire dans tout ça ? Je n’ai vu cela qu’une fois le site mis en place, c’est-Ă -dire Ă  la fin du travail
 #GrandeFrustration

🚀 ‱ Comment bien optimiser WordPress ? Google friendly dream ‱ Yalpel.fr #1
Success Kid

Alors oui, moi le premier, je suis convaincu que l’on apprend Ă©normĂ©ment en faisant nos propres expĂ©riences et erreurs. Mais si tu savais le temps et l’énergie que j’aurais pu Ă©conomiser si j’avais eu cet article sous les yeux il a quelque mois. đŸ˜±

Alors, fais chauffer ta boisson, pose-toi confortablement et prends des notes, car aujourd’hui on va optimiser WordPress !!

Avant d’optimiser WordPress, la premiĂšre chose Ă  faire et de regarder ou en est ton site internet ?

La semaine derniĂšre, on a vu ensemble comment crĂ©er sa boutique en ligne grĂące Ă  WordPress et WooCommerce.  Assez fier du travail accompli, je dĂ©cide de mettre dans la confidence des amis en leur demandant de parcourir le site Ă  la recherche de bugs et autres failles. Ni une, ni deux, le constat tombe rapidement : mon site https://bitn.fr/ prend un temps fou Ă  charger.

Mais dis donc Jamy : « pourquoi chercher Ă  optimiser WordPress ?

En voilĂ  une bonne question. C’est vrai aprĂšs tout, si tout est fonctionnel et que le site est attractif ce ne sont pas quelques images lourdes ou quelques secondes de chargement en plus qui vont me faire trop de mal ? Et bien
 SI !!!

Il faut savoir qu’en France, la trĂšs grande majoritĂ© des recherches passe par notre ami Google qui, pour classer ces rĂ©sultats, fait appel Ă  un ensemble d’algorithmes obscurs, j’ai nommĂ© : Page rank.

Heureusement pour nous, certains critĂšres utilisĂ©s par l’algorithme pour crawler et classer le web sont bien connus des SEO Master. (Et de nous autres apprentis sorciers). Le jeu est alors assez simple : respecter au mieux les critĂšres dĂ©finis par Google pour optimiser son classement dans les recherches. Bien sĂ»r, cette approche n’est qu’un Ă©lĂ©ment d’un ensemble plus vaste (le fameux SEO), mais j’y reviendrais en temps voulu. Or Google nous le dit bien, en 2019 ton site est :

  • ➡   Conçu avant tout pour les mobiles.
  • ➡   ClassĂ© sur sa « rĂ©putation Â»
  • ➡   Un exemple de rapiditĂ©, il est fluide et respectueux de l’utilisateur

Et ce dernier point n’est pas juste un petit critĂšre. Non, non, il peut Ă  lui seul vous faire tomber dans les mĂ©andres du web alors que vous venez tout juste de venir au monde !

Autre raison ultra importante d’optimiser WordPress (en l’occurrence la rapiditĂ©) : ne pas faire fuir les visiteurs !!! On a tendance, nous autres marketeurs, a nous focus sur l’algorithme, en oubliant parfois, que ce sont les visiteurs nos “clients”. Or, un site lent Ă  charger c’est de nombreuses visites en moins et une image de marque qui en pĂątit
 Le risque est de voir Ă©normĂ©ment d’abandons et un taux de rebond catastrophique, chose que personne ne veut.

Comment voir la rapiditĂ© de son site ? Un petit test des performances et gĂ©nĂ©ralement
 La sentence tombe !

Si tu as des amis gentils et dĂ©vouĂ©s (ou redevables) un bon premier exercice pour savoir par oĂč commencer pour optimiser WordPress est de soumettre ton site Ă  leurs critiques acerbes !

Dans mon cas, c’est fort du retour de mes bĂȘta-testeurs que je dĂ©cide d’approfondir l’audit en passant Ă  l’étape supĂ©rieure. En effet, il existe sur le web une multitude de services permettant d’analyser son site et de mettre en exergue les Ă©lĂ©ments clĂ©s permettant d’optimiser ce dernier. (Vitesse, SEO, temps de chargement, poids des pages, gestions et appels des ressources
)

Pour approfondir l’audit de BITN, j’ai choisi de me fier aux gĂ©ants du marchĂ© proposant des offres gratuites. J’ai sĂ©lectionnĂ© 4 acteurs et retenu comme critĂšres d’analyse le poids de la page testĂ©e, son temps de chargement, sa note, et le nombre de requĂȘtes serveur (internes comme externes). Bien sĂ»r je te conseille fortement de tarder sur une lecture complĂšte du rapport des diffĂ©rents tests, c’est toujours trĂšs instructif ! Allez, place aux rĂ©sultats (attention ce n’est pas beau) :

  • ➡ tools.pingdom.com ‱ 1,5mo ‱ chargement 2,6s ‱ note 74% ‱ 71 requĂȘtes
  • ➡ google page speed ‱ ?mo ‱ chargement ?,??s ‱ note 59% ‱ ?? requĂȘtes
  • ➡ gtmetrix.com ‱ 1,33mo ‱ chargement 3,3s ‱ note 62% ‱ 70 requĂȘtes
  • ➡ dareboost.com ‱ 1,55m ‱ chargement 3,7s ‱ note 69% ‱ 71 requĂȘtes

En bref, deux Ă©lĂ©ments ressortent clairement des tests :

  • ➡   Ma page est trop lourde, moi qui pourtant croyez avoir optimisĂ© mes images
  • ➡   Ma page renvoie beaucoup de requĂȘtes externes ce qui augmente drastiquement le temps de chargement

Je te laisse quelques screenshots des tests si tu souhaites approfondir le tout :

RĂ©sultats du test sur Dareboost
RĂ©sultats des tests PageSpeed Insights, Pingdom et GTmetrix

Avant de te partager mon retour d’expĂ©rience, je te propose une optimisation facile et efficace en 7 points :

PremiĂšrement, je prĂ©fĂšre le rappeler : il convient normalement de prendre en compte l’optimisation dĂšs la crĂ©ation d’un projet web. Mais si comme moi, tu apprends la leçon aprĂšs coup, pas de panique. En effet, WordPress permet de rebondir assez rapidement et sans trop de difficultĂ©s *ouf*. AprĂšs avoir Ă©cumĂ© le web, je te propose ma recette pour optimiser WordPress :

  • ➡   Supprimer les extensions et plugins inutiles
  • ➡   RĂ©duire le poids des images
  • ➡   Compresser les fichiers JavaScript et CSS
  • ➡   Utiliser un plugin de mise en cache
  • ➡   Limiter le nombre de rĂ©visions des pages
  • ➡   Nettoyer la base de donnĂ©es
  • ➡   DiffĂ©rer le chargement des images dans l’ordre de visibilitĂ© (LazyLoad)

Un gros merci au passage Ă  novo mĂ©dia et la fabrique du net pour leurs trĂšs bons articles sur le sujet. Place maintenant Ă  la mise en pratique, car sur le papier c’est beau, mais est-ce efficace ?

Il est maintenant temps de corriger tout ça pour enfin optimiser WordPress et se rĂ©concilier avec Google â€

Si la liste plus haut peut faire peur sur le papier, aprĂšs coup, je t’assure qu’il suffit de peu de temps et d’énergie pour cocher en un coup de nombreuses lignes. La solution se trouve, comme d’habitude avec WordPress, du cĂŽtĂ© des plugins. S’il ne faut pas utiliser trop de plugins et prĂ©fĂ©rer des solutions autres, pour le coup je n’y Ă©chapperai pas tant les deux plugins que j’ai utilisĂ©s offrent de nombreux avantages !

WP-Rocket : le couteau suisse de l’optimisation WordPress !!

PrĂ©sentĂ© comme un plugin de « cache WordPress Â», la promesse de WP-Rocket est d’accĂ©lĂ©rer mon site et ça tombe plutĂŽt bien non ? Une courte recherche web me montre rapidement le sĂ©rieux de ce plugin et de son Ă©diteur ainsi que de nombreux exemples de sites lui faisant confiance.

S’il est Ă©galement possible d’arriver aux mĂȘmes rĂ©sultats avec des solutions gratuites, WP-Rocket a le grand avantage de regrouper au sein d’un plugin simple et en français de nombreuses options Ă©numĂ©rĂ©es plus haut (la quasi-totalitĂ© en fait !).

Ainsi aprĂšs un rapide passage Ă  la caisse (39$ pour un an de mise Ă  jour), l’installation et la configuration s’avĂšrent rapides et simples. 10 minutes plus tard, j’ai optimisĂ© la mise en cache, la compression des fichiers CSS & JS, mes mĂ©dias avec la technique LazyLoad, et configurĂ© le nettoyage automatique de ma base de donnĂ©es !

Interface de WP-Rocket depuis le dashboard de WOrdPress

Optimisation des images avec Imagify

Du mĂȘme Ă©diteur, je dĂ©cide de m’attaquer Ă  mes images en choisissant la solution proposĂ©e par le plugin Imagify en restant sur la version gratuite et donc limitĂ©e Ă  50 mo par mois !

AprĂšs une courte configuration (toujours simple et en français) je m’attaque Ă  ma banque d’image en choisissant le rĂ©glage de compression intermĂ©diaire (mode agressif) qui me parait ĂȘtre un bon choix entre qualitĂ© et poids :

Promesse d’optimisation
Premier essai efficace mais à quel prix ?


Le constat est flagrant : 58% d’optimisation en sachant que je fais dĂ©jĂ  attention Ă  chaque export depuis Photoshop avec l’outil export web

Attention tout de mĂȘme, le plugin est rĂ©ellement agressif et la qualitĂ© des images peut ĂȘtre grandement atteinte. Par exemple pour BITN impossible d’optimiser les images des produits. La qualitĂ© chute vraiment trop. Le plugin est un outil de compression puissant qu’il faut utiliser avec soin, le mieux c’est de faire des tests sur une sĂ©rie d’images fraichement uploadĂ©e pour l’occasion.

Si WP-Rocket est vraiment une tuerie, aprĂšs coup Imagify peut vite devenir dangereux. Le mieux, et je ne le rĂ©pĂ©terai jamais assez dans l’article, est de prendre le problĂšme Ă  la source. Ici, il faut faire attention Ă  chacune de ses images dĂšs l’export sous Photoshop en faisant bien attention au poids et Ă  la dimension. Rien ne sert d’avoir une image .PNG en 3000×3000 si c’est pour ne pas utiliser la transparence et l’afficher en 600×600.

Optimiser WordPress : place aux nouveaux tests de performance et au bilan ! 

AprĂšs avoir minutieusement appliquĂ© chacun des points Ă©voquĂ©s plus haut, l’heure de repasser mon site Ă  la moulinette est venue. Sans plus tarder, voici les rĂ©sultats :

  • ➡ tools.pingdom.com ‱ 1mo ‱ chargement 1,97s ‱ note 75% ‱ 65 requĂȘtes
  • ➡ google page speed ‱ ?mo ‱ chargement ?,??s ‱ note 78% ‱ ?? requĂȘtes
  • ➡ gtmetrix.com ‱ 0,972mo ‱ chargement 3,6s ‱ note 66% ‱ 60 requĂȘtes
  • ➡ dareboost.com ‱ 0,972m ‱ chargement 3,2s ‱ note 73% ‱ 61 requĂȘtes

La progression est trĂšs bonne concernant le poids de la page, mais un peu moins sur le temps de chargement. Bien que la situation soit nettement mieux, mon site a toujours tendance Ă  ĂȘtre un peu lourd. La faute surement au thĂšme utilisĂ© et au choix de mon hĂ©bergement (pour rappel la formule la moins chĂšre). Pourtant, en visite rĂ©elle, je constate une belle diffĂ©rence avec un chargement qui parait plus rapide et plus de fluiditĂ© dans la page.

RĂ©sultats du test sur Dareboost aprĂšs optimisation
RĂ©sultats des tests PageSpeed Insights, Pingdom et GTmetrix

Au vu des derniers rĂ©sultats, j’estime avoir dĂ©jĂ  pas mal optimisĂ© mon installation de WordPress. Fini donc pour aujourd’hui. Je vais cependant devoir faire attention Ă  l’optimisation et y revenir de temps Ă  autre pour encore amĂ©liorer tout ça !

Conclusion : il faut optimiser WordPress dĂšs le dĂ©but de son projet web !!! J’ai bien appris ma leçon hein ?

Ce n’est pas trop dur de conclure un article comme celui-lĂ , j’ai juste un conseil Ă  te donner : ne fais pas la mĂȘme erreur que moi ! Et si jamais tu doutes de l’un de tes sites, tu sais maintenant ce qu’il te reste Ă  faire.

La prochaine fois, on continue avec un sujet qui me passionne parmi mes passions : le SEO

MĂȘme si l’optimisation fait partie des actions SEO, dans le prochain article on verra un SEO proactif et plus orientĂ© stratĂ©gie avec un zoom sur les mots-clĂ©s et l’optimisation de son Rancking.

Merci d’avoir lu jusqu’au bout. Je le dis Ă  chaque fois, mais l’espace commentaire est le tien et je me ferais un plaisir d’échanger avec toi. Si tu veux me donner un coup de main, n’hĂ©site pas Ă  partager cet article sur tes rĂ©seaux prĂ©fĂ©rĂ©, ça prend 1 minute et ça m’aide beaucoup, beaucoup, beaucoup !

Sur ce, je te dis Ă  bientĂŽt pour suivre mes prochaines aventures (ÂŽăƒ»Ï‰ăƒ»`)

➡ PrĂ©cĂ©demment : CrĂ©er sa boutique en ligne sur WordPress c’est vraiment facile ? Je te partage mon expĂ©rience !

Henrik LE PLAY

PassionnĂ© par l’univers du web, du marketing et de la crĂ©ation au sens large, j’ai dĂ©cidĂ© dĂšs 2014 de me spĂ©cialiser dans ce qui m’anime. Mes expĂ©riences m’ont amenĂ© Ă  m’intĂ©resser de prĂšs aux univers riches du marketing et de la communication et de leurs dĂ©clinaisons web.

Cet article t'a plu ? Alors partage-le !

Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn
Partager sur facebook
Facebook
Partager sur pinterest
Pinterest
Partager sur reddit
Reddit

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *