Catégorie : Performance des sites web

Mesu­rer la perfor­mance a toujours été une gageure. On parle de temps de char­ge­ment total de la page, de char­ge­ment de la page au dessus du pli, de temps de premier rendu, de char­ge­ment asyn­chrone, etc. Bref, nous avons déjà une demi douzaine de mesures, mais toutes qui reflètent un état diffé­rent et peu signi­fi­ca­tif.

Webpa­ge­test semble être enfin arrivé à défi­nir une mesure qui a du sens et qui prend en compte le char­ge­ment progres­sif des pages. Une page qui se charge à 90% immé­dia­te­ment mais qui a un petit bout qui n’ar­rive que bien après reste plus inté­res­sante que celle qui se charge globa­le­ment plus vite mais où tout arrive d’un coup.

Je reste un peu dubi­ta­tif sur comment ça gère les carrou­sels et autres anima­tions, mais ça m’a l’air assez repré­sen­ta­tif du ressenti utili­sa­teur : à tester.

Je suis un bouli­mique du web, je ne consomme pas que ça mais j’en consomme énor­mé­ment.  Poli­tique, tech­nique, travail, diver­tis­se­ment : tous les sujets y passent.

Je me plains régu­liè­re­ment que certains n’ont rien compris au web et me font fuir. Ça reste souvent instan­tané, je m’en vais, je râle, et j’ou­blie. Afin que ça serve, à moi-même ou à d’autres, voilà quelques unes des diffi­cul­tés régu­lières qui font que je fuis immé­dia­te­ment certains sites :

Contenu vidéo

Si le contenu est en vidéo ou en audio, sans trans­crip­tion, je suis inca­pable de le scan­ner rapi­de­ment pour savoir s’il m’in­té­resse vrai­ment, et quand bien même il m’in­té­resse il a toute les chances de me deman­der bien plus de temps qu’un contenu texte (et le temps est ma ressource la plus chère). Même quand je suis convaincu d’être inté­ressé au point d’avoir envie d’y passer du temps, je ne suis pas toujours en contexte où je peux lire une vidéo (bande passante dispo­nible en mobile) ou où je peux l’écou­ter (pas de son au boulot). Au final soit je quitte soit je stocke le lien pour plus tard et je n’y reviens fina­le­ment pas.

Redi­rec­tion vers la page d’ac­cueil du site mobile

Je pense à LCI mais pas unique­ment à eux. Si je suis un lien d’ar­ticle à partir de mon télé­phone mobile je suis redi­rigé vers la page d’ac­cueil du site mobile. Impos­sible de retrou­ver l’ar­ticle souhaité et de suivre les liens : c’est un départ immé­diat. C’est plus rare mais l’ex­pé­rience inverse est aussi problé­ma­tique. Au final vous avez une chance sur deux de mal tomber et que le lien parte immé­dia­te­ment à la poubelle.

Un article en plusieurs sous-pages

Je ne suis pas sur le web pour mimer les contraintes que j’ai sur papier. Je ne suis pas sur le web pour m’amu­ser à tour­ner les pages. C’est agaçant, j’ai réel­le­ment fuit des sites pour ça. Lais­sez-moi utili­ser l’as­cen­seur de mon navi­ga­teur.

Un site vrai­ment lent

Ceux qui me connaissent doivent s’y attendre, pour­tant c’est à dessein que je ne le mets pas dans les premiers critères : Si vos pages sont lentes, je risque bel et bien de repar­tir agacé avant même d’avoir eu l’oc­ca­sion de lire quoi que ce soit. Sur télé­phone portable, même dans le métro avec une mauvaise récep­tion, il est hors de ques­tion d’at­tendre plus de 10 secondes. Sur un poste bureau­tique ne me faites pas attendre la moitié de ça.

La grosse pop-in

Si votre contenu commence par être masqué par un gros pop-in, je ne passe­rai jamais à la suite, c’est aban­don immé­diat. Je me fiche que ce soit de la publi­cité, un formu­laire de feed­back ou un message de bien­ve­nue. En fait les deux derniers cas sont presque ceux qui m’agacent le plus de part leur imbé­cil­lité. Je ne ferme­rai pas la pop-in, je parti­rai. C’est encore plus vrai sur mobile où réus­sir à fermer le pop-in est souvent mission impos­sible de toutes façons.

Des lignes trop longues

Si vos lignes font plus d’une quin­zaine de mots, elles devien­dront rapi­de­ment pénibles à lire pour moi. Pire, j’au­rai beau­coup de mal à scan­ner la page rapi­de­ment en diago­nale.  Si ça semble futile comme critère, je vous assure que c’est un aban­don systé­ma­tique pour tous les sites qui ont des lignes trop longues. Si vous voulez une mesure, comp­tez une longueur maxi­mum de 45 fois la taille de votre police de carac­tères. Sur mobile c’est encore pire, si votre mise en page m’em­pêche de zoomer sur le texte de façon à ce qu’il tienne dans la largeur de mon télé­phone portable quand je double clique dessus, ça sera telle­ment pénible à lire que je n’es­saie­rai même pas.

Ça bouge partout

Vous tenez à la publi­cité et je le comprends, mais si ça bouge, si ça flash, si ça clignote, vous me verrez partir immé­dia­te­ment. Je serai simple­ment inca­pable de fixer mes yeux au bon endroit sans que ce ne soit pénible. Mon œil peut se lais­ser atti­rer hors du contenu une fois, mais la seconde fois je ferme la page. Notez que ça vaut aussi si c’est votre propre contenu promo­tion­nel ou carrou­sel qui attire l’œil et non de la publi­cité. Je ne fais pas de diffé­rence à ce stade là.

On mélange tout

Vous avez des publi­ci­tés ou des pavés promo­tion­nels au milieu du contenu, je sais, ça encou­rage les clics. Mais je sais aussi que ça me fera fuir immé­dia­te­ment là aussi. C’est encore plus vrai si j’ai un doute sur la sépa­ra­tion entre promo­tion­nel et rédac­tion­nel. Encore une fois, si je ne suis pas capable de filtrer et repé­rer l’in­for­ma­tion utile au premier coup d’œil, je repars immé­dia­te­ment. Même sans publi­cité, le trop plein d’illus­tra­tions hors contexte (même avec des légendes humo­ris­tiques ou sarcas­tiques) donne le même effet.

Texte rikiki

Votre graphiste vous l’a montré, la maquette est quand même bien plus jolie quand c’est écrit petit … sauf que c’est illi­sible, et ça aussi c’est un bloqueur pour moi. Non, 10 pixels de hauteur pour une police ce n’est pas suffi­sant pour moi. Notez qu’à l’in­verse je ne me souviens pas avoir jamais aban­donné un site parce que le texte était trop gros.

Et si je lis ?

Si vous avez passé le texte jusque là, bravo, il y a des chances que je lise votre contenu. Un autre jour je vous explique­rai ce qui peut faire qu’a­près la première lecture je ne revienne jamais chez vous.

Allez, pour la forme j’ajoute ce qui d’après la légende est gênant mais qui pour ma part ne m’a jamais freiné (ou en tout cas pas consciem­ment) : les textes trop longs, le manque d’illus­tra­tion, le trop plein de liens, le tutoie­ment ou le vouvoie­ment, la prise d’opi­nion subjec­tive, les propos « indé­cents », ou les sites person­nels sans répu­ta­tion. Rien de tout ça ne me gêne a priori.

You proba­bly have been told to design with the grace­ful degra­da­tion para­digm. If you have very smart friends, they may even use the « progres­sive enhan­ce­ment » in place of grace­ful degra­da­tion. To enable an opti­mi­zed access to mobile on a website, you proba­bly use css media queries:

header { background-image: url(head-1280px.png) }
@media screen and (max-device-width: 480px) {
  header { background-image: url(head-480px.png) }
}

If you’re really smart and don’t care about IE, you may design first for narrow mobiles and then opti­mize all other use cases:

header { background-image: url(head-320px.png) }
@media screen and (min-device-width: 321px) {
  header { background-image: url(head-480px.png) }
}
@media screen and (min-device-width: 481px) {
  header { background-image: url(head-855px.png) }
}
@media screen and (min-device-width: 856px) {
  header { background-image: url(head-1280px.png) }
}

Sorry, what you has been told is bull­shit. You are not opti­mi­zing anything. Worse, you are degra­ding all android user expe­rience (and proba­bly some ipho­ne’s ones).

It’s not your fault, webkit has an horrible bug. It down­loads all appli­cable images, not just the final one. This basi­cally means that down­loa­ding only the big 1280px image may even be chea­per than these alter­na­tives with media queries.

Yes, it’s sad, but so is the life. The former is true at least up to Android 2.3.2 so the problem won’t disap­pear this year.

If you ask me, it’s even worse: Brow­sers based on 2010’s webkit and lower (inclu­ding mobile ones) don’t need any media query to be slowed down. You just need the follo­wing to down­load two images instead of one.

p { background-image: url(useless.png); }
p { background-image: url(usefull.png); }

There are only three solu­tions

1. Push the fix on Android (still not there in 2.3.2) and upgrade to the latest firm­ware (not only on your own mobile, but on everyo­ne’s)
2. Use the same images for all devices and screen widths AND don’t use the cascade to over­ride previous back­ground-image rules in your style­sheets
3. Wrap every back­ground-image rule in a media query and define min and max constraints for each media query so that a device never read more than one block (this mean you will never support IE without CSS hacks) AND don’t use the cascade to over­ride previous back­ground-image rules in your style­sheets