Non, je ne parle pas d'auditionner pour un rôle dans le prochain film Fast & ; Furious - je parle d'être toujours à l'affût de moyens d'accélérer votre site web.

Si vous avez un site web, quel que soit son sujet, la rapidité de son chargement jouera un rôle important dans son succès. Un site web qui se charge lentement rendra les visiteurs mécontents, réduira vos taux de conversion et vous placera dans la ligne de mire de Google.

C'est peut-être ce qui vous a conduit à notre évaluation de NitroPack - NitroPack est un outil de performance de site Web tout-en-un qui, selon les termes de sa page d'accueil, est "le seul service dont vous avez besoin pour un site Web rapide".

Si vous voulez un moyen simple d'accélérer votre site web, je ne suis pas sûr que vous trouverez un moyen plus pratique d'améliorer considérablement vos temps de chargement.

Bien sûr, comme c'est souvent le cas, vous devrez payer pour ce confort, mais selon votre situation, le jeu en vaut peut-être la chandelle.

Dans cet article, je vais mettre NitroPack à l'épreuve en...

• Je lance quelques tests de performance avant/après pour voir dans quelle mesure NitroPack peut accélérer mon site.
• Découvrir les différentes fonctionnalités offertes par NitroPack.
• Montrer comment installer et configurer NitroPack avec un site web WordPress ( bien que NitroPack fonctionne aussi avec des sites qui ne sont pas des sites WordPress ).

À la fin, vous devriez savoir s'il s'agit ou non de l'outil adapté à vos besoins.

Données des tests de performance de NitroPack

Évidemment, le facteur le plus important pour déterminer si vous devez ou non utiliser NitroPack est de savoir s'il peut faire une différence notable dans les performances de votre site. Pour cette raison, je pense qu'il est préférable de commencer notre examen de NitroPack par des tests de performances réels, avant même de parler de ses fonctionnalités.

En fait, les caractéristiques sont bien présentées dans le texte marketing, mais ce sont les temps de chargement des pages qui comptent.

Pour tester les performances de NitroPack, j'ai pris mon fidèle site de démonstration WordPress et je l'ai utilisé pour effectuer des tests avant/après à partir de différents endroits.

Mon site de test est hébergé sur le droplet DigitalOcean le moins cher et utilise le thème Astra (notre avis). Pour ajouter un peu de "poids" et rendre le test plus réaliste, j'ai également importé la version complète Elementor du modèle Organic Store qui inclut le plugin WooCommerce (ainsi que du contenu de démonstration construit avec Elementor, un plugin populaire de construction de pages WordPress).

Pour collecter les données de test, j'ai utilisé WebPageTest, qui est à mon avis le meilleur outil de test de performance. En plus de fournir différentes mesures pour le "temps de chargement", il inclut également des données pour la nouvelle initiative Core Web Vitals de Google, qui deviendra un facteur de classement en 2021.

Les indicateurs de Core Web Vitals mesurent les temps de chargement en fonction de l'expérience de l'utilisateur, et pas seulement un seul indicateur de "temps de chargement". Étant donné qu'un grand nombre des optimisations de NitroPack se concentrent sur l'amélioration de ces indicateurs (par exemple, en intégrant les feuilles de style CSS critiques), je pense qu'il s'agit d'un autre élément important auquel il faut prêter attention.

Pour ma configuration de test, j'ai utilisé les éléments suivants :

• Lieu du test Chicago, Illinois ET Mumbai, Inde ( pour connaître les performances du CDN )
• Navigateur : Chrome.
• Connexion FIOS (20/5 Mbps) : le résultat sera plus lent qu'avec un outil comme Pingdom, mais il est plus proche de la vitesse moyenne de l'internet aux États-Unis, ce qui donne une idée plus précise de l'expérience des visiteurs humains sur votre site.
• Nombre de tests à effectuer : "WebPageTest exécutera neuf tests distincts et prendra la valeur médiane, ce qui élimine la variabilité d'un seul test.

Je vais également faire passer mon site de test par PageSpeed Insights, car je sais que beaucoup de gens s'intéressent aux résultats de PageSpeed Insights. Ce qui compte vraiment, c'est l'expérience que les visiteurs humains ont de votre site.

Je commencerai par les données brutes, puis je résumerai le tout à la fin de cette section :

Chicago, États-Unis :

Pas d'optimisation des performances (contrôle)

Avec NitroPack

Mumbai, Inde

Pas d'optimisation des performances (contrôle)

Avec NitroPack

PageSpeed Insights

Avant NitroPack :

Mobile :

Bureau :

Après NitroPack :

Mobile :

Bureau :

Conclusions

Ok, je sais que j'ai craché beaucoup d'informations techniques et de tableaux dans les sections précédentes. Si vous n'êtes pas un accro de la performance des sites web, cela peut vous avoir semblé un peu écrasant. Voici donc les conclusions humaines de toutes ces données de test :

NitroPack a considérablement amélioré les temps de chargement des pages de mon site dans tous les domaines. :

• Le temps de chargement global des pages a diminué, ce qui est le plus important pour la plupart des gens.
• Le Largest Contentful Paint (LCP) de Core Web Vitals s'est amélioré, ce qui signifie que vos visiteurs pourront voir le contenu le plus important de votre site plus rapidement (ce qui devrait conduire à une meilleure expérience).
• Le temps de réponse au premier octet (TTFB) a diminué, ce qui signifie que le serveur a répondu plus rapidement.
• Les résultats de PageSpeed Insights se sont considérablement améliorés.

Pour vous aider à visualiser la comparaison, voici comment les choses se présentent pour le test de Chicago, dans l'Illinois :

Voici le test de Mumbai :

Le site de test est presque trois fois plus rapide avec NitroPack.

Enfin, voici les résultats de PageSpeed Insights :

Dans l'ensemble, NitroPack a passé les tests de vitesse avec brio.

Note d'Adam : N'oubliez pas qu'il s'agit de résultats de tests effectués avec Elementor et le paramètre "strong" de NitroPack. Si vous utilisez le mode "ludicrous", vous obtiendrez des temps de chargement plus rapides, mais vous risquez de rencontrer des problèmes. Sur l'un de mes plus petits sites, j'ai pu obtenir des temps de chargement de pages mobiles dans les années 90 en utilisant le thème léger GeneratePress et sans constructeur de pages.

Comment NitroPack accélère-t-il votre site Web ?

Vous savez maintenant que NitroPack peut améliorer considérablement le temps de chargement des pages de votre site. Mais comment fait-il ?

Encore une fois, la particularité de NitroPack est qu'il offre une approche tout-en-un pour accélérer votre site web. Au lieu de bricoler une collection de divers plugins de performance WordPress, vous pouvez simplement installer NitroPack et vous en contenter.

Voici quelques-unes des principales techniques qu'il met en œuvre pour accélérer votre site.

Mise en cache

NitroPack dispose de plusieurs systèmes de mise en cache pour améliorer les performances et réduire la charge sur votre serveur. Les deux plus importants sont la mise en cache des pages et la mise en cache du navigateur :

• Mise en cache des pages - enregistre la version HTML statique d'une page afin que votre serveur n'ait pas à exécuter PHP à chaque visite.
• Mise en cache du navigateur - enregistre certaines ressources statiques sur l'ordinateur local d'un visiteur afin qu'il n'ait pas à les télécharger à chaque chargement de page.

NitroPack comprend également des fonctions intelligentes telles que l'invalidation du cache et le préchargement, qui vous permettent de vous assurer que le plus grand nombre possible de visiteurs reçoivent des versions en cache de votre contenu.

Si nécessaire, vous pouvez également exclure certains contenus/ressources de la mise en cache. Par exemple, si vous gérez une boutique de commerce électronique, vous devez exclure les pages de panier et de paiement.

Réseau de diffusion de contenu (CDN)

Un CDN accélère le temps de chargement global de votre site en mettant en cache les ressources statiques sur un réseau de serveurs répartis dans le monde entier (appelés sites périphériques). Ensuite, lorsque quelqu'un visite votre site, il peut télécharger ces ressources à partir du site périphérique le plus proche, au lieu de devoir se rendre jusqu'au serveur physique de votre site.

Ce CDN explique en grande partie pourquoi mon site de test a été plus de 3 fois plus rapide avec NitroPack lors du test à Mumbai, en Inde.

Le CDN de NitroPack est alimenté par Amazon CloudFront et automatiquement intégré au service.

Optimisation des images

Les images représentent environ la moitié de la taille du fichier d'une page web moyenne. NitroPack optimise automatiquement vos images, notamment en les convertissant au format rapide WebP et en les chargeant paresseusement.

Optimisation du code

NitroPack comprend de nombreuses fonctions permettant d'optimiser le code de votre site, non seulement la taille du code de votre site grâce à la minification, mais aussi la façon dont le code se charge.

Tout d'abord, NitroPack peut générer automatiquement les feuilles de style CSS essentielles pour chaque mise en page unique et différer le chargement des feuilles de style CSS non essentielles, ce qui accélère la visibilité du contenu (et améliore également les résultats de PageSpeed Insights).

Il peut également différer le JavaScript qui bloque le rendu, ce qui a les mêmes effets positifs que le report du CSS (et c'est un point sur lequel PageSpeed Insights vous engueule toujours).

Enfin, d'autres améliorations diverses ont été apportées, telles que l'optimisation de la préfixation DNS et du rendu des polices de caractères.

Prix du NitroPack

Passons maintenant à la question importante suivante : combien toutes ces fonctionnalités vont-elles vous coûter ?

NitroPack a un plan gratuit limité qui convient aux petits sites, bien qu'il comprenne un badge NitroPack dans le pied de page de votre site.

Ensuite, les plans payants commencent à 17,50 $ par mois avec une facturation annuelle ou à 21 $ par mois avec une facturation mensuelle.

Ces prix s'entendent par site, mais vous pouvez également contacter l'équipe de vente pour des plans multisites ou des plans d'agence. .

Comment configurer NitroPack sur WordPress

Comme je l'ai mentionné à plusieurs reprises, l'un des avantages de NitroPack est sa facilité de prise en main. En fait, pour toutes les fonctions qu'il met en œuvre, c'est probablement l'outil d'optimisation le plus simple que j'aie jamais utilisé.

Je vais me concentrer sur WordPress pour ce tutoriel. Cependant, n'oubliez pas que NitroPack n'est pas limité aux sites WordPress. Si vous utilisez WordPress, le plugin WordPress dédié vous permettra d'être opérationnel en quelques minutes seulement.

Pour commencer, vous aurez besoin de.. :

• Enregistrez-vous pour un compte NitroPack. Il y a un essai gratuit de 14 jours pour les plans premium, ainsi que le plan gratuit que j'ai mentionné plus tôt. Assurez-vous d'entrer l'URL de votre site WordPress lors de l'enregistrement.
• Installez le plugin NitroPack à partir de WordPress.org.

Ensuite, rendez-vous à l'adresse suivante Paramètres → NitroPack dans votre tableau de bord WordPress et cliquez sur le bouton Se connecter à NitroPack bouton :

Si vous êtes déjà connecté à votre compte NitroPack, NitroPack le détectera. Sinon, vous serez invité à vous connecter.

Ensuite, vous devez choisir le site web que vous souhaitez optimiser, que vous avez dû indiquer lors de la création de votre compte NitroPack :

Et voilà, vous êtes connecté - je vous avais dit que c'était facile.

Bien que NitroPack vous donne un tableau de bord de base à l'intérieur de votre site WordPress avec quelques réglages, vous gérerez la plupart des choses à partir du tableau de bord en nuage de NitroPack, pas Allons-y maintenant.

Comment configurer NitroPack

Ce qu'il y a de bien avec NitroPack, c'est qu'il n'est même pas nécessaire de le "configurer". Il fonctionne pratiquement tout seul. En fait, lorsque j'ai effectué les tests ci-dessus, j'utilisais la configuration par défaut - je n'ai littéralement pas fait un seul changement.

Si vous souhaitez approfondir la question, vous pouvez vous rendre à l'adresse suivante Paramètres Ensuite, vous pouvez choisir le niveau d'optimisation souhaité dans le tableau de bord de NitroPack. Configuration En fonction du niveau d'optimisation que vous choisissez, NitroPack configurera automatiquement certaines ou toutes les fonctions que j'ai mentionnées ci-dessus.

Par exemple, si vous choisissez Fort (par défaut), il inclura des fonctionnalités telles que le chargement paresseux et l'optimisation des polices. À titre de référence, les tests que j'ai effectués ci-dessus utilisaient l'option Fort ainsi que .

Si vous êtes un utilisateur occasionnel, vous avez terminé ! Arrêtez-vous, vous n'avez pas besoin d'aller plus loin que de choisir le niveau d'optimisation que vous souhaitez.

Si vous défilez vers le bas, vous obtenez quelques options supplémentaires, dont la plupart concernent l'inclusion ou l'exclusion d'un contenu spécifique de l'optimisation.

Par exemple, vous pouvez exclure certaines images ou ressources, certains cookies, certaines URL, etc. Cela peut être utile si vous êtes photographe et que vous souhaitez exclure la compression des images de votre portfolio en haute résolution ou si vous avez un site d'adhésion et que vous ne voulez pas que les membres connectés reçoivent du contenu mis en cache :

Les Intégrations tab vous aide également à vous intégrer à d'autres outils :

• Proxy inversé - De nombreux hébergeurs WordPress utilisent Varnish ou Nginx comme proxy inverse pour la mise en cache au niveau du serveur, cette fonctionnalité vous permet donc de continuer à bénéficier de ces optimisations.
• Cloudflare
• Sucuri

NitroPack propose quelques autres tableaux de bord pour surveiller l'utilisation et voir quelles pages ont été optimisées, mais c'est à peu près tout pour la configuration.

Facile, n'est-ce pas ?

Réflexions finales : Faut-il utiliser NitroPack ?

À ce stade de notre évaluation de NitroPack, je peux affirmer en toute confiance que NitroPack peut effectivement accélérer votre site - les chiffres parlent d'eux-mêmes.

En outre, il est très facile à utiliser - le processus d'installation de WordPress est très simple et il est entièrement pris en charge une fois que vous avez franchi la première étape.

Le seul facteur de confusion est le prix.

La question n'est pas seulement de savoir si NitroPack accélère votre site, mais aussi de répondre par un oui catégorique.

La question est plutôt : "NitroPack accélère-t-il suffisamment votre site pour justifier de payer au moins X $ chaque mois ?"

Ici, la réponse est oui... parfois et non... parfois.

Quand NitroPack n'est pas une bonne solution

Si vous utilisez WordPress et que vous avez un budget limité, vous pouvez trouver d'autres outils qui peuvent améliorer considérablement les temps de chargement de votre site pour beaucoup moins d'argent. La meilleure option ici est probablement WP Rocket qui, dans notre test pratique de WP Rocket, a réduit les temps de chargement de mon site de test de manière significative.

Maintenant, ce site de test était dans un environnement d'hébergement différent, il n'est donc pas juste de comparer ce chiffre à NitroPack (mon site de test NitroPack part d'un hébergement de base beaucoup plus rapide). Cependant, le point est que, pour un coût de 49 $/an, WP Rocket peut améliorer de façon spectaculaire les temps de chargement de votre site.

Pour de nombreux sites, cette solution est "suffisante" et vous permettra d'économiser beaucoup d'argent, mais elle n'inclut pas de CDN ni d'optimisation des images.

N'oubliez pas que NitroPack propose un plan gratuit pour un maximum de 5 000 visiteurs mensuels si vous n'avez pas peur d'afficher un badge dans votre pied de page. L'avantage est que ce plan inclut toujours un CDN et de nombreuses améliorations de performance.

Quand utiliser NitroPack

Si vous êtes prêt à payer pour des performances de premier ordre, NitroPack a beaucoup à offrir :

Tout d'abord, les améliorations de performance dans mes tests étaient... eh bien, assez impressionnantes. En fait, il a fait beaucoup mieux que ce à quoi je m'attendais. Mon site de test est déjà assez rapide avec son droplet DigitalOcean, mais NitroPack a encore réduit les temps de chargement des pages de mon site de plus de 50 % pour les tests de Chicago et de Mumbai.

Deuxièmement, en plus d'améliorer le temps de chargement des pages, NitroPack a également apporté des améliorations massives aux mesures de performance plus " expérience utilisateur " dans Google Core Web Vitals. Par exemple, dans le test de Chicago, il a fait passer le temps de mon Largest Contentful Paint (LCP) de 2,319 s à 0,958 s.

Comme Google commencera à utiliser Core Web Vitals comme facteur de classement SEO en 2021, c'est une autre façon pour NitroPack de gagner sa vie.

N'oubliez pas que de nombreuses données établissent un lien entre les temps de chargement et des paramètres importants comme le taux de conversion et le taux de rebond. Donc, si vous avez un site Web "sérieux", comme un site d'adhésion ou une boutique de commerce électronique, NitroPack pourrait bien être rentabilisé en vous aidant à vendre plus de produits et à créer des clients plus satisfaits.

Verdict final ? Si vous êtes prêt à investir dans les performances de votre site, vous devriez certainement considérer NitroPack. Si vous avez un budget serré, ils ont un plan gratuit limité qui est suffisant pour les petits sites Web.