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

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 7 extensions faciles à utiliser qui vont travailler à ta place.

Cet article prend environ 11 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
picto articles débutants
Débutant

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

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.

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.

Réglages

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

désactiver les retroliens

Pourquoi charger toutes tes images avant que tes lecteurs n’aient débuté leur lecture ?

Charge tes images au dernier moment avec le Lazy Load

Avec A3 Lazy load, tes images s’affichent au fur et à mesure de l’avancement dans la page.

Cela n’aura pas d’impact sur la qualité de lecture mais ta page sera disponible plus rapidement en particulier si tu rédiges des articles longs et abondamment illustrés.

Tu installes A3 Lazy load dans les extensions du répertoire de WordPress.

extension a3 lazyload

Tu modifies l’apparence des images qui se chargent dans Réglages > A3 Lazy Load.

Dans la section Effect & Style, tu choisis ton affichage entre une apparition progressive (Fade in) et une animation avec une roue de chargement animée (Spinner) ainsi que la couleur de fond de l’image en cours de chargement.

apparence d'a3 lazy load

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.

Plugin organizer pour gérer tes extensions

Tu installes l’extension Plugin Organizer.

plugin organizer

Dans le menu Settings,

plugin organizer menu

tu actives Selective Plugin Loading.

plugin organizer activer sélection extensions

Dans Post Type Plugings, tu choisis dans les grandes masses les extensions qui seront présentes dans les articles (post) ou les pages. Tu cliques sur une extension pour la désactiver. Elle passe en rouge.

Si l’extension n’est utilisée que dans un nombre très limité de pages ou articles, tu la désactives au niveau général et l’actives au niveau de chaque page dans WordPress.

Tu disposes d’une nouvelle boîte de dialogue en bas de Gutenberg pour appliquer une exception.

Tu coches Override Post Type settings.

plugin organizer réglages individuels articles

Tu réalises une sélection spécifique pour cette page et enregistres la publication.

réglages article

Dans le doute, mieux vaut laisser une extension inutile que couper une fonctionnalité indispensable.

Tu visualises les articles avec une exception dans la liste. Ils apparaissent avec ON dans Post Type Override.

résumé des exceptions des articles

Les polices fournies gratuitement par Google sont une vraie opportunité pour personnaliser ton site mais bloquent le chargement.

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

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.

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

Speed

Tu actives 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.

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

Je pensais remplacer Sumo qui consomme énormément de ressources par Privy mais la version gratuite est trop limitée.

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

Apparence > Editeur de thème

editeur de theme WordPress

Tu sélectionnes ton thème enfant puis thème functions.

modifier le fichier fonctions.php

Tu passes une ligne et colles le code ci-dessous sous le code existant puis enregistres.

/* precharge font dans header */
add_action( 'wp_head', 'charge_gf' ); 
function themeprefix_load_fonts() { 
    ?> 
<link rel="preload" as="font" href="/fonts/custom-font.woff" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css?family=raleway=swap" as="fetch" crossorigin="anonymous">;
<!-- fin precharge --> 
    <?php 
}

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="/fonts/simple-line-icons/Simple-Line-Icons.woff2" type="font/woff2" crossorigin="anonymous">
texte à recopier pour polices personnalisées

J’ai repris le code depuis /fonts jusqu’au ?.

Le résultat

Mes performances sont meilleures mais loin d’être parfaites.

version ordinateur vitesse optimisée
ordinateur optimisé détail

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

mobile vitesse optimisée
mobile optimisé détail

Sur mobile, l’amélioration est nette mais n’est pas encore satisfaisante. Les visiteurs depuis Google obtiendront un meilleur service avec la version AMP.

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

pingdom résultats optimisation

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 est en retrait.

article mobile optimisé
article mobile optimisé détail

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.

Accélère facilement ton site WordPress à l'aide de 7 extensions gratuites.

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.

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

signature de Jean du site pour pas un rond
portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Des articles qui peuvent te plaire

Retrouve tous les articles pour Créer seul ton site

bannière newsletter
Résumé
WordPress : Accélère ton site avec 7 extensions gratuites [Tutoriel]
Article
WordPress : Accélère ton site avec 7 extensions gratuites [Tutoriel]
Description
Retrouve toutes les explications détaillées pour gagner de précieuses secondes sur le chargement de ton site WordPress.
Auteur
Publié par
pour pas un rond
Logo

Cet article a 4 commentaires

  1. 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 !

    1. 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

  2. Bonjour, je découvre le site et cet article. Verdict : j’ai divisé par deux le temps de chargement. 🙂 Merci.

    1. 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

Laisser un commentaire

Fermer le menu
vulputate, velit, felis Curabitur pulvinar Praesent risus adipiscing Donec