Comment rendre son site internet plus rapide

Un site web plus rapide obtient un meilleur référencement
Un site web plus rapide garde plus facilement ses visiteurs

Ne pas confondre vitesse et précipitation

La rapidité d’un site internet est devenue un critère pris en compte pour le référencement de ton site web. 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 rapide  ? : pense à l’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.

dareboost : analyse vitesse site web

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  ? : réduis 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.

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 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)

Un site web rapide  ? : soulage 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.

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  ? : gère 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 qu 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.

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.

Cet article t'a plu? Un petit partage serait sympa

0 Commentaires


    Tu kiffes mes articles?

    Files-moi ton adresse mail et je te préviens dès que le prochain est publié.

    * Je ne donnerai ton adresse mail à personne
    Et promis pas de publicité... juste mes nouveaux articles

    03 29 43 14 05
    Question rapide?