Optimiser les performances de votre site web

Avoir un site web qui se charge rapidement n'a que des avantages. Si votre site web met trop longtemps à s'afficher, il va vous faire perdre des visiteurs et quelques points SEO.

Les performances d'un site web peuvent se définir comme l'ensemble des critères qui impactent sa vitesse de chargement. Ainsi un site web bien optimisé :

  • Permet d'économiser la bande passante.
  • Permet de réduire le taux de rebond.
  • Permet d'augmenter le taux de conversion.
  • Permet d'être crawlé rapidement par les bots.
  • Est favorisé dans les resultats de recherche de google.
L'importance de la vitesse de chargement des pages d'un site web pour le référencement naturel n'est plus à démontrer, c'est pour cela que nous proposons ce "guide pratique d'optimisation des performances d'un site web".



1- Etablir l'état du site web à optimiser :

Avant de se lance dans une quête d'optimisation, il faut tout d'abord auditer et faire le bilan du site web en question. Plusieurs site en ligne offre le service de diagnostic gratuitement, ils analysent le site web et proposent des solutions à mettre en place pour accélérer le chargement des pages.
En voici les plus utilisés:

  • GTmetrix : Très complet. Son plus grand avantage c'est qu'il permet de partager les résultats et de suivre l'évolution des performances au fil du temps.
  • Pingdom : Facile et fiable, il permet de choisir le lieu du test et propose pleins d'autres bonnes informations.
  • Google PageSpeed Insights : l’outil de Google. Il propose une API et donne des astuces pour les desktop et les mobiles.
  • WebPageTest : Un autre outil assez similaire avec une interface un peu obsolète.
Avant de passer aux techniques d'optimisation, il faut garder à l'esprit que s'il y a une bonne pratique à retenir : c’est de tester après chaque modification tout au long du process d'optimisation.

2- Optimisation du contenu :

2.1- Limiter les requêtes :

Lorsqu'un visiteur consulte une page web, il provoque une "Requête HTTP" envoyée par son navigateur Internet (Mozilla, Opera, Internet explorer...) vers le serveur de la page souhaitée.

Une fois la page affichée, elle est généralement constituée de nombreuses ressources (Css, Images, Js) provenant parfois d'autres serveurs tiers. L'affichage ou l'exécution (Javascript) de chacun de ces objets, oblige le navigateur à envoyer pratiquement autant de "Requête HTTP" et attendre la réponse.

Pratiquement le temps de chargement d'une page web égale à le temps demandé par l’envoi de chaque requête du navigateur au serveur plus le temps de réponse.

Ainsi, il est mieux d'utiliser une ressource de 200 ko, que 20 ressources de 10 Ko chacune.

Requête HTTP

Pour avoir un temps de chargement d’une page optimal, il faut limiter le nombre de ressources à charger (Que ce soit des images, des feuilles de style CSS ou des fichiers JavaScript) et donc les requêtes à envoyer. Il est fortement conseillé de :

  • Concaténer les fichiers JavaScript et les feuilles css : Regrouper le plus de code possible dans une seule ressource (css ou js), comme ça le nombre de requêtres est minimisé.
  • Utiliser les sprites : C'est une technique qui consiste à regrouper plusieurs images en une seule et à ne sélectionner que la zone que l'on veut afficher. L’avantage est que le navigateur n’aura q’un seul image à charger.
  • Minimiser les redirections : Elles provoquent des requêtes supplémentaires.
  • Utiliser l'inclusion sélective des fichiers JavaScript : Cette technique consiste à ne charger un fichier js que pour certaines pages et pas pour l'ensemble des pages du site web. Par exemple : pour valider les données d'un formulaire de contact on va utilisé un fichier JavaScript, le but est de charger cette ressource Js que si la page avec le formulaire est chargée.

    En voila un petit bout de code PHP:

    <?php if(basename($_SERVER['SCRIPT_NAME']) == 'contact.php'){? ><script type="text/javascript" src="js/validate.js" ></script ><?php };? >

NB : Si un fichier CSS est de très petite taille, il est préférable de mettre le style directement sur la page html (Inline).

2.2- Compresser les ressources :

  • Le code HTML :
La compression du code HTML permet de réduire la taille totale d'une page HTML. En compressant le contenu le temps de réponse des requêtes http est réduit et donc la vitesse de chargement de la page compressée.

La compression peut se faire on utilisant le PHP ou la compression côté server d'Apache. Le but alors est de compresser le code avant de l'envoyer à l'utilisateur; ensuite, c'est au navigateur de le décompresser et l'afficher.

  • La minification :

Afin de rendre les fichiers CSS et les JS plus légers, il existe un processus qui permet d'alléger la taille de ces fichiers, c'est la minification.

La minification consiste en la suppression de tout ce qui n'est pas indispensable à la compréhension du code par les machines, à savoir : les espaces inutiles, les sauts de ligne, les commentaires.

On trouve divers outils pour minifier les Js & les Css et le HTML:

  1. Clean CSS.
  2. Minifier.
  3. YUI Compressor.
  4. HTML Minifier.

- Il ne faut pas confondre la compression et la minification. La minification reste une première phase d'optimisation avant la compression.

  • Les images :

Les sites actuels comportent un nombre important d'images. Que ce soit sous forme d'image de fond, de slider ou un simple logo, il très important de faire attention à la taille qu'elles representent.

Ci-dessous quelques points-clés simples mais qui sont primordials, non seulement pour la vitesse de chargement mais aussi pour le référencement naturel de votre site web.

  1. Le choix du bon format : Privilégiez le format JPG pour les photos de haute qualité et le PNG pour les icônes et les captures d'écrans et surtout évitez l'utilisation du format déprécié BMP.
  2. La compression destructive : Une image JPEG à 100% de qualité prend énormément de place. Le simple fait de réduire la qualité à 95% peut parfois réduire la taille de 50%, sans que la différence soit visible à l'oeil. Le point est de trouver un bon compromis entre qualité visuelle et poids.
  3. Les dimensions : Spécifiez toujours les dimensions des images dans le code. Si la hauteur et la largeur sont définies, l'espace requis pour l'image est réservé lorsque la page est chargée. Dans le cas contraire, le navigateur ne connaît pas la taille de l'image et ne peut pas lui réserver l'espace approprié. L'effet sera un ralentissant du rendu de la page.
  4. Le format JPG progressif : Les images en JPG progressif se chargent beaucoup plus vite dans le navigateur.
  5. La résolution : Plus la résolution de l’image, exprimée en DPI, est élevée plus la taille sera importante. Une résolution de 72 dpi reste suffisante pour une page web.

2.3- Différer le chargement du Javascript :

Le processus d’affichage (rendu) d’une page web, consiste à télécharger tous les éléments de la page web : le code HTML, les images, les feuilles CSS et les fichiers JS.

Le problème avec le Js que c'est un élément bloquant, autrement dit : lors de l’affichage d'une page le navigateur met le rendu en pause quand il détecte un script JS : à ce moment là, il doit charger le JS et l’exécuter entièrement, avant de reprendre le rendu. L’utilisation de script au début du code prolonger le temps d’affichage du contenu pour l’utilisateur.

Retarder le chargement des scripts Js reste une des techniques les plus payantes en ce qui concerne l’amélioration des performances d'un site web. Le code Js doit être intégrer juste avant la fermeture de la balise</body>, cela a pour effet de charger la page web completement avant de charger le script Js.

Il faut spécifier aussi que l'utilisation de l'attribut async (HTML5) permet au script d'être exécuté de façon asynchrone dès qu'il sera téléchargé. Cela signifie que le navigateur ne bloquera pas le chargement des ressources. <script src="/js.js" async></script>

2.4- Utiliser un système de cache :

A chaque fois un visiteur fait appele à une page web, il va y avoir certainement des boucles, des structures de test, des requêtes MySQL, etc..., toutes ces opérations ralentissent le rendu de la page web.

Le concept du cache est donc de mettre en mémoire tampon sur le serveur le résultat de tout ce qui a été déja généré, lorsque un utilisateur cherchera à afficher la page en question, le système de cache va tout d'abord, vérifier si le contenu enregistré précédement est toujours actuel, si c'est le cas donc pas besoin de refaire toutes les opérations pour afficher la page , il va directement récupérer le résultat depuis la cache.

Plus loin, on verra la mise en place d'un système de cache côté serveur.

2.5- Utiliser un CDN :

Soit un Content Delivery Network, est un réseau de serveurs dans différents centres de données, localiser partout dans le monde,

qui redistribuent localement le contenu de vos serveurs et gardent en cache les fichiers qui ne nécessitent pas de mise à jour permanente.

Content Delivery Network

Le Content Delivery Network permet en plus de créer un rapprochement géographique entre les visiteurs et le serveur, une meilleure redistribution des contenus de votre site Web sur le réseau mondial des données.

2.6- Utiliser un domaine sans cookies :

Servir les composants statiques (Images, Css, Js) d'un site web depuis un domaine sans cookies (Cookieless Domain), est l'une des meilleures pratiques d'optimisation des performances.

Le principe de fonctionnement est simple : à chaque fois un serveur crée un cookie pour un domaine particulier, toutes les requêtes HTTP ultérieures pour ce domaine doivent inclure ce cookie. Même si le cookie n'a pas d'utilité pour le serveur - qui est le cas des composants statiques - il est envoyé dans les requêtes HTTP créant ainsi du traffic infructueusement.

Ajouter à chaque requête 290 octets (taille d'un cookie) est le problème des cookies d'un point de vue performance, la solution est de s'assurer que les composants statiques soient demandés sans cookies.

2.6.1- Le sous-domaine :

La première étape consiste à créer un sous-domaine static.domaine.com et d'y hérberger tous composants statiques.

2.6.2- Le CNAME :

Un CNAME est un alias qui pointe vers une entrée DNS ou un autre CNAME. L'objectif dans cette deuxième étape est de créer un enregistrement CNAME aliasant le sous-domaine static.domaine.com au domaine principal domaine.com.

CNAME

Finalement, il suffit de changer les références aux composants statiques dans le code :

Exemple :
Le code : <img src="/img/logo.png" alt="logo"> doit être changer en : <img src="http://static.domaine.com/img/logo.png" alt="logo">.

NB : Ce type de modifciation va créé des requêtes HTTP Cross-site, qui sont des requêtes pour des ressources localisées sur un domaine différent de celui à l'origine de la requête. Cela dit, il faut ajouté le code Header set Access-Control-Allow-Origin "*" au fichier .htaccess en cas de besion.

3 - Optimisation des performances côté serveur :

Logo-apache

On va se concentrer uniquement sur les serveurs apache qui représentent la majorité des serveurs web sur internet. Ceci dit, la plupart des points cités ci-dessous sont transposables sur d'autres serveurs.

L'amélioration des performances d'un site web ne se fait pas uniquement au niveau du contenu, mais aussi au niveau serveur.

3.1- Le fichier le .htaccess :

Le .htaccess est un fichier qui se trouve à la racine du site web et qui contient des directives que le serveur Apache doit appliquer en fonction des requêtes de l'utilisateur.

- La syntaxe de ce fichier est extrêmement stricte ! La moindre faute provoquera une erreur 500 du serveur (un site web inaccessible).

3.1.1- La compression Deflate/Gzip :

La compression est un moyen simple et très efficace pour accélérer la vitesse de chargement d'un site web.

Apache possède, deux mode de compression :

  1. Le mod_deflate : Simple à mettre en place et standard.
  2. Le mod_gzip : Plus puissant car permet une "pré-compression" des contenus.

L'activation de la compression est assez simple : insérer (adapter) le code suivant dans votre fichier .htaccess :

La compression deflate :
<ifModule mod_deflate.c>	
# compresser les fichiers : text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</ifModule>
La compression gzip :
<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|css|js|php)$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^img/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
Dans tous les cas le serveur Apache vérifie si le navigateur a envoyé l'en-tête "Accept-encoding" et envoi la version compressée ou non de la page demandée.

NB : Il existe une autre solution en utilisant PHP qui permet la compression gzip à la volée des pages web.

3.1.2- Le cache-control :

Ce système de cache permet de forcer le navigateur à garder une version des fichiers sur le disque dur de l'utilisateur. Comme ça les pages s'afficheront plus vite dans les prochaines visites. Mais cela reste le moyen le plus efficace pour accélérer le chargement des pages pour les visiteurs réguliers.
<ifModule mod_headers.c>
  # Mise en cache ces fichier statiques pour 2592000 sec / 30 jours
  <FilesMatch ".(ico|jpe?g|png|gif|css|js)$">
   Header set Cache-Control "max-age=2592000"
  </FilesMatch>

  # Mise en cache du html et xml pour 43200 sec / 12 heures
  <filesMatch ".(html|htm|xml)$">
   Header set Cache-Control "max-age=43200"
  </filesMatch>

  # Désactive la mise en cache pour les fichiers dynamiques PHP et CGI
  <FilesMatch ".(php|cgi)$">
   Header unset Cache-Control
  </FilesMatch>
</ifModule>

3.1.3- Les expires headers :

C'est pratiquement la même chose que la mise en cache, on peut utiliser ce code en même temps que le cache-control, mais ca ne va servir qu'à rendre le fichier .htaccess plus lourd et augmenter le nombre de requêtes.
Ici, on doit spécifié une durée pour chaque type de fichier :

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault 			"access plus 7200 seconds"
  AddType image/x-icon .ico
  ExpiresByType image/gif 		"access plus 1 year"
  ExpiresByType image/ico 		"access plus 1 year"
  ExpiresByType image/jpg 		"access plus 1 year"
  ExpiresByType image/png 		"access plus 1 year"
  ExpiresByType image/jpeg 		"access plus 1 year"
  ExpiresByType image/icon 		"access plus 1 year"
  ExpiresByType image/x-icon 		"access plus 1 year"
  ExpiresByType image/svg+xml 		"access plus 1 year"
  ExpiresByType text/css 		"access plus 1 year"
  ExpiresByType text/html 		"access plus 7200 seconds"
  ExpiresByType text/javascript 		"access plus 1 year"
  ExpiresByType application/xhtml+xml 		"access plus 7200 seconds"
  ExpiresByType application/x-javascript 	"access plus 1 year"
</ifModule>

3.1.4- Les balises-entités ETag :

Les ETAG servent à identifier la version d'un fichier. Si entre deux visites un fichier a été modifié sur le site web, le serveur et le navigateur auront des ETAG différents (deux versions du même fichier) et donc le fichier sera remplacé par la nouvelle version.

Le fait qu'à chaque requête, le navigateur et le serveur doivent comparer les ETAG génère inutilement du trafic, c'est pourquoi Gmetrix conseille de désactiver les ETAG.

Header unset ETag
FileETag none

NB : On peut également désactivé la signature du serveur pour plus de sécurité en ajoutant ServerSignature Off au fichier .htaccess.

3.1.5- Le TTFB :

Le Time To First Byte, littéralement le "temps de chargement du premier octet" est le temps séparant l'envoi d'une demande du navigateur et la réponse du serveur hébergeant la page web en question.

Un Time To First Byte est considéré acceptable s'il est inférieur à 1000ms, et idéalement de l’ordre de 100ms. Bytecheck reste un bon outil pour tester son TTFB.

Le Time To First Byte est le meilleur indicateur de la vitesse et la qualité d'un hébergeur.

TTFB

NB : Le « Time To First Byte » n’a que peu d’impact sur l’utilisateur. En revanche, il a énormément d’impact sur le référencement.

4- Conclusion :

On se rend compte qu'il faut très peu d'effort pour optimiser les performances et accélérer la vitesse de chargement des pages de manière considérables. Surtout avec toutes les ressources et les publications sur le sujet disponible sur la toile.

Et on voit clairement pourquoi les moteurs de recherche ont tendance à sanctionner les site web de mauvaises performances.

Finalement, si malgré ce guide pratique, vous avez du mal à vous y retrouver sans conseils, Contactez-nous et nous ferons le travail pour vous.