Webperf - Images : utiliser le lazyloading natif des navigateurs

Utiliser le lazyloading natif des navigateurs sur les images pour charger plus rapidement la page :

• la page s'affiche plus vite pour l'utilisateur.
• l'interaction sur la page (clic sur un lien ou dans un formulaire) est disponible plus rapidement.
• diminue le nombre de requêtes envoyé en même temps au serveur.
• diminue globalement le nombre de requêtes reçues par le serveur.

Code

<img href="" alt="" loading="lazy">

Ressources

• Démo :
  • https://mathiasbynens.be/demo/img-loading-lazy
  • https://www.andreaverlicchi.eu/lazyload/demos/native_lazyload.html
• https://addyosmani.com/blog/lazy-loading/
• https://caniuse.com/#search=loading
  • Chrome >= 76
  • Firefox >= 75 : https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/75
    • https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages#Use_lazy_loading_for_images
    • https://wiki.developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#Images
    • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading

---

• information à vérifier :

"Every <img> needs to have width and height attributes defined (even if CSS is applied with different values after that)."

• source : https://tests.boris.schapira.dev/loading-lazy/
• discussion : https://twitter.com/boostmarks/status/1247999449290493953

Test du chargement de la page (sans scroll)

• serveur : localhost
• navigateur : Firefox 75
• données : dataset2

page /fr/users

Sans l'attribut loading="lazy"	Avec l'attribut loading="lazy"
3.96 Mo transférés	0.29 Mo transférés
107 requêtes	19 requêtes

page /fr/softwares

Sans l'attribut loading="lazy"	Avec l'attribut loading="lazy"
3.87 Mo transférés	0.27 Mo transférés
240 requêtes	20 requêtes

Images qui ne doivent pas utiliser ce attribut

• Logo Adullact
• Logo Comptoir
• Logo du logiciel sur la page du logiciel
• Logo de l'utilisateur sur la page de l'utilisateur

Modification à faire

• Logo FEDER dans le pied page
• Logos logiciels dans l'affichage sous forme de grille
• Logos utilisateurs dans l'affichage sous forme de grille
• Screeshots dans l'affichage sous forme de grille
• Screeshots dans la page screeshots

Tests complémentaires

• Firefox ---> avec différentes résolutions
• Chrome ---> avec différentes résolutions
• Sur smartphone peu puissant
• Sur un serveur sur Internet

Procédure de test :

• plusieurs pages à vérifier (/, /fr/users, ...)
• sauvegarde de chaque page en mode statique sous 2 versions (avec et sans l'attribut)
• mise à disposition des pages statiques de tests sur un serveur sur internet