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

Meetup AFUP Reims: Diagnostiquer le temps de ch...

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.

Avatar for Julien Deneuville

Julien Deneuville

June 20, 2019
Tweet

More Decks by Julien Deneuville

Other Decks in Marketing & SEO

Transcript

  1. 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
  2. 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
  3. Temps de chargement : pourquoi ? Parce que sinon, ça

    augmente ! ©2019 – Tous droits réservés Databulle – www.databulle.com 5
  4. 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
  5. 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
  6. 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
  7. 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
  8. More tools > Coverage Identifier les portions de code inutilisées.

    ©2019 – Tous droits réservés Databulle – www.databulle.com 12
  9. 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
  10. 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
  11. 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
  12. 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