La mise en cache du navigateur peut améliorer les temps de chargement de votre site Web pour les visiteurs réguliers. Toutefois, cela signifie également que les utilisateurs peuvent parfois voir du contenu obsolète lorsqu’ils visitent votre site.
La meilleure façon d’éviter ce problème est de mettre en œuvre le « versioning » pour votre contenu WordPress. Ainsi, les utilisateurs obtiendront toujours la dernière version de votre site Web, même si leur navigateur a mis le site en cache. Dans cet article, nous parlerons plus en détail de la mise en cache du navigateur, du versioning, puis nous vous apprendrons à le mettre en œuvre dans WordPress.
Mettons-nous au travail !
Qu’est-ce que le versioning (et son impact sur la mise en cache du navigateur) ?
La mise en cache du navigateur est un processus qui enregistre les fichiers de votre site Web sur les appareils de vos visiteurs afin qu’ils n’aient pas besoin d’être téléchargés lorsqu’ils revisitent votre site. Il s’agit d’une solution simple qui permet de réduire les temps de chargement.
Lorsque vous exploitez la mise en cache du navigateur, vous définissez généralement des dates d’expiration pour le contenu que vous souhaitez sauvegarder. Par exemple, vous pouvez configurer votre fichier .htaccess pour stocker les fichiers sur les ordinateurs des utilisateurs pendant une période spécifique. À l’issue de cette période, leurs navigateurs rechercheront les nouvelles versions de ces fichiers.
Le problème est que vous devrez souvent mettre à jour les fichiers sur votre serveur avant que les versions mises en cache n’expirent. Par exemple, le code ci-dessus mettra automatiquement en cache tous les fichiers png . Si le logo de votre site est un fichier png et que vous y apportez des modifications, les utilisateurs risquent de ne pas voir la nouvelle version avant l’expiration de leur cache.
Le versionnage, également connu sous le nom de « destruction du cache », résout ce problème en forçant automatiquement les mises à jour du cache si un fichier a été modifié. Il s’agit d’une solution simple qui vous permet de mettre en œuvre une mise en cache du navigateur avec des dates d’expiration de longue durée sans avoir à vous soucier de l’affichage d’un contenu obsolète. Cependant, sa mise en place nécessite un peu de travail, ce qui nous amène à la section suivante.
Comment utiliser le versionnage pour mettre à jour votre contenu WordPress mis en cache (de 2 façons)
Nous allons maintenant vous montrer comment définir les versions de différents types de fichiers pour mettre à jour le cache de vos utilisateurs. Gardez à l’esprit que vous pourriez rencontrer des problèmes en utilisant ces méthodes si vous utilisez un plugin de mise en cache. Dans ce cas, vous devrez vider le cache de votre site à l’aide du plugin que vous utilisez, afin de vous assurer que votre site propose les dernières versions de chaque fichier.
1. Mettez à jour la version de votre thème enfant à l’aide de la fonction wp_enqueue
Si vous utilisez un thème enfant (ce qui devrait être le cas !), vous pouvez forcer WordPress à charger une nouvelle version de sa feuille de style via le fichier functions.php . Comme vous le savez peut-être, vous devez utiliser la fonction wp_enqueue_style dans le fichier functions.php pour charger la feuille de style d’un thème. Voici le format que le codex de WordPress suggère d’utiliser :
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ) ;
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ) ;
}
Cet extrait fait l’affaire. Cependant, il n’inclut pas de fonction de suppression du cache. En revanche, le code ci-dessous vous permet d’inclure le numéro de version du thème enfant :
function my_theme_enqueue_styles() {
$parent_style="parent-style" ; // C'est 'twentyfifteen-style' pour le thème Twenty Fifteen.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ) ;
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
) ;
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ) ;
Ce code extrait le numéro de version du fichier style.css de votre thème enfant. Lorsque vous avez initialement mis en place votre thème enfant, vous avez dû créer une nouvelle feuille de style, y compris un extrait comme celui-ci :
/* Nom du thème : Twenty Fifteen Enfant URI du thème : http://example.com/twenty-fifteen-child/ Description : Thème enfant Twenty Fifteen Auteur : John Doe URI de l'auteur : http://example.com Modèle : twentyfifteen Version : 1.0.0 Licence : GNU General Public License v2 ou ultérieure URI de la licence : http://www.gnu.org/licenses/gpl-2.0.html Tags : light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Domaine textuel : twenty-fifteen-child */
Tout ce que vous avez à faire est de mettre à jour le nombre dans la ligne Version chaque fois que vous apportez une modification à la feuille de style de votre thème enfant. Cela forcera WordPress à charger la dernière version du fichier.
Au cas où vous auriez besoin d’un rappel, vous pouvez mettre à jour ces deux fichiers en accédant à votre site web via FTP. Si vous n’en avez pas, nous vous recommandons d’utiliser FileZilla. Naviguez vers le répertoire wp-content/themes et recherchez le dossier de votre thème enfant. Ses fichiers functions.php et style.css devraient s’y trouver :
Pour modifier l’un ou l’autre de ces fichiers, il suffit de faire un clic droit dessus et de choisir l’option Afficher/Modifier . Cela ouvrira le fichier en utilisant votre éditeur de texte local par défaut, ce qui vous permettra d’apporter des modifications au code.
2. Renommez vos fichiers statiques pour forcer une mise à jour du cache
La méthode précédente s’occupe de la mise à jour de votre thème enfant. Cependant, selon la façon dont vous avez configuré la mise en cache du navigateur, votre site Web enregistre probablement des copies d’un grand nombre d’autres fichiers. Par exemple, au cours de notre guide sur la mise en œuvre de la mise en cache du navigateur, nous vous avons fourni un extrait de code qui devrait mettre en cache des copies de vos images, fichiers CSS, HTML et JavaScript :
ExpiresActive On ExpiresByType image/jpg " accès 1 an " ExpiresByType image/jpeg "accès 1 an" ExpiresByType image/gif " accès 1 an " ExpiresByType image/png " droit d'accès 1 an " ExpiresByType text/css " accès 1 semaine " ExpiresByType text/x-javascript " accès 1 semaine " ExpiresDefault " accès 1 mois "
Nous pouvons utiliser le même fichier pour mettre en œuvre un nouvel ensemble de règles. Utilisez le code suivant, et ajoutez-le sous la balise du snippet que nous vous avons montré précédemment :
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|jpeg|gif)$ $1.$3 [L]
Cela indique à WordPress de vérifier si tous les fichiers utilisant ces formats ont des nombres ajoutés dans leurs noms de fichiers, comme ceci :
child-theme/style.201.css
Dans cet exemple, nous avons mis à jour le fichier style.css et modifié son nom de fichier pour le refléter. Le 201 dans son nom de fichier représente le numéro de version du fichier style.css . WordPress reconnaîtra toujours le fichier style.css de votre thème, mais les modifications que nous avons apportées au fichier .htaccess vous permettent d’indiquer qu’il s’agit d’une nouvelle version.
Après avoir ajouté ce code à votre fichier .htaccess , vous serez en mesure de définir des versions pour tous les types de fichiers que vous avez inclus. Par exemple, si vous souhaitez télécharger une nouvelle version d’un logo en png , il vous suffit de renommer le fichier en quelque chose comme logo.201.png avant de le télécharger.
Conclusion
La mise en œuvre de la mise en cache du navigateur est un excellent moyen de garantir aux visiteurs de votre site des temps de chargement rapides. Cependant, cela peut également entraîner des situations où vous mettez à jour votre contenu, mais où les utilisateurs ne peuvent pas voir les changements.
La façon la plus simple de résoudre ce problème est d’utiliser le versionnage pour le contenu que les navigateurs de vos utilisateurs mettent en cache. Nous vous proposons les méthodes suivantes pour y parvenir :
- Mettez à jour la version de votre thème enfant à l’aide de la fonction wp_enqueue .
- Renommez vos fichiers statiques pour forcer une mise à jour du cache.
Vous avez des questions sur la façon de mettre en œuvre le versioning des fichiers dans WordPress ? Parlons-en dans la section des commentaires ci-dessous !
