SlideShare une entreprise Scribd logo

LoadTime & SEO - Erlé Alberton

WeLoveSEO
WeLoveSEO

LoadTime & SEO : le TOP et FLOP des meilleures (et pires) intégrations. Le temps de chargement est de plus en plus important pour vos utilisateurs, votre business et vos rankings. Google, plus que jamais, prend en compte les différents temps de chargement comme indicateur de qualité des sites web. Pour rivaliser avec les meilleurs et flirter avec la note maximale de Lighthouse sur ce KPI, Erlé vous exposera les meilleures pratiques (ainsi que les pires) d’après sa propre expérience basée sur de nombreux sites qu’il a accompagnés dans leur parcours vers l’optimisation.

1  sur  41
Télécharger pour lire hors ligne
Web Perf pour le SEO
le top et le flop des
meilleures et pires optimisations
LoadTime & SEO - Erlé Alberton
Erlé ALBERTON
15 ans de WEB
Speaker depuis 2004
Ex Responsable SEO Boutiques Orange &. Sosh
#1 Customer Success Manager OnCrawl
Ambassadeur OnCrawl France
Evangéliste Octopulse
Consultant technique grands comptes et agency
Acquisition & Digital Performance
Manager Reezocar
@cubilizer
LoadTime & SEO - Erlé Alberton
Rappels
Un site rapide, c’est avant tout un site qui
favorise la rétention et que Google Crawl ++
-1 sec. = -10% de Rebond
-1 sec. = +15% de Conversion
20% des utilisateurs abandonnent leur
panier à cause du temps de chargement
Un temps de chargement divisé par 2
c’est 11% d’augmentation de panier
moyen
DNS
TTFB
FP
FCP
FMP
DOM
Speed Index
First CPU Ide
Le moment ou le browser
rend autre chose que sa page
blanche
First Paint
Moment ou apparaissent les
premières données utiles
Hero Time
First Meaningfull Paint
Le score de rapidité
d’affichage des éléments au-
dessus de la ligne de
flottaison
Temps avant la réception du
premier BIT de données
Time To First Bit
Apparition des premiers
éléments de layout
First Content Paint
Le DOM est en partie
chargée et les interactions JS
peuvent être jouées
Interactive/Content Loaded Le CPU souffle
le délai à partir duquel la
thread (fil d’exécution)
principale est suffisamment
disponible pour gérer les
entrées
Domain.com
=
xxx.xxx.xxx.xxx
Résolution DNS
A BRIEF HITORY OF LOAD.... … …. TIME
Time to Interactive
Temps a partir duquel
les éléments sont
cliquables ou utilisables
(input/form/liens)
On peut interagir
Visualy Complete
L’UX/UI commencent
La page est rendue, il reste
des taches en cours en
background mais rien
n’empêche la lecture
DOM Complete
Les JS synchrone sont
exécutés et les ressources
images les plus lourdes sont
chargées
Tout est là !
Page Load
Voilà, voilà on a
mit 12 secondes
à charger une
recette de cuisine
GA timing
Publicité

Recommandé

We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOErlé Alberton
 
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...RESONEO
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEOErlé Alberton
 
Démarrer sous Chromebook aux power users
Démarrer sous Chromebook aux power usersDémarrer sous Chromebook aux power users
Démarrer sous Chromebook aux power usersAnthony Le Goff
 
Synchroniser ses applications plus rapidement avec du low-code
Synchroniser ses applications plus rapidement avec du low-codeSynchroniser ses applications plus rapidement avec du low-code
Synchroniser ses applications plus rapidement avec du low-codegplanchat
 
100 jours pour développer son trafic !
100 jours pour développer son trafic !100 jours pour développer son trafic !
100 jours pour développer son trafic !Erlé Alberton
 
Synchroniser ses applications (plus) simplement
Synchroniser ses applications (plus) simplementSynchroniser ses applications (plus) simplement
Synchroniser ses applications (plus) simplementgplanchat
 
#3 Nouveautes Deploiement Demarrage
#3 Nouveautes Deploiement Demarrage#3 Nouveautes Deploiement Demarrage
#3 Nouveautes Deploiement DemarrageGuillaume Sauthier
 

Contenu connexe

Tendances

Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...DEFO KUATE Landry
 
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Ouadie LAHDIOUI
 
Bien qu'en ligne votre site web n'est probablement pas en production
Bien qu'en ligne votre site web n'est probablement pas en productionBien qu'en ligne votre site web n'est probablement pas en production
Bien qu'en ligne votre site web n'est probablement pas en productionMarc Boivin
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
Wordcamp paris 2016 - La REST API, une review technique
Wordcamp paris 2016 - La REST API, une review techniqueWordcamp paris 2016 - La REST API, une review technique
Wordcamp paris 2016 - La REST API, une review techniqueNicolas Juen
 
Core Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiserCore Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiseriProspect France
 

Tendances (6)

Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
 
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
 
Bien qu'en ligne votre site web n'est probablement pas en production
Bien qu'en ligne votre site web n'est probablement pas en productionBien qu'en ligne votre site web n'est probablement pas en production
Bien qu'en ligne votre site web n'est probablement pas en production
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
Wordcamp paris 2016 - La REST API, une review technique
Wordcamp paris 2016 - La REST API, une review techniqueWordcamp paris 2016 - La REST API, une review technique
Wordcamp paris 2016 - La REST API, une review technique
 
Core Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiserCore Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, Optimiser
 

Similaire à LoadTime & SEO - Erlé Alberton

RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostDamien Jubeau
 
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?Fasterize
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Cellenza
 
Webperf et SEO : les Mythes et la Réalité
Webperf et SEO : les Mythes et la RéalitéWebperf et SEO : les Mythes et la Réalité
Webperf et SEO : les Mythes et la RéalitéFasterize
 
Webperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalitéWebperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalitéFasterize
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Peak Ace
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Fasterize
 
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...SEO CAMP
 
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...pierredargham
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEODigimood - Agence SEO / SEA
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifiéAdrien Russo
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Microsoft
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secretsAymeric Bouillat
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfObject Vingt Trois
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App RESONEO
 
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOCore Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOWeLoveSEO
 
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020SEO CAMP
 
La vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéLa vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéFasterize
 
Digital race evolution programmation web 1.0
Digital race   evolution programmation web 1.0Digital race   evolution programmation web 1.0
Digital race evolution programmation web 1.0Sequoia-ID
 
Optimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre siteOptimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre siteWebxFrance
 

Similaire à LoadTime & SEO - Erlé Alberton (20)

RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1
 
Webperf et SEO : les Mythes et la Réalité
Webperf et SEO : les Mythes et la RéalitéWebperf et SEO : les Mythes et la Réalité
Webperf et SEO : les Mythes et la Réalité
 
Webperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalitéWebperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalité
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
 
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEO
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifié
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperf
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App
 
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOCore Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
 
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
 
La vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéLa vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploité
 
Digital race evolution programmation web 1.0
Digital race   evolution programmation web 1.0Digital race   evolution programmation web 1.0
Digital race evolution programmation web 1.0
 
Optimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre siteOptimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre site
 

LoadTime & SEO - Erlé Alberton

  • 1. Web Perf pour le SEO le top et le flop des meilleures et pires optimisations
  • 3. Erlé ALBERTON 15 ans de WEB Speaker depuis 2004 Ex Responsable SEO Boutiques Orange &. Sosh #1 Customer Success Manager OnCrawl Ambassadeur OnCrawl France Evangéliste Octopulse Consultant technique grands comptes et agency Acquisition & Digital Performance Manager Reezocar @cubilizer
  • 5. Rappels Un site rapide, c’est avant tout un site qui favorise la rétention et que Google Crawl ++ -1 sec. = -10% de Rebond -1 sec. = +15% de Conversion 20% des utilisateurs abandonnent leur panier à cause du temps de chargement Un temps de chargement divisé par 2 c’est 11% d’augmentation de panier moyen
  • 6. DNS TTFB FP FCP FMP DOM Speed Index First CPU Ide Le moment ou le browser rend autre chose que sa page blanche First Paint Moment ou apparaissent les premières données utiles Hero Time First Meaningfull Paint Le score de rapidité d’affichage des éléments au- dessus de la ligne de flottaison Temps avant la réception du premier BIT de données Time To First Bit Apparition des premiers éléments de layout First Content Paint Le DOM est en partie chargée et les interactions JS peuvent être jouées Interactive/Content Loaded Le CPU souffle le délai à partir duquel la thread (fil d’exécution) principale est suffisamment disponible pour gérer les entrées Domain.com = xxx.xxx.xxx.xxx Résolution DNS A BRIEF HITORY OF LOAD.... … …. TIME Time to Interactive Temps a partir duquel les éléments sont cliquables ou utilisables (input/form/liens) On peut interagir Visualy Complete L’UX/UI commencent La page est rendue, il reste des taches en cours en background mais rien n’empêche la lecture DOM Complete Les JS synchrone sont exécutés et les ressources images les plus lourdes sont chargées Tout est là ! Page Load Voilà, voilà on a mit 12 secondes à charger une recette de cuisine GA timing
  • 9. LES OUTILS SONT LA POUR SIMPLIFIER LA LECTURE
  • 11. Pourquoi Google aime les sites rapides Le bot n’a pas de temps à perdre ! Plus une page charge rapidement plus le bot peut crawler des pages Rapide = plus de contenus analysées Google veut connaitre le plus de pages possibles il doit parcourir le maximum de contenu en un minimum d’argent 2.15
  • 13. L’image de 4Mo sur la HP Lorsqu’une image est uploadée sur le serveur via un BackOffice, vous DEVEZ : 1. Réduire sa taille à la taille d’affichage sur la page 2. Optimiser son poids 3. Choisir le meilleur format en fonction de votre besoin de rendu Cela évite de se retrouver avec une image de 4000x3000px et 4Mo sur la page
  • 14. Page speed module La page est rapide pour l’utilisateur, mais le bot ne voit que des appels PageSpeed à des ressources certes optimisées mais dont les temps de chargement sont impactés par le « compute » du module La différence entre le temps de chargement USER et BOT est considérable ! https://DOMAIN.COM/ressources/references/miniatures/x150x150_accessoire-couteau-petrin- xxl-du-robot-cuiseur-cook-expert-166550.png.pagespeed.ic.lvRFcHlWzT.webp
  • 15. Le CDN gratuit Passer sous CloudFlare est une très bonne pratique mais, si l’on prend la version gratuite, le TTFB vu par Google est augmenté :/ Passage sur CloudFlare Gratis Perte de Crawl :/  RollBACK !!!!
  • 16. Le full JS Les framework JS sont de plus en plus utilisés par les développeurs Front… … mais on oublie que Google (malgré ce qu’il dit) ne sait pas vraiment voir tout le code HTML et donc vos optimisation SEO…
  • 17. Ce que dit Google Googlebot passe en mode « EVERGREEN » A l’occasion du récent événement Google I/O, Google a annoncé que son bot explorait dorénavant le web en utilisant la dernière version de Chrome. En clair, Googlebot se comporte maintenant comme un Chrome version 74, et non 41 !
  • 18. La réalité ! Seuls les outils de rendu et de test pour les webmasters sont en Chrome Evergreen… Le bot est toujours en 41, donc peu de compréhension du JS moderne ou complexe
  • 19. Le Server Side Rendering… avec Rendertron … heureusement ils proposent d’utiliser le SSR avec leur middleware Rendertron….. Problème : +400ms pour chaque requête
  • 20. La requête DB qui rame Une bonne requête DB est une requête qui va vite à l’essentielle Sinon un simple appel peut couter plus de 2 secondes au DOM LOAD Une bonne architecture est essentielle à une bonne WEB Perf
  • 21. Lazy loading Bien intégré c’est pertinent mais si ce n’est pas à l’encontre de l’optimisation du contenu HTML vu par le BOT (sans JS) Ici, lorsque le JS est désactivé l’image n’est pas présente dans le code de la page
  • 22. Redirect en boucle de la Home Page Pour diverses besoins (switch langage, mobile devices, …) La home page peut jouer de redirections et malheureusement lorsqu’elles sont gérées avec les pieds cela peut conduire à des boucles infinie pour les BOTs
  • 23. GA load Time mal compris La construction d’un dashboard qui fait peur n’est pas bon pour le moral des troupes ! Le chef cri, les devs pleurent, les devOps se pendent ! Filtrer sur les pays qui vous concernent !
  • 25. QUELLE EST LA DIFFERENCE ENTRE CES DEUX IMAGES ?1,3Mo
  • 26. optimize-images 1.3.3 > pip install optimize-images Un utilitaire d'interface en ligne de commande (CLI) écrit en Python pur pour vous aider à réduire la taille des fichiers d'images Cette application se veut pure Python, sans dépendance particulière en dehors de Pillow, assurant ainsi la compatibilité avec une large gamme de systèmes, y compris les iPhones et les iPads utilisant Pythonista 3.
  • 27. Lazy loading la bonne version ! Le lazyloading est implémenté pour les utilisateurs Le bot voit ce qu’il y a dans le <noscript>
  • 28. Preloading de ressources Profiter des « preload » navigateur pour améliorer les temps de réponses de vos ressources dans la page où dans les pages suivantes
  • 29. HTTP2 HTTP/2 (issu du protocole expérimental SPDY de Google) est une version majeure du protocole réseau HTTP utilisé sur le World Wide Web • Synchronise les appels de ressources • Permet de profiter au maximum de preload et prefetch • Compresse les header • Réduit de le DOMLoad considérablement !
  • 31. CDN Content Delevery Network A partir de (20+5)$/mois • DNS ultra rapide • HTTP2 natif • Web Content Optimisation • Optimisation des images • CDN/caching • GZIP agressi • AutoMinify • Argo*
  • 32. CDN ARGO: routage intelligent dirigeant les visiteurs vers les chemins les moins saturés et les plus fiables du réseau privé de Cloudflare Réduit la latence du trafic d'origine de 35 % en moyenne et les erreurs de connexion de 27 %
  • 33. JS async / defer Charger un JS demande des ressources au navigateur et interrompt le parse du HTML Si un script n’est pas essentiel pour le FCP ou le FI
  • 35. LES CACHES APPLICATIF Varnish : est un serveur de cache HTTP apparu en 2006 Déployé en tant que proxy inverse entre les serveurs d’application et les clients Il permet de décharger les serveur en mettant en cache les données lorsqu’elles ont été déjà demandée une fois Les règles de cache sont données par les administrateurs système pour conserver une version statique des pages (cache) et servir plus rapidement les requêtes, tout en allégeant la charge des serveurs REQUEST #1 : pas de cache REQUEST #2,n : cache statique sans requête serveur
  • 36. Strapi & Gatsby les magnifiques
  • 37. Strapi Strapi permet de bootsptraper une base de donnée, un backoffice et une interface sécurisée modulable et qui s’interface avec Gatsby Monter un backoffice en 3 lignes de codes Lors du build final, Gatsby va créer un site complétement static depuis le code React/GraphQl Un framework React / GraphQL qui sera static en prod ReactJS en FULL STATIC
  • 39. LIGHTHOUSE BENCHER Problématique : Suivre les performance du site avec Lighthouse, sur un pool d’URLs prédéfini et de manière automatique afin de constater les améliorations/défaut du site rapidement Solution : Grâce à un système basé sur des container Docker, du shell script pour lancer Lighthouse headless, du python pour parser les résultats et Logz.io pour stocker les données nous suivons en temps réel les performance d’un ensemble de pages. SpeedIndex / TTFB / JS loading/… peuvent être analysés dans un dashboard gratuit et interactif ! Les sources de cette machine partagées sur GitHub aux participants du WeLoveSEO ♥️