La performance Web

Ces derniers mois, il y a eu une véritable prise de conscience de la notion de performance par les sites Web. Google a largement contribué à cette prise de conscience, en ajoutant un paramètre de temps de chargement dans son algorithme de référencement. De nombreuses études ont aussi prouvé que la vitesse de chargement des pages d’un site rapide améliorait considérablement les principaux indicateurs de fréquentation d’un site Web : taux de conversion, taux de rebond, nombre de pages vues.

Un beau site ne suffit plus

L’optimisation des performances d’un site Web est un processus long, coûteux, voire sans fin. Il faut y consacrer des ressources IT dédiées, mettre en place des processus complexes et suivre l’évolution constante des règles à appliquer.
C’est pourquoi Pixeljaguar propose de construire des (jolis) sites rapides, sans gros moyens financiers en hébergement et serveurs.

Pixeljaguar améliore le temps de chargement de votre site, afin de :

  • augmenter vos taux de conversion
  • augmenter votre trafic
  • augmenter la satisfaction de vos clients qui seront plus enclins à revisiter votre site,
  • faire des économies de bande passante

Il faut optimiser

Il existe différents axes d’optimisation pour rendre un site web rapide : configurations du serveur utilisé, optimisation du code, des éléments utilisés par le site. Une grande partie du travail est réalisée sur le front-end, c’est à dire le chargement de la page web, ainsi que de ses éléments constitutifs (design, images…). Quelques pratiques suffisent à révolutionner l’expérience internet de vos utilisateurs.

80% du temps de chargement d’un site correspond au front-end (images, feuilles de styles, JavaScript, etc.). La réduction du nombre d’éléments est la clé pour optimiser la vitesse d’affichage. L’optimisation d’un site Web s’opère sur 3 points :

  1. Le nombre de requêtes HTTP que le navigateur effectue sur le serveur pour afficher l’ensemble des éléments du site.
  2. Le poids de la page consultée (la page d’accueil mais aussi les URLS qui reçoivent le plus de visiteurs doivent être optimisées).
  3. Le temps de chargement en secondes.

« On veut du concret » pour avoir un site rapide

La page en elle même

Réduire la taille du DOM (Document Object Model). J’entends par là, la quantité de code html des pages, notamment entre les balises <body> et </body>. Cela permet un chargement rapide pour le téléchargement puis les calculs de rendu du navigateur.
Limiter l’utilisation d’identifiants et classes sur les balises html. Utiliser quelques id pour les principales zones de la page puis des classes pour les sous-éléments.

Les feuilles de style en cascade

Réduire la taille de votre fichier CSS à moins de 50 ko (et non gzippé). Distribuer les éléments adaptés de la CSS pour chaque page, et appeler certaines parties uniquement lorsque c’est nécessaire. Il faut tirer profit de l’héritage CSS (dit « en cascade »), utilisez des sélecteurs courts, regroupez les éléments qui partagent plusieurs caractéristiques communes.

Exemple, la CSS pour mettre en forme les formulaires ne s’affiche que pour la page affichant un formulaire et non sur toutes les pages.

Il faut utiliser les propriétés CSS raccourcies. Les propriétés raccourcies peuvent être employées pour indiquer plusieurs propriétés d’un seul coup, dans une déclaration unique, au lieu d’utiliser une déclaration séparée pour chaque propriété. Cela gagner beaucoup de place dans votre fichier CSS.

Exemple : Il existe un raccourci très intéressant et peu connu : lorsqu’une couleur est constituée de trois paires de chiffres hexadécimaux, vous pouvez enlever un chiffre de chaque paire. #000000 devient #000, un bleu #336699 devient #369 ou encore pour du orange #ff6600 devient #f60.

On dispose de toute une quantité de propriétés raccourcies : les propriétés background, border, border-color, border-style, pour les côtés de bordure (border-top, border-right, border-bottom, border-left), border-width, font, list-style, margin, outline, et padding.

Les images de l’interface

Faire des sprites CSS. Sprites ? Cela consiste à regrouper l’ensemble des images de l’interface utilisateur (icônes) en une seule et même image, puis à cibler ses différentes zones en utilisant la propriété CSS background-position. Cela réduit drastiquement le nombre de requêtes serveurs.
Cette pratique est très appréciée par Google Page Speed et YSlow.

Il est admis qu’un navigateur peut effectuer six requêtes en parallèle vers un même domaine, sans aucun temps d’attente ressentie par utilisateur.
Donc, reprenons, on a la page appelé (1), la feuille de style CSS (1), quelques scripts (disons 4), et le reste des images, dont une planches d’images « sprites ».

Minification maximum

Compressons tout ce qui peut l’être ou plutôt devrait-on dire « minifions » (de l’anglais minify). C’est vrai pour le CSS, mais ça l’est aussi pour le JavaScript et le code html. Même si ce dernier est gzippé par le serveur avant envoi (à configurer via le fichier de configuration serveur .htaccess). A quoi bon charger des centaines d’espaces et de tabulations, qui seront inutiles pour vos visiteurs ? Prenez le temps de nettoyer le code du template. Bien sûr les fichiers sources de développement sont biens organisés (on conserve les indentations). C’est la page en ligne qui doit être « minifiée ».

Les appels à la base de données

Avec l’utilisation d’un CMS, sur chaque page, on appelle la base de données pour afficher le nom du site, le logo, les textes « fixés » vus sur plusieurs pages, etc. L’idée est qu’une fois fini notre template, c’est de supprimer les requêtes d’appels « qui ne bouge pas » et à la place écrire le code généré par le navigateur.
Ainsi, il y a moins d’appels à la base de données et moins sollicitation du serveur.

Mettre en cache et compresser (côté client)

On peut utiliser la mise en cache des éléments par le navigateur pour prévenir l’envoi de requêtes inutiles à chaque fois qu’un visiteur retourne sur votre site ou lors de la visites de plusieurs pages. Logo, CSS et autres JS sont rarement amenés à changer sur un site : il est donc intéressant que le navigateur les stocke en cache afin de réduire le nombre de requêtes inutiles.

Utiliser le plugin adapté à chaque page

Avec un CMS, on utilise un plugin de formulaire de contact pour afficher un formulaire sur une page du site. Ce plugin dispose d’une feuille de styles CSS et d’un fichier JavaScript indispensables pour son bon fonctionnement. Or, ces 2 fichiers vont générer 2 requêtes supplémentaires sur l’ensemble des pages visitées du site. Il serait judicieux de ne les charger que sur la page concernée.
On peut aller plus loin : on n’utilise pas la feuille de style du plugin, mais la notre celle du site. L’intérêt en plus est d’utiliser des styles personnalisés et adaptés au projet et non pas ceux par défaut. Pour le script, on garde celui du plugin pour conserver les mises à jours éventuelles.

Résultat pour le site Pixeljaguar :

PIXELJAGUAR résultat GTmetrix

Une meilleure compréhension du mode de chargement et de construction des pages permet d’en optimiser la vitesse de chargement. Une mise en cache adapté ainsi que des chargements différés peuvent accélérer le rendu de vos pages très efficacement.

Cet article n’est pas exhaustif, d’autres techniques sont possibles, elles feront l’objet de probables futurs articles.

les outils utiles :

Maintenant au boulot, nous avons des sites à optimiser ! Peut-être le vôtre ?