Diagnostiquer le temps de chargement d’un site web

Qui suis-je ? Julien Deneuville • SEO // Data // Python • Databulle // Crowl.tech • @diije // databulle.com/blog ©2019 – Tous droits réservés Databulle – www.databulle.com 2

WebPerfs

Temps de chargement : pourquoi ? Pour la conversion • De nombreuses études montrent qu’un site plus rapide convertit mieux Pour l’UX • La lenteur est pire que l’indisponibilité Pour le SEO • Impact sur le crawl budget Pour AdWords • Impact sur le Quality Score ©2019 – Tous droits réservés Databulle – www.databulle.com 4

Temps de chargement : pourquoi ? Parce que sinon, ça augmente ! ©2019 – Tous droits réservés Databulle – www.databulle.com 5

Comment mesurer ? Mesures synthétiques • On simule une connexion dans un environnement contrô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és Databulle – www.databulle.com 6

Les métriques importantes TTFB (Time to first byte) • Délai de réception du premier octet • Impact fort sur le crawl de Google First Content Paint / Start Render • Délai d’affichage des premiers éléments à l’écran • C’est ce qui donne l’impression de vitesse à l’utilisateur Load time / Document complete • Déclenchement de l’événement onload() DOM elements • Nombre d’éléments dans le DOM • ~ complexité du code source Nombre de requêtes • Nombre d’éléments à charger en plus du HTML § CSS, JS, images … ©2018 – Tous droits réservés Databulle – www.databulle.com 7

Outils

Outils de développement Google Chrome

Onglet Performance • Mesure du chargement de la page • Charge mémoire • Captures d’écran • Simulation d’une connexion lente • … ©2019 – Tous droits réservés Databulle – www.databulle.com 10

Audits Lighthouse La même chose en mieux : • Des données et tests supplémentaires • Des recommandations Créez vos audits Lighthouse personnalisés : Aymen Loukil ©2019 – Tous droits réservés Databulle – www.databulle.com 11

More tools > Coverage Identifier les portions de code inutilisées. ©2019 – Tous droits réservés Databulle – www.databulle.com 12

WebPageTest.org

WebPageTest.org ©2018 – Tous droits réservés Databulle – www.databulle.com 14

Tips & tricks Faites plusieurs tests successifs Créez un compte • C’est gratuit • Vous aurez l’historique de vos tests • Vous pourrez comparer les tests ©2019 – Tous droits réservés Databulle – www.databulle.com 15

Comparaison vidéo ©2019 – Tous droits réservés Databulle – www.databulle.com 16

Cadeau Votre propre instance WPT avec Docker : https://medium.com/@francis.john/local- webpagetest-using-docker-90441d7c2513 ©2019 – Tous droits réservés Databulle – www.databulle.com 17

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és Databulle – www.databulle.com 19

Analyse ponctuelle ©2019 – Tous droits réservés Databulle – www.databulle.com 20

Dashboard ©2019 – Tous droits réservés Databulle – www.databulle.com 21

Homemade is better

Use-case Problématique : surveiller la configuration CloudFlare chez un client Solution : collecter des KPI dédiés aux webperfs lors des crawls SEO du site ©2019 – Tous droits réservés Databulle – www.databulle.com 23

Exemples ©2019 – Tous droits réservés Databulle – www.databulle.com 24

Merci !

DATA PARTY ! 27 septembre 2019 Le rendez-vous numérique en Champagne : 1 journée de conférences, 1 soirée privée haut de gamme avec dégustations de champagnes de vigneron 🍾 Inscription : https://www.webinreims.fr/billetterie.html EARLY BIRD EN COURS