Nous sommes toujours à la recherche de moyens nouveaux et innovants pour accélérer et optimiser vos sites. Comme vous le savez peut-être déjà, WP Rocket et Kinsta sont entièrement compatibles depuis un certain temps.
Découvrez ci-dessous tout ce que vous devez savoir sur l’utilisation de WP Rocket chez Kinsta et comment cela peut être une excellente combinaison pour vous et vos clients.
Utiliser WP Rocket chez Kinsta
Pour ceux d’entre vous qui ne connaissent pas WP Rocket, il s’agit d’une extension de performance premium tout-en-un pour WordPress qui offre la mise en cache en premier lieu. Nous n ‘autorisons généralement pas les extensions de mise en cache dans notre environnement parce qu’elles entrent en conflit avec notre solution de mise en cache intégrée.
Cependant, la fonctionnalité de mise en cache des pages de WP Rocket sera automatiquement désactivée lorsqu’elle fonctionnera sur les serveurs de Kinsta. Par conséquent, nous autorisons WP Rocket sur notre plateforme car il n’y a plus d’incompatibilités.
Cela vous permet d’utiliser la solution de mise en cache de Kinsta tout en profitant des incroyables fonctionnalités d’optimisation de WP Rocket (nous les verrons plus loin).
Pourquoi la mise en cache est-elle importante ? La mise en cache est le processus de stockage des ressources d’une requête et la réutilisation de ces ressources pour les requêtes suivantes. Fondamentalement, elle réduit la quantité de travail nécessaire pour générer la visualisation d’une page et diminue la charge sur le serveur web. C’est le moyen le plus efficace de réduire les délais dus à la dépendance de WordPress à l’égard de PHP et d’une base de données (pour en savoir plus sur WordPress et le HTML statique).
Caractéristiques de WP Rocket
WP Rocket est une extension puissante et performante – son interface est magnifique tout en étant simple à utiliser et à naviguer ! Ci-dessous, nous allons plonger dans quelques-unes des fonctionnalités recommandées que vous pouvez utiliser avec WP Rocket pour accélérer votre site WordPress et la façon dont il est synchronisé avec l’environnement Kinsta.
Nous allons également effectuer quelques tests de vitesse pour voir quelles options ont le plus d’impact sur un site réel. Rappelez-vous que les résultats peuvent varier d’un site à l’autre, alors assurez-vous de tester sur votre propre site ou sur un site de staging.
Si vous utilisez un site de staging chez Kinsta, WP Rocket a mis en liste autorisée notre structure d’URL (staging-sitename.kinsta.cloud), ce qui signifie qu’il ne comptera pas comme un site dans votre nombre total de licences. Il en va de même pour l’exécution sur localhost.
Effacer le cache
Même si la mise en cache est automatiquement désactivée dans WP Rocket lorsqu’il fonctionne sur Kinsta, l’option « Effacer et précharger le cache » dans le menu de WP Rocket est synchronisée avec l’environnement Kinsta. Si vous effacez votre cache WP Rocket, cela efface en fait le cache Kinsta de tout votre site à la place. Comme c’est cool ! Comme toujours, vous pouvez vider votre cache Kinsta depuis le côté droit de la barre d’administration.
Lorsque vous activez ou désactivez une extension, WP Rocket vous invite à vider le cache. Ceci n’est conseillé que si l’extension ajoute du contenu frontend, telle qu’une extension de bannière de cookies.
Enfin, en cliquant sur le bouton « Vider et précharger le cache » depuis le tableau de bord de WP Rocket, vous effacez également le cache de Kinsta.
Cache
Comme nous l’avons mentionné précédemment, la mise en cache des pages de WP Rocket est automatiquement désactivée pour les sites hébergés sur Kinsta. Ainsi, nous recommandons de laisser les paramètres de cache de WP Rocket tels quels avec « Enable Caching for Mobile Devices » – qui est l’option par défaut livrée avec WP Rocket 3.16.
Optimisation des fichiers
Dans le menu « Optimisation des fichiers », WP Rocket vous donne la possibilité d’optimiser vos fichiers CSS et JavaScript. Nous allons nous pencher un peu sur chacun d’entre eux.
Fichiers CSS
- Minifier les fichiers CSS supprime les espaces blancs et les commentaires pour réduire la taille du fichier. Avec cette option activée, nous avons effectué des tests de vitesse et avons constaté une diminution de 0,87 % du temps de chargement. en raison de la façon dont le CSS fonctionne, cette option pourrait endommager votre site, alors assurez-vous de la tester. Encore une fois, en général, moins d’espace blanc et de code est une bonne chose.
- Optimiser la diffusion des feuilles de style CSS élimine les feuilles de style CSS qui bloquent le rendu sur votre site web afin d’accélérer le temps de chargement perçu. Nous vous recommandons d’activer la fonction Supprimer les feuilles de style CSS inutilisées.
Pour en savoir plus, consultez nos articles détaillés sur les feuilles de style CSS bloquant le rendu et sur l’optimisation du chemin de rendu critique. Avec cette option activée, nous avons effectué des tests de vitesse et constaté une diminution de 56,36 % du temps de chargement. n’oubliez pas qu’il s’agit davantage d’un temps de chargement perçu que d’un temps de chargement réel.
Fichiers JavaScript
- Minifier les fichiers JavaScript supprime les espaces blancs et les commentaires pour réduire la taille du fichier. Dans le test que nous avons effectué, cette fonctionnalité a eu un faible impact, car il y avait peu de choses qui n’avaient pas été préalablement minimisées par les développeurs du constructeur de pages. Toutefois, en raison de la façon dont JavaScript fonctionne, cette fonctionnalité pourrait être interrompue par vos extensions ou votre thème, alors n’oubliez pas de la tester.
- Charger JavaScript en différé élimine les éléments JS bloquant le rendu sur votre site et peut améliorer le temps de chargement. Pour en savoir plus, consultez nos articles détaillés sur le JavaScript bloquant le rendu. Cependant, si vous ne faites pas attention, cela peut également endommager votre site, alors n’oubliez pas de le tester.
- Retarder l’exécution de JavaScript améliore les performances en retardant le chargement des fichiers JavaScript jusqu’à ce que le premier utilisateur interagisse, par exemple en faisant défiler la page ou en cliquant. Lorsque cette option est activée, nous avons effectué des tests de vitesse et constaté une diminution de 33,33 % du temps de chargement.
Comme vous l’avez peut-être remarqué, l’impact des fonctionnalités liées à la minification sur les performances est faible. Cela s’explique par le fait que la plupart des thèmes et des extensions ajoutent désormais des feuilles de style CSS et JavaScript minifiées, et que les fonctionnalités connexes n’entraînent généralement que peu ou pas de changement au niveau des performances, à moins que le thème ou l’extension ne soit codée de manière affreuse avec un mépris total pour les performances, ce qui est extrêmement rare. D’autres techniques, telles que la suppression des feuilles de style CSS inutilisées et le report de JavaScript, font la différence en matière d’optimisation du code.
Médias
Le menu « Media » vous permet de charger de manière différée vos images, vidéos et frames. Vous avez également la possibilité de charger en différé les images d’arrière-plan CSS et d’ajouter les dimensions manquantes des images.
Nous allons nous pencher un peu plus sur chacun de ces éléments.
Chargement différé
Le chargement différé est une technique d’optimisation qui charge le contenu visible mais retarde le téléchargement et le rendu du contenu qui apparaît sous le pli. L’activation de l’option de chargement différé peut améliorer le temps de chargement réel et perçu, car les images, les iframes et les vidéos ne seront chargées que lorsqu’elles entrent (ou sont sur le point d’entrer) dans la fenêtre de visualisation, réduisant ainsi le nombre de requêtes HTTP.
- Activer pour les images : Avec cette option activée, nous avons effectué des tests de vitesse et constaté une diminution de 8,55 % du temps de chargement. L’impact d’une telle fonctionnalité est limité car le noyau de WordPress ajoute maintenant le chargement différé natif sur toutes les images. La légère amélioration constatée lors des tests provient de l’optimisation de l’image d’arrière-plan en CSS.
- Activation pour les iframes et les vidéos : WP Rocket dispose d’une option permettant de remplacer automatiquement une vidéo YouTube par son image de prévisualisation. C’est une option puissante pour réduire l’impact des fichiers liés à YouTube et des scripts lourds, qui ont un impact à la fois sur la vitesse de chargement et sur les performances vitales de la page.
Consultez notre tutoriel approfondi sur le chargement différé dans WordPress.
Précharger
Dans le menu « Précharger », vous avez la possibilité d’activer le préchargement du cache, le préchargement des liens, le préchargement du DNS et le préchargement des polices. Toutes ces options ne fonctionneront pas chez Kinsta. Mais nous allons nous pencher un peu sur chacune d’entre elles.
Préchargement de cache
Nous ne recommandons pas cette option pour les sites hébergés sur Kinsta car elle peut réduire les performances en surchargeant les threads PHP.
Préconnexion aux domaines externes
Depuis WP Rocket 3.19, l’ancienne fonctionnalité Prefetch DNS Requests a été supprimée et remplacée par une fonctionnalité automatisée Preconnect to External Domains.
La préconnexion aide à accélérer le chargement en permettant aux navigateurs d’établir des connexions réseau (DNS, TLS, TCP) à des domaines tiers avant qu’elles ne soient réellement nécessaires. Cette fonction est particulièrement utile pour les ressources externes qui ont un impact sur le Largest Contentful Paint (LCP), comme les scripts d’analyse ou les polices de caractères Google.
Contrairement à la méthode manuelle précédente qui utilisait <link rel="dns-prefetch"> dans votre site <head>, la nouvelle fonctionnalité est entièrement automatique (aucune configuration ou entrée manuelle n’est nécessaire). WP Rocket détecte maintenant quels domaines externes sont nécessaires sur chaque page et injecte des indices de préconnexion en conséquence.
Ce changement rend l’optimisation plus précise et élimine le risque de configurations inutiles ou incorrectes. Vous ne verrez plus ce réglage dans l’interface de WP Rocket, mais il est actif par défaut.
Précharger les polices
Si vous hébergez des polices sur votre propre domaine et non sur un service externe comme Google Fonts, nous vous recommandons de les ajouter à la liste « Précharger les polices » dans WP Rocket. En préchargeant les polices dans votre élément HTML head, les navigateurs web peuvent télécharger les polices avant qu’elles ne soient découvertes dans votre fichier CSS.
Règles avancées
En raison du fait que WP Rocket se synchronise avec le cache de l’environnement Kinsta, vous ne pouvez pas utiliser les règles avancées. Si vous avez besoin d’exclure une URL ou un répertoire de la mise en cache ou de forcer la mise en cache d’une certaine chaîne de requête, vous pouvez toujours contacter l’équipe de support de Kinsta.
Base de données
Dans le menu « Base de données », WP Rocket vous permet d’effectuer des nettoyages sur les articles, les commentaires, les transients et les tables.
Combiné avec nos optimisations hebdomadaires automatiques de la base de données, garder votre base de données propre en supprimant les révisions d’articles et les transients inutiles assurera que votre base de données fonctionne au maximum de ses performances.
Nettoyage des articles
Il n’est pas rare que des sites plus anciens aient plus de 100 révisions sur leurs pages principales. Cela est simplement dû à des années d’édition et de mise à jour du contenu. Supposons, par exemple, qu’un site compte 700 pages ou articles avec 150 révisions pour chacun d’entre eux. Cela représente plus de 100.000 entrées dans la base de données. Cela occupe de l’espace de stockage et, même avec des index de base de données, cela peut parfois nuire aux performances.
WP Rocket vous donne l’option de supprimer ce qui suit :
- Révisions
- Brouillons automatiques
- Articles mis à la corbeille
Consultez notre article détaillé sur la façon d’optimiser les révisions pour des performances plus rapides.
Nettoyage des commentaires
Comme pour les révisions, le spam et les commentaires inutiles peuvent ajouter à l’espace perdu au fil du temps. WP Rocket vous donne la possibilité de supprimer les commentaires suivants :
- Commentaires de spam
- Commentaires inutilisables
Si vous n’utilisez pas de commentaires sur votre site WordPress, nous vous recommandons de désactiver les commentaires afin d’empêcher le spam d’arriver. Vous n’aurez alors pas à vous soucier d’installer des extensions anti-spam.
Nettoyage des transients
Les transients dans WordPress sont parfois négligés, mais ils sont très importants ! En fait, nous avons vu des caches transitoires corrompus détruire complètement un site WordPress. Ces caches sont censés être temporaires et il est donc prudent de les supprimer, ce que nous recommandons d’ailleurs. S’ils sont nécessaires à une extension, ils seront automatiquement régénérés. WP Rocket vous donne l’option de supprimer tous les caches transitoires.
Nettoyage de la base de données
L’option de nettoyage de la base de données réduit la surcharge des tables de la base de données. Cependant, chez Kinsta, nous utilisons InnoDB au lieu de MyISAM et par conséquent, cette option n’est généralement pas nécessaire. Il a été démontré qu’InnoDB est plus performant et plus fiable. L’une des principales raisons d’utiliser InnoDB plutôt que MyISAM est de profiter du verrouillage au niveau des lignes. Cela permet à vos requêtes de base de données d’être traitées plus rapidement. Si vous migrez votre site WordPress vers Kinsta, c’est l’une des nombreuses optimisations que nos ingénieurs effectuent sur votre site.
Nettoyage automatique
WP Rocket vous donne également la possibilité de programmer un nettoyage automatique de votre base de données sur une base quotidienne, hebdomadaire ou mensuelle. Ce nettoyage est programmé par une tâche cron dans les coulisses.
CDN
Dans le menu « CDN », vous pouvez activer un réseau de diffusion de contenu tiers. Il s’agit d’un choix évident en termes de performances. Ils soulagent votre serveur web tout en accélérant la diffusion du contenu à vos visiteurs, ce qui améliore leur expérience. Découvrez pourquoi nous pensons que chaque site devrait utiliser un CDN.
Si vous êtes client de Kinsta, ce menu ne sera pas nécessaire car le CDN de Kinsta est automatiquement déployé sur votre site en coulisses.
Nous vous recommandons de faire passer votre site WordPress par un outil de test de vitesse de site web pour confirmer que toutes vos ressources (JS, CSS et images) se chargent à partir du CDN de Kinsta.
Heartbeat
Heartbeat est une API de WordPress Core pour l’interrogation des serveurs. Elle est utilisée par de nombreux thèmes et extensions pour maintenir un flux de connexion avec votre serveur. Cela permet aux développeurs WordPress d’intégrer des mises à jour en temps réel dans leurs produits.
Par défaut, le code Heartbeat côté client s’exécute toutes les 15 à 60 secondes. En fonction de la configuration de votre site et de votre serveur, il n’est peut-être pas nécessaire d’envoyer des pings fréquents au serveur Heartbeat.
Avec WP Rocket, vous pouvez réduire les intervalles de ping Heartbeat à 2 minutes ou désactiver complètement les pings pour le backend de votre site (tableau de bord WP), le frontend, et l’éditeur d’articles.
Pour la plupart des sites, nous vous recommandons d’utiliser l’option « Réduire l’activité ». De nombreuses extensions et de thèmes modernes utilisent Heartbeat pour les fonctionnalités de base, donc le désactiver complètement pourrait endommager votre site.
Modules
Sous « Add-Ons », WP Rocket vous donne la possibilité d’ajouter des services supplémentaires à votre site comme Cloudflare, Sucuri, Google Analytics, et Facebook Pixel. Si vous utilisez l’un de ces services sur votre site, nous vous recommandons de les configurer via WP Rocket pour vous assurer que vous bénéficiez de l’intégration la plus optimisée pour ces services.
Si vous utilisez déjà d’autres extensions pour intégrer ces services sur votre site, vous pouvez les supprimer en toute sécurité après avoir configuré le module dans WP Rocket.
Optimisation des images
Les développeurs de WP Rocket sont les mêmes que ceux d’Imagify, l’un de nos services d’optimisation d’images préférés. Si vous cherchez une extension WordPress facile à utiliser pour optimiser les images, jetez un coup d’œil à Imagify. Cliquez pour en savoir plus sur l’optimisation d’images et d’autres extensions et solutions d’optimisation.
Tests de vitesse finaux
Nous avons ensuite effectué des tests de vitesse finaux avec toutes les options activées afin que vous puissiez voir un avant et un après. Note : Ce site WordPress est hébergé chez Kinsta.
Avant WP Rocket
Nous avons effectué cinq tests dans PageSpeed Insights sans WP Rocket.
Après WP Rocket
Nous avons effectué un nouveau test dans Google PageSpeed Insights avec WP Rocket.
Nous avons également effectué un test PageSpeed Insights avec le cache edge activé sur Kinsta. Nous avons remarqué que le temps de réponse initial du serveur est passé de ~370 ms sans edge cache à 30 ms. C’est pratique lorsque vous servez une audience provenant de plusieurs zones géographiques.
Voici ce qu’il faut retenir des résultats ci-dessus :
- WP Rocket va au-delà des options de mise en cache et offre des fonctionnalités puissantes pour optimiser les fichiers CSS et JS, les images, et plus encore.
- Le site que nous avons utilisé pour le test est déjà relativement optimisé. Cependant, il nécessite encore quelques ajustements pour garantir les résultats et la conformité avec Core Web Vitals.
- Si vous utilisez des vidéos YouTube, vous pourriez constater des réductions de temps de chargement allant jusqu’à 50 % ou plus. Pour ce faire, vous pouvez utiliser la fonction WP Rockets qui remplace les vidéos YouTube par des miniatures de prévisualisation cliquables. C’est vraiment pratique !
- Dans nos tests Google PageSpeed Insights, nous avons vu une augmentation de notre score de 69/100 à 100/100. Bien que les scores ne soient pas aussi importants que les temps de chargement globaux – nous en parlons dans notre article sur Google PageSpeed Insights –, Core Web Vitals fait partie du dernier facteur de classement SEO et nous avons vu une grande amélioration dans leurs notes également.
Comme vous pouvez le voir ci-dessus, WP Rocket rend incroyablement facile l’accélération de votre site WordPress en quelques clics !
Résumé
L’équipe de WP Rocket sort régulièrement de nouvelles fonctionnalités qui s’alignent directement sur les recommandations de performance web que nous partageons chez Kinsta. Nous sommes ravis que nos clients puissent maintenant utiliser cette extension sans modification supplémentaire.
Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.
