Outils et méthodes pour diagnostiquer le temps de chargement d'un site.
Présentation à destination des développeurs du Meetup AFUP Reims, proposée le 20 juin 2019.
Diagnostiquer letemps de chargement d’unsite web
View Slide
Qui suis-je ?Julien Deneuville• SEO // Data // Python• Databulle // Crowl.tech• @diije // databulle.com/blog©2019 – Tous droits réservésDatabulle – www.databulle.com2
WebPerfs
Temps de chargement : pourquoi ?Pour la conversion• De nombreuses études montrent qu’un site plus rapideconvertit mieuxPour l’UX• La lenteur est pire que l’indisponibilitéPour le SEO• Impact sur le crawl budgetPour AdWords• Impact sur le Quality Score©2019 – Tous droits réservésDatabulle – www.databulle.com4
Temps de chargement : pourquoi ?Parce que sinon, ça augmente !©2019 – Tous droits réservésDatabulle – www.databulle.com5
Comment mesurer ?Mesures synthétiques• On simule une connexion dans un environnementcontrôlé• Google Pagespeed, Dareboost, …RUM (Real User Measurement)• On récolte de vraies données• Données privées : Logs serveur, Google Analytics, …• Données publiques :§ https://developers.google.com/web/tools/chrome-user-experience-report/§ https://beta.httparchive.org/©2018 – Tous droits réservésDatabulle – www.databulle.com6
Les métriques importantesTTFB (Time to first byte)• Délai de réception du premieroctet• Impact fort sur le crawl deGoogleFirst Content Paint / StartRender• Délai d’affichage des premierséléments à l’écran• C’est ce qui donne l’impressionde vitesse à l’utilisateurLoad time / Document complete• Déclenchement de l’événementonload()DOM elements• Nombre d’éléments dans leDOM• ~ complexité du code sourceNombre de requêtes• Nombre d’éléments à chargeren plus du HTML§ CSS, JS, images …©2018 – Tous droits réservésDatabulle – www.databulle.com7
Outils
Outils de développement GoogleChrome
Onglet Performance• Mesure du chargement de lapage• Charge mémoire• Captures d’écran• Simulation d’une connexionlente• …©2019 – Tous droits réservésDatabulle – www.databulle.com10
Audits LighthouseLa même chose en mieux :• Des données et testssupplémentaires• Des recommandationsCréez vos audits Lighthousepersonnalisés : Aymen Loukil©2019 – Tous droits réservésDatabulle – www.databulle.com11
More tools > CoverageIdentifier les portions de code inutilisées.©2019 – Tous droits réservésDatabulle – www.databulle.com12
WebPageTest.org
WebPageTest.org©2018 – Tous droits réservésDatabulle – www.databulle.com14
Tips & tricksFaites plusieurs testssuccessifsCréez un compte• C’est gratuit• Vous aurez l’historiquede vos tests• Vous pourrez comparerles tests©2019 – Tous droits réservésDatabulle – www.databulle.com15
Comparaison vidéo©2019 – Tous droits réservésDatabulle – www.databulle.com16
CadeauVotre propre instance WPT avec Docker :https://medium.com/@francis.john/local-webpagetest-using-docker-90441d7c2513©2019 – Tous droits réservésDatabulle – www.databulle.com17
Sitepeed.io
Sitespeed• Crawle un échantillon de pages• Génère un rapport HTML• Fournit des metrics et des recommandations• Compatible avec l’intégration continue• Container Docker• …>> www.sitespeed.io <<©2019 – Tous droits réservésDatabulle – www.databulle.com19
Analyse ponctuelle©2019 – Tous droits réservésDatabulle – www.databulle.com20
Dashboard©2019 – Tous droits réservésDatabulle – www.databulle.com21
Homemade is better
Use-caseProblématique : surveiller la configurationCloudFlare chez un clientSolution : collecter des KPI dédiés aux webperfslors des crawls SEO du site©2019 – Tous droits réservésDatabulle – www.databulle.com23
Exemples©2019 – Tous droits réservésDatabulle – www.databulle.com24
Merci !
DATA PARTY !27 septembre 2019Le rendez-vous numérique en Champagne :1 journée de conférences, 1 soirée privée haut degamme avec dégustations de champagnes devigneron 🍾Inscription :https://www.webinreims.fr/billetterie.htmlEARLY BIRD EN COURS