Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meetup AFUP Reims: Diagnostiquer le temps de chargement

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.

Julien Deneuville

June 20, 2019
Tweet

More Decks by Julien Deneuville

Other Decks in Marketing & SEO

Transcript

  1. Diagnostiquer le
    temps de chargement d’un
    site web

    View full-size 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 full-size slide

  3. 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 full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  7. Outils de développement Google
    Chrome

    View full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

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

    View full-size slide

  11. WebPageTest.org

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

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

    View full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Homemade is better

    View full-size slide

  20. 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 full-size slide

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

    View full-size slide

  22. 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 full-size slide