Plusieurs postes sont disponibles chez Nmédia!Amène ton talent, on fournit le plaisir!
7 optimisations pour un site plus rapide

7 optimisations pour un site plus rapide

20 août 2014Par Patrick Colbert
Catégories :

La validation HTML/CSS

La validation du code HTML et CSS (W3C) permet de : s’assurer que le code est conforme aux normes Web, s’assurer que vous avez fermé toutes vos balises, éviter les erreurs de frappe. C’est une étape très importante pour avoir un code « propre ».

Les raccourcis CSS

Si vous n’utilisez pas encore les raccourcis pour les propriétés CSS, il est grand temps de s’y mettre! Il s’agit d’une pratique simple et efficace pour avoir un code plus lisible et, à la fois, plus performant. L’idée étant d’avoir le moins de lignes de code possible. Plus il y en a, plus le ficher à télécharger sera lourd. Dans le cas d’un fichier CSS ou HTML, on parle seulement de quelques Ko de différence, mais si on multiplie ces quelques Ko par des millions d’utilisateurs tel que sur le site de Google, ils peuvent faire une grosse différence sur la vitesse des serveurs et celle du téléchargement de la page du client.

Sans raccourci (4 lignes de code) :
[img]class-fullmargin.jpg|||||[/img]

Avec raccourci (1 ligne de code) :
[img]margin.jpg|||||[/img]

Les sprites

Un sprite est une image qui contient tous les boutons et ou icônes de votre site. L’utilisation d’un sprite permet à l’utilisateur du site de télécharger une seule image. Cette dernière est ensuite stockée dans la cache du navigateur. Ainsi, le chargement des pages devient beaucoup plus rapide que si nous avions à télécharger une dizaine d’images à chaque page. On utilise des propriétés CSS pour afficher (background) et déplacer (position) cette image et avoir le bon bouton à la bonne place.

Pour plus d’information sur les sprites, référez-vous à l’article de Marc-André.

Les espacements

L’utilisation des espacements aide beaucoup à la lisibilité du code, mais crée aussi plus de lignes de code. Encore une fois, plus il y a de lignes de code, plus votre fichier sera lourd. Donc en HTML, on enlève tous les espaces inutiles souvent présents entre les éléments.

[img]espacement.jpg|||||[/img]

Reset CSS

L’usage d’un « Reset CSS » est assez important puisqu’il uniformise les styles de tous les navigateurs et permet de perdre moins de temps à faire des modifications pour tel ou tel navigateur. Ces petites modifications ajoutent, encore une fois, du code supplémentaire dans vos fichiers CSS qui deviennent plus lourds.

L’optimisation des images

Grâce à l’optimisation des images, on peut passer d’une image qui pèse environ 2 Mo à une image de 200 Ko. Cette étape est cruciale pour avoir un site qui charge rapidement. Toutes les images devraient être optimisées au maximum pour permettre à ceux qui n’ont pas une bonne connexion Internet d’avoir accès à votre site sans trop attendre. Cela permet aussi à ceux qui sont sur leur mobile de ne pas utiliser trop de données pour consulter votre page Web.

Pour obtenir plus d’information sur l’optimisation des images ou pour une optimisation sans perte de qualité vous pouvez, là encore, vous référer à l’article de Marc-André à ce sujet.

Compression CSS

Plusieurs sites ou applications vous permettent de compresser votre CSS ou votre HTML en un code illisible pour les êtres humains, mais encore lisible pour les navigateurs. Maintenant, qu’est-ce que ces compresseurs de code font ? Ils enlèvent tous les espaces et optimisent aussi les propriétés CSS telles que les margins, padding, background, et autres que nous aurions pu oublier de raccourcir.

Attention : Il se peut que les compresseurs de CSS produisent des erreurs dans le code. Il suffit d’aller revalider le code sur le site du W3C. Notez que ces erreurs arrivent très rarement, mais restent possible.

En conclusion,

Un code bien écrit et optimisé est essentiel pour la performance de téléchargement des éléments de la page, mais aussi pour la réponse du serveur. Un code optimisé permet aussi à ceux qui veulent consulter votre site à partir des réseaux moins rapides tels que les mobiles et les connections Internet plus lentes. L’optimisation vous permettra d’utiliser moins de données par utilisateur et par le fait même, d’avoir un meilleur rendement si vous avez beaucoup d’utilisateurs connectés sur votre site.

Autres articles pertinents

Voir tous les articles