WordPress : Accélère ton site avec 6 extensions gratuites

/

visuel de l'article WordPress : accélérer votre site avec ces 7 extensions

T Ton site s’affiche lentement. Je te montre concrètement comment j’ai réduit mon temps de chargement.

Google se base désormais sur la version mobile pour évaluer un site. Celle-ci est beaucoup plus exigeante techniquement.

Tu vas accélérer ton site, économiser de précieuses secondes et rendre le sourire à tes visiteurs et à Google.

Si tu es allergique à la technique, je te présente 5 extensions faciles à utiliser qui vont travailler à ta place.

Cet article prend environ 10 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

visuel pinterest de l'article 7 extensions pour accélérer WordPress

Tu débutes par le diagnostic de l’existant.

Teste la vitesse de ton site

Tu mesureras ainsi l’amélioration après optimisation.

Tu ouvres l’outil PageSpeed Insights de Google et complètes ton URL.

interface pagespeed insights

Tu débutes par l’onglet ordinateur. Tu découvres ta note globale

pagespeed insights note ordinateur

et les statistiques détaillées.

pagespeed insights résultats ordinateur

Les deux principales à retenir :

  • First Contentful Paint : l’attente avant que le premier contenu soit visible pour l’internaute. Ton visiteur est rassuré car il visualise qu’il se passe quelque chose.
  • Délai avant interactivité : Le temps d’attente avant que ton site soit complétement opérationnel.

Le but est de passer sous les 3 secondes même si cela est beaucoup plus facile à dire qu’à faire sur mobile.

Google se base désormais sur l’expérience mobile pour évaluer ton site.

pagespeed insights note mobile

Le résultat est catastrophique pour mon site. Les visiteurs prêts à patienter 17 longues secondes sont rarissimes.

pagespeed insights résultats mobile

Les explications fournies par Google pour améliorer les performances donnent des pistes mais sont souvent difficiles à appliquer.

recommandations google

Tu complètes ce test à l’aide de Pingdom. Tu indiques l’url de ton site et tu modifies le lieu du test pour Frankfurt.

Tu attends quelques secondes et découvres les résultats.

pingdom interface

Tu disposes d’une note sur 100 pour ta version ordinateur et le temps de chargement complet.

pingdom résultats

Tu retrouves une synthèse des axes d’amélioration.

pingdom améliorations

Tu débutes par une cure d’amincissement de ton code.

Compresse ton site avec Autoptimize

Avant de te lancer, tu réalises une sauvegarde complète de ton site. Une extension peut modifier l’apparence de certains thèmes. Dans ce cas, tu la supprimes.

Autoptimize optimise et centralise les codes de ton site : HTML, CSS et JavaScripts.

Tu installes l’extension.

extension autoptimize

Dans le menu de gauche Réglages > Autoptimize

Onglet JS, CSS & HTML

Tu coches :

  • Optimiser le code HTML
  • Optimiser le Javascript
  • Optimiser les CSS
autoptimize options

Si tu utilises Elementor, l’optimisation du code JavaScript peut bloquer l’éditeur.

Tu affines en activant les Réglages avancés.

réglages avancés

Dans Options JavaScript, tu coches Concaténer les fichiers JS

options javascript

et les 3 options suivantes dans CSS :

  • Concaténer les fichiers CSS
  • Agréger aussi les CSS inline
  • Génération de données : URI pour les images
options css

Onglet Extra

Tu coches Combiner et précharger dans l’entête (les polices se chargent plus tard mais ne bloquent pas le rendu de la page) si tu utilises les Google Fonts sinon tu les supprimes.

Tu peux également retirer le code qui gère les emojis.

autoptimize onglet extra

Tu vas voir le prochain plugin a plus d’un tour dans son sac.

Optimise tes bases et tes images avec WP-Optimize

WP-Optimize s’est enrichi et remplace désormais de nombreuses extensions.

Tu la retrouves dans le répertoire des extensions.

extension wp-optimise dans le répertoire de WordPress

Tu commences par nettoyer les données inutiles conservées dans WordPress.

Base de données

Avant de réaliser une optimisation, tu sauvegardes ton site comme conseillé. Je n’ai jamais rencontré le moindre problème.

Si tu as installé UpdraftPlus, tu coches « Faites une sauvegarde » pour une exécution automatique.

Tu coches toutes les cases et lances l’optimisation.

Je réalise cette opération une fois par mois. Autoptimize propose un automatisation mais je préfère l’exécuter manuellement après une sauvegarde intégrale du site.

optimisation de la base de données

Pense à regarder dans les commentaires en indésirable avant de lancer l’optimisation (accessibles directement par lien dans la liste). De plus, les sauvegardes intermédiaires des articles seront éliminées.

Images

Tu actives Automatiquement compresser les images nouvellement ajoutées et Show compression meta-box on an image’s dashboard media page.

Tu as trois options de compression :

  • maximale qui ne sera pas perceptible dans la majorité des cas mais qui peut dégrader certains visuels
  • conserver les détails où l’image sera identique à l’original
  • personnaliser permet de trouver un juste milieu

Dans les options avancées, tu peux conserver les images originales. Tu auras ainsi la possibilité d’annuler la compression.

Le poids de ton site sera plus important chez ton hébergeur. Cela peut être une bonne idée dans un premier temps si tu choisis la compression maximale.

Les données EXIF ne sont d’aucune utilité.

options pour compresser les images

Le cache génère une version figée de ton site. Cela économise le temps de calcul de la page.

Cache

Tu actives la fonctionnalité de cache. Le bouton Purge cache te sera utile quand tu auras réalisé une modification et que tu souhaites qu’elle soit directement visible.

activation cache

Si tu as une version AMP, tu coches Generate separate files for mobile devices.

cache séparé version mobile

Onglet Preload

Tu cliques sur Preload now pour remplir ton cache et coches Activate scheduled cache pour que le cache se reconstruise automatiquement à chaque renouvellement.

prechargement

Réglages

Tu désactives les rétroliens qui peuvent être une source de piratage.

désactiver les retroliens

Pour éviter que les visiteurs qui reviennent sur ton site chargent à nouveau les mêmes ressources, il est possible de définir des durées de conservation des fichiers dans leurs ordinateurs.

Active le cache navigateur

Tu installes Leverage Browser Caching.

plugin wordpress leverage browser caching

Pour les utilisateurs avertis :

Il est possible de réaliser la même opération en modifiant le fichier .htaccess de ton site. Tu trouveras la démarche pour Activer la mise en cache avec le fichier .htaccess sur WP Marmite.

How to Leverage Browser Caching in WordPress de CollectiveRay complète ce code avec les instructions pour un CDN comme CloudFlare.

Si tu utilises un constructeur de page ou un formulaire de contact uniquement sur ta page d’accueil, tu as la possibilité de le désactiver sur tes articles.

Précharge les Google Fonts

Host Google Fonts Locally charge les polices en amont pour qu’elles soient disponibles sans délais.

extension host google fonts locally

Réglages > Optimize Webfonts

Tu cherches tes polices en les séparant par une virgule.

recherche polices

Tu sélectionnes les versions Latines et supprimes les tailles non utilisées puis charges les polices.

chargement polices

Tu génères la feuille de style.

génère feuille style

Un Done apparaît pendant quelques secondes pour t’indiquer la réussite.

import effectué

Tu peux réaliser cette opération directement dans le code de ton site. Les instructions sont dans la partie avancée.

Tu supprimes le chargement des Google Fonts dans l’onglet extra d’Autoptimize.

supprimer google fonts autoptimize

Tu peux encore accélérer ton site pour la consultation des pages suivantes.

Une meilleure réactivité une fois sur ton site

Cette extension ne changera pas la vitesse lors des mesures mais aura un réel impact pour tes visiteurs.

Une fois que la page courante est chargée et stable, le serveur commence à précharger les pages dont le lien est visible sur la page. La page apparaît quasi-instantanément quand le visiteur clique sur le lien.

L’extension vérifie la vitesse de connexion du visiteur et la charge du serveur avant de lancer l’opération.

Il suffit d’installer Flying Pages. Les réglages par défaut conviennent à la majorité des cas.

Il est fortement recommandé d’avoir une extension de cache installée.

extension flying pages

De nombreux autres facteurs ralentissent ton site.

Les autres éléments qui influent sur la vitesse de chargement de ton site

Certaines extensions induisent des temps de chargement long comme Sumo pour les pop-ups par exemple. Le compromis entre la vitesse du site et son efficacité marketing est complexe.

Il existe également des plugins premiums comme WP Rocket qui sont réputés pour accélérer les sites.

L’optimisation des images au format Webp avec WebP Express permet de gagner sur le poids des visuels. Celui-ci n’est pas compatible avec Cloudflare qui propose ce service dans les abonnements payants.

Trois thèmes sont systématiquement cités pour leur rapidité de chargement :

  • OceanWP
  • Astra
  • GeneratePress

Je n’ai pas trouvé une différence flagrante au passage sous OceanWP.

Il existe des hébergeurs premium comme Kinsta spécialisés dans WordPress qui garantissent des performances optimales. Cependant, le prix est à l’avenant. À relativiser avec le chiffre d’affaires généré.

Les vidéos intégrées favorisent les ralentissements. J’ai remplacé celle de ma page d’accueil par une image fixe qui renvoie sur YouTube.

Une version AMP de ton site n’influera pas sur ta note. Pour tes lecteurs sur mobiles la différence est flagrante : ton site se charge en une seconde environ.

La contrepartie : cette version allégée limite fortement l’aspect visuel et les fonctionnalités.

Retrouve les explications pour installer l’AMP sur ton site.

La prochaine section monte fortement en difficulté. Si tu débutes, je te conseille de sauter à la conclusion et d’y revenir plus tard. C’est excellent, tu as fait 95 % du boulot.

picto articles avancés
Avancés

Tes visiteurs accèdent à ton site dans les meilleures conditions sur toute la planète.

J’ai eu la chance de bénéficier de l’aide du support de mon hébergeur.

Cloudflare pour diffuser mondialement

Cloudflare met gratuitement à ta disposition des data centers repartis au 4 coins du globe.

Tu ne constateras pas une amélioration notable si ton hébergeur est en France mais tes lecteurs Canadiens percevront la différence.

Tu t’inscris sur Cloudflare.

cloudflare inscription

Tu complètes l’URL de ton site sans https://www.

déclare ton site

Tu sélectionnes le plan gratuit.

plan gratuit

Tu dois retrouver ton site avec le nuage orange à côté.

reconnaissance de ton site

Tu changes les adresses de tes serveurs chez ton gestionnaire de nom de domaine ou chez ton hébergeur (si c’est lui qui le gère) vers celles de Cloudflare.

modifier noms serveurs

Je suis hébergé chez o2switch et c’est le support technique qui réalise cette opération.
Tu retrouves les instructions pour les principaux gestionnaires de nom de domaine.

instructions principaux gestionnaires domaines

Tu reçois un e-mail de Cloudflare dans les 24 heures pour indiquer la bonne prise en compte. Mon activation a été réalisée en 2 heures.

email activation

Dans Cloudflare, tu cliques sur ton site.

selection site cloudflare

Tu vas explorer les options qui s’offrent à toi à l’aide du menu principal.

Speed

Tu actives Rocket Loader.

activer rocket loader

Onglet optimization

onglet optimization

Tu valides :

  • JavaScript
  • CSS
  • HTML
minimization

Tu peux supprimer les adresses spécifiques de l’AMP. Toutes les visites seront unifiées dans tes rapports d’analyse.

amp

Scrape Shield

Tu déclenches Activer Hotlink Protection.

hotlink protection

DNS

Dans DNS, tu vérifies que tu n’aies pas de message d’alerte.

J’avais le message suivant : Add an MX record… Ce message précise que le serveur e-mail n’est pas correctement raccordé.

Dans ce cas précis, tu ajoutes un enregistrement.

ajout e-mail

Tu indiques :

  • Type : MX
  • Name : @
  • Mail server : le serveur e-mail indiqué par l’hébergeur
  • Priority : 1
configuration DNS MX pour serveur e-mail

Applications

Tu peux remplacer certaines de tes extensions par des équivalents directement hébergés sur Cloudlare et non sur WordPress.

Cookiless se substitue avantageusement à la barre d’avertissement de Cookie Notice.

Tu sélectionnes ton application

cookiless

et lances la prévisualisation.

previsualisation

Tu effectues les réglages, visualises le résultat sur ton site et installes si cela te convient.

  • texte du bandeau
  • texte du bouton
  • opacité
utilisation app

Pendant la phase de déploiement sur tous les serveurs (maximum 24 heures), les applications ne seront pas forcément visibles partout.

J’ai également installé le bouton de partage développé par Pinterest.

bouton pinterest

L’extension WordPress de CloudFlare

Ce plugin n’est pas obligatoire mais recommandé.

extension cloudflare

Réglages > Cloudflare

menu cloudflare

Tu connectes ton compte.

connexion cloudflare

Tu suis le lien pour récupérer la clé d’activation.

clé api

Tu cliques sur Global API Key.

clé api global

Tu saisis ton mot de passe Cloudflare et certifies ton humanité.

mot passe

Tu copies la clé dans WordPress puis lances l’optimisation.

optimisation cloudflare wordpress

Les polices ralentissent le chargement de ton site. Voici comment y remédier directement dans le code de ton thème.

Précharge tes polices dans l’en-tête de ton site

Tu installes l’extension Head, footer and post injections.

head footer post injections

Dans réglages > Header and Footer, tu copies le code suivant :

code header
<link rel="preload" href="https://fonts.googleapis.com/css?family=raleway=swap" as="fetch" crossorigin="anonymous">

Tu remplaces ta police après family.

changer police

Le plus simple est de reprendre l’intitulé des polices directement dans Google Fonts. Tu sélectionnes les polices que tu utilises et cliques sur sélection.

google fonts

Tu désactives le chargement des autres polices inutilisées dans Autoptimize > Extra.

supprimer google fonts dans autoptimize

J’ai ajouté une ligne supplémentaire car Google m’indiquait une fonte bloquante.

demandes clés bloquantes
<link rel="preload" as="font" href="https://www.pourpasunrond.fr/wp-content/themes/oceanwp/assets/fonts/simple-line-icons/Simple-Line-Icons.woff2?v=2.4.0" type="font/woff2" crossorigin="anonymous">

J’ai repris le code en effectuant un clic droit et copier l’adresse du lien.

Le résultat

Mes performances sont meilleures.

vitesse ordinateur

Je descends sous les deux secondes sur ordinateur avec un affichage en 1 seconde.

détail vitesse ordinateur

La différence est flagrante sur mobile.

vitesse mobile

C’est améliorable mais le site se charge sous les 5 secondes et s’affiche en moins de trois.

détail vitesse mobile

Pingdom indique un site qui se charge en moins d’une minute sur ordinateur.

vitesse pingdom finalisée

J’ai également réalisé le test sur une page standard du site avec de bons résultats

article optimisé
article optimisé détail

mais la version mobile reste en retrait.

mobile article
détail vitesse mobile article

Conclusion

J’ai cherché les outils les plus simples à utiliser pour améliorer concrètement la vitesse de chargement de ton site WordPress.

Tous ces outils sont gratuits. Il existe des solutions payantes pour passer au niveau supérieur. Elles sont à envisager en fonction du chiffre d’affaires généré par ton site.

[tweetshare tweet= »Accélère facilement ton site WordPress à l’aide de 7 extensions gratuites. » username= »pourpasunrond »]

La mise en cache diffère un peu les résultats. Tu peux refaire un test 24 heures plus tard pour mesurer les résultats finaux.

J’ai retiré l’extension pour le chargement différé des images (Lazy Load) car WordPress l’intègre directement depuis la version 5.5 d’août 2020.

Partage tes résultats avant/après dans les commentaires.

signature de Jean du site pour pas un rond

Des articles qui peuvent te plaire

Retrouve tous les articles pour Créer seul ton site

bannière newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean


17 réponses à “WordPress : Accélère ton site avec 6 extensions gratuites”

  1. Bonjour.
    Très bon article, qui permet de s’économiser des heures de recherches, pour savoir lequel est le meilleur entre WP-Rocket Hummingbird ou WP-Optimize.
    SI je puis me permettre, pourriez-vous faire des parties qui traitent de la compatibilité du thème Divi avec les plugins mentionnés ?
    Merci et bon courage.

    • Bonjour François,

      Je te remercie de ton commentaire.
      Effectivement, cela serait intéressant de tester la compatibilité des extensions avec DIVI. Je ne l’utilise pas au quotidien et ne serais pas le plus légitime pour en parler.

      Excellent dimanche,
      Jean

  2. Bonjour Jean,

    je découvre votre article aujourd’hui car je galère avec Elementor et autoptimize. Le bouton elementor de modification disparait directement dès que l’extension est active. J’ai décoché le javascript pour voir si cela pouvait toutefois m’aider mais la performance est quand même moyenne. Auriez-vous une petite idée ou conseil ? Le reste est ok, je me suis arrêté au CDN car mon activité est très locale. Merci en tous les cas pour toutes les infos que je découvre chez vous. Corine

    • Bonjour Corinne,

      Il est probable que la fonctionnalité d’optimisation des CSS et du javascript soit déjà exécutée par une autre extension probablement de cache. Le doublement ne fait pas bon ménage.

      Magnifique journée,
      Jean

  3. Bonjour Jean,
    Merci pour cet article et ton blog en général !
    Simple, clair, précis ! BRAVO !
    J’utilise actuellement la version gratuite de WP Fastest Cache, qui minimise déjà les fichiers HTLM, CSS et JS… est-il utile d’installer Autoptimize et Leverage Browser Caching ?
    Dans la même idée, est-il utile d’installer WP Optimize alors que je me sers de EWWW pour optimiser les images ? Peut-être pour nettoyer les bases quand même….
    Je sais qu’il peut y avoir des conflits entre plugin qui font le même travail et de toutes façon il vaut mieux virer les plugin inutiles…
    D’autre part, j’envisage d’installer WP Rocket (payant)… peut-être que cela simplifierai les choses avec moins de plugins différents car je crois qu’il fait toutes les actions que tu montre dans ton article (à coupler avec Cloudflare et EWWW pour les images) mais je ne suis pas sûr….
    Merci encore

    • Bonjour Sébastien,

      Je te confirme qu’il ne faut surtout pas avoir d’extensions redondantes sur l’optimisation HTLM, CSS et JS… donc Autoptimize sera inutile dans ton cas.

      Tu peux utiliser WP Optimize pour nettoyer tes bases sans activer la compression d’images.

      WP Rocket rassemble de nombreuses fonctions et est performant dans la majorité des cas.

      Cloudflare est à envisager si tu as une audience internationale.

      Belle fin de journée,
      Jean

  4. Bonjour Jean et merci pour cet article bien utile !
    Juste, j’utilise un pluggin ( Massive addons for wpbakery) qui ne fonctionne plus très bien depuis que j’ai effectué tout les changements si dessus. Impossible de savoir pourquoi.

    Merci à vous

    • Bonjour Romain,

      Je te remercie de ton commentaire.

      L’optimisation de la vitesse d’un site est un vaste sujet en particulier sur mobiles.

      Belle journée,
      Jean

    • Bonjour Magali,

      L’extension de Lazy Loading ne doit pas être compatible avec ton thème.

      Cette fonctionnalité devrait être intégrée dans WordPress prochainement.

      Belle fin de journée,
      Jean

  5. Bonjour Alain,

    Le chargement de polices Google ralentit ton site.
    L’explication avec family consiste à indiquer celle (ou celles) que tu utilises sur ton site. Raleway par exemple pour moi.

    A bientôt,
    Jean

  6. Bonjour, bon article, cependant je ne comprend pas ce que tu veux dire par :
    Tu remplaces ta police après family.
    y à un truc qui m échappe 😉
    cordialement

    • Bonjour Sylvie,

      Je te remercie de partager cette excellente nouvelle. Je suis heureux que tu es réussie à obtenir un aussi bon résultat.
      Je suis certain que tes lecteurs apprécieront.

      A bientôt,
      Jean

  7. Bonjour Jean et merci pour ce tuto qui m’a permis en effet de réduire un peu le chargement de mon site (4,6 –> 3,17 s). Je regarderai ultérieurement pour optimiser les images.
    Pour info, l’extension Autoptimize a générer sur mon site des modifications importantes de CSS (couleurs et fonts), j’ai préféré donc la désinstaller et tout est rentré dans l’ordre !

    • Bonjour Béa,

      Cela fait plaisir d’avoir de tes nouvelles. Je vais ajouter une note dans l’article concernant Autoptimize.

      Tu as amélioré ta vitesse de 30 % et tu es proche des 3 secondes. C’est une bonne performance.
      Quand tu auras un peu de temps, tu pourras t’attaquer aux images les plus volumineuses. Mais ton temps de chargement n’est pas trop élevé.

      A bientôt,
      Jean

Répondre à Romain Annuler la réponse

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