Le trafic d’un site dépend notamment de son référencement, et immanquablement du SEO. Ce dernier peut notamment être amélioré en fonction de la vitesse de chargement du site : repérée par les robots Google, elle est également nécessaire du point de vue de l’expérience utilisateur, il n’y a donc que des bonnes raisons pour améliorer la vitesse de chargement de son site.
Mais comment parvenir à optimiser la vitesse de chargement de son site ?
La vitesse de chargement d’un site web est en effet, l’un des critères de référencement sine qua non. Pour référencer les pages des sites web parmi les résultats d’un moteur de recherche, ce dernier utilise des robots informatiques chargés de parcourir tout le web. Plus une page charge vite, et plus les robots y accèdent rapidement, évinçant par là les sites plus lents comprenant les informations recherchées. En clair, plus le chargement d’une page est rapide, plus elle est répertoriée par les fameux robots, et plus elle est mise en valeur parmi les résultats affichés par le moteur de recherche. Comme dans une course, les sites les plus rapides sont plus performants que les sites les plus lents.
Ajoutons à cela que la durée maximale d’attente de chargement d’une page par un internaute est de 3 secondes; au-delà, l’utilisateur ferme l’onglet au profit d’une autre page plus rapide. Plus une page est consultée, et plus elle remonte parmi les résultats de recherche.
Aussi, il est absolument nécessaire d’optimiser la vitesse de chargement de son site : pour être repéré correctement par les robots du moteur de recherche, et pour être consulté par les internautes, qui contribuent eux-mêmes au bon référencement du site.
L’élément qui nécessite le plus de temps à charger une page web n’est pas le texte, mais ce sont en général les images. Aussi, il est extrêmement important de réduire la taille des images que vous utilisez, sans pour autant en réduire la qualité de manière fulgurante, afin de diminuer le temps que la page mettra à charger. Plus une image est lourde, et plus le temps de chargement augmente.
Attention cependant, la compression d’une image va souvent de pair avec la perte de qualité, c’est pourquoi il importe d’être rigoureux lors du traitement des images. On compte deux grands formats d’image : le JPEG et le PNG. Le format JPEG est le plus connu et le plus ancien, il peut être utilisé sur quasiment tous les sites web, et être lu par tous les navigateurs. Il présente une grande qualité relativement au rendu des couleurs, on le préfèrera ainsi pour les photographies par exemple. Néanmoins, si vous souhaitez y incorporer des effets de transparence ou de texte, préférez le PNG, qui présente des qualités graphiques plus évoluées. En revanche, le PNG accepte mal la compression et sa qualité se détériore rapidement, par rapport au JPEG qui pourra être proportionnellement plus compressé qu’un PNG.
En bref, pour des photos de haute qualité, préférez le JPEG; et pour des images plus graphiques, que vous souhaitez travailler (infographies, mèmes, cartes de voeux… utilisez le PNG). Pour une compression, préférez cependant le format JPEG.
Le format WebP quant à lui, a été lancé par le géant Google il y a déjà plusieurs années. Son grand avantage : sa haute qualité et sa petite taille. Il est facilement compressible et ne se détériore presque pas. En revanche, il n’est pas lu par tous les navigateurs et n’est pas disponible sur les principaux logiciels de graphisme (sauf installation d’un plugin).
Pour compresser vos images, le logiciel Photo sur PC, ou Aperçu sur MAC, disponibles nativement, permettent de réduire la taille de ces dernières et même d’en modifier le format. Si leurs capacités ne suffisent pas, il existe de très bons logiciels en ligne comme The Gimp ou Kraken par exemple.
Que vous ayez codé votre page en Javascript, en HTML ou en CSS, il est important de garder à l’idée que votre code prend également une place importante dans le temps de chargement de votre site web. Effectivement, avant que d’afficher une page en version de lecture, le navigateur a besoin de lire celle-ci en format texte, et donc de parcourir le code. Plus celui-ci est long, et plus la page prendra de temps à charger.
Il est donc important de minifier son code de manière à réduire le temps de chargement de la page. Minifier le code correspond à éliminer les espaces, sauts de ligne, et séparateurs qui ont pu être insérés là par le développeur de manière à pouvoir relire son code plus facilement et de maintenir une compréhension facile pour un autre développeur qui passerait par là.
Un site web est constitué de nombreux éléments, pas toujours visibles pour l’utilisateur, néanmoins chacun d’entre eux nécessite une requête HTML, et donc une lecture, qui augmente par sa présence le temps de chargement de la dite page. Certains de ces éléments sont invisibles et inutiles du point de vue de l’expérience utilisateur. Aussi, il est bon de les éliminer afin de réduire le nombre de requêtes ainsi que le temps de chargement.
Pour cela, inspectez votre page web, et checkez minutieusement chaque fichier afin de voir si vous en avez besoin ou non.
Priorisez également le contenu à charger. Vous pouvez utiliser le conditionnel dans votre code de manière à ne charger que les éléments qui ont été demandés par l’utilisateur. Par exemple, il n’est pas utile de charger le contenu d’un menu déroulant sur lequel il ne clique pas, ou de charger les images en bas de la page s’il ne scrolle pas. C’est ce que l’on appelle le lazy loading. Pour utiliser le
Pensez également à placer vos scripts sous les lignes de flottaison, ainsi, ils ne seront lus qu’une fois une partie du contenu déjà chargée, et l’utilisateur patientera moins longtemps, augmentant vos chances qu’il reste sur la page.
Certaines ressources provenant d’une bibliothèque CSS, ou encore des data relevant du Javascript, peuvent être bloquantes. C’est-à-dire qu’il est nécessaire qu’elles soient téléchargées durant le chargement, en amont de l’affichage de la page, pour que cette dernière s’affiche entièrement. Or, certaines ressources peuvent être lourdes, c’est notamment le cas de certaines typographies, et alors, la page charge lentement. Par conséquent, la ressource augmente le temps de chargement de la page, au détriment d’une vitesse de chargement efficace, optimisée pour le SEO. Si c’est votre cas, alors il vous faudra éliminer ces ressources.
Comme nous l’expliquions plus haut, il faut supprimer les ressources dont la page n’a pas besoin pour l’affichage correct de la page, et placer les autres au-dessus de la ligne de flottaison, de manière à ne charger que ce qui est nécessaire relativement à l’expérience utilisateur. Les ressources qui ne doivent être chargées qu’en cas d’interaction peuvent être placées au-dessous de la ligne de flottaison. C’est le cas pour les ressources de type CSS mais également pour les ressources de type JS.
Sur Wordpress, comme sur Shopify, les plugins sont nombreux...et tentants ! Les propositions d’extensions sont démultipliées et l’on est appâté par les promesses que nous font ces petits logiciels. Cependant, un plugin prend énormément de place dans le code, et par conséquent, il est amené à cannibaliser le temps de chargement de la page. Soyez donc regardant et raisonnable sur les plugins que vous installez.
Depuis la montée en gamme des smartphones, les recherches sont beaucoup plus courantes sur mobile que sur un poste d’ordinateur, il est donc primordial que la vitesse de chargement de votre site sur mobile soit optimale.
Pour rendre un site plus rapide à charger, il est également important de se pencher sur la problématique du serveur : une fois que vous avez réalisé les recommandations suscitées, vérifiez bien que votre serveur propose un TTFB intéressant. Le TTFB est le time to first byte – littéralement : le temps pour le premier octet, c’est-à-dire le temps que met le premier octet à charger. Certains serveurs sont plus lents que d’autres, c’est notamment le cas pour les serveurs mutualisés (ceux que l’on partage avec d’autres sites web). Le serveur répond en effet à votre demande en l’analysant, en la traitant, et enfin, en apportant sa réponse via l’affichage du site web, et il en est qui sont simplement plus réactifs que d’autres. Il est possible de mesurer la rapidité de son serveur avec Google Chrome DevTools.
Il existe plusieurs façons de diminuer le temps de réponse de son serveur, mais la plus simple, notamment avec Wordpress, reste la mise en cache du site. La mise en cache d’un site comme par exemple Wordpress est une manière plutôt simple de parvenir à ses fins, il existe des extensions précisément destinées à cela. Voici certaines d’entre elles : WP Rocket, Comet Cache, WP Super Cache, Hyper Cache, Cache Enabler, ou encore W3 Total Cache.
Dans la lignée des conseils donnés précédemment, pensez à recourir à la compression gzip, qui se charge de compresser de vos contenus afin de réduire le flux de données et donc, gagner en vitesse de chargement. Le temps de chargement sur mobile est sans doute le premier critère qui vous assurera de générer des leads avant de les convertir, ainsi ne lésinez pas sur la compression.
Enfin, l’utilisation d’un CDN est l’un des meilleurs alliés des sites les plus performants en matière de SEO. Un CDN re-distribue localement le contenu de votre site, sauvegardé sur plusieurs serveurs répartis dans le monde. Ce qui signifie que plutôt que de charger de manière « traditionnelle », les pages sont enregistrées, puis re-distribuées plus rapidement qu’avec un chargement classique. D’ailleurs, tous les CDN activent les compressions de pages.
Il existe de nombreux outils pour mesurer, puis améliorer, la performance des sites web.
Pour le SEO, on notera l’extension Yoast de Wordpress, qui analyse la qualité SEO d’un texte, puis conseille l’auteur selon ses lacunes (peu ou trop de mots-clé, de répétitions...).
SEMrush est largement conseillé et plébiscité par les webmasters afin de vérifier le trafic de leurs sites, notamment sur les provenances des IPs consultantes, ou sur la quantité de backlinks correspondants.
Octopulse sera l’un de vos alliés de taille si vous peinez à booster votre référencement. De l’audit SEO à proprement parler, en termes de lexicalité, à l’analyse du poids de vos pages, en passant par l’analyse concurrentielle, Octopulse guide ses clients dans les démarches à mettre en oeuvre pour augmenter son trafic et optimiser son positionnement.
Le plus simple est de commencer par un diagnostic gratuit, afin de déterminer vos forces et vos faiblesses en termes de SEO. Octopulse est une agence spécialisée dans le référencement, qui, après analyse de votre site, vous guide et vous assiste dans son optimisation.
Web.dev est un outil propulsé par Google, dont la mission est de venir en aide aux développeurs web. Et pour cause, Web.dev constitue une synthèse complète des outils susmentionnés : performances de vitesse de chargement, qualités SEO, accessibilité, expérience utilisateur...
Également développé par Google, PageSpeed Insight est destiné à analyser les performances d’un site web selon son temps de chargement, son taux de conversion, et son taux de rebond. Non seulement il établit un diagnostic précis et détaillé de votre site, mais il dispense aussi ses conseils pour améliorer ses capacités.
La vitesse standard de chargement d’une page web est de 300 à 500ms. Une vitesse de 100 à 200ms est excellente. En revanche, si votre page web met plus de 600 ms à charger, alors elle est un peu lente, et il faudra penser à optimiser votre site pour améliorer ses capacités.
Le texte est l’un des nombreux éléments d’une page web, et c’est aussi l’un des plus économiques. Contrairement aux images, un texte est un contenu très léger qui ne cannibalise pas vraiment la durée de chargement. Attention toutefois aux CSS et aux typographies qui peuvent constituer la source d’un potentiel ralentissement de par leur volume.
Pour référencer un site web, les robots de Google passent constamment sur les pages de ce dernier, afin de les analyser selon plusieurs critères : la vitesse de réponse du serveur, la qualité de rédaction d’un texte selon les critères de Google, la taille des images, le maillage interne... On dit qu’ils crawlent le site.
Le budget crawl correspond au nombre maximal de pages que peuvent analyser les bots Google. Le budget crawl dépend des critères d’optimisation du site, tous ceux que nous avons évoqués jusqu’alors : plus un site sera optimisé de manière à être facilement analysé par les bots de Google, et plus son budget crawl sera important. Il ne s’agit pas d’un budget financier à proprement parler, mais d’un budget d’optimisation général. Aussi, comme avec un budget au sens littéral, le budget crawl est un critère à optimiser, à enrichir constamment, dans la finalité d’être ranké au mieux par les bots Google.
Si vous suivez chacun des conseils énumérés ci-dessus, vous avez de grandes chances d’obtenir un budget crawl important et de satisfaire aux conditions de référencement de Google, pour finalement parvenir à un référencement optimal.
👉 Obtenez des conseils gratuitement !
Prenez rendez-vous avec l'un de nos experts pour discuter de votre projet !
Prendre RDV en 30 secondes