Nous sommes toujours à la recherche de nouveaux moyens innovants pour accélérer et optimiser vos sites. Au cours des deux derniers mois, notre équipe a travaillé en coulisse avec les développeurs de WP Rocket pour coordonner certains changements avec leur toute nouvelle version 3.0 du plugin (sortie le 3 avril 2018). Nous sommes heureux d’annoncer que WP Rocket 3.0 et Kinsta sont maintenant entièrement compatibles et le seront entièrement à partir de maintenant.

Découvrez ci-dessous tout ce que vous devez savoir sur l’utilisation de WP Rocket chez Kinsta et comment cela peut être bénéfique pour vous et vos clients.

Utilisation de WP Rocket chez Kinsta

Pour ceux d’entre vous qui ne sont pas familiers avec WP Rocket, il s’agit d’un plugin de cache et d’optimisation tout-en-un premium populaire pour WordPress. Normalement, nous n’autorisons pas les plugins de mise en cache dans notre environnement car ils entrent en conflit avec notre solution de mise en cache intégrée. Cependant, à partir de WP Rocket 3.0, la fonctionnalité de mise en cache des pages sera automatiquement désactivée lors de leur exécution sur les serveurs Kinsta. Par conséquent, nous autorisons WP Rocket sur notre plateforme car il n’y a plus d’incompatibilités.

Ceci vous permet maintenant d’utiliser la solution de mise en cache de Kinsta tout en profitant des excellentes fonctionnalités d’optimisation que WP Rocket a à offrir (nous allons plonger dans ces fonctionnalités ci-dessous).

Pourquoi la mise en cache est-elle importante ? La mise en cache est le processus de stockage des ressources d’une requête et de réutilisation de ces ressources pour des requêtes ultérieures. Fondamentalement, cela réduit la quantité de travail nécessaire pour générer une vue de page et diminue la charge sur le serveur web. C’est le meilleur moyen d’annuler le délai de dépendance de WordPress vis-à-vis de PHP et d’une base de données (en savoir plus sur WordPress vs HTML statique).

Caractéristiques de WP Rocket 3.0

Si vous n’avez pas encore vu la nouvelle version 3.0 de WP Rocket, l’interface utilisateur est magnifique, tout en étant facile à utiliser et à naviguer ! Ci-dessous, nous allons nous plonger dans quelques-unes des fonctionnalités recommandées que vous pouvez utiliser à partir de WP Rocket pour accélérer votre site WordPress, ainsi que la synchronisation avec l’environnement Kinsta.

Nous effectuerons également des tests de vitesse pour voir quelles options ont le plus d’impact sur un site en direct. Rappelez-vous cependant que les résultats peuvent varier d’un site à l’autre, alors assurez-vous de faire des tests sur votre propre site ou sur votre propre environnement de staging.

Si vous utilisez un site de staging chez Kinsta, WP Rocket a whitelisté notre structure d’URL (staging-votresite.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’utilisation en localhost.

Le tableau de bord principal de WP Rocket.
Le tableau de bord principal de WP Rocket.

Effacement du cache

Bien que la mise en cache soit automatiquement désactivée dans WP Rocket lors de l’utilisation sur Kinsta, l’option « Vider le cache » du menu WP Rocket est synchronisée avec l’environnement Kinsta. Si vous effacez votre cache WP Rocket, cela efface en fait tout le cache Kinsta de votre site à la place.  C’est pas cool, ça ? Et comme toujours, vous pouvez vider votre cache Kinsta en haut à droite de la barre d’administration.

Effacer la mémoire cache (2 façons)
Effacer la mémoire cache (2 façons)

La fonction « Purger cette URL » fonctionne de la même manière, mais au lieu de purger la totalité du cache de votre site, elle efface le cache de l’URL sur laquelle vous vous trouvez actuellement. C’est super si vous avez peut-être fait une mise à jour manuelle d’une page ou d’un article.

Pour des raisons de performances, nous ne recommandons pas d’effacer constamment tout le cache de votre site, car il doit alors être reconstruit. Purger des URLs individuelles est une bien meilleure façon.

WP Rocket purge le cache de purge sur l'URL individuelle
WP Rocket purge le cache sur l’URL individuelle

Si vous modifiez quelque chose sur votre site WordPress, comme un plugin ou un thème, vous pourriez voir un avertissement de WP Rocket. Le bouton Effacer la mémoire cache efface également la mémoire cache de Kinsta.

WP Rocket modifie la mémoire cache de réinitialisation
WP Rocket modifie la mémoire cache de réinitialisation

Enfin, si vous cliquez sur le bouton « Effacer le cache » du tableau de bord WP Rocket, cela efface également le cache Kinsta.

Effacer le cache dans WP Rocket.
Effacer le cache dans WP Rocket.

Cache

Comme nous l’avons mentionné précédemment, la mise en cache des pages WP Rocket est automatiquement désactivée pour les sites hébergés chez Kinsta. Nous recommandons donc de laisser les paramètres du cache de WP Rocket tels quels avec la case « Activer la mise en cache pour les appareils mobiles » cochée.

Paramètres du cache des pages via WP Rocket.
Paramètres du cache des pages via WP Rocket.

Optimisation des fichiers

Dans le menu « Optimisation des fichiers », ils vous permettent d’optimiser vos fichiers CSS et JavaScript. Plongeons un peu dans chacun d’eux.

Optimisation des fichiers via WP Rocket.
Optimisation des fichiers via WP Rocket.

Réglages de base

  • Minifier le HTML : La minification du HTML supprime les espaces vides et les commentaires pour réduire la taille. Nous avons effectué des tests de vitesse et constaté une diminution de 0,84 % du temps de chargement avec cette option activée. ⏱ Vous ne verrez peut-être pas de folles améliorations avec cette fonctionnalité, mais généralement, moins d’espace blanc et de code est une bonne chose.
  • Combiner les fichiers de polices Google : La combinaison des polices Google réduira le nombre de requêtes HTTP. Si vous utilisez un hébergeur avec HTTP/2 d’activé, il n’est plus recommandé de combiner les fichiers en raison des améliorations apportées à la parallélisation. Kinsta supporte entièrement le HTTP/2. Le chargement de vos polices à partir de votre propre CDN peut aussi parfois améliorer les performances. Consultez notre guide sur la façon d’héberger des polices locales.
  • Supprimer les chaînes de requête des ressources statiques : Vos fichiers CSS et JavaScript ont généralement la version du fichier à la fin de leur URL, comme domaine.com/style.css?ver=4.6. Certains serveurs et serveurs proxy sont incapables de mettre en cache les chaînes de requête, même si un en-tête cache-control:public est présent. Ainsi, en les supprimant, vous pouvez parfois améliorer votre mise en cache. Nous avons effectué des tests de vitesse et constaté une diminution de 1,86 % du temps de chargement avec cette option activée.Remarque : Vous ne pouvez pas l’utiliser avec les options Minifier CSS ou JavaScript.

Fichiers CSS

  • Minifier les fichiers CSS : La minification du CSS supprime les espaces blancs et les commentaires pour réduire la taille du fichier. Nous avons effectué des tests de vitesse et constaté une diminution de 1,69 % du temps de chargement avec cette option activée. ⏱ En raison de la façon dont le CSS fonctionne, cela pourrait casser votre site, alors assurez-vous de tester. Encore une fois, en général, moins d’espaces et de code est une bonne chose.
  • Combiner les fichiers CSS : La combinaison des fichiers CSS fusionne tous vos fichiers en 1, réduisant ainsi les requêtes HTTP. Si vous utilisez un hébergeur avec HTTP/2 d’activé, il n’est plus recommandé de combiner les fichiers car ils peuvent maintenant être chargés en parallèle sur une seule connexion. Kinsta supporte entièrement le HTTP/2. En savoir plus sur la combinaison des CSS externes.
  • Optimiser la livraison CSS : L’optimisation de la livraison du CSS élimine le blocage du rendu CSS sur votre site Web pour un temps de chargement perçu plus rapidement. Pour en savoir plus à ce sujet, consultez nos articles détaillés sur le CSS bloquant le rendu et l’optimisation du chemin de rendu critique. Nous avons effectué des tests de vitesse et constaté une diminution de 0,17 % du temps de chargement avec cette option activée. ⏱  N’oubliez pas qu’il s’agit plus d’une perception du temps de chargement que d’un temps de chargement réel.

Fichiers JavaScript

  • Minifier les fichiers JavaScript : La minification du JavaScript supprime les espaces blancs et les commentaires pour réduire la taille du fichier. Nous avons effectué des tests de vitesse et constaté une diminution de 0,84 % du temps de chargement avec cette option activée. En raison de la façon dont JavaScript fonctionne, cela pourrait casser la fonctionnalité de vos plugins ou de votre thème, alors assurez-vous de le tester.
  • Combiner les fichiers JavaScript : La combinaison des fichiers Javascript combine les fichiers JS de votre site, ce qui réduit le nombre de requêtes HTTP. Si vous utilisez un hébergeur avec HTTP/2 d’activé, il n’est plus recommandé de combiner les fichiers car ils peuvent maintenant être chargés en parallèle via une seule connexion. Kinsta supporte entièrement le HTTP/2.
  • Charger le JavaScript en différé : Le chargement en différé du JavaScript élimine le blocage de rendu par le JS sur votre site et peut améliorer le temps de chargement. Pour en savoir plus à ce sujet, lisez nos articles détaillés sur le JavaScript bloquant le rendu. Cela peut aussi casser votre site si vous n’êtes pas prudent, alors assurez-vous de tester. Nous avons effectué des tests de vitesse et constaté une diminution de 1,35 % du temps de chargement avec cette option activée.

Si vous êtes client de Kinsta et que vous utilisez la fonction de minification du code intégrée au tableau de bord MyKinsta, vérifiez auprès du support si vous pouvez utiliser les deux options.

Médias

Dans le menu « Média », ils vous donnent la possibilité de charger vos images et vidéos en Lazy load, ainsi que de désactiver les scripts supplémentaires au chargement tels que les Emojis et Embeds. Plongeons un peu dans chacun d’eux.

Optimisation des médias via WP Rocket.
Optimisation des médias via WP Rocket.

LazyLoad

Le lazy load 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 la ligne de flottaison. En activant l’option de chargement en lazy load, cela peut améliorer le temps de chargement réel et perçu des images, des iframes et des vidéos qui ne seront chargées que lorsqu’elles entrent (ou sont sur le point d’entrer) dans la fenêtre et cela réduit le nombre de requêtes HTTP.

  • Activer pour les images : Nous avons effectué des tests de vitesse et constaté une diminution de 3,89% du temps de chargement avec cette option activée.
  • Activer pour les iframes et les vidéos : Nous avons déposé huit vidéos YouTube sur une page et avons constaté une diminution de 74,43 % du temps de chargement avec cette option activée. WP Rocket a une option pour remplacer automatiquement une vidéo YouTube avec leur image de prévisualisation. C’est un moyen incroyablement puissant d’accélérer les vidéos sur votre site WordPress.

Consultez notre tutoriel détaillé sur le chargement en lazy load dans WordPress.

Emoji

Avec la sortie de WordPress 4.2 est venue l’intégration des emojis dans le noyau pour les anciens navigateurs. Le gros problème est que cela génère une requête HTTP supplémentaire sur votre site WordPress pour charger le fichier wp-emoji-release.min.js. Et ça se charge sur chaque page.

Désactiver les Emoji : L’option désactiver les emoji réduira le nombre de requêtes HTTP. Elle ne les cassera pas le site, cela reviendra simplement par défaut à la version emoji du navigateur de l’utilisateur. Nous avons effectué des tests de vitesse et constaté une diminution de 2,2 % du temps de chargement avec cette option activée.

Consultez notre article détaillé sur la désactivation des émojis.

Embeds

Avec la sortie de WordPress 4.4, la fonctionnalité oEmbed est entrée dans le noyau. Vous l’avez probablement déjà vu ou utilisée. Cela permet aux utilisateurs d’intégrer des vidéos YouTube, des tweets et de nombreuses autres ressources sur leurs sites simplement en collant une URL, que WordPress convertit automatiquement en embed et fournit un aperçu en direct dans l’éditeur visuel. Si vous avez intégré Facebook à votre site, voyez comment la nouvelle mise à jour de Facebook va l’affecter et comment la corriger.

Cependant, cela signifie que cela génère également une requête HTTP supplémentaire sur votre site WordPress pour charger le fichier wp-embed.min.js. Et ça se charge sur chaque page.

Désactiver les embeds de WordPress : L’option de désactivation des embeds réduira le nombre de requêtes HTTP. Nous avons effectué des tests de vitesse et constaté une diminution de 4,9 % du temps de chargement avec cette option activée. ⏱ Consultez notre article détaillé sur la désactivation des embeds.

Préchargement

Dans le menu « Preload », ils vous donnent une option pour activer le préchargement du cache, le préchargement DNS et le préchargement des polices. Toutes ces options ne fonctionneront pas chez Kinsta. Mais plongeons un peu dans chacune d’entre elles.

Paramètres de préchargement dans WP Rocket.
Paramètres de préchargement dans WP Rocket.

Précharger le cache

Nous ne recommandons pas cette option pour les sites hébergés chez Kinsta, car elle peut en fait réduire les performances en surchargeant les workers PHP.

Préchargement des requêtes DNS

Le préchargement des DNS vous permet de résoudre les noms de domaine (effectuer une recherche DNS en arrière-plan) avant qu’un utilisateur ne clique sur un lien, ce qui peut à son tour contribuer à améliorer les performances. Cela se fait en ajoutant une balise rel="dns-prefetch" dans l’en-tête de votre site WordPress. Nous vous recommandons d’ajouter le préchargement aux requêtes externes provenant de votre CDN, de Google Fonts et de Google Analytics. Voici un exemple ci-dessous :

<link rel="dns-prefetch" href="//cdn.domain.com/">
<link rel="dns-prefetch" href="//fonts.googleapis.com/">
<link rel="dns-prefetch" href="//www.google-analytics.com">

C’est plus difficile de tester l’impact sur la vitesse, mais vous pouvez être assuré que cela aidera à accélérer votre site.

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 « Preload Fonts » dans WP Rocket. En préchargeant les polices dans l’élément <head> de votre HTML, les navigateurs web peuvent commencer à 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 d’assistance de Kinsta.

Base de données

Dans le menu « Base de données », WP Rocket vous donne la possibilité d’effectuer des nettoyages sur les articles, les commentaires, les transients et les tables.

Combiné à nos optimisations hebdomadaires automatiques de la base de données, le fait de garder votre base de données propre en supprimant les révisions d’articles et les transients inutiles vous assurera que votre base de données fonctionne au maximum de ses performances.

Optimisation de la base de données via WP Rocket.
Optimisation de la base de données via WP Rocket.

Nettoyage des posts

Il n’est pas rare que les anciens sites aient plus de 100 révisions sur leurs pages principales. Cela est simplement dû à des années d’édition et de mises à jour du contenu. Supposons par exemple qu’un site a 700 pages ou articles avec 150 révisions sur chacun, cela représente plus de 100 000 entrées dans la base de données. Cela prend de l’espace de stockage, et même avec les index des bases de données, cela peut parfois nuire à la performance.

WP Rocket vous donne la possibilité de supprimer ce qui suit :

  • Les révisions
  • Les brouillons automatiques
  • Les articles à la poubelle

Jetez un coup d’œil à notre article détaillé sur la façon d’optimiser les révisions pour des performances plus rapides.

Nettoyage des commentaires

Tout comme les révisions, les spams et les commentaires mis à la poubelle peuvent simplement s’ajouter à l’espace perdu au fil du temps. WP Rocket vous donne la possibilité de supprimer ce qui suit :

  • Les commentaires en spam
  • Les commentaires mis à la poubelle

Si vous n’utilisez pas de commentaires sur votre site WordPress, nous vous recommandons de simplement désactiver les commentaires pour empêcher le spam de passer. Vous n’avez donc pas non plus à vous soucier de l’installation de plugins 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 un cache transient corrompu détruire complètement un site WordPress. Ils sont censés être temporaires et il est donc sécuritaire de les enlever et nous vous le recommandons. Si un plugin en a besoin, ils seront automatiquement régénérés. WP Rocket vous donne la possibilité de supprimer ce qui suit :

  • Transients expirés
  • Tous les transients

Nettoyage des bases 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 ce n’est généralement pas nécessaire. InnoDB s’est révélé plus performant et plus fiable. Une grande raison d’utiliser InnoDB plutôt que MyISAM, c’est de profiter du verrouillage au niveau des lignes. Cela permet de traiter plus rapidement les requêtes dans la base de données. 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 le nettoyage automatique de votre base de données sur une base quotidienne, hebdomadaire ou mensuelle. Ceci est programmé avec un tâche cron en arrière plan.

CDN

Dans le menu « CDN », vous pouvez activer un réseau de diffusion de contenu tiers. C’est vraiment un jeu d’enfant quand il s’agit de performance. Ils déchargent votre serveur web tout en accélérant la livraison de contenu à vos visiteurs, améliorant ainsi leur expérience. Découvrez pourquoi nous pensons que chaque site devrait utiliser un CDN.

Si vous êtes un client Kinsta, ce menu n’est pas nécessaire car le CDN Kinsta est automatiquement déployé sur votre site en arrière plan.

Nous vous recommandons d’exécuter votre site WordPress d’abord à l’aide d’un outil de test de vitesse de site Web pour confirmer que tous vos actifs (JS, CSS et images) sont chargés depuis le CDN Kinsta.

Ajoutez vos paramètres CDN dans WP Rocket.
Ajoutez vos paramètres CDN dans WP Rocket.

Heartbeat

Le heartbeat est une API WordPress Core pour leserver-polling. Elle est utilisée par de nombreux thèmes et plugins 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.

Modifier les paramètres de heartbeat de WordPress dans WP Rocket.
Modifier les paramètres de heartbeat de WordPress dans WP Rocket.

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, des pings fréquents du serveur Heartbeat peuvent ne pas être nécessaires.

Avec WP Rocket, vous pouvez réduire les intervalles de ping de Heartbeat à 2 minutes ou désactiver complètement les pings pour le backend (tableau de bord WP), le frontend et l’éditeur d’articles de votre site.

Pour la plupart des sites, nous recommandons d’utiliser l’option « Réduire l’activité ». De nombreux plugins et thèmes modernes s’assurent de la présence de Heartbeat pour les fonctionnalités de base, donc le désactiver complètement pourrait potentiellement casser votre site.

Add-Ons

Sous la rubrique « 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 par le biais de WP Rocket afin de 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 plugins pour intégrer ces services à votre site, vous pouvez les supprimer en toute sécurité après avoir configuré le module complémentaire dans WP Rocket.

Add-ons de WP Rocket.
Add-ons de WP Rocket.

Optimisation d’image

Les développeurs de WP Rocket sont les mêmes qui sont à l’origine d’Imagify, l’un de nos services d’optimisation d’images préférés. Si vous cherchez un plugin WordPress facile à utiliser pour optimiser les images, jetez un coup d’œil à Imagify. Pour en savoir plus sur l’optimisation des images et sur d’autres plugins et solutions d’optimisation, consultez cet article.

Optimisation d'images par Imagify.
Optimisation d’images par Imagify.

Ultimes tests de vitesse

Nous avons ensuite effectué quelques derniers tests de vitesse avec tout ce qui était activé pour que vous puissiez voir un avant et un après. Note : ce site WordPress est hébergé chez Kinsta.

Avant WP Rocket

Nous avons fait 5 tests sur Pingdom sans WP Rocket et avons pris la moyenne.

Avant WP Rocket
Avant WP Rocket

Nous avons ensuite effectué un test dans Google PageSpeed Insights sans WP Rocket.

Google PageSpeed Insights avant WP Rocket
Google PageSpeed Insights avant WP Rocket

Après WP Rocket

Nous avons ensuite effectué 5 tests sur Pingdom avec WP Rocket et les options activées et avons pris la moyenne.

Avec WP Rocket
Avec WP Rocket

Nous avons ensuite effectué un test dans Google PageSpeed Insights avec WP Rocket.

Google PageSpeed Insights avec WP Rocket
Google PageSpeed Insights avec WP Rocket

Voici les conclusions tirées des résultats ci-dessus :

  • Dans nos tests Pingdom, nous avons constaté une diminution de 9,12% du temps de chargement total lors de l’exécution de WP Rocket. Bien que cela ne semble pas très élevé, cela n’a pris que quelques minutes et moins de 10 clics à accomplir.
  • Rappelez-vous que le pain et le beurre de WP Rocket est dans leur solution de cache. Mais ici chez Kinsta, nous utilisons déjà notre cache intégré, donc nous ne partageons que les résultats de leurs autres fonctionnalités d’optimisation. Il s’agit donc d’une amélioration de 9 % par rapport au cache rapide comme l’éclair de Kinsta.
  • Le site que nous utilisions pour le test est déjà assez optimisé. Les sites plus grands et ceux qui ne sont pas aussi optimisés verront facilement des résultats encore meilleurs.
  • Curieux de savoir pourquoi il y a des requêtes supplémentaires dans la version finale ? Cela est généralement dû à un chargement en lazy load des images, car cela crée des requêtes data:image/gif;base64 vides. Mais ne vous inquiètez pas, ça va quand même être plus rapide.
  • Si vous hébergez de la vidéo, il est possible que le temps de chargement diminue jusqu’à 50 % ou plus. Ceci est accompli en utilisant la fonction WP Rockets qui remplace les vidéos YouTube par des vignettes de prévisualisation cliquables. C’est vraiment pratique !
  • Dans nos tests Google PageSpeed Insights, nous avons vu notre score passer de 88/100 à 98/100. Cependant, les scores ne sont pas aussi importants que les temps de chargement globaux, alors prenez-les avec des pincettes. Nous en discutons dans notre article sur Google PageSpeed Insights.

Comme vous pouvez le voir ci-dessus, WP Rocket rend incroyablement facile d’accélérer votre site WordPress en quelques clics !

Résumé

L’équipe de WP Rocket ne cesse de développer de nouvelles fonctionnalités qui s’alignent directement avec les recommandations de performances web que nous partageons chez Kinsta. Vous pouvez vous attendre à une intégration encore plus étroite avec leur plugin au cours des prochains mois ! Nous sommes ravis que les clients puissent maintenant utiliser ce plugin sans aucune modification supplémentaire.

Nous aimerions savoir ce que vous en pensez ? Utilisez-vous WP Rocket ? Faites-nous le savoir ci-dessous dans les commentaires.

Brian Jackson

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.