Comment rendre son site internet plus rapide ?

La rapidité d’un site internet est devenue un critère pris en compte pour le référencement de ton site web sur google. La vitesse de chargement d’un site internet est aussi un facteur crucial pour la satisfaction de tes lecteurs. Un site web lent est un site web qui perd des clients. Comment améliorer le temps de chargement des pages de ton site internet ? Je fais un point complet sur la question.

Un site web plus rapide  pour une meilleure indexation de tes pages

Une vitesse de chargement trop lente influence le nombre total de pages indexées. En effet, dans la mesure où un robot a des milliards de pages à indexer chaque jour, Googlebot n’a pas de temps à « perdre » sur un site web trop lent. Le robot a besoin lui aussi d’optimiser son travail (on parle de crawl budget). Le robot accorde une durée de crawl à chaque site (qui peut bien sûr varier sur toute la durée de vie de ton site internet). Si tes pages sont rapides, il aura sans doute le temps de tout crawler. Dans le cas contraire, tes nouvelles pages s’indexeront beaucoup plus lentement et du coup ton référencement naturel retardera d’autant. Lors d'un audit technique en SEO, la vitesse de chaque page web est étudiée.

Google préconise l'affichage du premier octet en moins de 200ms et le début de l'affichage (au dessus de la ligne de flottaison) en moins d'une seconde. Comme tu peux le constater, c'est le cas pour cette page que tu es en train de lire.

Un site web rapide en réduisant la taille de tes ressources

Optimiser ses fichiers CSS

Les Fichiers CCS peuvent être lourds et ralentir le chargement d’une page. je te conseille donc :

• de supprimer les propriétés CSS inutiles ;
• utiliser la syntaxe étendue  ;
• de rassembler les propriétés dont les valeurs sont identiques  ;
• d’utiliser les valeurs hexadécimales pour les couleurs (ex : color:#CCC au lieu de color:gray) ;
• de vérifier tes fichiers CSS avec w3C ;
• Minifie tes fichiers CSS et élimine les commentaires ;
• évite les Font Google très gourmandes en temps et en requêtes  ;
• rapatrie toutes tes Font (polices) sur ton serveur avec fontsquirrel  ;
• préfère le format woff2 pour tes polices  ;
• évite les font icônes très lourdes, (icomoon) te permet de sélectionner uniquement les icônes dont tu as besoin. Par exemple mon ficher icônes ne fait que 5 ko.

Pour vérifier mon fichier CSS j’utilise 3 outils : W3C afin d’éliminer toutes les erreurs. J’utilise Dareboost qui me signale les doublons. Et unused.css afin d’éliminer toutes les propriétés qui ne servent à rien.

Attention, avant de publier le fichier nettoyé et épuré, fais une copie de l’ancien fichier. Il arrive que les outils qui vérifient le code et le nettoient suppriment d’eux-mêmes une parenthèse, un point-virgule ou autre caractère pouvant altérer la mise en forme de ta page. Et là bon courage pour les retrouver.

Ton site web est trop lent ?

Gtmetrix, Pagespeed et Dareboost c'est du petit chinois pour toi ?

Oui, aide moi ! je veux
mes 30 min de coaching gratuit

Optimiser ses fichiers JavaScript

Les fichiers JavaScript sont l’ennemi n° 1 du webmaster qui souhaite un site web rapide et optimisé pour le référencement. Le meilleur moyen d’optimiser les fichiers JS c’est encore de les éviter.

Si tu peux éviter le JavaScript, évite-le. Certains sites web sont bourrés d’animations forts jolies, mais toutes pilotées par du JavaScript qui réduisent de beaucoup la vitesse de chargement. C’est le cas notamment de wordpress et de ses plugins.

Les barres de boutons de partage sur les réseaux sociaux par exemple sont pilotées en JavaScript. Ces fichiers JS sont des fichiers externes hébergés sur un serveur qui ne t’appartient pas. Si tu analyses le temps de chargement de ses JS avec le « module développeur » de ton navigateur tu t’apercevras du temps (et des requêtes) que cela prend.

Par ailleurs, ces fichiers externes ont tous un temps de mise en cache beaucoup trop court. Tu peux tenter de les rapatrier en interne pour lui attribuer ton propre temps de mise en cache, mais tous ne le permettent pas.

Optimiser et compresser ses images

Les images sont le problème majeur n° 2 du webmaster qui souhaite rendre son site web plus rapide. Les images apportent de l’émotion, de la couleur, de la compréhension et reposent l’œil pendant la lecture. Mais les images font leur petit poids. Alors comment fait-on  ? Plusieurs solutions  !

• On compresse ses images (j’utilise ImageOptim) sur chaque page.
• On retaille ses images à la main pour chaque support (ordinateur, mobile, tablette) et chaque page et on utilise picture-fill.js pour présenter le bon format.
• On utilise de préférence le format JPG à tous les autres formats.
• On évite de redimensionner ses images en ligne (cela fait appel à du JavaScript et le processus est très gourmand en temps).

Personnellement j’utilise un autre procédé pour que le poids de mes images n’impacte pas le temps de chargement de mes pages. (le lazyloading : voir plus bas)

Le format Webp est préconisé par PageSpeed Insights mais attention, si en effet il est plus léger et donc plus rapide il n'est pas encore pris en charge par tous les navigateurs, dont Firefox.
Si tu veux convertir ton fichier JPG en Webp c'est par ici.

Conseil : place ton fichier webp en background image avec une class CSS au sein d'une DIV. Puis place-là au niveau de ton Critical css. Mais duplique ta class dans ton fichier css général avec un fichier JPG classique. Les navigateurs prenant en charge le format webp prendront en compte ta class logée au coeur de ton critical CSS et les autres iront la chercher dans ton fichier CSS général.

Un site web plus rapide  en soulageant ton serveur

Au plus le navigateur doit aller chercher des ressources sur ton serveur pour afficher ta page au plus elle sera lente. Par exemple une image = 1 requête, un fichier CSS = 1 requête, etc. Il faut donc limiter le nombre de requêtes demandées au serveur.

Combine tes fichiers CSS et JavaScript

Combiner c’est regrouper. Donc il faut regrouper tes fichiers CSS en un seul. Plusieurs fichiers signifient plusieurs requêtes. Un seul fichier signifie une seule requête.

Tu évites ainsi les allers et retours avec ton serveur. Ce procédé soulage ton serveur et diminue le temps de chargement de ta page. Il existe des outils pour combiner ces fichiers CSS. Personnellement je le fais à la main par choix afin de ne perdre aucun caractère important. Lors de la minification. Par contre j’utilise closure compiler pour combiner les fichiers JS.

Attention, certains fichiers JS doivent être impérativement placés en premier pour que les autres fichiers JS pilotent ta page web correctement. C’est le cas du fichier Jquery. Avant de combiner vérifie l’ordre de tes fichiers JS et combine-les dans l’ordre.

Combine tes images avec les sprites

Les sprites CSS sont une façon de combiner plusieurs images dans un fichier image unique, permettant ainsi d’améliorer la performance de ton site en réduisant le nombre de requêtes HTTP. Encore une fois cela soulage ton serveur et augmente la rapidité d’affichage de ta page. Tu peux créer tes sprites à la main en CSS soit générer les sprites de manière automatique. C'est le cas des boutons de partage des réseaux sociaux en dessous des commentaires sur tout le site et bien sûr sur cette page.

Utilise le lazyloading pour les images et les vidéos

Le lazyloading est un procédé qui permet de différer l’apparition des images. Elles ne se chargent qu’au moment où l’internaute en a besoin. La même chose est possible avec les vidéos. Ainsi la vitesse d’affichage de ta page paraît bien meilleure (ce que ressent l’internaute) même si le temps de chargement est différent.

Si tu veux utiliser le lazyloading :

télécharge le fichier JS
intègre tes images comme ceci :

<img data-original="https://www.site.com/images/image.jpg" alt="texte image" class="lazy"/> 

et rajoute ce code juste avant la balise

 <script > $ (‘img.lazy’). lazyload ({effect : "fadeIn", threshold : 200}) ; </script> juste avant la balise </body> 

Si tu décides d’utiliser cette méthode pour les images de ton site web, vérifie si tes images sont bien indexables par Google. L’indexation des images et leur référencement sert ta visibilité dans les moteurs de recherche. Si ce n’est pas le cas, place tes images dans une balise comme ceci

 :

<noscript> <img src="image.jpg " alt="texte image"> </noscript>

Compresse tes fichiers avec Gzip

Utiliser Gzip pour Apache te permettra de rendre tes ressources jusqu’à 70 % plus petites, ce qui n’est en aucun cas négligeable. Pour autoriser cette compression, rien de plus simple : tu dois ajouter le code suivant à ton fichier htaccess :

<IfModule mod_deflate.c><FilesMatch ‘. (html|PHP|txt|xml|js|css) $’>SetOutputFilter DEFLATE</FilesMatch></IfModule>

Mets en cache tes fichiers

Mettre en cache tes fichiers statiques permet de soulager le serveur.

Le temps est indiqué en secondes. C’est le temps où le fichier ne sera pas rechargé et donc la ressource qui est mise en cache sera utilisée.

BEGIN Cache-Control Headers<ifmodule mod_headers.c>  <filesmatch "\\.(ico|jpe ? g|png|gif|swf|gz|ttf)$">Header set Cache-Control "max-age=2592000"</filesmatch><filesmatch "\\. (css) $">Header set Cache-Control "max-age=2592000"</filesmatch><filesmatch "\\.(js)$>Header set Cache-Control "max-age=2592000"</filesmatch><filesmatch « \\.(html|htm)$ »>Header set Cache-Control "max-age=7200"</filesmatch></ifmodule>END Cache-Control Headers

Utilise un CDN

En réduisant le nombre de demandes faites à ton serveur d’hébergement, un CDN est utile pour réduire l’utilisation des ressources (comme l’espace disque et la bande passante). Tu auras une augmentation globale de la vitesse de chargement. Cloudflare offre aussi en version payante une mise en cache professionnelle et d’autres services pour améliorer la rapidité de ton site.

Un site web rapide  en gérant l’affichage de tes pages

Diffère l’analyse de tes codes JavaScript

Les fichiers JavaScript bloquent le rendu de la page. D’ailleurs si tu vas faire un tour sur PageSpeed insight ou GTMetrix tu t’en rendras vite compte dans les notifications qui te seront faites si tu n’as rien fait à ce sujet.

• Place toujours tes fichiers JavaScript avant </body>
• Essaye de mettre tes JS en async ou en defer (attention, certains fichiers JS ne fonctionneront plus. À toi de tester).
• Certains fichiers externes peuvent être rapatriés sur ton serveur tout en continuant à fonctionner. À toi de tester aussi.
• Utilise rocket-loader.js qui fait tout ça très bien, sur wordpress comme en développement à la main.

Utilise le critical CSS

Le critical CSS est une portion de code CSS qui permet de débloquer le premier rendu. Il est nécessaire pour afficher rapidement l'affichage au dessus de la ligne de flottaison. PageSpeed Insights te conseille d’ailleurs de placer les règles de style concernant la partie de la page qui sera visible en premier, directement en ligne dans la balise <head> de la page. Tu peux calculer le critical CSS avec l’outil en ligne Critical Path CSS Generator.

Fais attention aux requêtes PHP

Si tu affiches les informations sur ta page par le biais de requêtes PHP, pense à les économiser. Nul besoin de demander à ton serveur d’extraire tous les champs de ta table si tu n’en as besoin que de 3. Aller lire tous les champs d’une table au lieu de quelques-uns va bien évidemment ralentir l’affichage de ta page. Question de bon sens.

Préfère

<?php  try  { $bdd = new PDO('mysql:host=localhost;dbname=xxx', 'xxx', 'xxxx'); } catch(Exception $e) { die('Erreur : '.$e->getMessage()); }	$reponse = $bdd->query('SELECT titre, lien, node FROM blog  WHERE categorie="ref"  ORDER BY lieu_x DESC '); while ($donnees = $reponse->fetch()) { ?> 

à

<?php  try  { $bdd = new PDO('mysql:host=localhost;dbname=xxx', 'xxx', 'xxx'); } catch(Exception $e) { die('Erreur : '.$e->getMessage()); }	$reponse = $bdd->query('SELECT * FROM blog  WHERE categorie="ref"  ORDER BY lieu_x DESC '); while ($donnees = $reponse->fetch()) { ?> 

Cette astuce est un peu technique, mais ton webmaster lui doit connaître.

Choisis bien ton serveur d’hébergement

Bien que cela ne fasse pas tout, un temps de réponse serveur élevé va impacter le temps de chargement de tes pages. Si tu as choisi un hébergement gratuit, ne t’attends pas à une performance maximale. Choisis un hébergement de qualité (bonne bande passante, serveurs puissants et avec de la mémoire). C’est un moyen cher, mais rapide et efficace pour ne pas nuire aux performances web de ton site.

De très bons outils à utiliser pour un site web plus rapide

Ce n’est qu’un avis personnel, mais pour moi le Number One des outils liés à la performance web reste Dareboost. C’est un outil payant, mais indispensable non seulement pour améliorer la vitesse d’affichage de tes pages, mais aussi en SEO technique de manière plus générale.

En savoir plus sur le référencement google et le référencment naturel

• Le suivi de positionnement sur Google
• Optimiser son référencement local et réussir au niveau local
• Choisir les bons mots clés pour son référencement naturel
• Comment bien optimiser une page pour le référencement
• Pourquoi investir dans une stratégie SEO
• L'ADN du bon consultant en SEO et référencement