Lazy load : qu'est ce que c'est ? Principe de fonctionnement pour les images, les vidéos , la pagination. Test sur étude de cas, les erreurs à ne pas faire, bonne ou mauvaise pratique seo ? Pierre Monclin & Bastien Montois @ la revanche des sites, agence spécialisée en acquisition & optimisation de trafic SEO SEA SXO. Avec l'aide de Fractory.io, expertise web et prestation innovante de CTO-as-a-service

1. #seocamp 1
Lazy Loading : “sois fainéant, sois
fainéant, tu vivras content !”
ME

2. #seocamp 2
La revanche des sites &
Fractory.io
Agence conseil SEO et experts workflow e-commerce
La-revanche-des-sites.fr – fractory.io
Pierre Monclin, Consultant SEO – pierre@lrds.fr
& Bastien Montois, Product Owner – bastien@lrds.fr

3. #seocamp 3
Améliorer ses temps de
chargement, un enjeu SEO &
Business

4. #seocamp 4
Quelques Chiffres
Améliorer ses performances SEO, Booster directement son CA
7%
De conversion en moins
pour chaque seconde sup
77%
Sites mobies se chargent
en plus de 10 secondes
53%
Abandonnent si chargement
sup à 10 secondes
19s
Temps moyen
chargement sites
mobiles
https://marketingplatform.google.com/about/resources/

5. #seocamp 5
analyse Google/ SOASTA, 2016.
Performance = Conversions

6. #seocamp 6
Lazy Loading en application

7. #seocamp 7
Pratique de plus en plus adoptée en optimisation UX & Business qui permet de
différer du chargement initial, les contenus que l’internaute ne voit pas directement.
Le lazy loading, Qu’est-ce-que c’est ?

8. #seocamp 8
Tester son site
https://seocamp.la-revanche-des-tests.fr/

9. #seocamp 9
Solution : Chargement Différé
https://medium.com/

10. #seocamp 10
Empêcher <img> de charger

11. #seocamp 11
Scroll – Resize - Orientationchange
https://seocamp.la-revanche-des-tests.fr/

12. #seocamp 12
Intersection Observer
https://seocamp.la-revanche-des-tests.fr/

13. #seocamp 13
IntersectionObserver : Compatibilité
https://caniuse.com/
https://github.com/w3c/IntersectionObserver/tree/master/polyfill

14. #seocamp 14
▪ Lazysizes
github.com/aFarkas/lazysizes – 9,8k+★ – IntersectionObserver – Polyfill
▪ Lozad.js
github.com/ApoorvSaxena/lozad.js – 4,7k+★ – IntersectionObserver
▪ Lazyload
github.com/verlok/lazyload – 2,9k+★ – IntersectionObserver
▪ Blazy
github.com/dinbror/blazy – 2,4k+★ – ScrollEvent – plus maintenu
Les librairies

15. #seocamp 15
TEST AVEC PUPPETEER
https://github.com/GoogleChromeLabs/puppeteer-examples/blob/master/lazyimages_without_scroll_events.js

16. #seocamp 16
https://seocamp.la-revanche-des-tests.fr/
Résultat avec Lazy Loading Actif
- 6s

17. #seocamp 17
▪ Diviser l’ensemble du contenu par page
▪ 1 page = 1 contenu unique = 1 url unique
▪ Balise rel=prev & rel=next
▪ Balise Canonical
▪ Manipuler l’historique de navigation : replaceState / pushState
L’alternative : Lazy Loading Paginé
Garantir le crawl et l’indexation des liens avec History PushState

18. #seocamp 18
Lazy Loading & Infinite Scroll
Garantir le crawl et l’indexation des liens avec History PushState
https://www.lego.com/fr-fr/themes/star-wars/products

19. #seocamp 19
Observer le chargement différé

20. #seocamp 20
Observer le chargement différé

21. #seocamp 21
Chargement Asynchrone des
JS et CSS

22. #seocamp 22
▪ Attribut async aux balises scripts
Tips

23. #seocamp 23
• Charger de CSS de façon non-bloquante
Tips
https://github.com/filamentgroup/loadCSS

24. #seocamp 24
Bonnes pratiques SEO

25. #seocamp 25
NoScript sur les images
Sur un site existant ou pour une refonte/création

26. #seocamp 26
▪ Lazy loading des fichiers Critiques (JS,CSS, Img)
▪ Lazy Loading d’éléments au dessus de la ligne de flotaison
▪ Disponibilité de JavaScript
Risques et erreurs courantes

27. #seocamp 27
▪ Travailler en JPEG Progressif, taille d’enregistrement
▪ Sitemap images
▪ Évitez de recharger les ressources plusieurs fois
▪ Complexité du DOM
▪ Performance du Rendu
▪ Cache
▪ Serveur …
Une multitude de points à travailler

28. #seocamp 28
Etude sur Maison du Billard
Time to
interactive
divisé par 3

29. #seocamp 29
C.A.
+170%
Taux de Conv.
+120%
Taux de rebond
-9%
Trafic Mobile
+30%
Résultats
Mise en place d’améliorations Performance (DOM, Lazy Load, Cache, Serveur) et UX/Design début Novembre 2018
Chiffres « Mobile » Novembre 2018 vs. Novembre 2017 avec positions seo similaires,, hors promotions commerciales.

30. #seocamp 30
Retrouvez tous les exemples
http://seocamp.la-revanche-des-tests.fr

31. #seocamp 31
Des questions, des Idées ?!
pierre@lrds.fr

32. #seocamp 32
Question Mug
● Quel palliatif peut être utilisé en complément de la
méthode IntersectionObserver pour maximiser sa
compatibilité avec les Navigateurs ?

33. #seocamp 33
MERCI AUX SPONSORS