Plaire aux robots de Google
> Optimisez les performances de votre site Web
> Séduire les algorithmes des moteurs de recherche
Découvrir le guide
Vitesse de chargement et SEO
Le temps de chargement entretient des relations étroites avec le référencement naturel, et ce, depuis de nombreuses années dans la google page experience.
Google les a d’ailleurs officialisées en janvier 2018 et concrétisées par le biais de sa Speed Update mobile du 9 juillet 2018.
Speed Analysis en vidéo
Plongez dans les pages et les parcours pour obtenir des informations et des alertes approfondies sur les performances Web !
Voir la vidéo
Depuis plus d’un an maintenant, nous savons de source sûre que la vitesse d’un site mobile constitue un critère de positionnement (certes mineur) dans les résultats de recherche mobiles.
Rien d’étonnant puisque l’utilisateur, ainsi que ses usages mobiles et vocaux, sont à présent au cœur des réflexions des moteurs de recherche. Et l’ambition de ces derniers est claire : passer de moteurs de recherche à moteurs de réponse.
S’il est vrai que la Speed Update concerne avant tout les sites web particulièrement lents, à qualité égale, nul doute que votre concurrent plus rapide pourra faire la différence.
Enfin, n’oubliez pas qu’un site web trop lent, ce seront davantage de ressources à mobiliser pour les robots des moteurs de recherche qui explorent votre site pour en indexer le contenu.
Il est ainsi fort probable que ces bots se décourageront et poursuivront leur exploration ailleurs s’ils peinent à accéder à vos ressources, diminuant la capacité d’indexation de votre site et donc… sa visibilité !
9 techniques pour optimiser le temps de chargement de votre site web
Nous savons que la vitesse d’un site est un élément clé de son succès. Voyons à présent sur quels leviers vous avez la possibilité d’agir pour en améliorer les performances.
1. Un hébergement à la hauteur de vos ambitions
Tarifs peu élevés ne riment pas toujours avec qualité. L’hébergement web n’échappe pas à la règle.
Vérifier que l’option à laquelle vous avez souscrit correspond aux objectifs de trafic et de ventes de votre site constitue un bon point de départ.
D’ailleurs, laisser de côté votre serveur mutualisé au profit d’un serveur dédié s’imposera peut-être pour donner un premier coup de boost à votre site.
2. Des images et des vidéos au régime
Le poids de vos médias (visuels, sonores ou vidéos) constitue le levier le plus simple et le plus rapide à actionner pour améliorer les performances de votre site.
Si les images, par exemple, sont essentielles, elles peuvent très rapidement se transformer en fardeau si leur dimension ou leur compression ne sont pas adaptées.
Ce point pourrait faire l’objet d’un article entier mais sachez que des outils permettant de compresser efficacement les images existent tels que TinyPNG
On choisira par ailleurs avec soin le format en privilégiant l’usage du JPEG au PNG pour les images de moyenne et de grande taille et du GIF pour les animations par exemple.
3. La compression du HTML et du CSS
Saviez-vous que vous aviez la possibilité de compresser vos fichiers HTML et CSS au sein d’un fichier de type .zip ?
Cette compression permet aux visiteurs de télécharger jusqu’à 70% de données en moins et donc de naviguer plus rapidement sur votre site.
Pour activer la compression Gzip et réduire le poids de votre code source, il vous faudra vous tourner vers votre hébergeur.
4. La minification des fichiers CSS, JS et HTML
La minification des fichiers CSS, JS ou HTML permet de supprimer les caractères inutiles à la bonne exécution du code tels que la mise en forme du code ou les espaces vides.
De plus, vous pouvez combiner ces fichiers dans des sous-ensembles plus petits afin de réduire le nombre de requêtes HTTP. Plutôt malin non ?
5. Le squelette de chargement ou skeleton screen
Parce que ce sont les experts qui en parlent le mieux, Fanny Pourcenoux, Head of UX/UI Design chez Contentsquare, nous explique ce qu’est le skeleton screen :
“Quand la richesse de contenu est clé, il est souvent difficile de la concilier avec un chargement rapide. En parallèle de l’optimisation des temps de chargement, veillez à en réduire les signes visibles par l’internaute.
Pour cela, utilisez un “skeleton screen” qui indique qu’un écran est en train d’être chargé (page vierge qui se remplit progressivement de contenu avec des formes grises ou neutres).
Cette technique permet à cet écran d’être perçu au démarrage comme ayant une durée de chargement plus courte par rapport à un écran vide ou un loader.”
6. La mise en cache des ressources
Le système de mise en cache des ressources part d’un constat simple : pourquoi serait-il nécessaire de retélécharger les mêmes éléments figés d’un site web (comme les images) à chaque consultation par l’internaute ?
La mise en cache d’une page web par le navigateur de l’utilisateur permet de stocker temporairement certains éléments sur son ordinateur ou mobile afin d’accélérer le chargement de cette page lors d’une prochaine visite.
Plaire aux robots de Google
> Optimisez les performances de votre site Web
> Séduire les algorithmes des moteurs de recherche
Découvrir le guide
7. Des redirections réduites au minimum
Si elles constituent un moyen simple et efficace de conduire automatiquement un internaute d’une page supprimée vers une page active par exemple, les redirections 301 doivent être utilisées avec parcimonie.
En effet, une redirection permanente génèrera toujours une latence supplémentaire côté utilisateur, indésirable si l’on souhaite optimiser la rapidité de chargement de ses pages.
Veillez donc à modifier vos liens pointant vers des redirections au profit de pages actives (répondant en 200).
8. Un CDN pour l’international
Si votre site web a une dimension internationale et génère un trafic important, l’usage d’un CDN (Content Delivery Network) est à considérer.
En effet, la situation géographique de vos visiteurs peut avoir un impact sur la vitesse de chargement de votre site, surtout pour les internautes les plus éloignés de votre serveur.
Le CDN résout ce problème en redirigeant vos visiteurs vers le serveur le plus proche de leur lieu de connexion.
Si cette solution est très efficace, sachez toutefois qu’elle est coûteuse.
9. Le Server Side Rendering (SSR)
Coûteux également, le Server Side Rendering (ou rendu côté serveur) permet de créer les pages du côté du serveur et de les envoyer déjà prêtes au navigateur.
Très utilisé dans les progressive web apps, il permet un chargement beaucoup plus rapide pour l’internaute et une meilleure prise en compte des ressources Javascript par les moteurs de recherche.
Nous aurions également pu vous parler dans ce guide du chargement différé des ressources Javascript, de l’importance de placer le contenu prioritaire en haut de page et de charger les scripts sous la ligne de flottaison ou encore de supprimer tous les plugins inutiles dans le cas de CMS tels que WordPress.
Mais nombre d’optimisations dépendront directement de la structure et de la typologie de votre site.
Le principal est que vous possédiez les clés de compréhension nécessaires pour agir dès à présent favorablement sur le temps de chargement de votre site et donc sur l’expérience de vos visiteurs.
La balle est dans votre camp 🙂