Responsive Web Design : améliorer la rapidité de la navigation

En itinérance, votre mobile (smartphone, tablette ou ordinateur connecté à l’aide d’une clé 3G etc.) ne dispose pas toujours d’une connexion à haut débit.

Concevoir le site pour la mobilité, ce n’est pas seulement appliquer quelques règles de Responsive Web Design (RWD) : c’est aussi faire en sorte que la bande passante utilisée soit minimale, pour une navigation plus rapide et plus économique.

Chez DnC, nous concevons nos sites Web avec soin de façon qu’ils soient nativement compatibles avec tout type de navigateur, fixe ou mobile.

L’approche RWD ne va pas assez loin dans le traitement des images. Il convient de transmettre des images de la bonne taille, plutôt que les transmettre à leur dimension maximale et les réduire au moment de l’affichage.

Nous réalisons cela en combinant la balise html5 figure avec jQuery Picture : pour chaque image, on prépare avec SPIP et on met en cache plusieurs copies de dimensions différentes. La balise figure charge la bonne image en fonction de la largeur de la fenêtre de visualisation. Voir RWD et SPIP : transmettre des images à la bonne dimension.

Mais ce n’est pas tout : pourquoi transmettre des images qui sont cachées en dehors de l’écran ? En effet, la petite dimension des mobiles conduit à étaler le contenu des pages en hauteur, en débordant largement de la fenêtre visible. Cela est particulièrement vrai pour une liste (par exemple une liste de produits dans le catalogue d’un site de vente en ligne).

En présence d’un grand nombre d’images, il faut :
- paginer systématiquement les listes,
- ne charger les images qu’au moment où elles apparaissent dans la fenêtre de visualisation, ce qui est réalisé à l’aide de jQuery Lazy Load.

Pour voir cela en fonctionnement, voyez cette page : Voyageurs et photographes : Catalogue

Lazy Load : phase 1 Notez : (1) que les listes de photos sont paginées pour ne présenter que dix photos par page. (2) que l’image visible se charge rapidement, car il s’agit d’une imagette qui ne "pèse" que 3,4ko.


Lazy Load : phase 2 Faites glisser la page vers le haut pour voir les images suivantes : celles-ci sont d’abord grisées (3) et vont se charger maintenant.

Une idée, un projet?

Degoy net Consultants
76 avenue du Général Leclerc
92340 - Bourg la Reine

SARL au capital de 7500 €