Quand on travaille sur un site web en local on ne connaît pas le temps de chargement de chaque page car elles sont chargées localement sur votre machine. Or, le temps de chargement est important car il influence le positionnement de votre page en SEO. Cet article passe en revue les points importants quant à la vitesse de chargement.
Pour savoir pourquoi l’amélioration du temps de chargement d’une page web est importante, dans le domaine du développement web & mobile, je vous invite à lire cet article. Nous nous concentrons sur les points importants liés à l’optimisation d’un site.
Pour connaître les performances de votre site web, l’une des solutions est de travailler directement sur un serveur de préproduction en ligne. Mais cela ralentira le développement de votre site car il faudra une connexion internet, pas toujours nécessaire lors de l’intégration d’une maquette, par exemple.
Une page web ordinaire utilise plusieurs ressources pour bien s’afficher côté navigateur. Il y a d’abord la structure des données qui seront affichées, qui est définie dans un fichier HTML ; celle-ci est contenue dans un fichier HTML. Il est préférable que ce fichier ne contienne que la structure du code et non du style, pour que votre page soit maintenable. En effet, le nombre de nœuds (balises) influence le temps de chargement de la page web.
Vient ensuite le style de la page, qui est défini par vos fichiers CSS. C’est le langage qui détermine la présentation visuelle de la structure que vous avez définie en HTML. Une page web pouvant charger plusieurs fichiers CSS, il faut savoir optimiser le chargement de ces ressources. On préférera réduire ce genre de fichiers afin que tout le contenu du code tienne sur une seule ligne. Je vous rassure, il existe des outils pour cela : je vous invite donc à lire mon article sur les outils qui facilitent la vie d’un développeur front-end.
Enfin, pour ajouter une couche d’interactivité et des animations, le langage utilisé côté navigateur est le Javascript. Comme pour les fichiers CSS, une page web peut nécessiter le chargement de plusieurs fichiers Javascript. C’est souvent eux qui bloquent l’affichage de la page, laissant votre utilisateur face à une page blanche. Mais alors comment optimiser le chargement de ces ressources ?
La ligne de flottaison est une ligne virtuelle qui définit la frontière entre ce que l’utilisateur voit et ce qu’il ne voit pas en arrivant sur un site Internet.
Votre navigateur Web lit le code HTML de la même manière qu’un être humain lit un livre. De gauche à droite et de haut en bas. Dès qu’il rencontre une ligne lui demandant de charger un fichier CSS ou un fichier Javascript, celui-ci bloque l’affichage de la page durant la récupération des données dans le fichier appelé. Si tous les fichiers externes sont chargés au-dessus de la ligne de flottaison, cela peut effectivement ralentir la vitesse d’affichage de la page. Rappelons que si la vitesse d’affichage de votre page excède les 3 secondes, vous perdez environ 70 % des utilisateurs.
L’idéal est de charger les fichiers Javascript avant la fermeture de votre balise body qui contient l’intégralité du contenu de la page web. Vous pouvez aussi opter pour un chargement différé ou asynchrone.
Plus il y a d’images sur votre page web plus son chargement est long. Enfin il faut savoir optimiser ces images dans le respect des couleurs destinées au web : on dit qu’on enregistre une image pour le web.
Rappelons qu’il existe des outils en ligne ou en local pour vous passer de ces étapes. Par exemple Grunt dispose d’un plugin qui permet la réduction d’image. Vous pouvez aussi utiliser un outil en ligne si vous n’êtes pas développeur.
Pour bien charger, il faut choisir le format d’image correspondant à chaque type d’image. Et choisissez des images ne dépassant pas les 200kB.
C’est le format le plus utilisé qui donne un rendu de haute qualité optimisé pour le web. Mais il ne permet pas de gérer la transparence, et la qualité devient très vite médiocre si la compression est trop poussée.
Il convient pour des photos sans transparence.
Le format PNG est un format d’image léger qui atténue la perte de qualité. Il en existe 2 types : le PNG-24 qui dispose d’une palette de couleurs avoisinant les 16 millions. Mais avec un inconvénient majeur, son poids. Vous pouvez l’utiliser pour des photos présentant une énorme quantité de couleurs, mais au détriment du temps de chargement de la page.
Le second type est le PNG-8. Il dispose d’une palette de 256 couleurs, et je le préconise pour des visuels ne contenant pas une énorme quantité de couleurs et dont le contour permet la transparence.
Vous le connaissez, c’est le format qui permet de créer des images animées. Ses principaux avantages : c’est un format qui se rapproche du PNG-8 ; il peut donc avoir une palette allant jusqu’à 256 couleurs, la transparence, et il permet de gérer des animations. Mais il est plus lourd que le PNG-8 pour un rendu identique. Il est préférable de le réserver aux images animées.
Le SVG est un format d’image qui permet de représenter une image sous forme de vecteur, donc sans aucune pixellisation. C’est un format d’image très léger et il permet la gestion de la transparence. Il est aussi très facile à manipuler pour créer des animations fluides grâce à l’intégration possible avec la balise <svg> disponible en HTML5.
Malheureusement, il n’est pas possible de vectoriser n’importe quelle image. Il est préférable de l’utiliser pour des images simples à représenter, comme des icônes, des logos ou des pictogrammes.
Si cet article vous a plu, nous vous invitons à découvrir notre agence developpement web et à télécharger notre livre blanc « Les 11 commandements d’un site internet qui convertit vos visiteurs en clients »