Expérimentation: présenter les écluses du Canal du Midi, avec une expérience adaptée à un maximum de situations.
Tendre vers un contenu disponible en 1s, même en 3g.
Progressive enhancement
Quelles que soient les capacités du navigateur, les données sont accessibles.
- sans js, navigateur ancien, opera mini : une liste des écluses, des liens vers les photos
- navigateur peu performant avec js : la même liste, les images sont chargées de manière asynchrone
- navigateur moderne : une carte interactive est disponible, cette carte intéragit avec la liste des écluses.
Responsive Web Design
Lorsque les caractéristiques du navigateur le permettent, l'interaction avec la carte et les informations est différente en fonction de la taille de l'écran.
Sur un petit écran, la carte est présentée avec une popup contenant une image et le contenu (si disponibles). Si une image est présente, elle peut être vue dans une taille plus grande.
La navigation de point en point (d'écluse en écluse) est assurée par 2 boutons.
Lorsque l'écran est suffisament grand, la popup sur la carte ne présente plus que l'image, la description, lorsqu'elle existe, est déportée sur un slider à côté de la carte. Le slider est synchronisé avec la carte.
En plus des boutons, on peut naviguer avec les touches gauches et droites du clavier.
Performances
Le but était d'expérimenter des techniques décrites par Scott Jehl et filamentgroup : ne charger que le nécessaire pour que le visiteur puisse le plus rapidement possible obtenir le contenu et commencer à interagir avec ce contenu.
Les quelques styles nécessaires à la mise en page sont dans une balise <style> dans le <head>.
Un test est effectué en javascript sur les capacités du navigateur (cutting the mustard).
Lorsque le test est négatif, un simple script permettant de charger les images est chargé (les liens vers les images sont complétés par des thumbnails).
Lorsque le test est positif, le script permettant la mise en place de la carte (et l'interaction avec le contenu) est chargé (137 kb minifié, 37kb compressé). Ce script contient leaflet.js, le geojson contenant les points d'intérêts, et le script permettant l'interactivité de la carte. (leaflet.js est inclus pour limiter le nombre de requêtes et le cache du cdn de leaflet est court).
Les styles pour le slider, la navigation sur la carte, les images (utiles seulement lorsque l'expérience est «améliorée») et pour la carte (dont la css de leaflet, non minifiée et cache court sur le cdn) sont également chargés (3kb + 8kb minifiées | 1.3kb + 2.5 kb compressées).
Résultats
J'ai effectué des tests sur webpagetest, yellowlab.tools, pageSpeed Insights... et sur mobile en 3g.
Le résultat est concluant : la page est rendue rapidement.
WebPageTest
Paris Mobile 3g (150ms RTT) «visually complete» en 1.1s
Paris Cable (5/1 Mbps 28ms RTT)
Résultats satisfaisants (700+ DOM elements), avec toutefois une assez grande variabilité pour le first-byte time (temps côté serveur)
WebPageTest alerte sur le (non) cache des images d'OpenStreetMap
yellowlab.tools
Une note de 93/100
Une alerte sur les nombreux events (1000+ : leaflet et les liens vers les images dans la liste des écluses)
PageSpeed Insights
86/100 sur mobile, 91/100 sur ordinateur
Les suggestions concernent les images (chargées avant la carte), j'ai pris le parti de compresser les images (qualité de 25% à 40%) tout en conservant une taille plus grande que la taille d'affichage (solution de facilité pour supporter du 3x, un effort supplémentaire pourrait être réalisé de ce côté avec srcset ou lazyload et faire monter le score).
Notes
Bilan plutôt positif pour les perfs et le progressive enhancement, j'espérais arriver à un meilleur résultat concernant l'accessibilité.
J'ai tenté de donner le focus au contenu de la popup… mais cela crée un comportement bizarre de leaflet après plusieurs tabulations successives (j'avais placé un bouton «next» en fin de popup pour permettre de naviguer de point en point facilement). Les points (et popups) se retrouvaient «hors champ» et les tentatives pour recentrer la carte n'ont pas abouti. Si quelqu'un a une solution …
L'accessibilité est donc perfectible, on peut naviguer avec les touches droites et gauches, mais un lecteur d'écran doit être un peu «coincé» (surtout sur mobile ou le contenu n'est visible que dans la popup de la carte).
Je ne montre pas de code, je pense créer un comparatif de différentes techniques prochainement.
Je vous invite à découvrir enhance.js par Filamentgroup pour les performances.
Je me suis inspiré des fonctions loadJS et loadCSS pour la page de démonstration.
C'est d'ailleurs le but d'enhance.js : proposer un workflow, une boîte à outils, le fichier étant à éditer pour satisfaire les besoins du projet.
Pour la carte, grâce à leaflet, le code pour l'interactivité geojson—map—DOM est relativement simple, si vous souhaitez en savoir plus, dites-le moi cela pourrait faire l'objet d'un nouveau billet…
Des bugs ? J'ai testé avec succès la démo sur Opera mini, UC Browser, Firefox, Chrome, Opera (Android), Firefox, Chrome, IE11 (Win7), IE11 (WindowsPhone), Safari iOS (+Chrome et Coast).
J'ai utilisé un caractère utf-8 un peu exotique pour «voir l'image» qui pose problème sur quelques navigateurs (Chrome / win7, UC Browser), il faudrait utiliser une icone.
Il subsiste un bug étrange sur Dolphin Browser (Android) : la carte n'est pas visible, ceci sans erreur js, puisqu'on peut afficher les images ; j'avoue n'avoir pas cherché à le résoudre pour cette démo… ;-)
Pour améliorer encore : chargement si l'utilisateur scrolle (plutôt qu'au onload), lazyload des images, srcset, icones… on peut toujours améliorer.
J'ai pris le parti, pour le progressive enhancement, d'avoir la liste complète des écluses dans le HTML. Une autre solution aurait consisté à construire la liste à partir du geojson en JS (et utiliser du templating). Il faudrait alors trouver une alternative pour les navigateurs peu performants (liste complète déportée sur une autre page, RESS…)
Making of
Les données sont issues de wikipedia.
J'ai récupéré la liste des écluses (avec les liens vers les images et les différentes pages) dans la console (en json).
J'ai ensuite transformé ce json en geojson (en PHP), utilisé ensuite pour créer le markup de la liste des écluses, copier les images en local, accéder à l'API de wikipedia pour récupérer les descriptions des écluses. (PHP toujours)
Le redimensionnement des images (et l'optimisation en baissant la qualité des jpeg) a été réalisée avec ImageMagick.
HTML et CSS ont été testés avec HTML inspector (j'ai également profité de l'occasion pour tester RECESS).
Démo Écluses du Canal du Midi
Le Canal du Midi et ses éclusesPublié le 09 février 2015
Une question, une remarque… contactez-moi sur Twitter @eqroeil