Revue NitroPack : Optimisation de la vitesse du site WordPress en mode facile

Si vous avez un site Web, vous devez vous soucier de l'optimisation de la vitesse du site.

La vitesse de la page a un effet énorme sur l'expérience utilisateur de votre site - il existe toutes sortes de données reliant la vitesse lente du site à des taux de rebond plus élevés, des taux de conversion plus faibles et simplement des utilisateurs généralement insatisfaits.

Mais honnêtement, vous n'avez pas vraiment besoin de données pour prouver ce point, car vous savez probablement déjà à quel point un site Web à chargement lent est incroyablement ennuyeux , n'est-ce pas ?

De plus, avec la nouvelle mise à jour Page Experience de Google, Google utilise également les métriques Core Web Vitals telles que Largest Contentful Paint comme facteur de classement des moteurs de recherche, de sorte que la vitesse lente des pages peut également nuire à l'optimisation des moteurs de recherche de votre site.

Donc, la vitesse du site est importante… mais c'est aussi compliqué.

Il y a la mise en cache, l'optimisation JavaScript, l'optimisation CSS, l'optimisation HTML, les réseaux de diffusion de contenu (CDN), l'optimisation des images, la prélecture, la compression… vous voyez l'idée.

NitroPack est un plugin facile à utiliser qui vous aide à mettre en œuvre à peu près toutes les tactiques d'optimisation des performances dont votre site a besoin dans un seul outil.

Sur WordPress, il vous suffit d'installer le plugin NitroPack, de cliquer sur quelques boutons et votre site bénéficiera instantanément de tactiques telles que la mise en cache, un réseau de diffusion de contenu (CDN), l'optimisation CSS/JavaScript, et bien plus encore.

Dans notre examen pratique de NitroPack, nous allons jeter un coup d'œil pratique à cet outil, y compris les éléments suivants :

• Petit tour d'horizon des fonctionnalités
• Un tutoriel NitroPack et regardez l'interface
• Réflexions sur la question de savoir si les améliorations de NitroPack sont "réelles" (cela aura du sens plus tard)
• Quelques tests de performance avant/après avec NitroPack
• Tarification
• Dernières pensées

Revue NitroPack : à quoi ça sert ?

NitroPack est un plugin d'optimisation de vitesse tout-en-un pour WordPress (et certaines autres plates-formes).

C'est l'une des choses les plus uniques de NitroPack - c'est vraiment tout en un .

C'est étonnamment rare. Par exemple, WP Rocket est un plugin de vitesse de page très complet à part entière, mais vous devez toujours au moins le coupler avec une solution d'optimisation d'image, un CDN et quelques autres ajustements.

Avec NitroPack, il n'est pas nécessaire de créer une « pile » d'outils d'optimisation des performances. Il fait tout pour vous. Voici les fonctionnalités de haut niveau qu'il couvre :

• Mise en cache - y compris la mise en cache intelligente des pages avec préchargement et effacement intelligent du cache ainsi que la mise en cache du navigateur.
• CDN - un CDN intégré avec plus de 70 points de terminaison mondiaux, une compression Gzip/Brotli, et plus encore.
• Optimisation CSS - y compris la gestion des CSS critiques au-dessus de la ligne de flottaison afin que vous puissiez augmenter vos temps de chargement initiaux, y compris la métrique Largest Contentful Paint.
• Optimisation JavaScript - vous pouvez différer les scripts pour améliorer les temps de chargement initiaux et optimiser autrement tout le JavaScript de votre site. NitroPack a également un moyen unique de déplacer les scripts du thread principal du processeur et de retarder les scripts jusqu'à l'interaction de l'utilisateur - plus à ce sujet ci-dessous.
• Optimisation des images - il peut automatiquement compresser/redimensionner les images et les convertir en WebP. Il existe également une nouvelle fonctionnalité de dimensionnement adaptatif qui vous permet de proposer dynamiquement différentes images aux utilisateurs en fonction de la taille de leur écran.
• Optimisation HTML - y compris des détails avancés comme la préconnexion DNS pour les ressources clés.

Cette image résume assez bien les principales caractéristiques :

Une chose unique à propos de NitroPack est son "chargeur de ressources propriétaire". Le concept/avantage de ceci est assez complexe, mais l'idée de base est que NitroPack optimise le chargement de votre site (en particulier son JavaScript) pour que tous les fichiers séparés se chargent de manière optimale pour l'expérience utilisateur.

Fondamentalement, si vous activez cette fonctionnalité, elle essaie de ne charger que le minimum de fichiers nécessaires pour afficher le contenu au-dessus de la ligne de flottaison, puis attend pour charger le reste jusqu'à ce qu'un utilisateur commence à interagir avec votre site. En faisant cela, vous pouvez considérablement accélérer le temps de chargement initial de votre site, y compris la métrique de la plus grande peinture de contenu.

Vous pouvez tout lire à ce sujet ici.

Comment utiliser NitroPack

Au-delà des fonctionnalités complètes d'optimisation de la vitesse du site de NitroPack, sa configuration facile est un autre de ses principaux avantages.

Vous pouvez littéralement être opérationnel avec un site entièrement optimisé en quelques minutes seulement grâce à plusieurs modes d'optimisation prédéfinis.

Voyons comment cela fonctionne…

1. Ajoutez votre site Web

Pour commencer, vous voudrez ajouter votre site Web via le tableau de bord NitroPack :

Ensuite, vous pouvez connecter votre compte NitroPack à votre site à l'aide d'un outil de connexion. Pour WordPress, cela signifie le plugin NitroPack dédié sur WordPress.org :

2. Choisissez votre mode d'optimisation

Vous êtes maintenant prêt à choisir votre mode d'optimisation. C'est l'une de mes parties préférées de NitroPack car c'est ce qui rend NitroPack si simple.

Plutôt que de bricoler avec un tas de paramètres séparés comme vous auriez besoin de le faire dans la plupart des plugins, NitroPack vous permet simplement de choisir une configuration prédéfinie en fonction de vos besoins. Pour les utilisateurs plus avancés, vous pouvez toujours bricoler .

Vous pouvez le sélectionner à partir de votre tableau de bord WordPress ou du tableau de bord NitroPack.

Il existe cinq modes différents, mais je pense que la plupart des gens voudront choisir Strong car il offre un bon équilibre entre les améliorations de performances tout en préservant le fonctionnement de votre site.

Beaucoup de gens aiment aussi le mode Ludicrous car il apportera la plus grande amélioration à vos scores PageSpeed ​​et Core Web Vitals. Cependant, je recommande d'être prudent avec ce mode car la façon dont il retarde JavaScript peut interférer avec certaines fonctions de votre site.

Par exemple, si votre menu mobile repose sur JavaScript, le mode Ludicrous peut y provoquer un comportement étrange. D'un autre côté, si vous avez des menus basés sur CSS, cela pourrait ne pas être un problème.

Alors, n'hésitez pas à jouer avec le mode Ludicrous pour commencer, mais soyez prêt à revenir au mode Strong si vous rencontrez des problèmes :

3. … Bénéfice

Pour de nombreux utilisateurs, c'est littéralement ça. Une fois que vous avez choisi votre mode de configuration, vous pouvez arrêter de penser aux performances car NitroPack s'occupe du reste.

4. … Ou Tinker (pour les utilisateurs avancés)

Pour les utilisateurs plus avancés, NitroPack vous offre également de nombreuses options pour bricoler. Vous pouvez exclure certaines pages, scripts, cookies, ressources, paramètres de requête, etc.

Vous bénéficiez également d'options intéressantes, telles que la possibilité d'optimiser les scripts publicitaires, de vider le cache par webhook ( combinez cela avec WP Webhooks pour vous amuser ) et d'effectuer d'autres actions avancées :

Si vous êtes un utilisateur occasionnel, n'hésitez pas à ignorer tout cela. Mais si vous êtes un utilisateur avancé, vous apprécierez probablement ces paramètres.

Ces paramètres peuvent également vous aider à utiliser le mode Ludicrous sans problème, car vous pouvez exclure certains scripts dont vous ne souhaitez pas retarder le chargement.

NitroPack et "Blackhat SEO" - Est-ce une vraie chose ?

Si vous avez recherché d'autres critiques de NitroPack, vous avez peut-être vu l'accusation selon laquelle NitroPack est un outil de "Blackhat SEO" qui trompe Google en lui faisant croire que votre site se charge rapidement, même si ce n'est vraiment pas le cas.

Alors, quel est le problème ici ?

Eh bien, la réponse devient assez technique, mais je pense qu'il est assez clair que NitroPack ne fait rien de mal.

Le principal problème ici semble être la différence entre les données de test de vitesse en laboratoire et les données de test de vitesse réelles "sur le terrain":

• Données de laboratoire (synthétiques) - données de performances simulées collectées par un outil de test de vitesse.
• Données de terrain - les données de performance réelles de votre site telles qu'elles sont vécues par de vrais visiteurs humains. En règle générale, vous collecterez ces informations via le rapport d'expérience utilisateur Chrome, qui est disponible dans PageSpeed ​​Insights si votre site a suffisamment de trafic.

Les données de terrain sont ce qui compte vraiment pour les performances dans le monde réel (et pour la mise à jour de l'algorithme SEO Page Experience de Google), mais la plupart des gens se concentrent trop sur les données de laboratoire et les "scores" car ils sont beaucoup plus faciles à collecter.

La façon dont le chargeur de ressources propriétaire de NitroPack fonctionne en mode Ludicrous en déplaçant certains processus hors du thread principal et en retardant l'exécution de JavaScript signifie que votre site aura une apparence "anormalement" bonne dans certains outils de test de vitesse de laboratoire ( car de nombreux outils ne sont pas capables de détecter le processus hors thread ).

Et je comprends en quelque sorte ce que les gens disent ici - un site utilisant NitroPack et le mode Ludicrous aura l'air "suspect" dans certains outils de test de vitesse.

Cependant, le vrai problème ici est de savoir si vous pensez que NitroPack fait cela de manière malveillante pour "tromper" Google ou s'il s'agit simplement d'un sous-produit naturel de la façon dont leur chargeur de ressources fonctionne et optimise votre site.

Personnellement, je pense qu'il est assez clair que NitroPack est la vraie affaire et c'est plus un problème avec la façon dont certains outils de test de vitesse fonctionnent plutôt qu'avec NitroPack essayant de déjouer le système.

Voici pourquoi:

Tout d'abord, NitroPack n'essaie pas de cacher quoi que ce soit ici, car ils recommandent eux-mêmes aux utilisateurs de NitroPack de consulter les données de performances réelles de l'utilisateur plutôt que de se fier uniquement aux données de laboratoire.

De plus, NitroPack s'efforce de placer les données de terrain réelles au premier plan dans le tableau de bord NitroPack. Si vous regardez les données de terrain réelles, vous verrez que NitroPack apporte de grandes améliorations aux données de laboratoire et aux données de terrain réelles.

Vous ne pouvez pas tromper les données du monde réel. Donc, si NitroPack essayait vraiment d'en tirer un rapide sur les gens, il ne serait pas intelligent de leur part d'encourager leurs utilisateurs à se concentrer sur les données du monde réel plutôt que sur les données de laboratoire.

La dernière allégation est que NitroPack fait un certain type de référencement chapeau noir que Google finira par pénaliser.

Honnêtement, cela n'a aucun sens pour moi.

Tout d'abord, la vitesse de la page est toujours un petit facteur de classement, donc ce n'est pas comme "tromper" Google en lui faisant croire que vous avez un site rapide qui vous propulsera dans le classement. Google a déclaré que la vitesse du site est davantage un « bris d'égalité » entre des sites également pertinents, plutôt que quelque chose qui améliorera votre classement en soi.

Autrement dit, ce n'est pas comme si le fait que votre site passe de deux secondes à une seconde changerait quoi que ce soit – deux secondes, c'est déjà assez rapide pour gagner le bris d'égalité de Google.

Au-delà de cela, je pense que les allégations de référencement n'ont tout simplement pas de sens en raison du nombre de sites populaires qui utilisent NitroPack et qui se classent toujours bien.

En fait, nous utilisons NitroPack ici chez WP Mayor ! Nous ne ferions pas cela si nous pensions qu'il y avait des impacts négatifs sur le référencement.

Si vous voulez vérifier cela, vous pouvez regarder les en-têtes de WP Mayor et vous verrez que nous utilisons bien NitroPack :

Enfin, si vous êtes vraiment inquiet, vous pouvez utiliser l'outil d'inspection d'URL de Google Search Console pour voir à quoi ressemble votre site avec NitroPack lorsque Google l'explore. Si vous faites cela, vous verrez que Google détecte le contenu complet de votre page comme il le ferait sans NitroPack.

Autrement dit, il n'y a aucune différence dans le contenu de votre site aux yeux de Google selon l'outil d'exploration de Google.

Performances NitroPack Avant/Après

Avec cette longue discussion à l'écart, je veux examiner certaines données de performance de WP Mayor.

Malgré ce que j'ai dit plus haut sur le fait que les données de terrain sont plus importantes que les données de laboratoire, je vais utiliser ici un outil de test de vitesse synthétique car, eh bien, il m'est difficile de collecter des données avant/après avec des temps de chargement utilisateur réels.

Cependant, j'utiliserai WebPageTest, qui fait un travail supérieur à la moyenne pour capturer l'expérience de vitesse de page complète, car il affiche à la fois des mesures entièrement chargées et complètes du document.

La métrique entièrement chargée capturera une grande partie du JavaScript que NitroPack reporte/retarde lors du chargement initial.

Parce que nous vivons dans un monde axé sur le mobile, j'ai configuré WebPageTest avec une approche axée sur le mobile :

• Test depuis un iPhone 8 émulé
• Utiliser une connexion LTE limitée
• Exécutez neuf tests distincts et prenez la valeur médiane

Voici les données de la page d'accueil de WP Mayor avec et sans NitroPack :

*Il s'agit d'un bon indicateur du premier délai d'entrée, qui n'est disponible qu'à partir des données de terrain .

** Vous pouvez voir que les requêtes HTTP sont très faibles au début car NitroPack retarde beaucoup de ces scripts.

Dans l'ensemble, vous pouvez voir une amélioration assez massive dans tous les domaines avec NitroPack, en particulier en ce qui concerne la plus grande peinture de contenu et les mesures de document complet.

Gardez à l'esprit que vous pouvez obtenir ces améliorations en quelques clics seulement. Encore une fois, je pense que ce qui rend NitroPack unique, c'est la combinaison d'améliorations des performances et de simplicité.

Si vous êtes intéressé par les scores de PageSpeed ​​Insights ( personnellement, je ne le suis pas ), j'ai également collecté ceux de la page d'accueil de WP Mayor avec et sans NitroPack :

Vous pouvez également y voir d'énormes améliorations, en particulier avec le score mobile.

Tarification NitroPack

Maintenant que nous avons couvert tout le reste, parlons des prix de NitroPack.

Tout d'abord, NitroPack a un plan gratuit qui prend en charge jusqu'à 5 000 visiteurs par mois et une bande passante CDN de 1 Go avec toutes les fonctionnalités. Si vous avez un site à faible trafic, ce plan gratuit pourrait bien vous convenir, du moins au début.

Cependant, l'inconvénient du plan gratuit est qu'il inclut un badge NitroPack dans le pied de page de votre site. Ce n'est pas très intrusif, mais c'est quelque chose à garder à l'esprit.

Si vous dépassez les limites gratuites ou si vous souhaitez simplement supprimer le badge NitroPack, vous devrez payer pour un plan. Les plans payants de NitroPack permettent une facturation mensuelle et annuelle. Si vous payez annuellement, vous bénéficierez de deux mois gratuits.

Tous les plans ont les mêmes fonctionnalités - les seules différences sont les limites d'affichage des pages et la bande passante CDN. De plus, chaque plan ne prend en charge qu'un seul site. Si vous avez beaucoup de sites, vous pouvez contacter l'équipe de vente de NitroPack pour en savoir plus sur les options d'agence personnalisée et de plan multi-sites, ce qui peut vous faire économiser de l'argent.

Si votre site compte plus d'un million de pages vues ou consomme plus de 500 Go de bande passante CDN, vous pouvez également contacter les ventes de NitroPack pour un plan personnalisé.

De plus, tous les forfaits sont assortis d'une garantie de remboursement de 14 jours, vous ne risquez donc rien.

Réflexions finales sur NitroPack

Dans l'ensemble, je pense qu'il y a des avantages et des inconvénients à utiliser NitroPack pour accélérer votre site Web.

Les principaux avantages de NitroPack sont qu'il est si simple et si complet . C'est un outil qui implémente à peu près toutes les tactiques d'optimisation des performances, y compris des approches uniques telles que la façon dont il retarde JavaScript et le déplace hors du thread principal du processeur. Je ne pense pas que vous trouverez un moyen plus simple de passer de zéro à un site entièrement optimisé.

Pour beaucoup de gens, en particulier les non-spécialistes, c'est une proposition de valeur très puissante.

Le principal inconvénient de NitroPack est qu'il est cher , du moins pour l'espace WordPress. Si vous avez un budget limité, vous pouvez trouver des plugins de vitesse de site moins chers pour optimiser votre site (comme WP Rocket) ou vous pouvez même créer une assez bonne pile d'optimisation en utilisant des plugins WordPress entièrement gratuits.

Au final, ça revient un peu à ça…

La vitesse du site est extrêmement importante, vous ne pouvez donc pas simplement l'ignorer.

En ce qui concerne la vitesse du site, vous devez répondre à cette question :

Êtes-vous prêt à payer une légère prime pour une solution en un clic pour résoudre les problèmes de vitesse de votre site ?

Si vous n'êtes pas une personne très technique ou si vous préférez vous concentrer sur la création de contenu et le marketing de votre site plutôt que sur l'optimisation des performances, je pense que vous pourriez entrer dans la catégorie "Oui".

D'un autre côté, si vous souhaitez maintenir vos coûts aussi bas que possible, vous pouvez entrer dans la catégorie "Non", auquel cas vous préférerez peut-être un plugin de vitesse de page WordPress moins cher ou gratuit.

Ces plugins sont-ils aussi simples que NitroPack ? Pas vraiment. Mais si vous êtes prêt à travailler, vous pouvez toujours créer un site Web à chargement rapide à l'aide d'outils gratuits ou moins chers.

Si vous êtes sur la clôture, je vous recommande simplement de vous inscrire à NitroPack et d'effectuer quelques tests. Le processus d'installation ne prend que quelques minutes, vous n'aurez donc pas besoin d'investir beaucoup de temps.

Au-delà de cela, il y a une garantie de remboursement de 14 jours, donc vous ne risquez pas non plus d'argent ( ou, vous pouvez simplement essayer le plan gratuit si vous êtes d'accord avec le badge NitroPack ).