Dévoiler les secrets du référencement : Présentation du guide ultime de la vitesse d'un site Web

La vitesse est importante à la fois pour les utilisateurs et pour le référencement : personne ne veut attendre plusieurs secondes pour qu'un site Web se charge. Les utilisateurs préfèrent quitter votre site et aller chez un concurrent plutôt que de passer du temps à attendre. La citation "le temps c'est de l'argent" est aussi vraie aujourd'hui qu'elle l'était lorsque Benjamin Franklin l'a prononcée il y a des siècles. Le temps compte également pour Google. La vitesse est l'un des facteurs de classement de Google. Toutes choses étant égales par ailleurs, plus le site Web est rapide, plus le classement est élevé. Et personne ne dira qu'avoir un site Web rapide n'est pas une nécessité de nos jours. La question est : comment rendre votre site web plus rapide ? Notre auteur invité dans ce Unwrapping the Secrets of SEO est Tomek Rudzki, responsable de l'équipe de recherche et développement chez Elephate, lauréat de la « Meilleure petite agence de référencement » aux European Search Awards 2018. Rudzi offre des conseils pour accélérer votre site Web et gagner.

Ce guide complet de la vitesse du site Web comprend trois articles. Lisez les articles suivants ici : Le guide ultime de la vitesse du site Web – Partie 2 et Le guide ultime de la vitesse du site Web – Partie 3.

Étude gratuite de la vitesse de la page

1. Le temps c'est de l'argent

De nombreuses recherches indiquent qu'un site Web plus rapide équivaut à plus de revenus.

• Pinterest s'est rendu compte que la réduction des temps d'attente perçus entraînait une augmentation de 15 % du nombre d'inscriptions .
• La BBC a remarqué que pour chaque seconde supplémentaire de chargement de son site Web, 10 % des utilisateurs partent.
• DoubleClick de Google a enquêté sur le fait que la réduction du chargement de la page de 19 secondes (extrême !) à 5 secondes entraînait une baisse de 35 % des taux de rebond et des sessions 70 % plus longues.
• L'étude d'Amazon révèle qu'une seule seconde de ralentissement de la charge du site Web peut entraîner une baisse de 1,6 milliard de ventes chaque année.

Vous pouvez dire « d'accord, mais je me fiche de Pinterest, de la BBC ou d'Amazon ; parle-moi de MON entreprise.' » Google a créé un bel outil qui calcule l'impact de la vitesse sur les revenus potentiels . J'ai rempli l'outil avec les données d'exemple : Visiteurs mensuels moyens 1 000 000, taux de conversion de 3,26 %, avec une valeur de commande moyenne de 82 $.

Vous pouvez vous demander : « Tomek, pourquoi avez-vous choisi ces données : 3,26 taux de conversion, mais pas 1 %, ni 4 %, ni même 10 % ? » Ok, j'ai obtenu les données de Statista. Selon leurs rapports , la valeur moyenne des commandes d'achats en ligne aux États-Unis au 4e trimestre 2017 (en dollars américains) était de 82. De plus, le taux de conversion moyen était de 3,26.

Il semble que réduire la vitesse de chargement des pages de 5 à 2,8 secondes pourrait générer 1,97 million de dollars de revenus supplémentaires par an. Ça a l'air bien!

Bien sûr, ce n'est qu'une calculatrice. Mais la calculatrice est basée sur des données réelles. Je ne pense pas que Google ajoute quelques zéros à la fin de la valeur calculée pour la rendre sérieuse.

2. Pensez toujours aux utilisateurs mobiles

Selon Statcounter, en février 2018, plus de 55 % des utilisateurs se connectaient à Internet via un mobile ou une tablette – des statistiques impressionnantes !

De nos jours, si vous voulez satisfaire vos mobinautes, vous devez :

• assurez-vous que votre site Web fonctionne correctement sur mobile (c'est-à-dire s'il est réactif)
• rendre le site Web très rapide.

Vous devez garder à l'esprit que les utilisateurs mobiles ont souvent de mauvaises connexions et utilisent des appareils bas de gamme, de sorte que chaque kilo-octet envoyé sur le "fil" compte vraiment. Votre site Web peut fonctionner rapidement sur un ordinateur personnel, avec tous les extras, mais il peut être très lent sur les appareils mobiles. Et les chances que vous obteniez le premier ne sont plus en votre faveur.

3. Utilisez GTMetrix

Il existe un excellent outil qui vous indique ce que vous pouvez améliorer pour rendre votre site Web plus rapide. Vous pouvez auditer n'importe quel site Web gratuitement. Vous n'avez pas besoin d'être propriétaire d'un site Web pour lancer un audit (c'est-à-dire que j'ai audité Giphy.com). L'outil combine à la fois les données et les conseils de Google PageSpeed ​​Insights et de Yahoo Slow.

Cela vaut la peine d'aller sur https://gtmetrix.com/ et de saisir l'URL de votre site Web.

Vous pouvez voir la liste des recommandations sur la façon d'améliorer la vitesse de votre site Web en cliquant sur les onglets "PageSpeed" ou "YSlow".

Pour l'instant, beaucoup d'informations sur ces onglets peuvent ne pas être compréhensibles car elles sont trop techniques. C'est très bien. Rome n'a pas été construite en un jour. Je ferai de mon mieux pour vous aider à démarrer. Il y a une section intéressante appelée "Waterfall" qui vous montre exactement quand les ressources (fichiers JS & CSS, fichiers image) ont été téléchargées et chargées.

Je vous recommande fortement d'avoir un compte GTMetrix (c'est gratuit !). Les utilisateurs enregistrés peuvent personnaliser le test et modifier l'emplacement du navigateur et du serveur. De plus, une fois connecté, vous pouvez activer l'option "créer une vidéo". L'option vidéo est excellente. Il vous indique combien de temps les utilisateurs devront attendre avant de pouvoir voir les changements visuels sur votre site Web.

Mais ne devenez pas fou avec GTMetrix

Bien que GTMetrix soit un excellent outil, ses recommandations peuvent parfois vous mener à la chasse aux oies sauvages. Il n'y a rien de mal avec GTMetrix. C'est juste qu'il n'y a pas de règle "taille unique" lors de l'optimisation de la vitesse - ce dont GTMetrix est bien conscient :

Par exemple, GTMetrix vous recommande de définir la mise en cache du navigateur pour les ressources stockées sur le serveur Google Analytics ou Facebook. À vrai dire, ces ressources sont hors de votre contrôle - vous ne pouvez rien faire . Les développeurs de Google et Facebook ont ​​décidé que, pour une raison quelconque, ces ressources ne devraient pas être mises en cache pendant une longue période.

Bien sûr, il existe de nombreux outils similaires à GTMetrix, tels que WebPageTest, (qui est beaucoup plus puissant que GTMetrix). Cependant, j'ai décidé de vous présenter GTMetrix pour deux raisons :

1. GTMetrix est plus convivial
2. WebPageTest ne vous donne pas de recommandations claires sur ce qu'il faut faire.

Je voudrais mentionner un autre outil intéressant - Google Lighthouse (si vous utilisez Chrome, vous l'avez déjà installé). Kamila Spodymek d'Elephate a écrit un excellent article sur la façon dont les référenceurs peuvent bénéficier des mesures de performance de Google Lighthouse . Certainement une bonne lecture!

4. Utilisez la compression GZIP

Il y a une règle à connaître : si une ressource pèse moins, le navigateur peut la télécharger beaucoup plus rapidement, ce qui accélérera le chargement des pages . Vos utilisateurs mobiles en profiteront vraiment.

Vous pouvez réduire la taille de vos fichiers texte (comme HTML, SVG, CSS et JS) en implémentant la compression GZIP. Il est assez courant que la compression GZIP économise 70 à 80 % de la taille d'une ressource, sans perdre aucune information. C'est vraiment un gros problème !

Visitez https://checkgzipcompression.com/ pour vérifier combien de kilo-octets vous pouvez économiser (ou déjà sauvegardés !) En mettant en œuvre GZIP. Dans le cas de Searchmetrics.com, GZIP est activé (il permettait d'économiser 83% de la taille de la page). Ça a l'air bien!

Soyez prudent, cependant! Parfois, les webmasters commettent une erreur et compressent tous les fichiers statiques, y compris les images JPEG, PNG et PDF. Permettez-moi de citer la documentation du Yahoo Developer Network : « Les fichiers image et PDF ne doivent pas être compressés car ils sont déjà compressés. Essayer de les gzipper non seulement gaspille du CPU, mais peut potentiellement augmenter la taille des fichiers ».

Si vous souhaitez économiser des kilo-octets supplémentaires, il est également judicieux de réduire vos fichiers HTML, JS et CSS .

5. Servir des images à l'échelle

C'est un fait qu'un site Web se charge très lentement (surtout sur les téléphones portables !) à cause d'un grand nombre d'images.

Par conséquent, il peut parfois être judicieux de réduire le nombre d'images. Mais plutôt que de les limiter, je recommanderais d'optimiser ceux qui existent déjà . Cela dit, les images servies à vos utilisateurs doivent être mises à l'échelle et compressées (sans perte ou avec perte).

Parlons d'abord de la mise à l'échelle des images. Disons qu'il y a dix vignettes 220 × 220 par page, mais que vous avez téléchargé des images 800 × 800 sur le serveur. Devez-vous servir les images déjà mises à l'échelle aux utilisateurs, ou forcer le navigateur à les mettre à l'échelle « à la volée » ?

La réponse est simple. Si vous ne redimensionnez pas les images côté serveur, le navigateur doit télécharger beaucoup plus de kilo-octets que nécessaire. Pour rien, car les images vont être redimensionnées de toute façon. De plus, c'est un travail supplémentaire pour le GPU côté client. Sans oublier que la vitesse de chargement des pages en souffrira.

6. Compressez vos images

Parlons maintenant de la compression des images. Il s'agit d'une autre technique indispensable pour le Web moderne.

Généralement, il existe deux types de compression d'image :

• Sans perte (fait un très bon travail, vous pouvez être sûr que la qualité n'en souffrira pas).

• Lossy (rend généralement une image plus légère, mais, comme son nom l'indique : vous perdez une partie de la qualité).

La question se pose : quel type de compression est le meilleur : sans perte ou avec perte ?

• Cela dépend vraiment de la situation. Si votre site Web fournit des images de l'espace extra-atmosphérique, chaque détail compte. Mais si vous faites un blog personnel, vous seriez probablement d'accord avec une compression avec perte, même avec un taux de compression élevé. Je vous recommande de faire des essais afin de voir quels paramètres conviennent le mieux à votre site Web.

7. Ne forcez pas vos visiteurs mobiles à télécharger des photos Full HD !

Les utilisateurs mobiles ont des écrans beaucoup plus petits et ils ne bénéficieront tout simplement pas de vos photos HD. Au lieu de cela, ils se mettront en colère si vous les forcez à télécharger de grandes images.

Examinons l'exemple de Elephate.com . Nous avons une assez grande photo (2600×1463 pixels) des membres de notre entreprise en haut de notre page d'accueil (522kb)

C'est tout à fait bien pour les ordinateurs de bureau - ils peuvent le télécharger très rapidement. Mais, pour les utilisateurs mobiles, nous utilisons les paramètres "srcset" de HTML. Grâce à cette mise en œuvre, les utilisateurs mobiles téléchargeront simplement une image beaucoup plus petite (ils n'ont pas besoin d'une plus grande), ce qui a un impact positif sur le temps de chargement de la page.

Les utilisateurs de bureau ne souffriront pas car ils verront la photo Full HD. Mais les utilisateurs mobiles en profiteront vraiment.