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 !"

660 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
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • 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

×