Introduction à la performance Web

Profil : Débutant, Expert
Technologie : (X)HTML, CSS, DOM
Thème : Qualité
Auteur : Nicolas Hoffmann
Mise à jour : 08/02/2011

En bref

Travailler les performances d’un site web peut être un travail de très longue haleine et extrêmement technique, impliquant de multiples acteurs et de multiples compétences. L’idée de cet article est de comprendre pourquoi ce domaine est en plein essor et d’en poser les bases.

Définition et cadre de l’article

Les performances web sont un domaine qui peut être extrêmement large. Cela peut aller de la rapidité du ou des serveur(s) jusqu’à l’utilisation efficace d’une base de données et d’un langage de web dynamique comme PHP, tout en passant par des intégrations HTML/CSS de qualité, l’optimisation des images, etc.

Cet article ne compte pas (et ne peut pas !) aborder tous ces multiples domaines. Nous allons plutôt nous concentrer sur l’optimisation de la vitesse d’affichage d’un site dans un navigateur.

Les performances web, pourquoi ?

Améliorer l’expérience utilisateur

Les visiteurs de votre site apprécieront que vos pages s’affichent le plus rapidement possible. De récentes études montrent qu’une baisse de la rapidité d’affichage d’un site peut induire une baisse de fréquentation significative, et cela tombe sous le sens : le visiteur d’un site de e-commerce aura tendance à passer chez un concurrent plus efficace si le site en question met 10 secondes à s’afficher. Pour prendre un autre exemple, attendre 3 à 4 secondes à chaque recherche sur Google serait extrêmement pénible.

Envisager le web mobile

Si la rapidité est importante sur un ordinateur disposant par exemple d’une bonne connexion ADSL, elle est quasiment critique en situation de mobilité. Les connexions sont en général moins rapides, et paradoxalement, les utilisateurs sont moins patients et attendent autant de rapidité que sur un ordinateur de bureau classique.

Optimiser les coûts

Un site dont les performances sont optimisées sera généralement moins gourmand en ressources (bande passante, processeur, ...). Sa configuration d’hébergement pourra être adaptée sur mesure et le site supportera facilement une charge importante de visites.

Améliorer son référencement

Google a par exemple récemment annoncé que les performances web étaient un des critères pris en compte dans son algorithme de référencement.

Améliorer les performances en pratique

Avant de chercher des solutions plus complexes, travailler les performances d’un site consiste d’abord par prendre de bonnes habitudes et de bons réflexes dès la conception. Prendre ces bonnes habitudes est parfois plus intéressant et plus aisé que de corriger après coup.

Il faut déjà mettre les fichiers Javascript et CSS en fichiers externes. Pour vos CSS, placez-les dans le head et non directement dans la page : le navigateur téléchargera ainsi rapidement les informations pour mettre en forme le site et pourra commencer son travail de stylage des éléments. Pour prendre une analogie, un ouvrier qui a déjà tous ses outils à portée de main travaillera plus vite que celui qui les a éparpillés sur le chantier ou qui doit les trouver ou les découvrir au fur et à mesure de son travail.

Quant au Javascript, il est par contre conseillé de le mettre le plus possible en bas de page, juste avant </body>, pour éviter qu’il ne bloque le rendu et le téléchargement des autres composants. Pour reprendre une analogie, il vaut mieux mettre une surcouche de peinture à la fin de la construction que pendant.

Créer des CSS et du HTML efficaces

Côté HTML

Privilégiez une structure légère, identifiez bien les éléments clés permettant l’application des styles et évitez autant que possible le code redondant ou inutile.

Bannissez les erreurs 404 de votre vocabulaire, pensez à vérifier les contenus de votre site avec un utilitaire comme Xenu Link Sleuth.

Côté CSS

Pensez à utiliser autant que possible des sélecteurs efficaces. Par exemple : #bandeau a au lieu de #bandeau ul#navigation li a
Évitez de terminer vos sélecteur par *, par un [xxx] ou par un pseudo sélecteur,
Évitez également les expressions CSS comme :
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
Ce sont des éléments non standards uniquement reconnus par Internet Explorer. Même s’ils peuvent être utiles pour émuler des comportements standards non pris en charge par Internet Explorer 6 et 7, ces expressions sont plus longues à rendre pour le navigateur et très fréquemment évaluées... leur utilisation est donc à bannir autant que possible.

Pensez à bien factoriser vos propriétés CSS en utilisant judicieusement vos sélecteurs. Exemple :

#bandeau a{
 display:block;
 width:150px;
 height:65px;
 }
 /* en supposant que tous les liens 
  de votre bandeau ont cette taille */
 #bandeau #accueil{
 width:200px;
 }
/* inutile de répéter les propriétés pour #bandeau, 
on ajuste seulement celle nécessaire  */

Partez autant que possible des propriétés générales pour aller aux plus spécifiques afin d’éviter des redondances ou des redéfinitions inutiles,
Utilisez les notations compactes, par exemple : background:#fff url(/images/images.jpg) 0 0 no-repeat; au lieu de toutes les propriétés séparées : background-color, background-image, background-position, etc.). Certes l’économie est relative, mais sur de très grosses CSS elle est toujours bonne à prendre.
Pour prendre un autre exemple : margin:15px 0 10px 5px; remplacera avantageusement
```
margin-top:15px;
margin-right:0;
margin-bottom:10px;
margin-left:5px;
```

À cet effet, vous pouvez utiliser un outil comme CSS Compressor. Ce dernier peut vous indiquer quelles notations sont à raccourcir pour prendre de bonnes habitudes.

Côté images

Indiquer les dimensions des images permet au navigateur de "réserver" leurs places et de poursuivre l’affichage du reste de la page pendant leur chargement. Ainsi, le navigateur n’a pas à "découvrir" la taille des images après les avoir chargées.

Exemple : <img src="mon_image_200_150.jpg" alt="" />, une fois corrigé pour <img src="mon_image_200_150.jpg" alt="" width="200" height="150" /> ne demandera pas inutilement au navigateur des reconstructions de la page pour prendre en compte la nouvelle taille une fois l’image chargée.

Et surtout ne redimensionnez pas ces images via le HTML : charger une miniature en 200 x 150 pixels sera bien plus rapide que de charger une image dont la résolution est supérieure (ex. : 800 x 600) pour la redimensionner via le navigateur (cette image sera beaucoup plus lourde).

En prime, l’affichage sera plus beau avec une image ayant une taille exacte, un navigateur n’est pas prévu pour ré-échantillonner une image.

Il va de soi que cette liste de conseils n’est pas exhaustive, néanmoins elle permet de poser une bonne base, voyons maintenant les optimisations proprement dites.

Réduire le nombre de fichiers à télécharger

Afficher une page implique pour votre navigateur des requêtes HTTP à envoyer au serveur. Le navigateur ne peut demander tous les fichiers en même temps (et particulièrement en situation de mobilité, où les connexions sont moins rapides). Ainsi envoyer moins de requêtes au serveur permettra à votre navigateur de télécharger plus rapidement les éléments nécessaires à l’affichage de la page, et donc de les afficher plus vite.

Dans cette optique, voici plusieurs points à prendre en compte :

Combiner autant que possible les fichiers Javascript : si vos scripts peuvent être tous groupés dans un unique fichier, autant le faire !

Côté CSS, il est également souhaitable de diminuer le nombre de fichiers. Il est possible de proposer plusieurs CSS par exemple en utilisant la règle @media pour spécifier dans le même fichier CSS votre version print et vos media queries pour Smartphone :

 /* ici vos propriétés générales */
 body{
  background:#fff;
  color:#333;
 }
 /* supposons que seule la couleur du texte doive varier, 
 on modifie juste cette propriété, le reste sera hérité 
 des propriétés ci-dessus */
 @media screen and (max-device-width:640px){
  body{
   color:#111;
   }
 }
 @media print{
  body{
   color:#000;
  }
 }

Ainsi, vous n’utilisez qu’un seul fichier CSS pour votre site, sa version imprimable et sa version pour smartphone.

Les images utilisées dans vos CSS peuvent être combinées à l’aide de la technique dite des sprites CSS : les images sont combinées en une seule image et on utilise la propriété background ou background-position pour afficher la partie souhaitée de l’image. À cet effet, je vous invite à lire les sprites CSS. Cette technique présente l’avantage de fortement diminuer les requêtes HTTP et de se passer de Javascript pour d’éventuels préchargements. La maintenance et l’intégration peuvent être un peu plus difficiles en contrepartie.
Mettre en cache vos fichiers pouvant l’être (CSS, images, Javascript, icône de favori) est une bonne habitude à prendre, cela évite de devoir recharger des fichiers qui ne sont pas supposés changer à chaque consultation.

Exemple via un fichier .htaccess :

<FilesMatch "\.(gif|jpg|jpeg|png|ico)$">
Header set Cache-Control "max-age=31536000"
# 1 an pour les extensions précitées
header append Cache-Control "public"
# public indique que la mise en cache est possible 
# pour tout le monde y compris pour les proxies 
# (sinon nous aurions mis private pour empêcher 
#  les proxies de mettre en cache)
</FilesMatch>

Dans notre exemple, les images sont mises en cache pour une durée d’un an. Autrement dit, pendant un an, cela évite au navigateur ayant déjà chargé ces images de les retélécharger : l’économie en vitesse de rechargement (pour le navigateur) et en bande-passante (pour le serveur) peut être considérable. Toutefois, si un changement devait être opéré sur une image, il est recommandé de changer le nom de l’image, afin d’éviter que la mise en cache n’empêche de voir ce changement.

Réduire le poids des fichiers téléchargés

Une fois que le nombre de fichiers a été réduit autant que faire se peut, il faut également s’atteler à en réduire le poids. Fort heureusement, de nombreux outils et techniques offrent des possibilités efficaces et intéressantes.

PNG (le cas échéant GIF) et JPG doivent être optimisés. La plupart des logiciels proposent une option "optimisé pour le web" pour les images. Néanmoins, les résultats peuvent être insuffisants. Vous pouvez dans ce cas essayer des outils comme Yahoo Smush it ou PNG Optimizer, très efficaces et très pratiques.

Minifier CSS, Javascripts et même HTML si cela est possible est une bonne habitude à prendre. Pour les CSS, des outils comme CSS Compressor peuvent apporter des gains substantiels. Côté Javascript, Google Closure Compiler permet de produire du code Javascript plus efficace : il enlève le code inutilisé et permet donc d’en réduire le poids.

Il est également possible d’activer la compression de certains fichiers : en pratique le serveur compresse les données (code XHTML, CSS, ...), les fichiers transitent par le réseau, le navigateur décompresse les données avant de les interpréter. Les deux types de compressions utilisées sur un serveur Apache standard sont GZIP et DEFLATE : elles sont supportées par tous les navigateurs modernes.

Pour donner quelques exemples, une CSS de 8 ko peut voir son poids réduit à 2 Ko via la compression DEFLATE, et une bibliothèque comme Jquery voit son poids passer de 77 ko à une vingtaine de ko.

En pratique, un fichier htaccess suffit pour les activer. Par exemple, pour activer la compression DEFLATE :

AddOutputFilterByType DEFLATE text/html text/css application/javascript
#etc...

Première mise en garde : ce type de compression est à utiliser uniquement pour des contenus de type textuels. Il serait totalement inutile d’utiliser cela pour recompresser des images, cela consommerait beaucoup de ressources serveur pour un résultat nul.

Seconde mise en garde : ne misez pas tout sur la compression. Prenez bien le temps de travailler, d’optimiser et de minifier vos CSS avant de les compresser via GZIP ou DEFLATE. La rapidité d’affichage n’en sera que meilleure.

Des outils pour apprendre... et aller plus loin

Deux extensions de Firebug permettent de travailler et d’apprendre à perfectionner les performances des sites Internet : Yahoo Yslow et Google Page Speed.

Yslow propose des notes sur chaque point (mise en cache, compression, etc.) allant de A à F avec un indice global sur 100, et Pagespeed propose une note globale sur 100 en fonction de plusieurs paramètres. Ces deux extensions se complètent bien et permettent d’évaluer rapidement le travail effectué (ou à effectuer) sur les performances d’une page.

Google propose une documentation complète en rapport avec les points mentionnés via Page Speed : Google Code Web Performance Best Practices Yahoo en fait de même et propose également Best Practices for Speeding Up Your Web Site.

On peut également signaler GT Metrix, qui se base sur ces deux extensions et qui permet de comparer les résultats entre plusieurs pages.

Web page test permet (entre autres possibilités) de voir le temps que votre page va mettre à s’afficher lors d’un premier chargement, et lors d’un deuxième chargement. Cela peut vous permettre par exemple de voir l’efficacité de la mise en cache de vos contenus.

D’autres outils plus poussés comme Yottaa permettent d’analyser de manière plus globale les performances de pages internet : visualiser la vitesse d’affichage de votre site depuis divers points du globe, vérifier la complexité vos pages, etc.

Conclusion

Travailler et prendre en compte les performances des sites internet est une évidence qualitative. L’essor de la navigation en situation de mobilité, l’implication de divers acteurs majeurs du web comme Google ou Yahoo, et plus globalement le besoin d’afficher rapidement des sites parfois complexes et riches - d’autant plus dans des secteurs à forte compétitivité - font que les performances des sites internet sont à prendre en compte par tout professionnel du web, qu’il soit décideur ou technicien.

Il va de soi que cet article n’est qu’une introduction au domaine des performances web. Néanmoins, les techniques et outils abordés vous offrent la possibilité d’avoir des résultats très satisfaisants. D’autres pistes sont envisageables et commencent à voir le jour. Elles feront l’objet de très probables futurs articles.

Références :

Une question, une remarque ? Écrivez à l'auteur.

5 Messages de forum

Introduction à la performance Web 5 avril 2011 03:13, par Nicolas Chevallier

Très bon article synthétique. Il manque peut être la mention d’un outil lancé par Google, mod pagespeed, un module pour apache qui permet d automatiser une partie des optimisations : entêtes d’expiration pour les images/CSS/JS, concaténation et minification, ...
J’ai d’ailleurs écrit il y a quelques temps un petit sur WRI concernant ce module :
http://www.webrankinfo.com/dossiers...

Nicolas Chevallier

Répondre à ce message
- Introduction à la performance Web 12 août 2011 15:24, par Nicolas Hoffmann
  
  Là, c’est plus du ressort du serveur, il faut avoir la main sur son serveur Apache.
  
  Idéalement, on peut s’en passer si on conçoit bien ses sites. :)
  
  Répondre à ce message
Introduction à la performance Web 8 juin 2011 19:12, par Vincent RABAH

Bonjour,

Bel article, je suis un passionné de la performance web, et il y a peu de temps j’ai eu l’occasion d’utiliser un outil web génial, qui est capable de réaliser une montée en charge réaliste, en simulant réellement plusieurs clients en téléchargement tous les composants d’une page (html, javascript, css, imgaes, ...). J’ai réalisé un article sur mon blog pour tester les perfs de mon blog auto-hébergé :

http://www.it-wars.com/article243/p...

Le site s’appelle LoadImpact.com

Cordialement,
Vincent RABAH

Répondre à ce message
Introduction à la performance Web 21 juillet 2011 07:44, par Damien

J’aurais tendance à dire qu’il y a un autre point important pour améliorer les performances des sites internet à l’heure des réseaux sociaux : il s’agit de faire charger les javascripts externes lors de la fin du chargement du DOM. Une petite astuce qui évite de ralentir sensiblement le temps de chargement des pages.

Damien Petitjean

Répondre à ce message
- Introduction à la performance Web 12 août 2011 15:26, par Nicolas Hoffmann
  
  Pour ce qui est des chargements asynchrones, ça fera j’espère bientôt l’objet d’un article afin de compléter cette série d’articles.
  
  Répondre à ce message

Répondre à cet article

Consultez ce site selon votre profil.

Technologie

Thème

Ressources

Page valide XHTML 1 Strict, CSS2 et accessible AA.
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi.
Site hébergé par yterium (depuis 2010) et par l'APINC (2002-2010) . Propulsé par SPIP.