Améliorer vitesse WordPress

Mon expérience dans l’optimisation d’un site WordPress

Dans cet article, je vais vous donner des règles et astuces d’optimisation pour améliorer la vitesse de votre site wordpress.

En tant que développeur web WordPress, je suis confronté régulièrement à des sites internet dont la lenteur est assez flagrante. Bon nombre de clients installent, désinstallent, testent des plugins ce qui alourdit la base de données et le serveur.

Règles pour améliorer la vitesse d’un site WordPress

Vérifier la version PHP
Vérification du thème
Listing des extensions utilisées et ajout de code
Plugin de cache
Combinaison Autoptimize / Async JS
Optimisation des images
OMGF / CAOS
Optimisation de la base de données

Vérification de la version du PHP

Premier point pour optimiser son site wordpress, vérifier la version PHP. Pour cela, vous pouvez vous rendre sur l’administration WordPress, onglet « Outils -> Santé du site« . La version PHP est renseignée. A l’heure où je rédige cet article, la version la plus récente est la 8.0. Il faut au minimum, la version 7.4. Vous pouvez la changer depuis votre hébergement. Une version PHP permet de sécuriser son site WordPress un minimum, car le code est à jour.

Vérification du thème

Le thème à une importance capitale dans le calcul de la vitesse de son site WordPress.

Dans un premier temps, il faut vérifier la version de son thème.

Si c’est un thème gratuit, il faut vérifier si une mise à jour est nécessaire.
Si c’est un thème payant, il est indispensable d’insérer la clé de licence pour bénéficier des mises à jour.

Dans un second temps, il est utile de tester la démo de son thème sur une plateforme dédiée au calcul de la vitesse de chargement. Parmi celles-ci, je vous conseil :

GTMetrix

Google PageSpeed Insight

Listing des extensions utilisées

Il est très facile d’installer des extensions pour chaque fonctionnalité que nous souhaitons. Mais ça a un impact sur la vitesse de chargement de son site WordPress.

Je vais vous lister trois petites fonctions qui permettront d’améliorer légèrement la vitesse de son site WordPress.

Il existe par exemple un module pour désactiver les émojis (ils sont par défaut installés alors que très peu de personnes s’en servent.). C’est la même chose pour les embeds. En suivant les procédures ci-dessous, il est assez facile de désactiver ces deux fonctionnalités en injectant du code dans le fichier functions.php. Ainsi, nous économisons deux appels aux serveurs. Pour finir, le module Contact Form 7 à la fâcheuse particularité de charger ses scripts sur toutes les pages, même s’il n’existe pas de formulaire.

Désactiver les émojis

Nous pourrions utiliser le plugin suivant, Disable Emojis de Ryan Hellyer, mais cela rajouterai des requêtes au serveur. Autant rajouter du code dans le fichier functions.php de votre thème enfant. Voici le code à insérer :

/**
 * Disable the emoji's
 */
function disable_emojis() {
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 remove_action( 'admin_print_styles', 'print_emoji_styles' ); 
 remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
 remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
 remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
 add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
 add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );

/**
 * Filter function used to remove the tinymce emoji plugin.
 * 
 * @param array $plugins 
 * @return array Difference betwen the two arrays
 */
function disable_emojis_tinymce( $plugins ) {
 if ( is_array( $plugins ) ) {
 return array_diff( $plugins, array( 'wpemoji' ) );
 } else {
 return array();
 }
}

/**
 * Remove emoji CDN hostname from DNS prefetching hints.
 *
 * @param array $urls URLs to print for resource hints.
 * @param string $relation_type The relation type the URLs are printed for.
 * @return array Difference betwen the two arrays.
 */
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
 if ( 'dns-prefetch' == $relation_type ) {
 /** This filter is documented in wp-includes/formatting.php */
 $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );

$urls = array_diff( $urls, array( $emoji_svg_url ) );
 }

return $urls;
}

Désactiver les embeds

Les embeds sont des morceaux de code récupérer sur certaines plateformes (Youtube, Vimeo…) permettant d’offrir le partage des vidéos depuis son site. Si vous n’utilisez pas de vidéos, autant désactiver les embeds. Au lieu d’utiliser le plugin suivant, Disable Embeds de Pascal Birchler, autant rajouter un morceau de code dans le functions.php.

function my_deregister_scripts(){
 wp_dequeue_script( 'wp-embed' );
}
add_action( 'wp_footer', 'my_deregister_scripts' );

Désactiver CF7 sur certaines pages

Comme Contact Form 7 se charge sur toutes les pages du site, même s’il n’y a de pas de formulaires, nous allons créer une fonction à insérer dans le fichier functions.php pour activer CF7 sur les pages désirées. Exemple avec la page contact, en utilisant un conditional tag porté sur le nom de la page (nous pouvons utiliser un id, slug…) :

add_action('wp_enqueue_scripts', function () {
  if (is_page('contact') {
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wpcf7_enqueue_scripts();
      }

      if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
      }
  }
});

Plugin de cache

Pour optimiser grandement la vitesse de son site web, il est primordiale de mettre en cache ses ressources.

La mise en cache consiste à mettre en « sauvegarde » des fichiers statiques (médias, HTML, CSS, JS, fonts) pendant une durée déterminée, afin de fournir la page appelée plus rapidement. Pour cela il faut utiliser un plugin de cache (si votre hébergement ne propose pas de mise en cache côté serveur). Voici les extensions les plus connues et performantes :

WP Rocket (premium, paiement annuel, le plugin le plus performant)
WP super Cache
W3 Total Cache
Fastest Cache
Cache enabler (je l’utilise très souvent car très facile à configurer. Tout se fait en arrière plan).

Combinaison Autoptimize / Async JS

La combinaison de ces deux plugins peut vous faire gagner beaucoup de temps.

Autoptimize est un plugin puissant qui permet de combiner (rassembler plusieurs fichiers en 1), minifier (suppression des espaces et sauts de lignes) des fichiers JS et CSS. Il permet également d’éliminer le CSS qui bloque le rendu grâce au critical CSS.

Async JS est un plugin qui permet de différer ou de rendre asynchrone des fichiers javascripts lors du chargement de la page. C’est-à-dire, ne pas bloquer le chargement du site et charger les ressources Javascript en parallèle.

Optimisations des images

Il est indispensable d’optimiser et de compresser ses images et de les afficher à la bonne taille.

Il faut savoir que WordPress duplique chaque image uploadée (3 tailles par défaut : miniature, moyenne et grande et les tailles créées par le thème actif). Nous pouvons nous retrouver avec facilement une dizaine de fichiers par image.

Pour compresser les fichiers, j’utilise soit Photoshop et son option « Enregistrer pour le web », soit un outil en ligne comme compressjpeg.

Côté backoffice WordPress, j’utilise EWWW Optimizer qui optimise les fichiers sans perte. Ce plugin est une véritable mine d’or. Vous pouvez choisir l’option « Lazy Load » (différer le chargement des images qui ne sont pas visibles à l’écran) et la conversion au format WebP.

OMGF / CAOS

Ces deux extensions, développées par la même personne, peuvent vous faire gagner du temps de chargement.

Leurs fonctionnalités :

OMGF permet d’héberger les fonts Google en local. Par défaut, les typos ont une durée de vie en cache assez courte. L’idée est de les télécharger et de les mettre sur votre propre serveur ce qui vous permettra de ne plus faire appel aux APIs Google.
CAOS permet d’héberger le fichier analytics.js servant à charger le script de Google Analytics qui a une durée de vie de 15min…L’héberger en local vous permettra de paramétrer la durée de vie du fichier avant qu’il ne soit mis à jour.

Optimisation de la base de données

Pour finir avec cette amélioration de la vitesse de son site WordPress, arrêtons-nous sur la base de données.

La base de données peut se remplir assez facilement et inutilement. Vous installez un plugin, le testez et vous le supprimer ensuite. Malheureusement, il reste des traces dans la base de données MYSQL.

Lorsque vous êtes sur un woocommerce, il y a des sessions qui restent en base de données et qui peuvent être supprimées.

Vous pouvez utiliser un plugin comme wp-sweep qui fait très bien le job (attention de bien sauvegarder sa BDD juste avant)

Vous avez une autre solution si vous ne souhaitez pas utiliser de plugin supplémentaire. Pour cela, connectez-vous à votre phpmyadmin, et ajouter les requêtes SQL suivantes :

Nettoyage des sessions



DELETE FROM `wp_options` 
WHERE `option_name` LIKE '_wp_session_%'

Nettoyage des transients

SELECT * 
FROM `wp_options` 
WHERE `autoload` = 'yes'
AND `option_name` LIKE '%transient%'

Vérifier les autoload (plugin qui se charge automatiquement à la connexion au backoffice)

SELECT option_name, length(option_value) AS option_value_length FROM wp_options WHERE autoload='yes' ORDER BY option_value_length DESC LIMIT 10;

Une fois la liste affichée, vous pouvez voir quel plugin est le plus gourmand en « octet »

Vous pouvez également visualiser les autoload de cette manière afin de voir des traces de plugins que vous avez supprimé.

SELECT * FROM `wp_options` WHERE `autoload` = 'yes'

Ensuite, il vous suffit de les supprimer avec cette requête (en remplaçant jetpack par l’autoload en question) :

DELETE
FROM `wp_options` 
WHERE `autoload` = 'yes'
AND `option_name` LIKE '%jetpack%'

N’oubliez pas de remplacer le préfixe de votre base de données si différent de wp_.