\u00c0 une \u00e9poque o\u00f9 les gens ont besoin de se sentir plus connect\u00e9s et de consolider leurs activit\u00e9s en ligne – qu’elles soient professionnelles, r\u00e9cr\u00e9atives ou sociales – nous y contribuons de la mani\u00e8re que nous connaissons le mieux. <\/p>
Nous voici donc avec une toute nouvelle version de WP Rocket qui rendra vos sites web plus rapides que jamais !<\/p>
Quoi de neuf dans WP Rocket 3.6<\/h2>- Critical Path CSS sp\u00e9cifiques pour les pages<\/li>
- Critical Path CSS pour mobile<\/li>
- Pr\u00e9chargement des polices<\/li>
- Compression Gzip pour les fichiers CSS et JS<\/li>
- Bye-bye<\/em> \u00e0 l\u2019option Supprimer les query strings des ressources statiques<\/em><\/li><\/ul>
Voyons tout \u00e7a en d\u00e9tail. ?<\/p>
Critical Path CSS pour des pages sp\u00e9cifiques<\/h3>
Dans PageSpeed Insights, vous avez peut-\u00eatre rencontr\u00e9 des recommandations telles que \u00ab\u00a0\u00c9liminer le JavaScript et CSS bloquant le rendu\u00a0\u00bb ou \u00ab\u00a0\u00c9liminer les ressources bloquant le rendu\u00a0\u00bb<\/a>..<\/p>Depuis un certain temps d\u00e9j\u00e0, WP Rocket vous aide \u00e0 r\u00e9pondre \u00e0 ces recommandations en un seul clic en r\u00e9cup\u00e9rant et en param\u00e9trant automatiquement le Critical CSS de votre site WordPress.<\/p>
Le Critical Path CSS (ou CPCSS) est le proc\u00e9d\u00e9 qui consiste \u00e0 r\u00e9cup\u00e9rer le CSS minimal requis pour rendre correctement la premi\u00e8re partie d’une page web, puis \u00e0 l’appliquer en ligne afin qu’elle puisse se charger plus rapidement.<\/p>
Vous pouvez en savoir plus sur son fonctionnement en lisant cet article consacr\u00e9 au Critical CSS.<\/a><\/p>Avec la version 3.6, notre option Optimiser le chargement du CSS<\/em> est plus efficace encore car vous pouvez d\u00e9sormais obtenir un Critical Path CSS pr\u00e9cis et personnalis\u00e9 sur chacune des pages de votre site. <\/p>Jusqu’\u00e0 pr\u00e9sent, WP Rocket g\u00e9n\u00e9rait des CPCSS pour le contenu le plus r\u00e9cent par Post type, par exemple pour la page la plus r\u00e9cente. Ainsi, si vous aviez des pages avec des mises en page diff\u00e9rentes, le m\u00eame CPCSS \u00e9tait appliqu\u00e9 sur chaque page, il ne pouvait donc pas \u00eatre pr\u00e9cis dans tous les cas. <\/p>
Vous pouvez d\u00e9sormais avoir des CPCSS sp\u00e9cifiques pour chaque page en fonction de vos besoins<\/strong>. Vous pouvez g\u00e9n\u00e9rer un Critical Path CSS sp\u00e9cifique pour vos articles\/pages customis\u00e9s, et supprimer une bonne fois pour toutes l’avertissement de blocage du rendu dans PageSpeed. ?<\/strong><\/p>Nous avons d\u00e9velopp\u00e9 l’extension de cette fonctionnalit\u00e9 en gardant \u00e0 l’esprit les mises en page personnalis\u00e9es<\/strong>. En effet, l’un des grands avantages de WordPress est qu’il vous permet de combiner cr\u00e9ativit\u00e9 et connaissances de base en HTML, CSS et PHP pour cr\u00e9er des mises en page personnalis\u00e9es pour vos pages.<\/p>Si votre site web utilise des mises en page personnalis\u00e9es, il tirera un grand profit de cette nouvelle fonctionnalit\u00e9. <\/p>
Pour g\u00e9n\u00e9rer le Critical Path CSS pour une page ou un article particulier, vous pouvez directement aller \u00e0 l’\u00e9cran d’\u00e9dition de ce contenu et cliquer sur le bouton G\u00e9n\u00e9rer le CPCSS sp\u00e9cifique<\/em>.<\/p>Tip :<\/strong> Vous pouvez utiliser cette fonction pour tout post public et dot\u00e9 d’une interface d’\u00e9dition permettant d’afficher la meta box des options de WP Rocket.<\/p>Critical Path CSS pour Mobile<\/h3>
Une autre int\u00e9gration importante du Critical Path CSS introduit par la version 3.6 est le CPCSS pour les sites mobiles.<\/strong><\/p>Jusqu’\u00e0 pr\u00e9sent, WP Rocket g\u00e9n\u00e9rait et utilisait le m\u00eame Critical Path CSS pour les ordinateurs de bureau et les t\u00e9l\u00e9phones portables. Mais si vous avez de l’exp\u00e9rience dans le d\u00e9veloppement ou la conception web, vous savez d\u00e9j\u00e0 que de nombreux sites WordPress utilisent un th\u00e8me diff\u00e9rent pour leur version mobile.<\/strong><\/p>Ces types de sites peuvent grandement b\u00e9n\u00e9ficier d’un CPCSS d\u00e9di\u00e9.<\/p>
Tip :<\/strong> Nous allons g\u00e9n\u00e9rer un CPCSS pour mobile uniquement si l’option \u00ab\u00a0Cr\u00e9er un fichier de cache \u00e0 part pour les mobiles<\/a>\u00a0\u00bb est activ\u00e9e. Si vous n’utilisez pas cette option, nous supposerons que votre th\u00e8me est responsive<\/em> et que le CPCSS g\u00e9n\u00e9r\u00e9 pour le bureau sera \u00e9galement valable pour le mobile.<\/p>Pr\u00e9chargement des polices<\/h3>
Le r\u00e9f\u00e9rencement de polices au sein de fichiers CSS est une pratique assez courante. Lorsque cela se produit, le navigateur doit t\u00e9l\u00e9charger et analyser les fichiers CSS avant de pouvoir traiter les polices. <\/p>
Mais ce processus peut nuire aux performances globales de la page et\/ou \u00e0 l’exp\u00e9rience de l’utilisateur. <\/p>
Avec WP Rocket 3.6, toutes les polices h\u00e9berg\u00e9es sur votre propre domaine<\/strong>, appel\u00e9es par un fichier CSS ou plus tard dans le chargement de la page, ne seront plus un probl\u00e8me de performance !<\/p>Vous pouvez d\u00e9sormais dire au navigateur de commencer \u00e0 t\u00e9l\u00e9charger des polices qu’il ne d\u00e9couvrirait autrement que beaucoup plus tard.<\/p>
Gr\u00e2ce \u00e0 cette nouvelle fonctionnalit\u00e9, vous pouvez indiquer au navigateur que vous avez des \u00ab\u00a0polices cach\u00e9es\u00a0\u00bb \u00e0 l’int\u00e9rieur d’un fichier CSS. WP Rocket fera le reste en confirmant au navigateur que les fichiers indiqu\u00e9s sont bien des polices.<\/p>
L’option de pr\u00e9chargement des polices permettra \u00e9galement de r\u00e9pondre \u00e0 la recommandation de Google \u00ab\u00a0pr\u00e9chargez les demandes cl\u00e9s<\/a>\u00ab\u00a0. <\/p>![\"Pr\u00e9chargez](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/preload-key-request-pagespeedinsights-1024x348.png\")
<\/figure>Notez que les polices externes comme les Google Fonts ne peuvent pas \u00eatre saisies ici : l’option Optimiser les Google Fonts<\/a> les g\u00e8re d\u00e9j\u00e0.<\/p>Tip <\/strong>: N’oubliez pas de pr\u00e9charger seulement les polices qui retarderait autrement le rendu de la page ou la performance per\u00e7ue. Si vous pr\u00e9chargiez trop de polices qui ne sont pas n\u00e9cessaires imm\u00e9diatement, vous diminueriez les performances de votre site !<\/p>Compression GZIP pour les fichiers CSS et JS<\/h3>
WP Rocket a toujours activ\u00e9 la compression GZIP automatiquement et ceci d\u00e8s son activation.<\/p>
La compression GZIP permet de compresser le contenu HTML, CSS et JS de sorte que les fichiers envoy\u00e9s par le serveur au navigateur du visiteur soient plus l\u00e9gers. Une taille de fichier plus petite signifie un t\u00e9l\u00e9chargement plus rapide, et cela am\u00e9liore le temps de chargement global de votre page.<\/p>
Sur notre blog, vous trouverez une explication approfondie des aspects techniques de la compression GZIP. <\/a><\/p>Avec WP Rocket 3.6, nous avons d\u00e9cid\u00e9 d’\u00e9tendre GZIP pour pr\u00e9-compresser non seulement les fichiers HTML mais aussi tous les fichiers CSS et JS optimis\u00e9s par WP Rocket.<\/p>
Cela signifie que, lorsque vous minifiez\/combinez les CSS et JS en utilisant les options de l’onglet Optimisation des fichiers, WP Rocket cr\u00e9e deux versions de chaque fichier : Un fichier CSS\/JS standard et une version pr\u00e9-compress\u00e9e :<\/p>![\"gzipped](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/gzipped-files.jpg\")
<\/figure>Pour savoir comment vous servir ces fichiers, consultez notre documentation.<\/a><\/p>Tip :<\/strong> Si un fichier n’est pas<\/em> trait\u00e9 par WP Rocket, par exemple s’il a min<\/em> dans le nom du fichier ou s’il a \u00e9t\u00e9 exclu de l’optimisation, nous ne cr\u00e9erons pas la version pr\u00e9-compress\u00e9e.<\/p>Bye-bye \u00e0 l\u2019option Supprimer les query strings des ressources statiques<\/h3>
Si vous aimez la performance web ou si vous nous suivez depuis un certain temps, vous le savez peut-\u00eatre d\u00e9j\u00e0 : lorsqu’il s’agit des meilleures pratiques en mati\u00e8re d’optimisation de performances, rien n’est grav\u00e9 dans le marbre.<\/p>
Il y a quelques ann\u00e9es, nous avons suivi la recommandation de Google PageSpeed pour supprimer les cha\u00eenes de requ\u00eate des ressources statiques. C’est alors que nous avons introduit l’option de suppression des cha\u00eenes de requ\u00eate dans les r\u00e9glages de WP Rocket.<\/p>
M\u00eame si Google a mis fin \u00e0 cet avertissement en 2014, plusieurs outils de test ont continu\u00e9 \u00e0 montrer cet ancien avertissement PageSpeed jusqu’\u00e0 r\u00e9cemment.<\/p>
Sur GTMetrix<\/a>, par exemple, vous pourriez y lire :<\/p>\u00abRemove query strings from static resources<\/em>
Resources with a \u201c?\u201d in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL for the following resources…<\/em>\u00bb<\/p>Or, cette recommandation est est d\u00e9sormais obsol\u00e8te comme GTMetrix l’a annonc\u00e9 dans ses r\u00e9centes publications<\/a>. <\/p>Les navigateurs modernes et les proxies ne tiennent plus compte de la pr\u00e9sence de cha\u00eenes de requ\u00eate, mais s’appuient sur Cache-Control<\/a>, ETags<\/a> et les en-t\u00eates de r\u00e9ponse Last Modified<\/a>.<\/p>Comme le dit Google :<\/p>
\u201cLa partie de la configuration de la mise en cache HTTP qui importe le plus est l’en-t\u00eate que votre serveur web ajoute \u00e0 chaque r\u00e9ponse sortante.<\/em>\u201c
Source: <\/em>Google Web.Dev<\/em><\/a><\/p>En suivant ces meilleures pratiques, et en constatant que les r\u00e9sultats de vitesse ne varient pas en fonction de la pr\u00e9sence de cha\u00eenes de requ\u00eate, nous avons d\u00e9cid\u00e9 de supprimer cette option des r\u00e9glages de WP Rocket.<\/p>
Pr\u00e9sentation vid\u00e9o de WP Rocket 3.6<\/h2>
Voyons tout \u00e7a en d\u00e9tail. ?<\/p>
Critical Path CSS pour des pages sp\u00e9cifiques<\/h3>
Dans PageSpeed Insights, vous avez peut-\u00eatre rencontr\u00e9 des recommandations telles que \u00ab\u00a0\u00c9liminer le JavaScript et CSS bloquant le rendu\u00a0\u00bb ou \u00ab\u00a0\u00c9liminer les ressources bloquant le rendu\u00a0\u00bb<\/a>..<\/p> Depuis un certain temps d\u00e9j\u00e0, WP Rocket vous aide \u00e0 r\u00e9pondre \u00e0 ces recommandations en un seul clic en r\u00e9cup\u00e9rant et en param\u00e9trant automatiquement le Critical CSS de votre site WordPress.<\/p> Le Critical Path CSS (ou CPCSS) est le proc\u00e9d\u00e9 qui consiste \u00e0 r\u00e9cup\u00e9rer le CSS minimal requis pour rendre correctement la premi\u00e8re partie d’une page web, puis \u00e0 l’appliquer en ligne afin qu’elle puisse se charger plus rapidement.<\/p> Vous pouvez en savoir plus sur son fonctionnement en lisant cet article consacr\u00e9 au Critical CSS.<\/a><\/p> Avec la version 3.6, notre option Optimiser le chargement du CSS<\/em> est plus efficace encore car vous pouvez d\u00e9sormais obtenir un Critical Path CSS pr\u00e9cis et personnalis\u00e9 sur chacune des pages de votre site. <\/p> Jusqu’\u00e0 pr\u00e9sent, WP Rocket g\u00e9n\u00e9rait des CPCSS pour le contenu le plus r\u00e9cent par Post type, par exemple pour la page la plus r\u00e9cente. Ainsi, si vous aviez des pages avec des mises en page diff\u00e9rentes, le m\u00eame CPCSS \u00e9tait appliqu\u00e9 sur chaque page, il ne pouvait donc pas \u00eatre pr\u00e9cis dans tous les cas. <\/p> Vous pouvez d\u00e9sormais avoir des CPCSS sp\u00e9cifiques pour chaque page en fonction de vos besoins<\/strong>. Vous pouvez g\u00e9n\u00e9rer un Critical Path CSS sp\u00e9cifique pour vos articles\/pages customis\u00e9s, et supprimer une bonne fois pour toutes l’avertissement de blocage du rendu dans PageSpeed. ?<\/strong><\/p> Nous avons d\u00e9velopp\u00e9 l’extension de cette fonctionnalit\u00e9 en gardant \u00e0 l’esprit les mises en page personnalis\u00e9es<\/strong>. En effet, l’un des grands avantages de WordPress est qu’il vous permet de combiner cr\u00e9ativit\u00e9 et connaissances de base en HTML, CSS et PHP pour cr\u00e9er des mises en page personnalis\u00e9es pour vos pages.<\/p> Si votre site web utilise des mises en page personnalis\u00e9es, il tirera un grand profit de cette nouvelle fonctionnalit\u00e9. <\/p> Pour g\u00e9n\u00e9rer le Critical Path CSS pour une page ou un article particulier, vous pouvez directement aller \u00e0 l’\u00e9cran d’\u00e9dition de ce contenu et cliquer sur le bouton G\u00e9n\u00e9rer le CPCSS sp\u00e9cifique<\/em>.<\/p> Tip :<\/strong> Vous pouvez utiliser cette fonction pour tout post public et dot\u00e9 d’une interface d’\u00e9dition permettant d’afficher la meta box des options de WP Rocket.<\/p> Une autre int\u00e9gration importante du Critical Path CSS introduit par la version 3.6 est le CPCSS pour les sites mobiles.<\/strong><\/p> Jusqu’\u00e0 pr\u00e9sent, WP Rocket g\u00e9n\u00e9rait et utilisait le m\u00eame Critical Path CSS pour les ordinateurs de bureau et les t\u00e9l\u00e9phones portables. Mais si vous avez de l’exp\u00e9rience dans le d\u00e9veloppement ou la conception web, vous savez d\u00e9j\u00e0 que de nombreux sites WordPress utilisent un th\u00e8me diff\u00e9rent pour leur version mobile.<\/strong><\/p> Ces types de sites peuvent grandement b\u00e9n\u00e9ficier d’un CPCSS d\u00e9di\u00e9.<\/p> Tip :<\/strong> Nous allons g\u00e9n\u00e9rer un CPCSS pour mobile uniquement si l’option \u00ab\u00a0Cr\u00e9er un fichier de cache \u00e0 part pour les mobiles<\/a>\u00a0\u00bb est activ\u00e9e. Si vous n’utilisez pas cette option, nous supposerons que votre th\u00e8me est responsive<\/em> et que le CPCSS g\u00e9n\u00e9r\u00e9 pour le bureau sera \u00e9galement valable pour le mobile.<\/p> Le r\u00e9f\u00e9rencement de polices au sein de fichiers CSS est une pratique assez courante. Lorsque cela se produit, le navigateur doit t\u00e9l\u00e9charger et analyser les fichiers CSS avant de pouvoir traiter les polices. <\/p> Mais ce processus peut nuire aux performances globales de la page et\/ou \u00e0 l’exp\u00e9rience de l’utilisateur. <\/p> Avec WP Rocket 3.6, toutes les polices h\u00e9berg\u00e9es sur votre propre domaine<\/strong>, appel\u00e9es par un fichier CSS ou plus tard dans le chargement de la page, ne seront plus un probl\u00e8me de performance !<\/p> Vous pouvez d\u00e9sormais dire au navigateur de commencer \u00e0 t\u00e9l\u00e9charger des polices qu’il ne d\u00e9couvrirait autrement que beaucoup plus tard.<\/p> Gr\u00e2ce \u00e0 cette nouvelle fonctionnalit\u00e9, vous pouvez indiquer au navigateur que vous avez des \u00ab\u00a0polices cach\u00e9es\u00a0\u00bb \u00e0 l’int\u00e9rieur d’un fichier CSS. WP Rocket fera le reste en confirmant au navigateur que les fichiers indiqu\u00e9s sont bien des polices.<\/p> L’option de pr\u00e9chargement des polices permettra \u00e9galement de r\u00e9pondre \u00e0 la recommandation de Google \u00ab\u00a0pr\u00e9chargez les demandes cl\u00e9s<\/a>\u00ab\u00a0. <\/p> Notez que les polices externes comme les Google Fonts ne peuvent pas \u00eatre saisies ici : l’option Optimiser les Google Fonts<\/a> les g\u00e8re d\u00e9j\u00e0.<\/p> Tip <\/strong>: N’oubliez pas de pr\u00e9charger seulement les polices qui retarderait autrement le rendu de la page ou la performance per\u00e7ue. Si vous pr\u00e9chargiez trop de polices qui ne sont pas n\u00e9cessaires imm\u00e9diatement, vous diminueriez les performances de votre site !<\/p> WP Rocket a toujours activ\u00e9 la compression GZIP automatiquement et ceci d\u00e8s son activation.<\/p> La compression GZIP permet de compresser le contenu HTML, CSS et JS de sorte que les fichiers envoy\u00e9s par le serveur au navigateur du visiteur soient plus l\u00e9gers. Une taille de fichier plus petite signifie un t\u00e9l\u00e9chargement plus rapide, et cela am\u00e9liore le temps de chargement global de votre page.<\/p> Avec WP Rocket 3.6, nous avons d\u00e9cid\u00e9 d’\u00e9tendre GZIP pour pr\u00e9-compresser non seulement les fichiers HTML mais aussi tous les fichiers CSS et JS optimis\u00e9s par WP Rocket.<\/p> Cela signifie que, lorsque vous minifiez\/combinez les CSS et JS en utilisant les options de l’onglet Optimisation des fichiers, WP Rocket cr\u00e9e deux versions de chaque fichier : Un fichier CSS\/JS standard et une version pr\u00e9-compress\u00e9e :<\/p> Pour savoir comment vous servir ces fichiers, consultez notre documentation.<\/a><\/p> Tip :<\/strong> Si un fichier n’est pas<\/em> trait\u00e9 par WP Rocket, par exemple s’il a min<\/em> dans le nom du fichier ou s’il a \u00e9t\u00e9 exclu de l’optimisation, nous ne cr\u00e9erons pas la version pr\u00e9-compress\u00e9e.<\/p> Si vous aimez la performance web ou si vous nous suivez depuis un certain temps, vous le savez peut-\u00eatre d\u00e9j\u00e0 : lorsqu’il s’agit des meilleures pratiques en mati\u00e8re d’optimisation de performances, rien n’est grav\u00e9 dans le marbre.<\/p> Il y a quelques ann\u00e9es, nous avons suivi la recommandation de Google PageSpeed pour supprimer les cha\u00eenes de requ\u00eate des ressources statiques. C’est alors que nous avons introduit l’option de suppression des cha\u00eenes de requ\u00eate dans les r\u00e9glages de WP Rocket.<\/p> M\u00eame si Google a mis fin \u00e0 cet avertissement en 2014, plusieurs outils de test ont continu\u00e9 \u00e0 montrer cet ancien avertissement PageSpeed jusqu’\u00e0 r\u00e9cemment.<\/p> Sur GTMetrix<\/a>, par exemple, vous pourriez y lire :<\/p> \u00abRemove query strings from static resources<\/em> Or, cette recommandation est est d\u00e9sormais obsol\u00e8te comme GTMetrix l’a annonc\u00e9 dans ses r\u00e9centes publications<\/a>. <\/p> Les navigateurs modernes et les proxies ne tiennent plus compte de la pr\u00e9sence de cha\u00eenes de requ\u00eate, mais s’appuient sur Cache-Control<\/a>, ETags<\/a> et les en-t\u00eates de r\u00e9ponse Last Modified<\/a>.<\/p> Comme le dit Google :<\/p> \u201cLa partie de la configuration de la mise en cache HTTP qui importe le plus est l’en-t\u00eate que votre serveur web ajoute \u00e0 chaque r\u00e9ponse sortante.<\/em>\u201c En suivant ces meilleures pratiques, et en constatant que les r\u00e9sultats de vitesse ne varient pas en fonction de la pr\u00e9sence de cha\u00eenes de requ\u00eate, nous avons d\u00e9cid\u00e9 de supprimer cette option des r\u00e9glages de WP Rocket.<\/p>Critical Path CSS pour Mobile<\/h3>
Pr\u00e9chargement des polices<\/h3>
<\/figure>Compression GZIP pour les fichiers CSS et JS<\/h3>
Sur notre blog, vous trouverez une explication approfondie des aspects techniques de la compression GZIP. <\/a><\/p><\/figure>Bye-bye \u00e0 l\u2019option Supprimer les query strings des ressources statiques<\/h3>
Resources with a \u201c?\u201d in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL for the following resources…<\/em>\u00bb<\/p>
Source: <\/em>Google Web.Dev<\/em><\/a><\/p>Pr\u00e9sentation vid\u00e9o de WP Rocket 3.6<\/h2>