Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

174 views

Published on

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

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

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

×