Vitesse d'un site : réduire le temps de chargement à 1s

En matière de SEO, la vitesse d’un site internet est un facteur non négligeable. Dans cette optique, plus votre site est rapide, plus Google lui accordera de l’importance dans les résultats de recherche. Mais ce n’est pas facile d’obtenir un temps de chargement inférieur à 1 seconde. Ce guide vous détaille les étapes à suivre pour booster au mieux la vitesse de votre site internet.

À voir aussi : SEO 2020 : 50 règles (d’or) pour vous placer en 1ère position

Le choix d’un hébergeur web

Internet regorge d’une multitude d’hébergeurs web. Le choix de l’hébergement se base sur différents critères importants. Notamment, vous devez savoir s’il s’agit d’un serveur mutualisé ou d’un serveur dédié.

Les serveurs mutualisés regroupent plusieurs sites sur un même serveur. En effet, votre site internet sera placé avec d’autres, ce qui limite la performance à la puissance totale du serveur mais aussi au nombre totale de site se trouvant sur le serveur. Les serveurs dédiés sont prévus pour recevoir uniquement votre site internet. C’est donc l’option à envisager si vous prévoyez d’uploader un grand volume de fichiers sur votre site et d’accueillir plusieurs visiteurs en simultanée.

En plus, accordez également de l’importance à certains critères comme la performance du serveur, la bande passante associée ainsi que le niveau de stockage possible.

Bien entendu, plus votre hébergement sera puissant, plus votre site gagnera en vitesse. Mais faites attention au prix, car certains hébergeurs peuvent vous facturer plusieurs centaines d’euros, voire même des milliers d’euros par an. Réalisez un état des lieux de votre situation et de vos besoins (e-commerce, blog, trafic estimé, fichiers à stocker, etc.) et recourez à un comparatif.

Attention aux plugins et widgets qui peuvent ralentir la vitesse d’un site

Votre site internet aura sûrement besoin de plugins (ou modules) ainsi que des widgets pour être unique. Pour rappel, ces derniers servent à personnaliser votre site tant au niveau de la forme que de la performance. Entre autres, il existe des plugins qui permettent d’ajouter de nouvelles sections, d’optimiser la vitesse du site, de favoriser un contenu SEO, etc.

Mais si les plugins et les widgets semblent favoriser le design et la navigation sur votre site, cela peut nuire à la vitesse de chargement des pages. Pour éviter cela, n’utilisez que les plugins et les widgets qui vous sont réellement indispensables.

Lorsque vous installez votre thème, vérifiez les plugins installés par défaut. Si vous ne vous en servez pas, supprimez-les. En effet, tous les plugins que vous n’utilisez pas doivent impérativement être supprimés.

Ne vous contentez pas uniquement de les désactiver, car même s’ils sont inactifs, ils sont toujours sollicités au moment du chargement de votre site internet. Ce qui nuit grandement à la vitesse de celui-ci.

La relation entre requêtes HTTP et vitesse d’un site internet

Quand un internaute ouvre une page de votre site internet, tout le contenu à afficher est chargé par le navigateur : images, vidéos, texte, scripts, etc. Pour chaque élément, une requête HTTP est réalisée. Donc, plus il y aura de requêtes, plus le temps de chargement de votre site sera long.

Pour optimiser la vitesse du site, vous devez connaître toutes les requêtes HTTP exécutées. Pour ce faire, faites un clic droit sur une page et choisissez « Inspecter ». Dans l’onglet « Network » vous trouverez un bon nombre de données relatives aux requêtes HTTP.

Accordez une importance particulière aux colonnes suivantes :

Name (nom du fichier)
Size (taille du fichier)
Time (temps de chargement)

Puis, sur le coin inférieur gauche de votre navigateur, vous pourrez constater le nombre de requêtes réalisées pour le chargement de la page ainsi que le poids de tous les fichiers. Avec ces informations, vous pourrez donc en savoir plus sur les fichiers volumineux de votre page web. Vous pourrez donc les optimiser afin de les alléger ou les supprimer s’ils ne sont pas utiles.

Combiner et réduire la taille des fichiers

Il s’agit d’une technique complémentaire à la précédente. En effet, l’objectif est de minimiser au maximum les requêtes HTTP en combinant certains fichiers. Dans cette optique, intervenez sur le HTML, JavaScript et CSS de votre site internet.

La meilleure technique consiste à réduire le format du code et privilégier les codes courts. Vous pouvez notamment compter sur des plugins WordPress comme Minify afin de réussir cette démarche.

Pour les fichiers JavaScript et CSS, il est possible de les combiner entre eux pour réduire le nombre de requêtes HTTP à effectuer.

Optimiser le code CSS

La vitesse d’un site dépend également de son code CSS. Ce genre de code semble être négligeable, mais il peut augmenter significativement le poids de vos contenus, mais aussi le temps de chargement de vos pages.

Le principe est que chaque code que vous écrivez doit être nécessaire. Supprimez les codes CSS inutiles et ceux qui ne sont pas indispensables à votre site.

De même, privilégiez les formulations courtes dans vos CSS et n insérez pas de codes superflus. Voici notamment un exemple de code court à privilégier :

Voici le même exemple avec un code long à éviter :

Reporter le chargement de JavaScript

Les fichiers JavaScript peuvent demander beaucoup de temps à charger. L’objectif est notamment de reporter le chargement de JavaScript après celui des autres fichiers. En effet, les fichiers JavaScript sont parfois lourds à charger. Ainsi, si vous déférer ces fichiers, le contenu principal sera déjà affiché avant que le navigateur charge JavaScript.

Privilégier la mise en cache pour optimiser la vitesse de chargement d’un site

Quand un internaute visite un site internet, tous les éléments de la page consultée sont enregistrés dans un cache du disque dur de celui-ci ou sur un outil de stockage provisoire. Ainsi, quand l’internaute revient sur le site, le navigateur va charger directement la page sans qu’il soit encore nécessaire d’effectuer des requêtes HTTP. En effet, les éléments nécessaires à cela sont déjà enregistrés sur l’ordinateur de l’internaute.

Lorsque votre site internet est mis en ligne, il y aura toujours de nouveaux visiteurs et d’anciens visiteurs qui sont revenus sur votre site. L’activation de la mise en cache va permettre aux nouveaux visiteurs de sauvegarder les principaux éléments de votre site internet. De ce fait, lors d’une prochaine visite, le chargement de votre site sera beaucoup moins long.

Il existe de nombreux plugins ou modules de mise en cache qui varient d’un CMS à l’autre. Si vous voulez les utiliser, il suffit de les télécharger, de les installer, puis de les activer. Si vous installez un plugin de mise en cache, assurez-vous de ne pas utiliser un autre. Cela pourrait créer un conflit et défavoriser l’affichage de votre site.

Pour WordPress, par exemple, un plugin très répandu pour la mise en cache est WP-Rocket qui possède une multitude de fonctions pour optimiser celle-ci.

Par ailleurs, vous pouvez également activer manuellement la mise en cache en ajoutant des lignes de code sur votre fichier « .htaccess » qui se trouve à la racine du dossier WordPress dans votre serveur. Vous pouvez le créer s’il s’agit d’un site internet sur-mesure.

Voici les lignes à ajouter, ne supprimez aucune ligne dans ce fichier au risque de provoquer une erreur 500 sur votre site internet :

<IfModule mod_expires.c>

ExpiresActive on

ExpiresDefault « access plus 1 week »

ExpiresByType image/x-icon « access plus 1 year »

ExpiresByType image/gif « access plus 1 month »

ExpiresByType image/png « access plus 1 month »

ExpiresByType image/JPG « access plus 1 month »

ExpiresByType image/jpeg « access plus 1 month »

ExpiresByType video/mp4 « access plus 1 month »

ExpiresByType text/x-component « access plus 1 month »

ExpiresByType font/truetype « access plus 1 month »

ExpiresByType font/opentype « access plus 1 month »

ExpiresByType application/x-font-woff « access plus 1 month »

ExpiresByType application/vnd.ms-fontobject « access plus 1 month »

ExpiresByType text/css « access plus 1 year »

ExpiresByType application/javascript « access plus 1 year »

ExpiresByType text/javascript « access plus 1 year »

ExpiresByType text/js « access plus 1 year »

ExpiresByType application/x-javascript « access plus 1 year »

</IfModule>

/!\ Pensez avant de modifier le fichier “.htaccess” à le sauvegarder sur votre ordinateur ou disque dur car la mise en cache peut poser des problèmes sur certain serveur. /!\

Investir sur un CDN pour booster la vitesse de son site web

Quand vous choisissez d’héberger votre site sur un seul serveur, celui-ci recevra toutes les requêtes émises par chaque visiteur. Donc, plus vous aurez de visiteurs, plus le seul serveur qui héberge votre site recevra des requêtes. Par conséquent, le temps de traitement de chaque requête sera long.

La vitesse d’un site internet se verra également ralentie si les visiteurs proviennent d’un autre pays où se trouve le serveur. Par exemple, votre site web est hébergé en France. La vitesse de chargement d’une page pour un internaute qui se trouve au Canada sera beaucoup plus lente. En effet, les requêtes devront d’abord être envoyées au serveur qui se trouve en France, qui peut déjà être saturé en cas de fort trafic.

Face à cette situation, la meilleure option consiste à utiliser un CDN ou Content Delivery Network. Le principe de ce dernier est simple : votre site internet est mis en cache sur un réseau de serveurs mondial. Dans cette optique, votre site est hébergé partout dans le monde. Un internaute qui se trouve au Japon et qui visite votre site enverra ses requêtes sur un serveur proche de lui, ce qui ne créera aucune surcharge.

Grâce au CDN, la vitesse de chargement d’un site internet sera toujours le même, peu importe l’endroit où le visiteur se trouve.

Optimiser les fichiers images

Les fichiers multimédias (images, vidéos, gifs…) jouent un rôle important dans le référencement. D’ailleurs, en plus d’embellir votre site, Google accorde une importance spécifique pour les pages web qui contiennent du contenu multimédia.

Mais il faut savoir que les images ont un impact important sur le poids d’une page. De plus, vu que vous allez avoir besoin d’images de qualité, la taille de celles-ci va être importante. La solution consiste à optimiser les images à importer sur votre site internet. Pour ce faire :

Choisissez le bon format : le format « JPG » est à privilégier dans la majorité des cas, sauf pour les logos ou icônes où vous devez utiliser le format « png ». Évitez surtout d’utiliser des formats tels que BMP ou Tiff qui sont difficilement lisibles par certains navigateurs.
Choisissez la bonne taille : vous devez ajuster la taille de vos photos en fonction de la largeur dédiée aux zones de texte sur votre site. Le mieux serait d’utiliser une image entre 600 et 1000 px de largeur.
Recourez à la compression : la compression d’images est indispensable pour réduire leurs poids et optimiser la vitesse de votre site. Le poids adapté est d’environ 30 à 90 Ko. Mais faites attention quand vous compressez vos images. Ne dépassez pas les 70% au risque de nuire à la qualité. Voici un outil open source conçu par Google qui permet d’optimiser au maximum vos image sans perte de qualité : squoosh.app.

Ne pas utiliser de polices Web sur votre site

En raison de leur style, les polices web sont devenues très appréciées par les concepteurs de site. Mais le problème, c’est qu’elles ont tendance à réduire la vitesse d’un site internet. En effet, les polices web font appel à de nouvelles requêtes HTTP, ce qui augmente davantage le temps de chargement.

Pour éviter l’utilisation de polices web, voici quelques techniques à suivre :
Utilisez les formats WOFF2 afin de cibler les nouveaux navigateurs web
Évitez à tout prix de vous servir des jeux de caractères dans vos contenus

N’utilisez que les styles de polices nécessaires

Revoir les erreurs 404 et redirections

Les erreurs 404 correspondent aux pages introuvables sur votre site internet. Elles peuvent avoir un impact sur votre classement dans les résultats de recherche et aussi consommer inutilement les ressources de votre serveur.

Pour identifier les pages d’erreur 404, il est déconseillé d’installer des plugins. En effet, l’installation de plugins supplémentaires va augmenter les requêtes HTTP et réduire la vitesse de votre site. Le mieux serait d’utiliser des outils en ligne comme Google Analytics, Google Search Console, Xenu Link Sleuth, Screaming Frog SEO, etc.

Une fois vos pages 404 détectées, vous pouvez créer une redirection vers la page la plus adaptée. Si vous avez par exemple modifier l’URL d’un article, vous pouvez rediriger vos lecteurs vers la page de l’article en question. S’il ne s’agit d’aucune page en particulier, vous pouvez renvoyer vos visiteurs vers la page d’accueil tout simplement.

En matière de redirections, vous devez faire attention, car plus vous utilisez de redirections, plus vous allez créer de demandes HTTP et la vitesse de votre site sera ralentie. N’utilisez les redirections que si c’est vraiment nécessaire. Il existe plusieurs plugins qui vous permettront de créer des redirections en fonction de vos besoins, comme par exemple le plugin Redirection sur WordPress.