Le temps de chargement d’une page web est essentiel aussi bien sur un aspect ergonomique, qu’en terme de référencement.
Pour l’aspect ergonomique, parce que les internautes passent peu de temps sur chaque page web, et qu’au delà de 4 secondes, vous avez perdu 97% de vos visiteurs si la page n’est pas chargée.
Pour ce qui est du référencement, Google prend ce temps de chargement en compte(1) dans son algorithme de calcul depuis 2010 pour l’ordre d’affichage des résultats.

Je vous liste ici les points d’optimisation essentiels que devrait maîtriser tout développeur web. J’occulte volontairement l’optimisation sur la distribution des serveurs par réplication ou l’optimisation de la génération coté serveur propre au langage utilisé.

Optimiser le chargement des fichiers Javascript et CSS

Pour offrir sans cesse une meilleure expérience utilisateur, les libraisires javascript et les effets CSS se multiplient dans les développements web et augmentent considérablement le temps de chargement d’une page web. Veillez à les utiliser avec parcimonie, mais surtout à les intégrer au mieux.

Compressez vos fichiers

La best-practice la plus connue et évidente est la compression de ces fichiers. Plus légers, ils mettront moins de temps à être chargés.

Pour les fichiers javascript, vous pouvez utiliser des outils en ligne comme Javascript Compressor, oui bien automatiser cette tâche via l’excellent outil proposé par Yahoo YUI compressor.

Pour les feuilles de style CSS, là encore vous aurez le choix entre des outils manuels en ligne comme CSS Compressor ou la version de YUI compressor pour les CSS.

Ces compresseurs retirent tous les éléments inutiles de vos fichiers (commentaires, espaces vides, caractères inutiles, raccourci des codes couleurs, …).

Appellez les fichiers en fin de page

Les fichiers javascript apportent en principe un plus à l’expérience utilisateur sans être pour autant indispensable. Par ailleurs, ils s’appliquent au contenu du DOM de votre page, donc n’ont aucun intérêt à être appelés avant que celui-ci ne soit chargé (des cas exceptionnels existent). En les appelant en bas de page (avant la balise </body>, le temps de réponse sera amélioré, et l’utilisateur aura une réponse sans attendre que tous les fichiers soient chargés.

Limitez le nombre de fichiers

Chaque fichier dont dépend votre page oblige le navigateur à ouvrir une connexion, et donc perdre du temps. Dans la mesure du possible, regroupez vos fichiers CSS ensemble, et faite de même avec vos fichiers javascript.

Utilisez les CDN

Les Content Delivery Network(2) permettent de distribuer des ressources à partir de serveurs géolocalisés au plus près de l’internaute. Les temps de chargement sont donc nettement améliorés. Le plus connu est celui de Google, qui met à disposition les librairies javascript les plus utilisées : jQuery, Dojo, MooTools, Prototype, …
En plus d’être plus prêts de vos visiteurs, l’utilisation de ces serveurs permet aussi de sauver de la bande passante, parallèliser le chargement, le tout sur des serveurs performants.

Optimisez le chargement des médias

Si j’osais, je dirai qu’il faut minimiser le nombre de médias, mais ceci dépend complètement de l’objectif du site et de son univers. Pour les médias restant, voici quelques éléments d’optimisation.

Limitez le poids de vos médias

Une résolution de vos fichiers adaptée au web

Que ce soit pour vos fichiers images ou vidéos, rien ne sert de les mettre à disposition en ultra haute définition sur le web. Pour rappel, la résolution de 72dpi reste la plus majoritaire et au delà, les utilisateurs ne verront pas la différence.

Mettez vos images à la bonne dimension

Pour les images, restreignez vous à mettre des images dans la taille où elles seront affichées. Inutie de charger une image de 2000px de large si l’utilisateur ne la voit que sur 500px. Petit rappel à cette occasion, spécifier la taille des images en CSS ou en HTML (propriétés width et height) redimensionne l’image en apparence uniquement, et donc n’optimise en rien le temps de chargement.

Optimisez vos images

Dans la mesure du possible utilisez la compression des images que peuvent vous proposer les outils de graphisme comme Photoshop ou Gimp à l’export de l’image.

Je vous recommande par ailleurs l’utilisation d’outils comme PNG Crush ou JPEG Club pour optimiser sans perte de qualité vos fichiers images. Le chargement en mode progressif est aussi très bien pour l’expérience utilisateur, pensez-y.

Sur des sites existant, vous pouvez facilement mettre en place une tache planifiée (cron) exécutant un script qui optimisera vos images avec imagemagick/mogrify par exemple. Ca a l’avantage de ne pas être intrusif dans votre code applicatif ou métier.

Utilisez les CSS Sprites pour vos images de thèmes et templates

Cette méthode consiste à agréger plusieurs images en une, et d’afficher ensuite uniquement les parties utiles. Ceci permet de charge un fichier image au lieu de plusieurs, et donc réduit le temps de chargement occasionné par les connexions serveurs. Je vous invite à lire les explications claires du site du zéro et à utiliser si besoin le générateur de sprite en ligne Sprite Generator.

Flushez les headers HTML

Astuce moins connue mais que je vous recommande, c’est de flusher vos entêtes HTML (balise head) avant votre contenu. L’utilisateur aura alors un premier début de réponse, et les fichiers Javascript ou CSS que vous aurez précisés dans ces headers seront alors chargés en attendant le reste de la réponse.

Utilisez les connexions simultnannées

Un navigateur web limite le nombre de connexion simultanées à un domaine pour une page web. C’est à dire que les fichiers en provenance d’un seul nom de domaine (images, css, javascript, …) seront limités à un certains nombre simultannément, et donc que tant que les X premiers ne seront pas complètement chargés, les autres attendront. Dans la majorité des navigateurs, ce nombre se limite à 5.

L’astuce des sous domaines

Pour optimiser ce nombre de chargements simultanés, il suffit d’utiliser des sous domaines par exemple pour vos médias. Sur la page que vous êtes en train de voir par exemple, le nom de domaine principal est tilap.net, mais les fichiers images viennent du sous domaine img3.tilap.net. Ces sous-domaines, s’ils sont dédiés à ces fichiers statiques, n’auront par aillurs pas besoin d’envoyer de headers.
Pour les petites images, n’hésitez pas à les embeder directement dans le code source de votre page si elles ne sont utilisées qu’une fois.

La balise dns-prefetch

Astuce un peu moins impactante, la balise meta dns-prefetch. Cette balise, dans les headers HTML de votre page, demandera au navigateur dès leur lecture de résoudre les DNS du domaine spécifié, faisant ainsi gagner un peu de temps.
Par exemple, si vous utilisez des fonts Googles, vous utiliserez le nom de domaine fonts.googleapis.com. Vous pouvez donc indiquer auparavant entre les balises <head> le sous domaine avec :

<link rel="dns-prefetch" href="//fonts.googleapis.com">

Optimisez le chargement avec le cache client

Lorsqu’un utilisateur revient sur votre site, ou bien navigue sur d’autres pages, certaines ressources identiques peuvent être nécessaires. Ce sont généralement les fichiers liés à votre template (image, css, javascript récurrents). Il est inutile au navigateur web de rechercher sans cesse ces fichiers: il peut conserver en cache. Pour cela, il suffit de l’indiquer dans les directives de votre serveur web.

Pour ce qui est du code, rappellez vous qu’un fichier avec des argument tierces est rechargé à chaque page ( /style.css?version=3 par exemple ).

Compressez vos pages

La dernière chose fortement recommandées est la compression de vos pages.
Cette optimisation coté serveur peut se faire à plusieurs niveaux : compression Apache avec le mod deflate, compression dans vos script en supprimant les caractères inutiles du contenu…

Check list

Pour résumer en checklist :

  • Compressez vos fichiers JS et CSS
  • Appelez vos fichiers javascript en fin de page
  • Agrégez vos fichiers feuilles de styles et vos javascript
  • Utilisez les CDN
  • Mettez vos médias à la bonne résolution
  • Utilisez des images dans leur dimensions finales
  • Optimisez vos images
  • Utilisez les Sprites CSS
  • Flusher le head HTML
  • Utilisez les connexions parallèles
  • Préchargez les DNS des autres domaines
  • Utilisez le cache client
  • Compressez vos pages

Pour tester vos temps de chargement, il existe un foule d’outils. Je ne reviendrai pas là dessus, je vous recommande par exemple la lecture de cet article sur SEO Mix ou bien demandez à Google.

Cet article liste les points à mettre en oeuvre sans entrer dans le détail de leur mise en application. Si pour certaines, vous auriez aimé plus de détails, j’aurai plaisir à écrire des articles sur le sujet.

Je vous invite par ailleurs fortement à automatiser une grande partie de ces taches en utilisant des outils comme grunt ou Gulp. Jetez un coup d’oeil au projet Frast qui met en oeuvre gulp et une série de tache d’optimisation comme la concaténation, l’allègement d’images, …

Annotations du texte
  • 1
    Google prend ce temps de chargement en compte : »Voir l’annonce officielle sur le blog de Google« 
  • 2
    Content Delivery Network : »Voir la page Wikipedia«