Blog

Lisez ce qui Nous Passionne: Développement Web et Technologies

Des outils d’optimisation Web que vous ne pouvez pas ignorer

Lorsqu’on développe un site Web, une habitude est souvent de concentrer ses efforts sur l’ajout d’options en laissant de côté les bonnes pratiques de codage. On ne se préoccupe de rien d’autre et on remet à plus tard la relecture et l’organisation du code. C’est une erreur qui finit par coûter cher. Au fur et à mesure qu’un projet avance et que le deadline approche, on oublie de nettoyer son code; soit parce qu’il y a beaucoup de bugs, soit par manque de temps. Une fois le projet livré, le client risque alors de se plaindre de problèmes de performance et de manque de rapidité du site. On se retrouve donc à travailler à nouveau sur le même projet pour améliorer les performances. Quelques conseils à garder en tête pour optimiser la rapidité de votre site internet :

  1. Réduire le nombre de requêtes

Quand une page est chargée pour la première fois, la première requête réalisée contient du contenu HTML. Lorsque le navigateur traite ce contenu, il envoie d’autres requêtes pour charger les autres contenus tel que le contenu CSS, les images ou JS. Il exécute aussi le JavaScript et envoie les requêtes Ajax au serveur. Les navigateurs modernes n’autorisent que 6 à 8 requêtes simultanées par domaine. Si votre page Internet en a plus, le navigateur traite les requêtes par paquets, ce qui augmente le temps de chargement. Par conséquent, il faut essayer de réduire, autant que possible, le nombre de requêtes.

  1. Réduire le temps de latence JavaScript

Avant que le navigateur puisse afficher une page, il doit construire l’arborescence du DOM (document object model) en parcourant les balises HTML. Pendant cette étape, à chaque fois qu’il rencontre un script, le navigateur doit s’arrêter et l’exécuter avant de pouvoir continuer à parcourir le code HTML. S’il s’agit d’un script externe, il est aussi obligé d’attendre que le contenu soit téléchargé, ce qui peut encore augmenter le temps que va prendre la page pour s’afficher la première fois. Pour réduire le temps de latence JavaScript, on peut séparer nos ressources JavaScript en deux groupes. Le premier groupe est le contenu JavaScript que la page a besoin de charger pour s’afficher et le deuxième celui qui peut être téléchargé après que la page se soit affichée (comme les clicks events par exemple). Les ressources qui peuvent attendre jusqu’à ce que la page soit chargée devraient toutes être mises dans un fichier externe : defer.js par exemple et qu’on peut appeler comme ci-dessous.

<script type=”text/JavaScript”>
function downloadJSAtOnload() {
var element = document.createElement(“script”);
element.src = “defer.js”;
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener(“load”, downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(“onload”, downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Ce code doit être ajouté avant la balise </body>. Juste déplacer les fichiers JavaScript en dessous du contenu HTML en rajoutant les attributs « Async » ou « Defer » ne résoudront pas le problème de la latence d’affichage. Si les scripts externes sont petits, une autre solution peut être d’incorporer directement leurs contenus dans le code HTML et ainsi éviter les latences de requêtes.

  1. Réduire le temps de latence CSS

De la même façon que JavaScript, les fichiers CSS impactent la rapidité des pages. Voici quelques bonnes pratiques à suivre.

a. N’utilisez pas @Import pour appeler les fichiers CSS On inclut typiquement les fichiers CSS en utilisant la syntaxe suivante :

<link href="style.css" rel=”stylesheet”>

N’importe quel fichier CSS appelé de cette façon va toujours être chargé par le navigateur avant même d’afficher quoi que ce soit sur la page. Prenons maintenant un fichier CSS qui n’a pas besoin d’être chargé avant l’affichage de la page. Comme les instructions CSS pour l’impression par exemple.

<link href="print.css" rel="stylesheet" media="print">

Cette ligne de code signifie que print.css est destiné à l’action d’impression. Prenons un autre évènement conditionnel. La ligne de code suivante correspond à un fichier CSS utilisé lorsque la page est d’une certaine longueur :

<link href="other.css" rel="stylesheet" media="(min-width: 40em) ">

Les navigateurs modernes comprennent qu’il s’agit là d’un fichier CSS qui n’est utilisé que dans certaines situations précises. Il peut donc choisir de ne pas charger le fichier si celui-ci n’est pas utilisé.

b. Nommez les fichiers CSS correctement

Réduisez le nombre de fichiers CSS. Si possible combinez les fichiers CSS et s’il est petit intégrez le au fichier HTML.

  1. Utilisez des images optimisées

Pour les images vous devez vous concentrer sur trois choses : la taille, le format et l’attribut SRC.

La taille de l’image :

Les images trop grandes mettent plus de temps à charger, il faut donc les garder aussi petites que possible. Vous pouvez utiliser des éditeurs d’images pour :

  • Redimensionner ou rogner vos images à la bonne taille. Par exemple si votre page fait 570px de largeur, vous pouvez redimensionner votre image à cette taille. Ne vous contentez pas de charger une image de 2000px de largeur en fixant l’attribut width (avec width = "570"). Ceci ralentit le chargement de la page et dégrade l’expérience utilisateur.
  • Réduisez la profondeur des couleurs au minimum acceptable
  • Enlevez les commentaires d’images

Le format :

  • JPEG est la meilleure option
  • Le format PNG est aussi bien. Cependant les anciens navigateurs peuvent ne pas le supporter totalement.
  • Les GIFs doivent être utilisés seulement pour les graphiques qui sont petits ou simples (moins de 10*10 pixels, ou une palette de couleurs de 3 couleurs ou moins)
  • N’utilisez pas les formats BMP ou TIFF

L’attribut SRC :

Une fois que la taille et le format sont bons, assurez-vous que le code le soit aussi. En particulier éviter les codes SRC vides. En HTML le code d’une image inclut l’attribut <img src="">.

Quand il n’y a pas de source dans la balise, le navigateur envoie une requête au répertoire de la page ou à la page elle-même. Ceci peut engendrer du trafic inutile vers votre serveur voir même corrompre les données utilisateur.

Conseils pro : Prenez toujours le temps de redimensionner vos images avant de les uploader et incluez toujours une URL valide à l’attribut SRC.

Pour vous assurer que vos images se chargent rapidement, pensez à rajouter le plugin WP Smush.it à votre site internet.

  1. Utilisez le cache pour le contenu statique

Pour les fichiers statiques comme les fichiers CSS, Javascript et images, ajoutez le cache temporaire. De cette façon, ces ressources seront sauvegardées dans le navigateur et les requêtes répétées seront optimisées. Pour résoudre le problème de réutilisation des vieux fichiers même après qu’ils aient été modifiés sur le serveur, utilisez la méthode dite « URL fingerprinting ».

  1. Si possible utilisez un CDN pour les fichiers statiques

Utilisez un CDN (Content Delivery Network) pour les fichiers statiques comme JavaScript, CSS ou les images. Le CDN stocke les fichiers statiques dans plusieurs nœuds serveurs. Quand ceux-ci sont demandés par un utilisateur, ils sont récupérés depuis le nœud le plus proche, ce qui réduit la latence.

  1. Réduisez JS et CSS

Réduire le contenu JS et CSS réduira la taille des fichiers et améliorera le temps de chargement et les performances.

  1. Utilisez la technique de compression gzip

Il est possible de compresser les fichiers lorsqu’ils sont transférés depuis le serveur vers le navigateur. Tous les navigateurs modernes comprennent le format gzip et ceux-ci sont alors décompressés du côté client. Grâce à cette technique la taille des fichiers est réduite et ils sont alors téléchargés rapidement.

Suivre ces règles assurera que votre site internet soit optimisé et améliorera l’expérience utilisateur de vos visiteurs. Si vous avez besoin d’aide pour optimiser votre site web nos experts seront très heureux de vous aider. Laissez-nous un message et nous vous recontacterons très vite.

Manjunath Govindappa | ASP.NET Technical Lead

Laissez un commentaire

Aix-en-Provence – Bangalore – Montréal

Nous valorisons la diversité et nous travaillons depuis 3 villes fantastiques, situées sur 3 continents et autant de fuseaux horaires différents.


Contactez-nous
Nous vous rappellerons dès que possible !