Nous sommes toujours à la recherche de nouveaux moyens innovants pour accélérer et optimiser vos sites WordPress. 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. Auparavant, cela devait être fait manuellement avec leur module de mise en cache des pages. Nous avons également retiré le plugin de notre liste d’interdiction.

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

WP Rocket UI

WP Rocket UI

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.

WP Rocket supprime tous les fichiers mis en cache

WP Rocket supprime tous les fichiers mis en cache

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 avec WP Rocket

Optimisation des fichiers avec 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. ⏱ En savoir plus sur le fonctionnement des chaînes de requête. 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. Encore une fois, en général, moins d’espaces et de code est une bonne chose.
  • 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. ⏱ (Désactivée, Activée)

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 avec WP Rocket

Optimisation des médias avec 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. ⏱ (Désactivée, 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.

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 « Préchargement », vous avez la possibilité d’activer le préchargement du sitemap, du bot de préchargement et de précharger les requêtes DNS. Tout cela ne fonctionnera pas chez Kinsta. Mais plongeons un peu dans chacune de ces fonctions.

Préchargement WP Rocket

Préchargement WP Rocket

Préchargement du sitemap et robot de préchargement

Nous ne recommandons pas d’utiliser l’une ou l’autre de ces options et, elles ne fonctionneront probablement pas chez Kinsta.

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.

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, vous pouvez toujours contacter l’équipe de support de Kinsta.

Base de données

Sous le menu « Base de données », ils vous donnent la possibilité d’effectuer des nettoyages sur les articles, les commentaires, les transients et les tables.

Base de données WP Rocket

Base de données 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.

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités

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 d’accélérer le traitement de vos requêtes. Si vous migrez votre site WordPress vers Kinsta, c’est une des optimisations que nos ingénieurs font 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. Cependant, nous avons remarqué sur quelques sites que vous pourriez avoir besoin d’entrer votre URL CDN Kinsta lorsque WP Rocket est activé. 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. Si ce n’est pas le cas, essayez d’entrer votre URL CDN Kinsta manuellement (exemple : mk0dgs321g.kinstacdn.com).

WP Rocket CDN

WP Rocket CDN

Add-Ons

Dans le menu « Add-Ons », ils vous donnent la possibilité d’activer Cloudflare. Si vous utilisez l’extension WP Rocket Cloudflare, vous n’avez plus besoin du plugin officiel Cloudflare. WP Rocket offre la même fonctionnalité pour afficher les adresses IP d’origine.

WP Rocket add-ons

WP Rocket add-ons

Si vous utilisez WP Rocket avec un autre hébergeur, vous aurez également la possibilité d’activer Varnish. Cependant, comme cela entrerait en conflit avec notre solution de cache ici chez Kinsta, ceci est automatiquement masqué.

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 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.

11
Partages