WordPress : Accélère ton site avec 6 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 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.

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.

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

et les statistiques détaillées.

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.

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

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

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.

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

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

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.

Dans le menu de gauche Réglages > Autoptimize

Onglet JS, CSS & HTML

Tu coches :

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

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

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

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

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

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.

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.

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.

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

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.

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.

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.

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.

Réglages > Optimize Webfonts

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

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

Tu génères la feuille de style.

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

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.

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.

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.

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.

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

Tu sélectionnes le plan gratuit.

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

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.

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.

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.

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

Tu valides :

• JavaScript
• CSS
• HTML

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

Scrape Shield

Tu déclenches Activer 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.

Tu indiques :

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

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

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é

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.

L’extension WordPress de CloudFlare

Ce plugin n’est pas obligatoire mais recommandé.

Réglages > Cloudflare

Tu connectes ton compte.

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

Tu cliques sur Global API Key.

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

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

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.

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

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

Tu remplaces ta police après family.

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.

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

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

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

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

La différence est flagrante sur mobile.

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

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

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

mais la version mobile reste en retrait.

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.

Des articles qui peuvent te plaire

• Réalise des visuels personnalisés en 3 minutes avec un générateur de mockups
• Personnalise le thème Twenty Seventeen
• Le contenu de ta page d’accueil

Retrouve tous les articles pour Créer seul ton site

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