Comment optimiser la vitesse d’un site WordPress ? Guide complet !

Vous souhaitez optimiser la vitesse d'un site WordPress ? Dans cet article, je vous propose des conseils très concrets à appliquer pour rendre votre site plus rapide.

La vitesse d'un site est sans doute mon cheval de bataille préféré ! Pourquoi ? Parce qu'un site trop lent est une source de frustration pour le visiteur, avec un impact négatif sur une multitude de plans : SEO, conversion, fidélisation, etc. Mettre en place un chantier d'optimisation n'est donc jamais une perte de temps !

Tester la vitesse de chargement pour un bon diagnostic

Avant de mettre en place des optimisations sur votre site WordPress, il est indispensable de tester la rapidité de votre site de manière objective, avec un outil qui va mesurer des indicateurs de performance essentiels.

Cette étape clé vous permettra d'identifier précisément les points de blocage propres à votre site : est-ce un serveur qui met trop longtemps à réagir ? Des images trop lourdes ? Des scripts mal gérés ? Un code mal écrit ? Cette phase de diagnostic sera utile pour prioriser les chantiers.

Si vous ne savez pas comment tester la vitesse de votre site, je vous donne des conseils dans un article dédié, il suffit de cliquer sur le lien : je vous explique quels outils utiliser et quels indicateurs de performance regarder en priorité.

En résumé, il faudra d'abord examiner les 3 métriques clés prises en compte par Google (Core Web Vitals), qui évaluent la vitesse de chargement perçue d'une page ("Largest Contentful Paint"), sa stabilité visuelle ("Cumulative Layout Shift) et sa réactivité aux interactions de l'internaute ("Interaction To Next Paint").

Quelles optimisations prioriser quand les Core Web Vitals ne sont pas bons ?

Si les indicateurs de performance clés pris en compte par Google ("Core Web Vitals") sont mauvais, c'est par là qu'il faut commencer. Je vais déjà vous donner quelques notions de base sur les pistes à creuser en fonction des indicateurs qui pèchent en termes de performance, vous trouverez des conseils plus concrets et opérationnels dans la suite de l'article.

Si le Largest Content Paint est mauvais (> 2.5 secondes), il faut...

• Optimiser les images.
• Charger les visuels seulement au moment où ils doivent être visibles par l'internaute (principe du "lazy loading").
• Optimiser les polices d'écriture.
• Optimiser les feuilles de style qui contrôlent l'apparence du site.
• Optimiser les scripts qui enrichissent les fonctionnalités du site.
• Vérifier que le serveur est rapide et réactif.

Si l'Interaction To Next Paint est mauvaise (> 200 millisecondes), il faut chercher en priorité à...

• Optimiser les scripts : leur nombre, leur complexité, le moment où ils se chargent...
• Minimiser les changements de mise en page en regroupant les modifications du style des pages grâce à des classes CSS dans les feuilles de style.
• Charger les ressources dont la page a besoin de manière intelligente, en priorisant les ressources critiques, indispensables pour que la page devienne vite interactive.
• Choisir avec soin les frameworks JavaScript et les bibliothèques utilisées par le site afin de cibler ceux qui visent la performance.
• Optimiser les feuilles de style.
• Optimiser les polices d'écriture.
• Améliorer la gestion des scripts tiers que vous chargez sur votre site (par exemple, si vous utilisez un outil de statistiques web, des pixels de réseaux sociaux, des outils d'analyse du comportement utilisateur, etc).

Enfin, si le Cumulative Layout Shift (CLS) est > 0.1, il faudra vous pencher sur...

• L'optimisation du code pour faire en sorte de réserver des espaces bien délimités et dimensionnés pour les images, les vidéos, les publicités chargées de manière dynamique, etc.
• L'optimisation du chargement des polices d'écriture.
• La priorisation du contenu chargé, pour que les éléments essentiels soient chargés dès le début afin d'éviter que la mise en page ne "saute" au fil du chargement.
• L'utilisation d'animations CSS pour rendre les changements de mise en page plus fluides.

Certaines bonnes pratiques peuvent être mises en place avec peu de connaissances techniques, notamment pour l'optimisation des images ou certaines améliorations des styles et scripts possibles via des extensions WordPress sans coder. Cependant, si vous voulez aller plus loin et que ces étapes ne suffisent pas, il faudra mettre les mains dans le code (ou trouver quelqu'un qui le fera à votre place).

Maintenant que nous avons vu ensemble quelques fondamentaux, parlons plus concrètement des actions à mettre en oeuvre pour optimiser la vitesse d'un site WordPress.

1. Optimiser les images sur WordPress

De ce que j'observe chez mes clients, les images sont très souvent le premier facteur qui impacte négativement la performance. Ce sont souvent les éléments les plus lourds d'une page, ce qui peut grandement affecter le LCP. Pour bien optimiser ce point, voici quelques conseils.

A) Choisissez le bon format d'image

Déjà, lorsque vous créez une image, celle-ci sera en général en JPEG si c'est une photo, en PNG quand il y a besoin d'utiliser la transparence ou des détails fins et en SVG pour des logos ou icônes... mais sur votre site, il est conseillé de proposer aussi les images dans un format plus moderne, comme le AVIF ou le WebP. C'est ce que suggère PageSpeed Insights quand l'outil vous donne ce conseil : "Diffusez des images aux formats nouvelle génération".

Pour ce faire, bon nombre d'extensions WordPress axées performance web proposent une option pour convertir automatiquement les images dans ces formats, tout en préservant le format d'origine pour les navigateurs qui ne seraient pas compatibles avec le WebP ou l'AVIF. C'est le cas par exemple de WP-Optimize, Imagify, ShortPixel, Converter for Media ou EWWW Image Optimizer.

B) Redimensionnez les images avant mise en ligne

Ne mettez pas en ligne par défaut de grandes images mais des images adaptées à la taille dans laquelle elles vont s'afficher. Il existe plein d'outils (Photoshop, Photofiltre, GIMP) et de services en ligne comme ResizeImage pour redimensionner les images avant de les uploader sur le site. C'est ce que suggère PageSpeed Insights en disant "Dimensionnez correctement les images".

Sur WordPress, vous pouvez aussi contrôler la taille des vignettes (miniatures d'images) que crée le site, soit en allant dans Réglages > Médias, soit en entrant une fonction sur mesure dans le fichier functions.php pour définir des tailles de vignettes :

function custom_image_sizes() {
    // Ajoute une nouvelle taille de vignette personnalisée de 300x200 pixels
    add_image_size('custom-thumb', 300, 200, true);
}
add_action('after_setup_theme', 'custom_image_sizes');

Ensuite, vous pouvez utiliser cette taille de vignette personnalisée dans vos thèmes et modèles WordPress avec la fonction the_post_thumbnail :

if ( has_post_thumbnail() ) {
    the_post_thumbnail('custom-thumb');
}

Par défaut, ces modifications ne s'appliquent qu'aux nouvelles images mises en ligne. Pour les appliquer aussi aux images existantes, utilisez un plugin comme Force Regenerate Thumbnails. Il permet de redimensionner toutes les vignettes et de créer celles correspondant aux nouveaux formats.

Par ailleurs, certains plugins de gestion d’images comme Smush ou ShortPixel peuvent automatiquement redimensionner et optimiser les images lors de leur mise en ligne.

C) Compressez les images

PageSpeed vous demande ceci : "Encodez les images de manière efficace".

Il faut savoir que compresser les images est une étape cruciale pour réduire leur poids sans compromettre leur qualité visuelle. Des plugins comme Smush, ShortPixel ou Imagify permettent de compresser les images lors de la mise en ligne, avec souvent plusieurs options :

• Une compression agressive, avec perte de qualité ("lossy"), pour les sites qui veulent miser à fond sur la performance quitte à sacrifier un peu la qualité visuelle.
• Une compression sans perte de qualité ("lossless").

D) Mettez en place le lazy loading ("chargement paresseux")

Si PageSpeed Insights vous dit : "Différez le chargement des images hors écran", alors il faut vous pencher sur le lazy loading, une technique qui permet de charger les images uniquement lorsqu'elles deviennent visibles dans la fenêtre d'affichage de l'utilisateur.

Cela réduit le temps de chargement initial des pages. Bonne nouvelle sur WordPress : cette fonctionnalité est intégrée nativement depuis la version 5.5.

Si vous avez besoin d'options plus avancées, certains plugins comme WP Rocket ou a3 Lazy Load permettent une configuration plus poussée du lazy loading.

E) Servez des images responsive

Pour vous assurer que les images s'affichent correctement sur toutes les tailles d'écran, il faut vérifier que votre thème sert bien des images responsive.

Normalement, WordPress le fait en générant plusieurs tailles d'image et en utilisant les attributs srcset et sizes. Vous pouvez vérifier que votre thème utilise bien ces attributs. Si vous regardez le code source des pages, les images doivent s'afficher via ce type de code, intégrant "srcset" et "sizes" :

<img src="image-small.jpg" srcset="image-small.jpg 600w, image-medium.jpg 1200w, image-large.jpg 2000w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" alt="Description de l'image">

Si votre thème ne les intègre pas, vous pouvez ajouter ces attributs via le fichier functions.php. Voici un exemple de fonction qui automatise le processus et ajoute "srcset" et "sizes" aux images :

function add_responsive_image_attributes($content) {
    if ( !is_admin() ) {
        $content = preg_replace('//i', '', $content);
    }
    return $content;
}
add_filter('the_content', 'add_responsive_image_attributes');

Les tailles peuvent être personnalisées selon vos besoins. Pour ceux qui préfèrent ne pas toucher au code, certains plugins peuvent aider à rendre les images responsive, comme Perfect Images ou ShortPixel Adaptive Images.

F) Spécifiez les dimensions des images dans le code

Il est primordial à ce propos que vos images aient une longueur et une largeur explicites dans le code (ligne "Les éléments d'image possèdent une width et une height explicites" dans les outils de test de la vitesse de chargement). Cette remarque s'applique aussi aux vidéos.

Cela permet que ces médias disposent d'un espace réservé dans la mise en page, même s'ils ne sont pas encore chargés. Ca évite un "saut" de la mise en page lorsqu'ils finissent par se charger, puisque l'on bloque leur emplacement dès le départ, même quand il est encore vide.

Par exemple :

<img src="mon-image.jpg" width="1200" height="600" alt="Un site web sur un ordinateur portable">

G) Supprimez les métadonnées des images avant mise en ligne

Les fichiers d'images stockent souvent des informations sur l'auteur ou les paramètres de prise de vue, sous forme de métadonnées EXIF. Elles impactent négativement le poids des fichiers, il est donc conseillé de les supprimer dans une perspective de performance Web.

Vous pouvez le faire avant la mise en ligne, lors du redimensionnement par exemple, avec votre logiciel photo habituel... ou via un plugin après mise en ligne. Smush ou EWWW Image Optimizer par exemple intègrent cette option.

H) Utilisez des sprites CSS

Par défaut, à chaque fois qu'une image est chargée cela génère une requête HTTP. Toutes ces requêtes ont un impact sur le temps de chargement d'un site. Pour limiter le nombre de requêtes, il est possible de combiner les petites images type icônes en une seule, un "sprite".

On utilise ensuite le langage CSS et plus précisément la propriété "background-position" pour contrôler quelle partie de cette grosse image on souhaite afficher.

Par exemple :

.iconequejaffiche {
  background-image: url('sprite.png');
  background-position: -10px -20px; /* Position de l'icône dans le sprite */
  width: 32px;
  height: 32px;
}

2. Optimiser le chargement des fichiers CSS, JS, HTML

C'est un deuxième axe d'optimisation souvent assez prioritaire. Il peut s'avérer très technique à mettre en œuvre mais offre d'excellentes perspectives d'amélioration de la rapidité de chargement.

A) Minifiez les fichiers de style, les scripts et le HTML

Lorsqu'un développeur écrit un script ou une feuille de style, il utilise en général des espaces, des sauts de ligne, des commentaires afin que son code soit lisible et facile à éditer. Cependant, une fois que l'on met en ligne ces fichiers pour les utiliser sur un site en production, il est important de les minifier en supprimant tous ces espaces inutiles et commentaires superflus afin de réduire leur poids.

Bon nombre de plugins de cache et de performance Web sur WordPress, comme WP Optimize ou WP Rocket, prennent en charge la minification des fichiers du thème et des extensions que vous utilisez.

Voici ce que donne le code post-minification :

Bien que négligé, le HTML peut lui aussi être minifié. N'hésitez pas à activer l'option si votre plugin la propose.

B) Gérez le chargement des ressources critiques

Sur une page web, on peut distinguer des ressources indispensables à la page (qu'on qualifie de "critiques") et d'autres qui sont facultatives. Par exemple, il est indispensable d'accéder au contenu texte, en revanche charger la petite icône représentant une flèche à côté du bouton "Lire la suite" n'est pas forcément incontournable.

Si PageSpeed Insights vous dit "Éliminez les ressources qui bloquent le rendu", il va falloir travailler sur l'ordre de chargement de ces différentes ressources.

Cela consiste par exemple à :

• Précharger les ressources critiques, en utilisant <link rel="preload"> dans le code du thème, au niveau des lignes qui chargent vos différents scripts et styles pour que ceux-ci soient chargés rapidement à l'ouverture de la page. C'est très utile pour les polices d'écriture, les fichiers CSS et scripts indispensables au chargement de la page sur laquelle on se trouve. Il existe des outils comme crittr (qui permet d'extraire les CSS critiques) et PurgeCSS (pour éliminer les CSS inutilisés) qui peuvent aider à identifier les parties d'un CSS à précharger.
• Ajouter des attributs "defer" sur les scripts qui doivent être exécutés après le rendu initial de la page (scripts moins prioritaires, correspondant par exemple à des fonctionnalités facultatives du site).
• Ajouter des attributs "async" aux scripts indépendants (qui ne dépendent pas d'autres scripts et peuvent être exécutés sans ordre spécifique). Dans le code, ça va ressembler à ça :

  <script src="script.js" async></script>

  Cela correspond à ce que l'on appelle un "chargement asynchrone" : le script se charge pendant que le navigateur continue à afficher le reste de la page, ce qui évite que tout le rendu de la page soit bloqué en attendant que le chargement se termine.

• Utiliser l'attribut "preconnect" sur les ressources situées sur des domaines externes, par exemple si vous chargez une police d'écriture issue d'un site tiers ou un script stocké sur un autre domaine que le vôtre. L'idée est de permettre au navigateur de se connecter à l'avance à ces domaines externes pour réduire la latence d'accès.
• Utiliser l'attribut "prefetch" sur des ressources qui risquent d'être utilisées plus tard par l'internaute. On les télécharge en arrière-plan et on les met en mémoire ("mise en cache") pour un usage ultérieur. Par exemple, dans une galerie photo, on pourrait imaginer charger à l'avance l'image suivante car il y a de fortes chances pour que l'internaute la consulte.

C) Activez la compression du texte

Pour réduire le temps de chargement d'une page, on peut aussi activer la compression (Gzip, Deflate ou Brotli) : elle permet tout simplement de réduire la taille des fichiers que votre serveur envoie vers le navigateur des internautes qui visitent votre site, afin de gagner en rapidité.

On peut l'activer sur WordPress par le biais d'un plugin comme WP Rocket, WP Fastest Cache ou encore W3 Total Cache, qui proposent tous l'option.

On peut également l'activer manuellement en ajoutant quelques lignes de code au fichier .htaccess, situé à la racine du site (au même niveau que le dossier wp-content), en y accédant via un client FTP et en le modifiant. Vous pouvez y ajouter ces lignes :

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml
</IfModule>

Ou, pour Brotli (qui est en général plus efficace que la compression Gzip et supporté par la plupart des navigateurs modernes) :

<IfModule mod_brotli.c>AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css application/javascript application/json image/svg+xml </IfModule>

Vérifiez ensuite que la compression fonctionne bien, en repassant la page dans un outil comme PageSpeed Insights et en regardant si la recommandation "Activez la compression de texte" a bien disparu de la liste des optimisations conseillées.

D) Minimisez les longues tâches JavaScript

L'optimisation des scripts implique aussi de minimiser les longues tâches JavaScript, qui bloquent le traitement de la page en cours (ce que l'on appelle le "thread principal" dans le jargon technique). En effet, si certaines tâches occupent trop le navigateur, cela retarde le moment auquel la page devient capable de répondre aux interactions de l'internaute, un point négatif en matière de performance.

L'idée est de diviser les scripts lourds en plus petites parties, en utilisant par exemple des API comme requestIdleCallback et setTimeout.

Par exemple :

functiondoLongTask() {
// Longue tâche divisée en petites tâches
requestIdleCallback(() => { // Code à exécuter quand le navigateur est inactif }); } 
setTimeout(doLongTask, 50); // Délai pour éviter de bloquer le thread principal

On peut aussi utiliser des Web Workers pour déplacer les calculs lourds à l'arrière-plan et éviter qu'ils n'affectent le thread principal.

E) Choisissez les bons frameworks et les bonnes librairies

Certains frameworks ou librairies en JavaScript sont plus optimisés que d'autres ou plus ciblés par rapport à l'usage d'un script précis, mieux vaut les privilégier. Preact, par exemple, est plus orienté performance que React. Alpine.js peut permettre des manipulations légères du DOM par rapport à jQuery, plus gourmand.

C'est un point qu'un développeur peut prendre en compte pour optimiser la vitesse d'un site WordPress dès sa conception ou lors d'une refonte complète orientée optimisation du temps de chargement.

F) Faites les bons choix pour les CSS

Comme je le mentionnais, les styles doivent aussi faire l'objet d'un traitement différencié, entre ressources critiques indispensables à la page et ressources moins prioritaires. On peut ainsi charger les styles critiques directement dans le "head" de la page (fichier header.php en général sur un thème WordPress), en chargement inline (on met directement le code sur la page dans une balise <style>)... et charger les styles secondaires de manière classique et asynchrone, via une feuille de style.

On peut aussi adoucir les changements de mise en place en prenant l'habitude d'utiliser des transitions CSS, par exemple :

.element {
  transition: all 0.3s ease-in-out;
}

L'utilisation de grilles CSS ou de boîtes flexibles (flexbox) est aussi plus efficace que les anciennes méthodes à base de tables pour créer des mises en page performantes.

G) Optimiser l'ordre de chargement des scripts et styles sur WordPress

Sur WordPress, on peut contrôler finement l'ordre de chargement des scripts et styles pour maximiser la performance, à l'aide des fonctions wp_enqueue_script et wp_enqueue_style.

L'idée de base est simple : on ne charge pas les ressources dans n'importe quel ordre sur un site, de la même manière que lorsque l'on déménage, on ne met pas au fond du camion le sac qui contient les clés avant d'empiler les cartons et les meubles devant ;) Avec le code, même principe : il y a un ordre...

Pour charger un script, on ajoute ce type de code dans le fichier functions.php. Ici, on choisit de charger "monscript.js" après avoir chargé jQuery :

function my_custom_scripts() {
    // Ici on charge jQuery
    wp_enqueue_script('jquery');
    // Ici on charge un script personnalisé placé dans le footer grâce au paramètre "true"
    wp_enqueue_script('monscript', get_template_directory_uri() . '/js/monscript.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

Sur le même principe, on peut utiliser wp_enqueue_style comme ceci :

function stylededie() {
    // On charge le style principal
    wp_enqueue_style('main-style', get_template_directory_uri() . '/css/style.css', array(), '1.0', 'all');
    
    // On charge un autre style uniquement si on se trouve sur le modèle de page mon-template.php
    if (is_page_template('mon-template.php')) {
        wp_enqueue_style('style-mon-template, get_template_directory_uri() . '/css/mon-template.css', array('main-style'), '1.0', 'all');
    }
}
add_action('wp_enqueue_scripts', 'stylededie');

Pour définir l'ordre de chargement des fichiers, suivez ces étapes :

• Listez tous les styles/scripts qui sont chargés sur vos pages (en regardant le code de la page) ;
• Vérifiez les doublons : assurez-vous qu'un même élément n'est pas chargé deux fois. Parfois, deux plugins peuvent appeler le même fichier, le chargeant ainsi en double. Si c'est le cas, utilisez les fonctions wp_dequeue_script ou wp_dequeue_style pour retirer le script ou le style en double de la liste des fichiers à charger. Par exemple, pour retirer un script chargé en double :

  function remove_duplicate_scripts() { wp_dequeue_script('jquery'); } add_action('wp_enqueue_scripts', 'remove_duplicate_scripts', 100);

• Définissez l'ordre de chargement : chargez d'abord les fichiers CSS, puis les fichiers JavaScript. Créez des fonctions sur WordPress qui utilisent wp_enqueue_script et wp_enqueue_style comme je l'ai montré à l'instant, pour s'assurer que les fichiers sont chargés dans le bon ordre.

H) Opter pour le chargement conditionnel

On peut vraiment optimiser les performances en chargeant des scripts ou styles de manière conditionnelle. Par exemple, si vous utilisez certains scripts uniquement pour votre page Contact, pour un formulaire, un module de prise de contact, vous pouvez envisager de restreindre leur chargement à cette page précise avec des conditions, en entourant le wp_enqueue_script par la condition de votre choix :

 if (is_page('contact')) {
        wp_enqueue_script('script-formulaire', get_template_directory_uri() . '/js/formulaire-de-contact.js', array('jquery'), '1.0', true);
    }

En utilisant cette méthode, vous pouvez éviter de charger des ressources inutiles sur certaines parties du site.

3. Optimiser les polices d'écriture utilisées

Comme je le disais plus haut, les polices d'écriture font partie des ressources qui peuvent être préchargées : ça permet qu'elles soient disponibles au plus tôt, pour éviter un changement de mise en page visible ("FOIT" - Flash of Invisible Text) si le site commence par charger une police par défaut avant de la remplacer par une police personnalisée.

Vérifiez que les lignes de code qui chargent les polices sur votre thème se présentent bien comme ceci :

<link rel="preload" href="url-de-la-police" as="font" type="font/woff2" crossorigin="anonymous">

Assurez-vous que l'URL de la police soit correcte et accessible. Le type de police doit correspondre au format du fichier de police utilisé (par exemple, type="font/woff2" pour les fichiers .woff2).

Dans les feuilles de style CSS, faites en sorte que les polices possèdent un attribut "font-display: swap" : il permet d'afficher une police de secours jusqu'à ce que la police personnalisée soit chargée.

Par exemple :

@font-face {
    font-family: 'Ma police';
    src: url('font.woff2') format('woff2');
    font-display: swap;
  }

Pensez aussi, dans la mesure du police, à héberger les polices sur votre propre serveur au lieu de les charger depuis des fournisseurs tiers comme Google Fonts. Ca réduit le temps de chargement car vous pouvez contrôler plus finement leur mise en cache et éviter de faire des requêtes supplémentaires pour aller chercher ces polices là où elles se trouvent. Téléchargez la police, rangez-la dans un dossier dédié du thème (ou thème enfant), par exemple /fonts/, et appelez cette URL-là au lieu d'utiliser une URL tierce.

Limitez le nombre de polices et de variantes utilisées (les variantes sont les versions d'une même police qui impliquent des fichiers dédiés, certaines polices ont par exemple des versions "Thin", "Bold", "Italic", "Extra thin", etc).

Enfin, utilisez des formats modernes comme WOFF2 qui offrent une meilleure compression et des performances améliorées par rapport aux anciens formats comme TTF ou EOT.

4. Bien gérer la mise en cache

Sur un site, certains fichiers sont fréquemment demandés et impactent donc le temps de chargement. La mise en cache consiste à les "mettre en mémoire" pour qu'il n'y ait pas besoin de les charger à nouveau quand l'internaute revient sur le site. Ca permet de gagner en rapidité.

Le cache peut exister à différents niveaux :

• Au niveau du serveur, où l'on peut stocker une version statique de la page une fois toutes les ressources chargées. Lors d'une seconde visite, c'est cette version qui est proposée à l'utilisateur, qui n'a pas à "recréer la page" en chargeant toutes ses ressources ;
• Au niveau du navigateur, qui peut garder en mémoire des images, des styles ou des scripts pour les charger depuis le cache local au lieu de devoir aller les récupérer sur le serveur ;
• Au niveau d'un CDN, qui stocke les contenus sur plusieurs serveurs à plusieurs emplacements géographiques pour proposer à l'internaute le contenu le plus proche de l'endroit où il se trouve, donc le plus rapide d'accès.

Fondamentaux de la mise en cache sur WordPress

Sur WordPress, on peut activer une mise en cache assez facilement en installant une extension de performance web comme WP Rocket, WP Super Cache, WP Fastest Cache ou encore W3 Total Cache. Ces extensions proposent en général la possibilité de générer des versions statiques des pages et de précharger le cache pour que les visiteurs accèdent plus rapidement aux contenus.

Vous pouvez aussi configurer le cache du navigateur en ajoutant ces quelques lignes au fichier .htaccess situé à la racine de votre site WordPress :

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/html "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType text/x-javascript "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresDefault "access plus 2 days"
</IfModule>

On définit une durée pendant laquelle certaines ressources doivent être gardées en mémoire par le navigateur avant de vérifier si elles ont été modifiées. Par exemple, 1 mois pour les pages HTML et feuilles de style, 1 an pour les images...

Utiliser un CDN (Content Delivery Network)

La mise en cache peut aussi passer par le recours à un CDN (Cloudflare, Akamai, KeyCDN, etc). Le fonctionnement est assez simple à comprendre : quand un internaute demande à charger une page web précise, il faut aller chercher les données liées à cette page sur un serveur. Plus le serveur est proche géographiquement, plus on y accède rapidement.

No Tuxedo, par exemple, est hébergé en France. Regardez ce qui se passe si je charge le site depuis Londres : temps de chargement de la page d'accueil à 1.8 sec, tout va bien !

Et si je charge le site depuis l'Australie… aïe, ça met 2 secondes de plus !

Le rôle du CDN est justement de créer des copies du site à différents emplacements géographiques afin de servir à l'internaute la copie la plus proche de lui et de réduire la latence. C'est particulièrement pertinent pour les sites qui ont un public international et ont besoin d'offrir de la performance à tous les visiteurs, quelle que soit leur localisation.

Le CDN a un autre avantage : si le site connaît une période de forte affluence (par exemple, suite à un passage TV, un événement comme le Black Friday) ou si un serveur tombe en panne, les autres serveurs peuvent prendre le relais, le trafic étant alors redirigé vers les serveurs disponibles. Cela offre une meilleure disponibilité du site.

Enfin, un CDN offre souvent des fonctionnalités de sécurité avancées (type protection contre la attaques DDoS, pare-feu applicatifs, etc).

Chaque CDN vous fournira une procédure d'intégration sur votre site WordPress. Pensez surtout à bien vous renseigner sur la configuration optimale par rapport à vos besoins. Par exemple, il est conseillé de définir le TTL (Time To Live), temps pendant lequel les ressources sont mises en cache par le CDN, ou encore les règles de purge automatique du cache...

5. Bien choisir son hébergeur web

Mener des actions d'optimisation ne suffit pas si votre hébergeur est médiocre, avec un serveur lent ou peu disponible.

Si tout va bien, PageSpeed Insights vous affichera la mention "Le temps de réponse initial du serveur était court".

De quoi parle-t-on ? Déjà, il existe plusieurs types d'hébergement :

• L'hébergement mutualisé, qui convient aux petits sites avec un trafic modéré. Il ne coûte pas très cher mais le serveur est partagé par plusieurs sites, ce qui peut affecter la performance.
• L'hébergement sur un VPS (serveur privé virtuel) : vous avez votre propre espace sur un serveur, avec plus de ressources et de contrôle, mais ça coûte un peu plus cher.
• L'hébergement dédié : un serveur est entièrement dédié à votre site, ce qui offre un contrôle total et un dimensionnement des performances en fonction de vos besoins... mais c'est bien plus cher.
• L'hébergement cloud, où les ressources sont distribuées sur plusieurs serveurs ce qui permet de répartir la charge, très utile pour les sites qui rencontrent des pics de trafic ponctuels.

Il faut donc commencer par bien choisir le type d'hébergement en fonction de vos besoins et de votre budget. Ensuite, pour comparer les hébergeurs entre eux, je vous conseille de regarder quelques points :

• La disponibilité (ou "uptime") de l'hébergeur : il faut que celui-ci garantisse un temps de disponibilité (uptime) d'au moins 99,9%. Il est intéressant d'avoir l'avis de clients réels pour faire la part des choses par rapport au déclaratif.
• La performance et la vitesse : regardez si l'hébergeur propose les versions de PHP les plus récentes, le SSD...
• La réactivité et la qualité du support technique : indispensable quand on est confronté à un problème, pour s'assurer d'avoir un interlocuteur et des réponses rapidement. Vérifiez que le support est disponible 7 jours sur 7 et qu'il répond dans un délai rapide.
• Renseignez-vous sur les mesures de sécurité mises en place par l'hébergeur pour protéger votre site d'éventuelles attaques ou malwares et sur l'existence de sauvegardes automatiques. Ce n'est évidemment pas le rôle de l'hébergeur de sécuriser un site WordPress contre le piratage, en revanche il peut mettre en place des protections au niveau des serveurs eux-mêmes.
• La localisation des serveurs : vérifiez qu'ils sont dans le pays où se situe votre audience prioritaire, ou considérez comme incontournable le recours à un CDN.

Vous pouvez également vous pencher sur la scalabilité des offres : est-il facile de passer à une offre plus performante si vous constatez que votre offre actuelle rencontre des limites ?

Je suis aujourd'hui hébergée chez o2switch, qui propose un bon rapport qualité-prix et un support technique très réactif... et ça a amélioré les performances de mes sites "sans rien faire", simplement parce que la qualité de service est au rendez-vous. Mon blog de voyage obtient par exemple 100% de pages bien évaluées sur les Core Web Vitals (évidemment, après optimisation et utilisation du plugin de performance WP Rocket).

7. Optimiser la sélection de plugins

J'ai déjà entendu des gens se plaindre de la performance web de WordPress. Or, on peut tout à fait optimiser la vitesse de chargement d'un site WordPress, à condition que le thème soit bien codé mais aussi que l'on ait une bonne gestion des plugins.

Une bonne gestion, ça veut dire quoi ?

• Prêtez attention aux plugins redondants : on évite d'installer deux plugins dont les fonctionnalités sont similaires (par exemple, deux extensions de cache). Au-delà des problèmes de compatibilité que cela peut poser, cela alourdit inutilement les pages.
• Optez pour des plugins polyvalents : en matière de webperf par exemple, un plugin comme WP-Optimize va gérer à la fois le cache, la compression des images, la conversion au format WebP, le lazy loading ou encore le nettoyage de la base de données... au lieu d'utiliser plusieurs plugins différents pour ça. Ca limite les requêtes effectuées sur la base de données et les ressources à charger.
• Soyez malgré tout attentif aux plugins "boule à facettes" : certains plugins se vantent de pouvoir presque tout faire pour vous à part le café ;) Parfois, ils sont tellement riches en fonctionnalités que vous vous retrouvez avec mille options dont vous n'avez pas besoin, que vous ne pouvez pas forcément désactiver.
• Evitez le recours systématique à un plugin : parfois, pour ajouter une petite fonctionnalité, on trouve aisément sur le web quelques lignes de code à copier dans son thème (ou thème enfant) au lieu d'installer une extension.
• Privilégiez des extensions de qualité, qui sont régulièrement mises à jour et obtiennent de bons avis. C'est souvent l'assurance qu'elles soient optimisées et compatibles avec les versions les plus récentes de WordPress.
• Désinstallez les extensions inutilisées.
• Auditez régulièrement votre liste d'extensions pour vérifier qu'elles sont toujours utiles et performantes.
• Pensez à nettoyer de temps en temps votre base de données. Certains plugins laissent des traces dans la base de données lors de leur désinstallation parce qu'ils ont créé des tables pour stocker leurs paramètres. Une extension comme WP-Optimize permet justement de repérer ces tables inutilisées et de les supprimer, mais aussi d'effectuer une optimisation de la base.
• Si vous êtes à l'aise avec la technique, vous pouvez utiliser une extension comme Query Monitor pour identifier les plugins qui ralentissent le site.

8. "Faire comme on peut" avec les scripts tiers

Sur un site, on a presque toujours besoin d'intégrer des scripts tiers, que ce soit pour les réseaux sociaux, l'analyse des audiences ou encore la publicité. Ils peuvent avoir un impact significatif sur le temps de chargement. Or, il n'est pas toujours possible de s'en passer. Quelles solutions ?

Déjà, veillez à bien prioriser les scripts réellement nécessaires et à faire régulièrement le point pour éviter de charger une foule d'outils que vous n'utilisez plus. Pensez à utiliser les bonnes pratiques évoquées plus haut, à savoir le chargement asynchrone avec l'attribut "async" et le chargement différé avec l'attribut "defer" pour limiter l'impact sur la vitesse de chargement, ou encore le préchargement avec "preload".

Renseignez-vous ensuite auprès du créateur du script que vous utilisez pour savoir s'il est possible d'héberger le script localement, sur votre propre serveur, au lieu "d'aller le chercher" sur le serveur de son créateur. Un développeur pourra même, par la suite, mettre en place un "cron job", une tâche automatisée pour vérifier périodiquement si le script est toujours à jour ou si une nouvelle version est sortie.

Vous pouvez également vous intéresser au chargement conditionnel des scripts, en faisant en sorte qu'ils se chargent uniquement sur les pages où ils sont nécessaires.

Une extension comme Asset CleanUp, par exemple, permet de décharger les scripts inutiles sur certaines pages pour réduire le nombre de requêtes et le poids de la page en question.

9. Quelques techniques supplémentaires d'optimisation

Choisir le nombre d'articles par page de catégorie

A l'intérieur des catégories, vous pouvez contrôler la pagination et définir le nombre d'articles qui vont s'afficher sur chaque page.

Cette option existe dans le menu Réglages > Lecture, au niveau de la ligne "Les pages du site doivent afficher au plus X articles".

Ici, il faut trouver un équilibre :

• Afficher suffisamment d'articles pour que le visiteur se fasse un avis sur votre contenu.
• Afficher assez d'articles pour que les moteurs de recherche aient accès à un maximum de posts "au premier coup d'oeil" sans avoir des dizaines de contenus cachés dans les profondeurs des pages 20, 30 et plus…
• Ne pas en afficher trop car sinon, vos pages deviennent plus lourdes.

Vous pouvez utiliser PageSpeed Insights par exemple pour tester le poids d'une page de catégorie en faisant varier le nombre d'articles et voir si ça joue beaucoup sur le temps de chargement.

Optimiser les espaces publicitaires

Quand on charge de la publicité sur un site, celle-ci est souvent injectée dynamiquement sur les pages (les bannières changent régulièrement) et ça peut générer des sauts de mise en page inattendus. Pour limiter ce risque, utilisez des conteneurs avec des dimensions fixes, à l'intérieur desquels vous placerez vos publicités, par exemple sous cette forme :

<div style="width:300px; height:250px;">
  <!-- Code de la publicité -->
</div>

Ca permet de réserver dès le départ un emplacement dédié.

Optimisation de la vitesse d'un site : technique et bon sens

Voilà, je pense que nous avons dressé ensemble un bon panorama d'actions qu'il est possible de mettre en place pour optimiser la vitesse d'un site WordPress. Et comme vous avez sans doute pu le constater, l'optimisation implique vite d'entrer dans des notions assez techniques, avec un double volet : auditer l'existant... puis corriger.

Si tout ceci vous paraît vraiment incompréhensible, je vous conseille au moins de mettre en œuvre quelques principes de base d'optimisation, qui sont peut-être les plus faciles d'accès :

• Optimiser les images ;
• Mettre en place un plugin de cache ;
• Choisir un bon hébergeur web ;
• Faire le point sur les extensions WordPress que vous utilisez et supprimez celles qui sont inutiles ;

Vous n'arriverez peut-être pas à obtenir une note formidable mais ce sera toujours bénéfique pour vos visiteurs !