Objectif

L’objectif ici est simple : mettre en place une plateforme permettant de présenter du contenu vidéo, des articles de blog, ainsi que des documents à télécharger gratuitement, à destination des entrepreneurs du bâtiment.

Challenges

Comme vous pouvez vous en rendre compte, la mise en page de la plateforme rappelle un autre éditeur de contenu que vous connaissez bien : Netflix !

Le principal challenge a donc été de mettre en place toutes les sections de slides comportant des images qui représentent le contenu, sans ralentir le chargement de la page lorsque les utilisateurs arrivent sur la plateforme.

Stratégie

Afin de pouvoir au mieux optimiser le chargement du contenu média et réduire au maximum la quantité de données chargées lorsque l’utilisateur arrive sur le site, nous avons développé un thème custom.

Pour le développement des slides, nous avons favorisé l’utilisation d’une librairie JavaScript directement intégrée dans le thème plutôt que l’utilisation de plugin souvent trop lourd à charger et comportant parfois du code inutile.

Pour les images, nous avons mis en place du « Lazy Loading » qui permet au navigateur de ne charger les images qu’au moment où elles doivent être visibles dans le navigateur, ce qui a eu pour effet de réduire grandement la quantité de données chargée lors de la requête initiale.

Nous avons également optimisé les images au maximum pour que la balance entre la définition et la taille de l’image soie idéale, peu importe la taille de l’écran utilisé.

Résultats

Malgré l’utilisation d’une librairie JavaScript Facebook qui a du être utilisée à des fins marketings et qui lui a fait perdre 8 points de « Bonnes pratiques », la plateforme obtiens un très bon score Google Lighthouse :