Comptoir-srv issueshttps://gitlab.adullact.net/Comptoir/Comptoir-srv/-/issues2020-05-29T19:01:08+02:00https://gitlab.adullact.net/Comptoir/Comptoir-srv/-/issues/863Webperf - Images : utiliser le lazyloading natif des navigateurs2020-05-29T19:01:08+02:00Fabrice GanglerWebperf - Images : utiliser le lazyloading natif des navigateursUtiliser 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 p...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
```html
<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 |
| ![Sélection_018](/uploads/f4e2e4eb20dda7c20a9d4014dc5f88ff/Sélection_018.png) | ![Sélection_019](/uploads/0db44a36907f6f2dcc829fbe061eca48/Sélection_019.png) |
### 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 |
| ![Sélection_021](/uploads/6e7902e554bbfae27f37e626e7ee395c/Sélection_021.png) | ![Sélection_020](/uploads/737a88caf60acd250c7b408b9ac48a32/Sélection_020.png) |
## 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
- [x] Logo FEDER dans le pied page
- [x] Logos logiciels dans l'affichage sous forme de grille
- [x] Logos utilisateurs dans l'affichage sous forme de grille
- [x] Screeshots dans l'affichage sous forme de grille
- [x] Screeshots dans la page screeshots
## Tests complémentaires
- [x] Firefox ---> avec différentes résolutions
- [x] Chrome ---> avec différentes résolutions
- [x] Sur smartphone peu puissant
- [x] 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 internetv2.7.0Fabrice GanglerFabrice Gangler