Principe de fonctionnement

Yslow tout comme PageSpeed sont deux utilitaires qui vérifient un site web et en "calculent" sa notes selon des critères personnels en appliquant à chaque fois un coefficient d'importance.

Imaginez un professeur de français corrigeant une copie et préparant le décompte des notes ainsi :

  • w/10 pour le fond du texte coef 3
  • x/10 pour l'orthographe coef 3
  • y/10 pour la présentation de votre nom/prénom/classe coef 2
  • z/10 pour le clin d'œil que vous lui ferrez en remettant la copie coef 1

(je n'ai pas précisé le sexe du prof, à vous de voir)

La note moyenne de votre copie sur 10 que vous recevrez sera donc égal à (3 * w + 3 * x + 2 * y + 1 * z ) / (3 + 3 + 2 + 1)

Yslow et PageSpeed ont donc chacun leur propres critères et appliquent parfois pour des critères communs des coefficients différents, C'est pour cela que leur note ne sera quasiment jamais identique (Yslow était il y a encore peu de temps bien plus sévère dans sa notation. Depuis début juin 2010 PageSpeed a revu à la hausse ses exigences.)

Gtmetrix ou Firebug ?

Firebug est un addon que j'ai déjà analysé pour vous dans une news précédente. Il se trouve que des add-on de firefox type Yslow existent et s'appuient justement sur Firebug pour fonctionner. C'est intégré à votre navigateur web (firefox en l'occurrence) et test, note et synthétise la page que vous visitez.

Les inconvénients pour ce genre de solution c'est la dépendance envers le navigateur, l'impossibilité de conserver une trace du rapport et surtout l'impossibilité d'envoyer le rapport obtenu à un Tiers.

Et voilà celui qui va améliorer tout cela : Gtmetrix. C'est un service gratuit permettant de tester un site web et d'en tirer plusieurs rapports de notation et de performance. Le tout sera sauvegardé si vous créez votre compte (gratuit) ou simplement mémorisé durant une période de 15 jours afin d'être partagé entre amis grâce à une URL personnalisée.

Fonctionnement

Présentation GTmétrix

Principe dès plus simple : collez votre URL dans le champs et cliquez sur GO! à droite

Analyse des résultats

Résultat GTMetrix

Le tableau de résultat synthétise l'ensemble de votre travail sur le site mais également les manques. On se penche en premier sur la partie haute du site afin de voir en 1 la note de Yslow (ici 85%). Notez la flèche verte à droite du score pointant vers le haut elle indique que le site testé a un score au dessus de la moyenne internationale (ou comment se la péter en soirée mondaine). En 2 on retrouve évidement la note Page Speed. En 3 on compile le poids de la page (html + css + js + média (images / vidéos / ... ), le temps nécessaire au chargement et enfin le nombre de requête HTTP nécessaire pour accéder à l'ensemble des informations du site.

24_002.png

Ce qui faut retenir de manière grossière :

  • plus votre note approche le 100 et mieux c'est
  • moins de temps met la page à s'afficher et mieux c'est (toujours < 2s)
  • moins de poids pèse une page et mieux c'est (influe sur le temps de chargement) (toujours < 100Kb)
  • moins de requête HTTP ouverte mieux c'est (influe sur le temps de chargement également) (toujours une dizaine maxi)

Pourquoi de telles affirmations ?

Pour le poids

C'est une logique que certaines personnes oublient : l'ADSL n'est pas présent dans tous les foyers (hé oui...) alors souvenez vous de votre modem 56K qui affichait une page en 1 minute... pareil ici... Autre point lié au poids mais même calcul : moins de traffic sur votre site internet en terme de poids = CPU allégé = serveur mieux disponible = bonheur dans votre coeur voir même baisse des coûts de fonctionnement pour certains contrats d'hébergement liés par un tarif à la bande passante. A titre d'exemple j'ai réussit à diminuer le poids d'une page vu 25.000 par mois de 1Mo à 220Ko Je passe ainsi d'une consommation de 25Go par mois à 5,5Go. Suffit de voir les tarifs au Go/mois pour comprendre l'intérêt de la réduction de poids des pages.

Les temps de réponses

Je doute que vous appréciez de visiter un site qui rame, pensez à vos visiteurs. Au dessus de 2s de chargement sans rien obtenir il sera tenté d'aller voir ailleurs.

Les requêtes HTTP

Un temps précieux est perdu à chaque ouverture de connexion HTTP, plus de requêtes = plus de temps de perdu pour charger votre page.

24_003.png

Après avoir vu l'état de notre site internet, on se dirige vers la seconde section ou l'on retrouve dans un système d'onglet les détails des notes Yslow, Page Speed mais également un diagramme de Gantt sur le chargement des pages déjà présenté dans Firebug qui permet rapidement de voir les erreurs HTTP présentes sur un site (404 sur une image, 301 inutile sur une sous page, ...) Enfin le bouton Historique pour consulter les anciens rapports si vous les avez enregistrés (uniquement via un compte utilisateur)

24_005.png

Le cœur de ce qui nous intéresse dans ce tutorial : les notes, avec pour même principe entre Yslow et PageSpeed :

  • la description de la demande
  • la note obtenue
  • votre position par rapport à la moyenne mondiale
  • l'élément impacté
  • la priorité de l'optimisation (le fameux coefficient de notation)

La différence entre Yslow et PageSpeed se situe sur deux points : certaines demandes sont différentes de l'un à l'autre, mais surtout ce sont les coefficients entre les deux qui diffèrent pour certaines demandes de l'un à l'autre, d'où l'obtention de note différentes au final

Enfin il ne faut pas oublié que suivant l'évolution des versions Yslow ou PageSpeed, la notation des méthodes de calculent peuvent changer, en général lorsque leur développeurs ré-évaluent les normes de best-practices. Ainsi récemment -début juin- une note de 90 sous pageSpeed est retombée à 82 car leur équipe de développement avaient revus à la hausse les critères de notation.

N'oubliez jamais qu'il faut savoir faire la part des choses entre l'ultra optimisation, qui peut poser des soucis dans l'utilisation quotidienne de CMS Made Simple, et ce qui est réellement utile, ainsi il n'est pas nécessaire d'atteindre les 100 dans chaque note, dépasser le 90 est déjà signe d'une excellente santé. Autre point important, certaines améliorations nécessitent des accès à la configuration des serveurs, ce que tous les hébergeurs ne proposent pas ! Ainsi la compression Gzip et la mise en cache sont des modules optionnels d'Apache que seuls certains hébergeurs proposent, sans cela vous perdrez des précieux points à vos notes... A vous de choisir le bon hébergeur :)

Quelques demandes et leur explications en français accessible

Je ne ferrais pas le traducteur pour chaque demandes mais je me concentrerais au contraire sur celles qui ne sont pas évidente aux premiers abords pour un webmaster novice. La plupart des réponses ci dessous sont tirées pour certaines de mon expérience personnelle, pour d'autre de recherche faites sur internet justement dans le cadre d'amélioration de notes Yslow et PageSpeed sur mes sites. Elles sont donc à considérer dans l'état et ne sauront remplacer vos propres recherches et conclusions sur le sujet ;)

Use a Content Delivery Network (CDN) (YSlow)

les CDN sont des réseaux de serveurs, la plupart du temps payant, répartis tout autour de la planète et destiné à stocker des fichiers plats (autres que fichiers php & co). L'intérêt de stocker des copies d'images dans tous les pays du monde est que le visiteur réceptionne plus rapidement son contenu et affichera votre site plus rapidement. Le procédé peut couter cher et amoindrit les possibilités d'améliorer ce critère bien qu'il soit interessant pour des sites multilingues et donc par définition destiné à un public international.

Add Expires headers (YSlow) et Leverage browser caching (pageSpeed)

le mod_expire d'apache est un addon pas tout le temps installé sur les hébergements que les professionnels vous proposent... et c'est bien dommage. Car c'est avec ce genre d'addon (celui ci ou d'autre...) qu'un site gagne en vélocité. Le principe est tout con : vous pouvez spécifier via un fichier .htaccess quelle est la date de validité d'une image, d'un fichier css ou js. Et en général on le fixera à un bon mois. De ce fait le navigateur conservera toutes ces données en cache et ne cherchera pas à le mettre à jour durant les visites suivantes. Quand on sait que pour mon site ces données fixes représentent 95% du poids total, c'est un énorme poids d'amélioration qu'il ne faut surtout pas rater. Malheureusement Google Analytics n'appose pas de délai suffisamment long à sont célèbre javascript ga.js (établit à une seule journée). Cela détériore la note sans que vous puissiez y faire grand chose.

Configure entity tags (ETags) (YSlow)

Sans doute la plus grande de mes interogations : qu'est ce qu'est l'ETags ? l'Etags est une fonctionnalité de hachage qui rend une image, un fichier unique au yeux d'un navigateur web tel serait une empreinte digitale pour un humain. Cela à l'avantage de lui permettre de savoir si l'image a déjà été téléchargée via une visite précédente ou si le navigateur doit le récupérer à nouveau. Ca serait très bien si un ETags n'était pas dépendant du serveur qui le distribue. Or dans le cas d'hébergement de masse, il y a en général du loadBalancing qui permet à X serveur de simuler la présence d'une seule plateforme. Concrètement pour les ETags il se peut qu'une "même image" : votre logo, soit un coup distribué par le serveur n°1, un coup par le serveur n°2, et ainsi de suite ce qui provoquera autant de marqueur numérique différent, imposant au navigateur de re-télécharger l'image à chaque visite. Étant donné ce problème, il est dans la plupart du temps interessant de supprimer d'Apache (ou ISS) la génération des ETags. Pour ceux et celles qui ont accès à la conf de leur serveur évidement.

Use cookie-free domains (YSlow) et Serve static content from a cookieless domain (pageSpeed)

Les cookies transmettent à chaque visite de page des informations diverses et variée qui pèsent un poids supérieur à zéro. Pourtant pour des images, des fichiers plats, un cookies est rarement utile. Il est donc recommandé de gérer un sous domaine type http://static.monsite.fr qui s'occupera uniquement de contenir les fichiers plats. Notez bien que je n'ai aucune idée pour faire fonctionner CMS Made Simple dans ce genre de configuration -_-' Je suis ouvert à toute idée intéressante sur le sujet.

Put JavaScript at bottom (YSlow)

Le point avec lequel ne je suis pas (entièrement) d'accord : Mettez vos script en bas de page pour éviter qu'un chargement JS bloque le chargement de la page actuelle. Okay mais gardez avant tout en tête que si un script personnel bloque le chargement c'est qu'il est temps de penser au poids de ce dernier ! Enfin pour les scripts type Google Analitycs, ils ont sortis une version Asynchrone que j'ai déjà évoqué dans un précédent billet. Pour cette raison je trouve que la règle est trop restrictive et pas assez précise : un simple script asynchrone qui ne gène en rien mais qui n'est pas "bien" placé vous ferra perdre des points.

Make fewer HTTP requests (YSlow)

Déjà dit : moins de requêtes HTTP = moins d'ouverture de socket = moins de perte de temps. Pour gagner des points sur ce thème il y a des astuces facilement réalisable : combinez vos fichiers JS et CSS dans un premier temps. Dans un second temps il est possible d'utiliser des CSS Sprites sur vos images. Des sites en ligne le font même pour vous !

un exemple d'image "CSS Spirites" Ready de mon site : http://www.furie.be/uploads/skin10/barre.png http://www.furie.be/uploads/skin10/ssmenu.png

Dans le premier cas un Spirite horizontal me fait gagner un peu de poids(*) + 1 requête HTTP Dans le second cas, un double Spirite vertical me fait gagner un peu de poids(*) + 2 requête HTTP

(*) suivant la comparaison suivante : total poids de 2 ou 3 images séparés VS poids d'une image contenant 2 ou 3 partie

Compress components with gzip (YSlow) ET Enable gzip compression (pageSpeed)

Second plus grosse note avec les dates d'expirations et pour cause : utiliser le Gzip sur votre site est tout bonnement bonheur pour le visiteur. Attention : il faut que le serveur possède le mod_deflate pour Apache ce qui signifie accéder à la configuration du serveur ou avoir des hébergeurs sympa qui ont pensé à vous. Une fois le serveur opérationnel, normalement et sans d'autres modifications de votre part, Cms Made Simple devra compresser automatiquement les fichiers plats non-compressé, c'est à dire tout sauf : image / son / video / archive, ceci pour la raison simple que le rapport Gain de poids / Temps CPU est ridicule dans ce genre de traitement en comparaison avec une compression d'un fichier HTML, JS ou CSS.

Minify JavaScript and CSS (YSlow) et Minify CSS (pageSpeed) et Minify JavaScript (pageSpeed)

Il n'y a pas de petite économie et la "minification" de vos fichiers plats de JS et CSS vous permettra de réduire leur poids de 20 à 25%. Malheureusement cela ce ferra au détriment d'une lecture humaine sans risquer de perdre une rétine. GTMetrix vous propose automatiquement de télécharger vos fichiers "minifiés" par ses soins. Conservez les originaux au cas ou vous devez modifier ultérieurement une donnée.

exemple de fichier JS naturellement minifié : http://code.jquery.com/jquery-latest.min.js

Avoid URL redirects (YSlow) ET Minimize redirects (pageSpeed)

les redirections sont le mal et font perdre du temps. Cela est également valable pour les redirections de type http://monsite.fr vers http://www.monsite.fr .. je ne partage encore une fois pas l'avis... Certaines redirections sont plus intéressantes pour le visiteur qu'elles ne sont pénalisantes.

Make AJAX cacheable (YSlow)

je me suis pas assez penché sur la question pour me permettre de vous la définir. Si un pro de l'ajax passe par là je suis preneur de son explication.

Put CSS at the top (YSlow) ET Put CSS in the document head (pageSpeed)

Pour la simple raison que le navigateur aura ainsi dès le début de la réception des données HTML la possibilité de faire le rendu de la page. CSS en bas de page = début de rendu une fois la page complètement téléchargée = page moche avant la fin du téléchargement.

Remove duplicate JavaScript and CSS (YSlow)

Ça se passe de commentaire. Toutefois ce n'est pas toujours le cas sur Cms Made Simple lorsque l'on installe X module tournant avec un appel à la bibliothèque JQuery chacun de leur côté !

Avoid AlphaImageLoader filter (YSlow)

le AlphaImageLoader filter est un hack de IE6 (et IE7?) permettant d'utiliser des PNG qui a l'origine ne sont pas supporté par ce navigateur. Cela se fait au détriment d'un temps de post-traitement côté client par le CPU qui est du coup à éviter. A la place changez de population cible (tout sauf IE6) ou installez des .GIF

Avoid HTTP 404 (Not Found) error (YSlow) et Avoid bad requests (pageSpeed)

Ça se passe de commentaire. une erreur 404 ou 410 est une requête ouverte et traitée inutilement.

Reduce the number of DOM elements (YSlow)

Les pages web construites à la manière d'un Xtml sont lentes parcourir pour le navigateur (rendu graphique) et par le JS (post-traitement) lorsque la structure est très complexe ( > dizaines de div incluses entre elles). Restez simple.

Do not scale images in HTML (YSlow) ET Serve scaled images (pageSpeed)

Généralement pour une miniature, le redimensionnement d'image en HTML ne change que le rendu mais provoque le chargement de l'image originale (et surtout son poids !) Envie d'une miniature ? créez là de toute pièce en back-office et affichez uniquement la miniature ! plus légère, plus rapide.

Use GET for AJAX requests (YSlow)

La méthode POST est plus consommatrice en terme de poids transité. (Attention : IE6 possède apparemment une limitation pour la taille d'un GET)

Avoid CSS expressions (YSlow)

Typiquement utilisée pour recadrer en automatique sous IE6 & IE5 la taille de certains élèments, les expressions CSS remplacent à tord un traitement JS. A éviter

exemple

.identifiant{
width:expression(500 + "px");
}

Reduce DNS lookups (YSlow) ET Minimize DNS lookups (pageSpeed)

Évitez de stocker des données sur des nom de domaine Tiers autant que possible, et ramenez sur votre domaine un maximum d'information afin de facilité le transfert réseau entre le client et votre site internet. Chaque lecture DNS à un coût non négligeable en terme de temps. Sans compter le risque de ne pas pouvoir maitriser la disponibilité d'un élément situé sur un autre domaine. Attention ce point n'est pas en contradiction avec la nécessité de gérer des sous domaine type http://static.monSite.fr qui lui n'est pas un autre domaine mais un sous-domaine ... et donc ne nécessite pas de nouvelle résolution DNS.

Reduce cookie size (YSlow)

Question de poids... jamais eu besoin de me pencher dessus.

Make favicon small and cacheable (YSlow)

Configurer correctement le .htaccess et le serveur pour ce point.

Make JavaScript and CSS external (YSlow)

C'est cette fois non seulement une question de best-practice en terme de programmation mais également de bon sens : tout fichier plats externalisé de votre page dynamique aura une change d'être gérée en cache par les modules Apache appropriés ;)

Use efficient CSS selectors (pageSpeed)

Le plus complexe à maitriser pour chacun d'entre nous : cette règle impose de gérer des déclarations CSS les plus courtes possible afin que le traitement du navigateur pour le rendu soit le plus rapide possible. Exemple dérivé : imaginez un itinéraire donné par un pote : Pays 1 -> Departement 2 -> Ville 3 que vous devez suivre spécifiquement dans cet ordre sans bruler les étapes en comparaison avec " aller à Ville 3 directement" Le voyage en voiture sera plus courts dans le second cas du fait que la destination est claire. Exemple a éviter absolument car complétement inutile :

div.MonIdentifiant ul div.AutreIdentifiant ul#maClasse li a.EniemeId {}

a remplacer par

a.EniemeId {}

Minify HTML (pageSpeed)

Pas évident surtout avec un site dynamiquement généré comme CMS Made Simple. Évitez au moins les pavés de code mort mis en commentaire qui transitent sur le réseau.

Optimize images (pageSpeed)

Très interessant, la compression sans perte des images. Je vous épargne le "pourquoi mon photoshop est pas aussi performant qu'un logiciel en ligne" mais sachez que GTMetrix propose de gagner encore quelques Octet sur vos images sans perte de qualité.

Specify a character set early (pageSpeed)

je me suis pas assez penché sur la question pour me permettre de vous la définir. Si un pro passe par là je suis preneur de son explication.

Specify image dimensions (pageSpeed)

le fait de spécifier les tailles des images permet au navigateur de pré-dimensionner les éléments affiché dans la page avant même que l'image ne soit téléchargée. Dans le cas contraire il est obligé après réceptions des premiers paquets d'information de l'image de redimensionner les éléments ce qui coute cher en temps de traitement.

A faire :

<img src='./monimage.jpg' height='90' width='150' alt='texte alternatif'/>

Remove unused CSS (pageSpeed)

Un peu inutile à mon gout, on vous demande de conserver une feuille de style CSS dépouillée de tout code inutilisé.... okay soit, mais si une balise n'est pas utilisé sur 1 page de votre site, elle l'est peut être ailleurs... ou le sera plus tard... donc ce n'est personnellement pas ma priorité.

Combine external CSS (pageSpeed) et Combine external JavaScript (pageSpeed)

Combiner les fichiers externes CSS et JS permet logiquement de réduire le nombre d'appel HTTP.

Minimize request size (pageSpeed)

Cela ne concerne pas vraiment Cms Made Simple qui reste peu gourmand, mais il faut garder en tête que charger les informations du header (via commande spécifique PHP) ou le cookie d'un site peut provoquer un surpoids du header général au point de nécessité l'envoi de ce dernier en 2 paquets HTTP voir plus... Autant d'appel inutile.

Optimize the order of styles and scripts (pageSpeed)

Sachant que sur certains navigateurs, le téléchargement d'un fichier Javascript provoque l'arrêt momentané des téléchargement parallèles (image, css, autre js), il est important de déclarer en premier les feuilles de style et ENSUITE le javascript

Parallelize downloads across hostnames (pageSpeed)

Uniquement pour ceux qui utilisent des sous domaine static (voir l'exemple du http://static.monDomaine.fr) afin de distribuer leur contenu sans cookies, il est interessant de dispatcher les données sur plusieurs serveurs afin que ces derniers puissent répondre très rapidement aux demandes du client. Uniquement valable pour les énormes sites. Cms Made Simple n'est pas concerné.

Remove query strings from static resources (pageSpeed)

Si on demande de mettre en cache les fichiers plats, il est évident qu'il ne faut pas mettre en cache les fichiers dynamiques qui, par définition, sont susceptibles d'être modifiés à chaque instant. Exclus donc de mettre en cache des pages possédant des paramètres d'appel (par exemple index.php?page=maPage)

Serve resources from a consistent URL (pageSpeed)

C'est con... mais si vous déclarez à différent endroits de votre page une même image (une puce pour des liste), assurez vous de la déclarer de la même manière et de ne pas dupliquer des déclarations menant à différents fichiers représentant une même image.

Specify a cache validator (pageSpeed)

Assurez vous d'avoir au moins l'une ou l'autre technique de mise en cache : le mod_expire ou les ETags, même si comme déjà dit précédemment il est préférable de n'avoir QUE le premier.

Specify a Vary: Accept-Encoding header (pageSpeed)

C'est une manipulation du serveur et qui concernera sans doute aucun d'entre vous. Il s'agit de forcer dans l'envoi d'une page l'information Vary: Accept-Encoding afin de corriger un soucis sur certains proxy pour les clients qui n'accepte pas le mode Gzip sur leur navigateur (rare).

Bilan

J'espère sincèrement que mon petit tour de piste vous aura convaincu non seulement de l'utilité des notations YSlow et PageSpeed mais surtout qu'en tant que webmaster il est important de rester au abois, ne jamais se reposer sur nos lauriers et toujours voir si une petite amélioration de nos installation n'est pas possible :)

Petit Jeu

Si vous avez 5 minutes et que vous voulez me remerciez je vous demanderais un petit service afin de préparer un nouveau billet sur la qualité des hébergeurs. L'idée est d'obtenir une notation par défaut lorsque l'on installe un Cms Made Simple sur un hébergeur ÉPURÉ DE TOUTE MANIPULATION PRÉALABLE

Le vainqueur sera celui qui arrivera à produire le pire rapport du premier coup

Les gains : un max de blé, des vacances dans une ile paradisiaque de son choix, un choux de Bruxelles, l'accès libre à Google pendant le restant de sa vie, toute mon estime, son nom dans le sommaire du prochain billet

fin de la partie : Dimanche 4 Juillet

Les règles sont simples : - Aucun fichiers .htaccess à la base de l'installation - Aucune modification de serveur pour l'occasion - Aucune modification du fichier de config.php ou autre. - Installez un Cms Made Simple dernière version (1.6.7 ou 1.7.1) francisé ou non - Testez le site sur http://gtmetrix.com/

Une fois la note obtenue ajoutez un commentaire ci dessous en indiquant - l'URL du rapport d'analyse de gtmetrix - la note Yslow, la note pageSpeed - le nom de l'hébergeur (éventuellement le nom du pack acheté : mutualisé, dédié, ...) - le temps de chargement de la page (voir image ci dessous, zone n°3)

24_002.png

Merci d'avance à tous ceux qui participeront au jeu.