La performance web, ou comment charger un site avant d'avoir fini de lire ce titre

Vous êtes développeur web ou intégrateur. Le HTML n'a plus de secrets pour vous. Vous parlez en HTTP, vous transpirez du JavaScript et vos rêves érotiques dégoulinent de CSS. Vous faites du beau boulot – du moins je vous le souhaite. Mais faites-vous du bon boulot ?

Outre le respect des bonnes pratiques de développement qui vous ont été inculquées en cours ou fournies par tous les bons livres, il existe un domaine qui entre progressivement dans les critères de définition d'un bon site : la performance web. Autrement dit, la rapidité d'affichage d'un site Internet.

Un besoin paradoxal

Un critère de qualité, mais pas encore aux yeux de tout le monde. En effet, pourquoi votre client ou votre patron devrait-il vous laisser travailler plus longtemps sur un site pour obtenir, visuellement, le même résultat ? L'heure de la connexion 56K est en effet révolue, aujourd'hui avec le haut-débit le temps d'attente ne devrait plus être un souci. En fait c'est exactement le contraire : la vitesse est devenue un enjeu majeur, depuis que les FAI vous promettent des connexions ultra-rapides afin de télécharger vos séries et MP3 de surfer toujours plus vite. Si votre site est plus lent à charger qu'une vidéo Youtube en soirée chez Free, vos visiteurs auront une mauvaise image de votre site, et donc de la marque associée.

Toutefois, l'argument le plus important est certainement financier. Toutes les études montrent que si une page web n'est pas chargée en moins de 3 secondes, on file illico chez le concurrent. Pour une vidéo, c'est 2 secondes (sauf chez Free, donc). Par conséquent le taux de transformation décroît en fonction du temps de chargement des pages. Qu'il est loin le temps où l'on regardait patiemment sa page charger, émerveillé devant tant de technologie. Aujourd'hui chaque seconde compte, et le temps (perdu) c'est de l'argent (perdu) ! Sachez également que la Web Perf passe aussi par la réduction du nombre de requêtes vers les serveurs, ceux-ci tendent à voir leur charge diminuée. L'entreprise peut ainsi faire l'économie de plusieurs machines, et augmenter votre salaire faire de plus gros bénéfices.

Se convaincre

Et vous, que pouvez-vous attendre de la performance web ? Tout d'abord, le plaisir du travail bien fait : vous avez envie que les visiteurs aiment votre site, donc ne les repoussez pas en jouant avec leurs nerfs ! De plus, un site rapide et requérant peu de données à télécharger est une forme de cadeau fait aux visiteurs ayant un forfait data. Ils pourront se permettre de visiter les autres pages de votre site. Et puis dans ce domaine, l'un de vos meilleurs amis s'appelle le cache. Il faut beaucoup de mise en cache, pour éviter à l'internaute de télécharger plusieurs fois les mêmes éléments. Il se trouve qu'en tant que développeur, c'est aussi votre meilleure excuse en cas de problème : « Ça ne fonctionne pas ? Normal, c'est sûrement le cache... » Toujours pratique !

Des entreprises du net se donnent également beaucoup de mal pour que vous vous y intéressiez. Pour Google par exemple, il est primordial que les sites pointés par ses résultats soient rapides. Car plus ils le seront, plus vite les internautes reviendront faire une nouvelle recherche et seront exposés aux publicités AdWords... C'est sans surprise qu'on retrouve donc la firme de Mountain View à l'origine de projets comme Chrome, Fiber, DNS, SPDY et bien d'autres. Quant à Akamai, Level 3, OVH, Amazon ou encore SFR, eux gagnent de l'argent en vendant leurs services de CDN, très prisés par les spécialistes du domaine car ils permettent un chargement plus rapide des sites Internet en amenant les fichiers au plus près (physiquement) de l'utilisateur. Il y a fort à parier que les bonnes pratiques de la performance web seront très répandues dans quelques années, et que faire un site sans les respecter sera tout aussi sujet à moqueries que de le truffer de Flash et d'Active X aujourd'hui. Vous êtes prévenus !

Un objectif clair, des moyens concrets

Dans la pratique, la Web Perf est exactement l'inverse du référencement. Dans le monde des SEO, les règles exactes du positionnement sont inconnues, les actions à réaliser sont au mieux des suppositions rarement démenties, au pire des morales édictées par l'ayatollah des Bisounours. Et il est impossible de vraiment les tester ailleurs qu'en production. Dans le cas de la performance web, l'objectif est simple : diminuer au maximum le temps écoulé entre le moment où l'internaute décide d'accéder à votre site et celui où il peut consulter l'information souhaitée. Il est très facile de mesurer cela, tous les bons navigateurs (même IE, c'est dire !) le font et des outils fournissent une flopée de détails (Firebug, Chrome Dev Tools ou encore WebPageTest.org). Enfin, il n'y a pas de compétition frontale dans ce domaine : ce n'est pas parce que le site de votre concurrent est plus rapide de 500 ms qu'il va vous faire perdre de l'argent directement; là où en SEO il n'y a qu'un premier (attirant tous les clics) et des derniers, le moindre bouleversement dans les résultats pouvant entraîner la chute d'une entreprise.

Héberger son site sur des machines robustes avec une bande passante hors de prix est loin d'être suffisant. Le backend, c'est-à-dire le temps de chargement côté serveur, ne représente en général que 20 % du temps d'attente. C'est le frontend qu'il faut optimiser : réduire le nombre de requêtes HTTP, compresser les ressources, permettre leur téléchargement en parallèle, gérer la mise en cache des éléments, ne charger que ce qui est vraiment utile, ne pas être dépendant d'autres sites et ne pas bloquer le rendu du site; voila un résumé des règles de base de la performance web.

De nombreux sites, livres et experts vous indiqueront les étapes à suivre pour transformer votre vieux tacot en Bugatti Veyron Super Sport – tout en conservant les couleurs moches et le bruit ridicule si vous le souhaitez. Mieux encore, des outils tels qu'YSlow, Zoompf et Google PageSpeed sont d'excellents pédagogues qui soulignent vos erreurs, détaillent leurs causes exactes et expliquent ce que vous devez faire pour les corriger. Sans oublier le module Apache mod_pagespeed (de Google, encore) qui réalise tout cela à votre place ! On ne peut pas dire que vous n'êtes pas aidés, car dans ce milieu toutes les bonnes pratiques et astuces s'échangent ouvertement – là où elles seraient jalousement gardées en SEO.

Vous l'aurez compris, la performance est définitivement un point important du développement web, à réfléchir avant la construction du site, à améliorer pendant, et à surveiller après. Jetez un œil à vos beaux sites : se chargent-ils en moins de trois secondes sur votre ordinateur ? Et sur votre téléphone ? Et si vous essayiez de réduire ce temps, en suivant les conseils des outils dédiés ? En voilà une bonne résolution pour 2013 ; une résolution que vous pourriez facilement tenir !

TOMHTML

À propos de TOMHTML

Développeur web lillois, rédacteur pour @Zorgloob et râleur professionnel. Fait notable : a survécu à IE6, devrait donc facilement survivre à la fin du monde.

Vous pouvez partager cet article sur Facebook, Twitter ou Google+.

Faites un don pour soutenir l'association Un Pas Vers La Vie
et recevez des e-books pour tout don supérieur à 15 €

L'association Un Pas Vers La Vie aide les parents d'enfants autistes.

Les fonds récoltés vont directement sur le compte PayPal de l'association. En cliquant sur le bouton « Faire un don » ci-dessus, vous allez être redirigé vers PayPal. Vous n'êtes pas obligés de créer un compte PayPal pour faire un don.

3 commentaires sur “La performance web, ou comment charger un site avant d'avoir fini de lire ce titre

  1. Nicolas Chevallier, le Dimanche 2 décembre 2012 à 09:53

    C'est toujours bon de rappeler que l'important n'est peut être pas de gagner 20ms sur la génération d'une page, mais plusieurs secondes en réorganisant le chargement des ressources (CSS dans les headers, JS à la fin du html et en asynchrone), en compressant les données, en utilisant au mieux les directives de cache... Y a du boulot pour certains sites, y compris le Top 100 FR!
    Je ne connaissais pas Zoompf, je vais tester ce week end du coup :)

  2. Nico, le Dimanche 2 décembre 2012 à 14:30

    Je ne connaissais pas Zoompf non plus, plein de choses intéressantes sur ce site, merci ! :)

  3. TOMHTML, le Lundi 3 décembre 2012 à 11:05

    Merci pour vos remarques !

Laisser un commentaire

Les commentaires sont modérés manuellement. Merci de respecter l'auteur de l'article, les autres participants à la discussion, et la langue française. Vous pouvez suivre les réponses par flux RSS.