Comment se charge votre page ?

Parmi les détails qui font ou défont l’expérience utilisateur d’un site web, je suis convaincu que le chargement d’une page joue un rôle très important. Bien sûr, il faut que votre site se charge rapidement. Mais même en se chargeant rapidement, certains détails peuvent trahir le manque d’attention porté à l’intégration d’un site.

Voici un exemple sur lequel je suis tombé ce week-end. Il s’agit d’un simple article sur Fast Company. Voici une vidéo du chargement sur mon iPad mini.

Avec un poids total de près de 2 Mo et plus de 150 requêtes, cette page n’est clairement pas un modèle d’optimisation. Un test sur WebPageTest confirme qu’il y a du travail. Mais au delà d’une recherche de performance pure et dure, voici ce qui m’intéresse côté expérience utilisateur.

1. Au bout d’une seconde, le HTML est bien chargé et le <title> de la page s’affiche dans l’onglet du navigateur. C’est plutôt rassurant pour l’internaute et ça confirme que la page est bien en train de charger, et que le serveur n’est pas en rade.
2. Il faut ensuite attendre la troisième seconde avant de voir quelque chose s’afficher à l’écran. Mais tout ce que l’on peut voir, ce sont des couleurs de fond qui laissent imaginer la présence de texte. Parce que le site utilise des polices « non-standard » appelées en CSS, aucun texte ne sera affiché tant qu’elles ne sont pas chargées. Et parce que le site en charge 25 (oui, vingt-cinq), il va falloir patienter un petit moment avant de pouvoir lire quoi que ce soit. Ce qui est dommage, puisque si le site utilisait des polices standard, je pourrais déjà être en train de lire l’article pendant que le reste de la page se charge.
3. À quatre secondes, je vois apparaître le logo du site et la catégorie de l’article (« Technology »). Mais surtout, je vois un énorme encart avec une barre de chargement apparaître en haut de l’écran. Si j’avais déjà commencé à scroller dans la page, ça provoquerait un énorme saut, me faisant perdre le fil de ma lecture. Mais bon heureusement, comme je ne peux toujours rien lire, je reste bien sagement en haut de page en attendant que ça charge.
4. Au bout de six secondes, alléluia, les polices sont chargées. Je peux enfin commencer à lire l’article pour lequel j’étais venu à la base. À noter au passage que le chargement des polices déclenchera un changement de taille dans les hauteurs de ligne, provoquant à nouveau un saut dans le défilement de la page.
5. À sept secondes, alors que je commençais enfin à lire l’introduction de mon article, voilà que le bandeau en haut de page a décidé de s’agrandir, comme ça, sans intervention de ma part. Au passage, ça fait donc à nouveau sauter le défilement de la page, me faisant perdre le fil de ma lecture.
6. À huit secondes, le bandeau en haut de page reprend sa taille initiale, provoquant à nouveau un saut dans le défilement et mon désespoir de pouvoir enfin commencer à lire cet article.
7. À neuf secondes, le fameux contenu du bandeau de haut de page s’affiche. Et il s’agit d’une image. Une simple image, qui m’a empêché de commencer ma lecture.
8. À dix secondes, une publicité s’affiche sur la droite, détournant un instant mon regard avant que je ne puisse reprendre ma lecture.
9. Au bout de quinze secondes, la page est totalement chargée. Je veux enfin commencer à réellement lire cet article, ou utiliser la fonctionnalité « Lecteur » de Safari pour avoir un contenu bien mis en page et adapté à la lecture sur tablette.

C’est plutôt atroce, non ? Et encore, c’est pourtant un large progrès comparé à six mois plus tôt. Quand j’ai écrit « Ta page charge. Ce n’est pas sale.« , le site masquait totalement l’affichage de la page pendant son chargement. Cet exemple semble peut-être exagéré, mais je pense qu’il assez emblématique de ce que l’on rencontre de plus en plus.

Voici quelques observations pour améliorer l’expérience du chargement de son site :

1. Évitez les polices CSS. C’est le parfait exemple de « c’est joli, mais si… » (en l’occurrence, c’est joli, mais si on est venu pour lire ?). Au pire, si vraiment vous n’aimez pas vos utilisateurs et que vous aimez être pris pour un artiste, limitez-vous à une police. Mais rappelez-vous que vous êtes là pour faire du web, pas du print. Les polices CSS sont de véritables plaies pour l’expérience utilisateur.
2. Fixez les tailles de ce qui peut l’être. Je n’ai pas poussé en détail pour connaître les raisons du saut de l’image de l’article de Fast Company à la septième seconde. Mais peu importe la raison, c’est une mauvaise raison.
3. Générez côté serveur ce qui peut l’être. L’image en question de Fast Company aurait sans doute pu être générée d’emblée dans le HTML de la page, évitant ainsi un chargement supplémentaire en JavaScript. J’ai déjà vu des sites marchands qui changeaient côté client les prix des produits. Par pitié ne faites pas ça.