• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 13/03/2018

Optimiser les performances

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

L'un des critères les plus importants dans l'expérience de navigation d'un visiteur sur votre site est sans aucun doute le temps que celui-ci prend à s'afficher. Il est donc important de réduire ce temps au minimum. Pour cela, il faut chasser toutes les lenteurs qui peuvent amoindrir la qualité de la visite, au niveau du code PHP ou bien de l'affichage HTML sur le navigateur. Accorder de l'attention à ces deux points permet d'améliorer significativement les performances ressenties lorsque l'on parcourt votre site. Nous allons donc étudier quelques astuces qui lui donneront un coup de jeune.

Utiliser le cache WordPress

Sur les applications web, l'une des actions les plus coûteuses en termes de temps de calcul de la page est l'accès aux informations de la base de données. En effet, une vaste proportion du contenu d'une page donnée provient de la configuration et des contributions des administrateurs du site, tout ceci se trouvant dans différentes tables de la base de données. L'application doit donc, pour chaque page affichée, établir une connexion et effectuer des requêtes pour obtenir les données nécessaires à son fonctionnement.

Pour accélérer le temps de rendu de vos pages et donc diminuer la charge de votre serveur, il est important de faire attention aux ressources utilisées, notamment lorsque vous développez votre propre plugin, qui devra vraisemblablement écrire et lire dans la base de données. Si le premier conseil à connaître est de ne pas récupérer des données depuis la base plusieurs fois dans une même page, cela n'est pas toujours possible de façon simple et les développeurs de WordPress s'en sont bien rendu compte.

La classe WP_Object_Cache fournit une interface au travers de laquelle il est possible de stocker des informations (sous forme de paires clé/valeur) afin de les récupérer plus tard au cours du chargement de la page. Cette solution offre l'avantage d'éviter d'effectuer à plusieurs reprises des calculs ou des requêtes coûteuses en enregistrant le résultat de l'opération pour un usage ultérieur.

Pour utiliser l'objet gérant le cache, il faut passer par des fonctions d'accès définies dans le fichier wp_includes/cache.php. Ainsi, la fonction wp_cache_add() permet d'ajouter une entrée de cache, en fournissant en paramètres la clé à utiliser et la valeur à stoker. Pour récupérer la valeur en cache, on appellera wp_cache_get() avec la clé en paramètre, qui renverra la valeur stockée ou bien false si aucune entrée n'est trouvée.

En utilisant ces fonctions, l'idée est donc de faire un appel à wp_cache_get() lorsque l'on a besoin d'une valeur qui est potentiellement présente en cache. Si cette valeur n'est pas trouvée dans le cache, on la calcule comme on l'aurait fait sans le cache, puis on la stocke pour un accès ultérieur, éventuellement dans une autre partie du code.

<?php
function getMaValeur()
{
    if (wp_cache_get('ma_valeur')) {
        return wp_cache_get('ma_valeur');
    } else {
        // on calcule notre variable normalement, stockée dans $value
        //...
        wp_cache_add('ma_valeur', $value);
        return $value;
    }
}

En utilisant le cache de cette façon, vous êtes certain de ne traiter les données lourdes que lorsque vous en avez besoin, tout en garantissant de ne faire ce traitement qu'une seule fois, c'est-à-dire lors du premier accès.

Optimiser l'affichage des pages

Cacher les ressources

À chaque chargement d'une page, le navigateur doit récupérer à la fois le code HTML, les fichiers CSS et JavaScript ainsi que les images affichées. Même si ces différentes ressources (hormis le code HTML) ne changent que très rarement, le navigateur va donc par défaut les récupérer en effectuant pour cela une requête auprès du serveur. Pour chaque fichier, une requête différente est émise et doit être traitée pour renvoyer la ressource, ce qui constitue un coût en temps de rendu de la page et en bande passante.

Afin de limiter le nombre de requêtes envoyées à votre serveur, il faut explicitement indiquer au navigateur des visiteurs quels sont les fichiers qui ne changeront que rarement lors de leurs visites. Dans ce cas, ces ressources seront cachées sur l'ordinateur du visiteur et réutilisées à chaque fois qu'une page de votre site sera affichée, tant que le délai minimum d'expiration ne sera pas écoulé. Les feuilles de style CSS peuvent par exemple être stockées plusieurs semaines si vous ne mettez pas à jour le design de façon très régulière. Il n'y a pas de raison de forcer vos visiteurs à la télécharger à chaque affichage.

Pour cacher des ressources, il faut effectuer des modifications dans la configuration du serveur, c'est-à-dire dans le VirtualHost (entre les balises <VirtualHost> du fichier) si vous en avez défini un, ou bien directement dans le fichier .htaccess (situé à la racine de WordPress) dans le cas contraire.

ExpiresActive On
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/x-icon "access plus 7 days"

Pour chaque type de fichier que l'on souhaite cacher, on ajoute une ligne indiquant la durée après laquelle le fichier doit être redemandé par le navigateur. Ici, j'ai choisi une durée de sept jours, c'est-à-dire qu'un visiteur n'aura pas besoin de télécharger ces ressources lors de toutes ses visites dans la semaine qui suit sa première connexion.

Fusionner les fichiers JS et CSS

Principe

Si cacher les ressources permet de limiter le nombre de requêtes sur votre serveur à partir de la deuxième visite d'un internaute, cela n'a aucun impact pour les nouveaux arrivants qui devront quoi qu'il arrive télécharger toutes vos images ainsi que vos fichiers CSS et JavaScript. Si vous possédez plusieurs feuilles de style ou fichiers JavaScript sur votre site, il peut devenir intéressant de les fusionner afin de n'en faire qu'un, qui sera alors téléchargé en une seule fois par vos visiteurs. La page sera ainsi téléchargée plus rapidement et donc affichée tout aussi vite.

Ici encore, des plugins existent pour vous faciliter la tâche et fusionner vos fichiers à la volée lors du chargement de la page. Vous n'avez pas à vous occuper de la génération du fichier final. Tout est fait automatiquement pour vous, comme c'est le cas avec WP Minify.

Configurer WP Minify

Une fois le plugin WP Minify installé, un nouveau menu est disponible dans l'administration en cliquant sur « Réglages > WP Minify ». La configuration par défaut est normalement correcte : la compression des fichiers JavaScript et CSS est activée et le nombre de requêtes adressées à votre serveur est immédiatement réduit. Vous pouvez à tout instant désactiver la fusion des fichiers en modifiant la configuration dans le cas où des problèmes apparaîtraient. Le plugin prend aussi en charge la compression du code HTML en supprimant des caractères inutiles comme les espaces, mais l'impact sur les performances est moindre par rapport à la fusion des fichiers de ressources (voir la figure suivante).

Les paramètres du plugin WP Minify
Les paramètres du plugin WP Minify
  • Le cache WordPress permet de limiter les requêtes sur les base de données, en enregistrant les informations requises plusieurs fois par page.

  • La configuration du serveur indique au visiteur les contenus qu'il peut cacher sur son ordinateur pour limiter les téléchargements.

  • La compression des fichiers de ressources permet d'accélérer le chargement des pages en limitant les requêtes sur le serveur.

Exemple de certificat de réussite
Exemple de certificat de réussite