Meetup AFUP Reims: Diagnostiquer le temps de chargement

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.

Transcript

1. Diagnostiquer le temps de chargement d’un site web
2. 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
3. WebPerfs
4. 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
5. Temps de chargement : pourquoi ? Parce que sinon, ça augmente ! ©2019 – Tous droits réservés Databulle – www.databulle.com 5
6. 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
7. 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
8. Outils
9. Outils de développement Google Chrome
10. 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
11. 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
12. More tools > Coverage Identifier les portions de code inutilisées. ©2019 – Tous droits réservés Databulle – www.databulle.com 12
13. WebPageTest.org
14. WebPageTest.org ©2018 – Tous droits réservés Databulle – www.databulle.com 14
15. 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
16. Comparaison vidéo ©2019 – Tous droits réservés Databulle – www.databulle.com 16
17. 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
18. Sitepeed.io
19. 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
20. Analyse ponctuelle ©2019 – Tous droits réservés Databulle – www.databulle.com 20
21. Dashboard ©2019 – Tous droits réservés Databulle – www.databulle.com 21
22. Homemade is better
23. 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
24. Exemples ©2019 – Tous droits réservés Databulle – www.databulle.com 24
25. Merci !
26. 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