Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
#seocamp 1
Lazy Loading : “sois fainéant, sois
fainéant, tu vivras content !”
ME
#seocamp 2
La revanche des sites &
Fractory.io
Agence conseil SEO et experts workflow e-commerce
La-revanche-des-sites.fr ...
#seocamp 3
Améliorer ses temps de
chargement, un enjeu SEO &
Business
#seocamp 4
Quelques Chiffres
Améliorer ses performances SEO, Booster directement son CA
7%
De conversion en moins
pour cha...
#seocamp 5
analyse Google/ SOASTA, 2016.
Performance = Conversions
#seocamp 6
Lazy Loading en application
#seocamp 7
Pratique de plus en plus adoptée en optimisation UX & Business qui permet de
différer du chargement initial, le...
#seocamp 8
Tester son site
https://seocamp.la-revanche-des-tests.fr/
#seocamp 9
Solution : Chargement Différé
https://medium.com/
#seocamp 10
Empêcher <img> de charger
#seocamp 11
Scroll – Resize - Orientationchange
https://seocamp.la-revanche-des-tests.fr/
#seocamp 12
Intersection Observer
https://seocamp.la-revanche-des-tests.fr/
#seocamp 13
IntersectionObserver : Compatibilité
https://caniuse.com/
https://github.com/w3c/IntersectionObserver/tree/mas...
#seocamp 14
▪ Lazysizes
github.com/aFarkas/lazysizes – 9,8k+★ – IntersectionObserver – Polyfill
▪ Lozad.js
github.com/Apoo...
#seocamp 15
TEST AVEC PUPPETEER
https://github.com/GoogleChromeLabs/puppeteer-examples/blob/master/lazyimages_without_scro...
#seocamp 16
https://seocamp.la-revanche-des-tests.fr/
Résultat avec Lazy Loading Actif
- 6s
#seocamp 17
▪ Diviser l’ensemble du contenu par page
▪ 1 page = 1 contenu unique = 1 url unique
▪ Balise rel=prev & rel=ne...
#seocamp 18
Lazy Loading & Infinite Scroll
Garantir le crawl et l’indexation des liens avec History PushState
https://www....
#seocamp 19
Observer le chargement différé
#seocamp 20
Observer le chargement différé
#seocamp 21
Chargement Asynchrone des
JS et CSS
#seocamp 22
▪ Attribut async aux balises scripts
Tips
#seocamp 23
• Charger de CSS de façon non-bloquante
Tips
https://github.com/filamentgroup/loadCSS
#seocamp 24
Bonnes pratiques SEO
#seocamp 25
NoScript sur les images
Sur un site existant ou pour une refonte/création
#seocamp 26
▪ Lazy loading des fichiers Critiques (JS,CSS, Img)
▪ Lazy Loading d’éléments au dessus de la ligne de flotais...
#seocamp 27
▪ Travailler en JPEG Progressif, taille d’enregistrement
▪ Sitemap images
▪ Évitez de recharger les ressources...
#seocamp 28
Etude sur Maison du Billard
Time to
interactive
divisé par 3
#seocamp 29
C.A.
+170%
Taux de Conv.
+120%
Taux de rebond
-9%
Trafic Mobile
+30%
Résultats
Mise en place d’améliorations P...
#seocamp 30
Retrouvez tous les exemples
http://seocamp.la-revanche-des-tests.fr
#seocamp 31
Des questions, des Idées ?!
pierre@lrds.fr
#seocamp 32
Question Mug
● Quel palliatif peut être utilisé en complément de la
méthode IntersectionObserver pour maximise...
#seocamp 33
MERCI AUX SPONSORS
Prochain SlideShare
Chargement dans…5
×

SEO CAMP Day Lille 2019 : Lazy Loading : "Sois fainéant, sois fainéant, tu vivras content !"

276 vues

Publié le

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

Publié dans : Marketing
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

SEO CAMP Day Lille 2019 : Lazy Loading : "Sois fainéant, sois fainéant, tu vivras content !"

  1. 1. #seocamp 1 Lazy Loading : “sois fainéant, sois fainéant, tu vivras content !” ME
  2. 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. 3. #seocamp 3 Améliorer ses temps de chargement, un enjeu SEO & Business
  4. 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. 5. #seocamp 5 analyse Google/ SOASTA, 2016. Performance = Conversions
  6. 6. #seocamp 6 Lazy Loading en application
  7. 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. 8. #seocamp 8 Tester son site https://seocamp.la-revanche-des-tests.fr/
  9. 9. #seocamp 9 Solution : Chargement Différé https://medium.com/
  10. 10. #seocamp 10 Empêcher <img> de charger
  11. 11. #seocamp 11 Scroll – Resize - Orientationchange https://seocamp.la-revanche-des-tests.fr/
  12. 12. #seocamp 12 Intersection Observer https://seocamp.la-revanche-des-tests.fr/
  13. 13. #seocamp 13 IntersectionObserver : Compatibilité https://caniuse.com/ https://github.com/w3c/IntersectionObserver/tree/master/polyfill
  14. 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. 15. #seocamp 15 TEST AVEC PUPPETEER https://github.com/GoogleChromeLabs/puppeteer-examples/blob/master/lazyimages_without_scroll_events.js
  16. 16. #seocamp 16 https://seocamp.la-revanche-des-tests.fr/ Résultat avec Lazy Loading Actif - 6s
  17. 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. 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. 19. #seocamp 19 Observer le chargement différé
  20. 20. #seocamp 20 Observer le chargement différé
  21. 21. #seocamp 21 Chargement Asynchrone des JS et CSS
  22. 22. #seocamp 22 ▪ Attribut async aux balises scripts Tips
  23. 23. #seocamp 23 • Charger de CSS de façon non-bloquante Tips https://github.com/filamentgroup/loadCSS
  24. 24. #seocamp 24 Bonnes pratiques SEO
  25. 25. #seocamp 25 NoScript sur les images Sur un site existant ou pour une refonte/création
  26. 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. 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. 28. #seocamp 28 Etude sur Maison du Billard Time to interactive divisé par 3
  29. 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. 30. #seocamp 30 Retrouvez tous les exemples http://seocamp.la-revanche-des-tests.fr
  31. 31. #seocamp 31 Des questions, des Idées ?! pierre@lrds.fr
  32. 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. 33. #seocamp 33 MERCI AUX SPONSORS

×