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
   

   View Slide

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
   

   View Slide

3. WebPerfs
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

8. Outils
   

   View Slide

9. Outils de développement Google
   Chrome
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

13. WebPageTest.org
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

18. Sitepeed.io
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

22. Homemade is better
    

    View Slide

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
    

    View Slide

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

    View Slide

25. Merci !
    

    View Slide

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
    

    View Slide