La performance des sites web

Une de mes marottes dans le développement de site internet, c'est la performance ! De puis plusieurs années je m'applique à respecter les "bonnes pratiques" afin de réaliser des sites et des applications web les plus rapides et performantes possible.

Ce blog réalise le score de 99/100 pour PageSpeed de Google et 93/100 pour Yslow

Quelles sont les recettes pour avoir un site internet performant ?

• Gestion la mise cache sur le client : Voir ici
• Compresser les textes, css et js : Voir ici
• Minifier le HTML, les CSS et JS : Voir ici
• Compresser sans perte ses images : PngGauntlet et Smushit pour les jpeg (en ligne)
• Créer sa police de symboles : Icones SVG avec IconMonstr et créer sa font avec IconVault
• limiter le nombre des ressources statiques en regroupant JS, CSS et images (via des sprites)
• Supprimer les Etag sur le serveur : Voir ici
• Bien d'autres facteurs et actions peuvent contribuer à la performance d'un site web telles que le serveur, la programmation du cms, les plugins utilisés (Wordpress), les sélecteurs CSS, l'architecture globale du site.

Pour vous faire une idée des résultats de performance pour ce site : 

Google Page Speed - Webpagetest - GTMetrix + (ajout) Compuware

Modification et ajout du 05/05/2013:

Le lendemain (je crois...) de la publication de cet article, Google mettait à jour son outil de test de performance "Page speed". Desormais la page des résultats est simplifiée et met l'accent d'emblée sur le mobile.

En effet les résultats s'ouvrent directement sur les chiffres de performance web mobiles. Un onglet amène aux résultats pour desktops et laptops. Une disparition la timeline de chargement. Plus d'infos sur le temps de chargement et le poids des divers éléments constitutifs de la page web.

Pas que des changements d'ordre cosmétiques, la notation est plus sévère

Et oui, le jour de la rédaction initiale de cet article, la Home du site obtenait 99/100 en desktop et 94 pour les mobiles et tablettes. Avec le nouveau PageSpeed, la note passe de 92 pour le desktop/lapto et 81 ! pour le mobile/tablette, Ouille !

Un seul reproche : "Eliminate external render-blocking Javascript and CSS in above-the-fold content" avec note rouge pour le mobile et jaune pour le desktop.

A cet instant le site comporte 4 fichiers CSS distincts (je sais ce n'est pas bien :), j'ai du combiner les 4 css en un seul pour voir la note remonter.

Le desktop passe au vert, le mobile passe au jaune avec respectivement 98 et 92 avec cette même recommandation "Eliminate external render-blocking Javascript and CSS in above-the-fold content".

Maintenant la seule voie de progression est donc l'ordre sélecteurs dans l'unique fichier CSS restant.

Rendez-vous au prochain épisode !

Partager cet article sur :

Lien permanent vers cet article : La performance des sites web