Améliorer la vitesse de navigation avec PageSpeed

2 avril 2011 | Par Christophe-Chaudey | Outils

PageSpeed est un outil d’analyse des performances de vos pages web. Il existe sous plusieurs formes: extension firefox (nécessite Firebug), plugin Chrome, ou plus simplement en version Online. Cet outil est plutôt destiné aux développeurs et aux intégrateurs…

J’en ai parlé dans mon article sur les moteurs de recherche, il existe un outil pour optimiser la navigation sur votre site.  Cet outil s’appelle PageSpeed. Il est principalement intéressant sur trois aspects:

  • Il analyse la page sur laquelle vous êtes et fait un rapport de ce qui peut être amélioré
  • Pour chaque point à corriger, il vous donne des infos et conseils sur la façon de procéder
  • Il vous propose une version plus optimisée pour chaque image qu’il considère comme trop lourde

En premier lieu, il analyse la page de votre site sur laquelle vous êtes et vous indique les « erreurs », ou plutôt les choses qui pourraient être corrigées en vue d’augmenter la vitesse de chargement de la page. Par exemple, si j’analyse cet article de Presse-citron (que je vous invite à lire d’ailleurs, il est très intéressant !), on peut voir plusieurs choses.

Analyse d'un article de Presse-citron avec Page Speed

On remarque tout d’abord le score de 76/100. Plus la note est élevée, plus la page est rapide à charger. L’icône rouge à gauche du score indique que ce score est mauvais. Un triangle jaune indique que votre score est moyen et un tick vert indique que votre score est plutôt bon. Ne vous faites pas d’illusion, le tick vert n’apparait qu’à partir de 95 (du moins si j’en juge par toutes les analyses que j’ai pu faire sur divers sites).

Ensuite, vous pouvez voir un ensemble de paramètres qui correspond aux différents critères d’optimisation d’une page. Ceux qui sont en rouge correspondent aux critères qui ralentissent le plus vos pages. Au survol des icônes rouges, jaunes ou verts, vous pouvez connaître la note sur 100 attribuée pour ce critère seulement.

En cliquant sur ces symboles, le détail des problèmes s’affiche et des conseils sont donnés (en anglais). Pour l’instant, il n’y a pas de version en français.

Analyse d'un article de Presse-citron avec Page Speed (2)

Bref, je vous laisse découvrir par vous-même cet outil vraiment utile. Notez que la version online vous permet de choisir si vous souhaitez obtenir des conseils pour plateforme mobile (ipad, smartphone…) ou pour plateforme classique (c’est à dire votre ordinateur).

Les limites

Ce plugin a toutefois quelques lacunes. Pour le fun, j’ai comparé le score de ma page d’accueil donné par l’extension Firefox, avec celui donné par la version online. A ma grande surprise, les deux scores sont différents: 91 avec l’outil en ligne, 93 avec le plugin… Mais paradoxalement, la version en ligne m’indique moins de choses à corriger, ce qui me laisse penser qu’elle est moins aboutie que le plugin, en tout cas pour le moment.

Il faut aussi bien comprendre que cet outil permet d’optimiser votre page selon son contenu, mais si vous avez beaucoup trop de contenu, même optimisé, la page sera longue à charger. Il ne faut donc pas y voir une solution miracle, simplement un outil qui permet de gagner en rapidité, parmi d’autres.

Remarquez aussi que le score n’est qu’une indication propre aux critères de Google, il n’a rien d’universel. Vous pouvez d’ailleurs comparer avec son concurrent Yslow (fait par Yahoo), qui présente les choses différemment et selon d’autres critères. Ma page d’accueil, par exemple, obtient 93 avec Page Speed et 88 avec Yslow.

Dans un prochain article, je parlerai de quelques outils permettant de répondre aux conseils donnés par Page Speed (par exemple, comment réduire la taille d’un css ou d’un javascript)

    Tags: , , , , , , , , , ,

    6 commentaires pour “Améliorer la vitesse de navigation avec PageSpeed”

    1. voir une autre outil il me semble tres important  » speed tracer  » du chrome

    2. elbakai dit :

      Merci bien pour l’outil, il y a aussi un autre outil c’est YSlow ( http://developer.yahoo.com/yslow/ ) pour moi j’utilise les deux

      • Christophe dit :

        Oui, je l’ai mentionné à la fin de mon article. Il y a également des outils plus « généraux », permettant d’analyser l’efficacité d’un site, mais bien moins complets sur l’aspect « rapidité », comme par exemple woorank

    3. Merci pour cet article. Je connaissais l’outil mais je n’avais jamais pris le temps d’optimiser. Il était temps :)

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    *

    Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    CommentLuv badge

    Recevoir une notification de réponse à votre commentaire.