5 points pour optimiser son site web en 2015

Vous n’emmeneriez pas votre site sur la plage ? Voici 5 points pour lui faire perdre ses Ko superflus et être prêt à affronter l’été.

1/ A fond dans le flat design

Grosses tendances apparues avec l’explosion de la navigation mobile, le flat design.

Avant, il y avait les sites « de 1996 ». C’était la mode du skeuomorphisme et des sites à taille fixe. Puisque le site ne bougeait pas, on pouvait faire un peu ce qu’on voulait en utilisant des images pour faire des fonds, des arrondis, des dégradés, etc.

Du coup, lorsqu’on appelait une page web, il fallait charger la ou les feuilles de style (CSS) ET les images nécessaires au style.

Mais avec l’arrivée du mobile, finito ! La page web doit s’adapter aux différentes tailles d’écran, et se charger le plus rapidement possible (oui, les réseaux mobiles ne sont pas des bêtes de performance…).

C’est là que le flat design débarque, sur son cheval blanc.

Le flat design, c’est un style minimaliste, composé d’applats de couleurs, de formes simples et de jeux de typographies. On revient aux bases.

En fait, tout se fait dans la feuille de style. D’où un gros gain de performances quand on n’a plus à télécharger qu’un seul fichier de quelques Ko.

Le flat design, c’est :

  • aucune image de style (dégradés, bord arrondis, décoration, etc.)
  • Tout le style est géré dans le CSS

2/ Pensez mobile en premier

Le mobile first n’est pas quelque chose à appliquer absolument sur tous les projets. Mais il est bien d’avoir ce concept en tête lorsqu’on pense son site web.

L’idée du mobile first est de commencer à définir son site par son utilisation sur mobile. Puis, on étire son contenu pour l’afficher sur tablette ou ordinateur. Certaines réflexions peuvent être intéressantes :

Lire sur un écran de téléphone est une terrible expérience. On va donc réduire les textes pour ne garder que le nécessaire et des messages forts.

Les boutons doivent être visibles et accessibles pour un doigt.

Rien de pire que d’attendre plus de 10 secondes pour accéder à un site web. On va réduire la taille des images pour les adapter au support et pour que leur téléchargement soit plus rapide.

On va mettre de côté les animations Javascript du style « mouseover ».

Toutes ces « bonnes pratiques » ont un avantage de poids (c’est le cas de le dire), c’est qu’elles entrainent une diminution drastique des éléments qu’une page web doit télécharger.

Ca nous permet d’avoir un site moins lourd « physiquement » et moins lourd pour le visiteur qui aura accès à du contenu pertinent et rapide à lire.

NB : Si une page se charge rapidement sur mobile, imaginez le temps de chargement sur un ordinateur.

3/ Bye bye les framework CSS

Les framework comme Bootstrap ou Foundation sont super pratiques pour commencer rapidement un projet car les boutons, les sidebars, etc. sont déjà codés en CSS. Il suffit juste de créer la structure de la page HTML et d’y appliquer leur style.

Le première problème arrive lorsqu’on veut sortir de ce que le framework nous propose pour personnaliser le style d’un site par exemple.

Pour intégrer notre propre style, on est obligé de surcharger (ou réécrire) certains styles du framework. Ce qui mène à des fichiers CSS plus nombreux ou plus lourds.

Le second problème, c’est qu’on n’utilise pas tout ce qui est contenu dans les fichiers du framework.

Je n’affiche pas de tableau sur mon site mais le style est bien présent dans ce fichier CSS.

Au final, je charge des fichiers avec du code dont je n’ai pas besoin. Ce qui correspond à quelques Ko de surcharge pondérale dont mon site se serait bien passé…

En écrivant soit-même les fichiers CSS, on a uniquement les styles nécessaires chargés par la page web.

Plusieurs techniques permettent d’accéler considérablement l’écriture des styles CSS. Des bibliothèques SASS comme Bourbon et Bourbon Neat par exemple.

4/ Optimisez vos images

Par pitié ! Pensez au poids des images que vous mettez sur votre site web… Il arrive bien souvent qu’on se retrouve avec des pages qui pèsent plus de 2Mo car les images ont été mises comme telles dans le code de la page…

Etape 1 : Redimensionnez

Dans un premier temps, n’hésitez pas à redimensionner vos photos. Ca ne sert à rien d’afficher une images de 2000px par 1000px dans un bloc qui ne fait que 400px de largeur max.

Etape 2 : Optimisez

Ensuite, certaines photos ne servent que de fond. Il n’est donc pas nécessaire d’avoir une image d’une qualité folle… La réduire peut faire gagner quelques précieux Ko.

Etape 3 : Hébergez

Une fois vos images optimisées, il faut aussi optimiser la façon dont vos visiteurs vont les charger dans leur page web. Pour cela, il existe des serveurs tout autour du globe, appelés des CDN, qui permettent de télécharger plus rapidement les images et ainsi, d’avoir une page web plus rapide.

Les images sont bien souvent responsables du poids important des pages web. Leur optimisation n’est donc pas quelque chose de secondaire.

5/ Compressez au maximum

Dernier points de cet article pour gagner encore quelques octets et quelques millièmes de seconde dans le chargement de la page web : la compression des ressources.

Premier point : certains éléments ne sont nécessaires à une page web et prennent quand même quelques octets. Je pense par exemple aux espaces, sauts de ligne, tabulations, etc. dans les fichiers CSS ou Javascript. Ce n’est rien en tant que tel mais sur des fichiers comprenant quelques milliers de lignes, on commence à voir la différence.

Certains outils permettent de compresser ces fichiers en mettant leurs lignes sur une seule et même ligne, tout en supprimant les espaces superflus.

Deuxième point : à chaque fois que la page web télécharge un fichier (CSS, JS ou autre), il se passe un temps entre la demande, le processus sur le serveur et la réponse (= téléchargement du fichier).

On va donc compresser tous les fichiers CSS ensemble pour n’en avoir plus qu’un. On économise ainsi du temps puisqu’il n’y a qu’une demande faite par la page web.

Pour conclure

Google est de plus en plus regardant sur les performances d’un site web. C’est tout à fait logique car il tend à proposer un service qui corresponde aux attentes des internautes. On a tous de la frustration lorsqu’une page web met une plombe à charger…

L’optimisation est donc primordiale pour un site web. Dans cet article, j’ai mis en avant quelques principes. Il en existe beaucoup plus.

Je pense que commencer à penser son site web comme s’il était consulté via un smartphone est une bonne chose car ça force à réduire considérablement la taille des contenus et à rendre la lecture confortable dans une situation de consultation rapide.

L’utilisation mobile force aussi à réduire le nombre et la taille des fichiers chargés par le site web. Comme les réseaux mobiles ne sont pas aussi performants que les réseaux ADSL, il faut éviter au maximum la frustration des utilisateurs devant une page trop longue à charger…

N’hésitez pas à partager vos astuces pour optimiser facilement un site web dans les commentaires.