Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapira - SEOCamp Lyon 2018

L’essor des usages mobiles change la donne du Web, entraînant une nouvel intérêt pour l’optimisation de l’expérience utilisateur, à commencer par la Performance Web. Google multiplie les expérimentations sur ce sujet-clé pour l’entreprise, au risque de souffler un vent de panique sur le marché.
Mais pour appréhender la performance d’un site web, encore faut-il savoir quels indicateurs collecter, comment les interpréter et surtout comment les améliorer. Nous verrons également ensemble comment cette petite révolution va nécessiter, comme dans le reste de l’activité SEO, de l’agilité, de la veille, et une vraie volonté d’expérimentation.
En route pour un Web plus rapide !

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapira - SEOCamp Lyon 2018

  1. 1. 1#seocamp Performance Web : vers la Speed Update, un pas après l’autre
  2. 2. 2#seocamp Boris Schapira
  3. 3. 3#seocamp Google et la Performance Web
  4. 4. 4#seocamp Google et la performance Quelques dates pour se situer 2009 2010 … 2014 2015 2016 2017 2018 PageSpeed Ranking WebPerf Mobilegedon Labels « Red Slow » & « Slow to load » Mobile-First CrUX dans PageSpeed AMP CrUX Report Speed Update
  5. 5. 5#seocamp ▪ « Ne jamais livrer une fonctionnalité qui nous ralentit » ▪ Toujours un sujet fondamental de communication, même une fois Chrome en position de leadership ▪ De l’investissement sur la performance: outils, frameworks, protocoles, services de conseils… Une question de valeurs La performance Web a toujours été au cœur des actions de Google
  6. 6. 6#seocamp « Speed isn’t just a feature, it’s the feature » « The Google Gospel of Speed », Urs Hoelzle, 2012
  7. 7. 7#seocamp ▪ Des optimisations qui mènent à :  Une réduction des coûts d’exploitation  Une augmentation des gains publicitaires ▪ Évolution des usages, design de l’expérience mobile ▪ Essor des plateformes de contenus ▪ Capture des marchés émergents ▪ Croissance interne forte Une question de business La performance comme un impératif fondamental de fonctionnement
  8. 8. 8#seocamp Comment se mesure la performance web ?
  9. 9. 9#seocamp « Qualité Web », Élie Sloïm et Laurent Denis Chaque site propose une expérience différente
  10. 10. 10#seocamp Une variété d’indicateurs Chaque projet doit trouver le jeu d’indicateurs qui lui convient ▪ Indicateurs collectés côté navigateur principalement ▪ Issus du navigateur ou basés sur l’analyse vidéo ▪ Collectés auprès de vrais utilisateurs, ou dans un environnement synthétique ▪ Indicateurs d’affichage, d’interactivité ▪ Indicateurs techniques ou créés par le métier ▪ Temps de chargement
  11. 11. 11#seocamp ▪ Time To First Byte (TTFB) : « temps de réponse serveur » + latence × 2 ▪ Start Render : la page n’est plus « blanche » ▪ Visually Complete : partie visible de la page est entièrement rendue ▪ Dom Content Loaded (DCL) : fin du chargement principal (y compris les scripts) Les indispensables « chargement » Les indicateurs à connaître absolument
  12. 12. 12#seocamp Speed Index Mesure la progressivité de l’affichage 100 %90 %80 %60 % 60 % 60 % 60 % 100 % 400 ms 800 ms 1200 ms 1600 ms 2000 ms 0 % 0 %
  13. 13. 13#seocamp Speed Index Mesure la progressivité de l’affichage 0 10 20 30 40 50 60 70 80 90 100 Exemple A Exemple B
  14. 14. 14#seocamp Speed Index Mesure la progressivité de l’affichage 100 %90 %75 %60 % 60 % 60 % 60 % 100 % 400 ms 800 ms 1200 ms 1600 ms 2000 ms 0 % 0 % Speed Index : 1100 Speed Index : 1280
  15. 15. 15#seocamp ▪ Nombre de requêtes : impact sur la latence HTTP ▪ Poids total : consommation de données et de CPU* ▪ Métriques personnalisées : répondent à la fois à une problématique de mesure de contenus et de temps. Exemple : « affichage du contenu principal » * Attention au poids du JavaScript ! Les métriques de contenu Les indicateurs à connaître absolument
  16. 16. 16#seocamp Moment auquel est rendu le premier élément de contenu du DOM : texte, image ou élément <canvas>. Mesuré via Google Chrome First Contentful Paint La métrique au cœur de PageSpeed Insights
  17. 17. 17#seocamp Base de données anonymes collectées via Google Chrome Chrome UX Report (CrUX)
  18. 18. 18#seocamp ▪ Clé en main : vision RUM sans avoir à déployer quoi que ce soit sur son site… ou celui de ses concurrents ▪ Pointu : nécessite des bases en statistiques et manipulation de données complexes mais à partir de là, pas mal de choses sont possibles. Forces du CrUX Une base de données géante !
  19. 19. 19#seocamp En RUM, toujours considérer la distribution dans son ensemble. Attention, ici les données sont ramenées à 100 % par form factor. Requête Big Query
  20. 20. 20#seocamp ▪ Exhaustivité : peu de sites concernés par pays ▪ Agrégations : par défaut, par pays, et sur des périodes de temps non-contrôlées ▪ Modèle de données : limité en portée et en historique, mais Big Query donne aussi accès aux données HTTP Archive depuis 2010 Limitations du CrUX Tout n’est pas rose au pays du Chrome UX Report
  21. 21. 21#seocamp « Vidéo : optimisez vos MP4 pour de meilleures performances », Boris Schapira
  22. 22. 22#seocamp Performance Web : commencez dès lundi
  23. 23. 23#seocamp • Éviter l’indicateur de « Page Load Time » (lui préférer le « Document Content Loaded Time » ou un Custom Timing) • Échantillonner à 100% en dessous de 20k PV/jour • Segmenter pour analyser : matériel, navigateur, FAI… Du RUM avec Google Analytics Pas besoin d’être un expert JS pour mettre en place du monitoring
  24. 24. 24#seocamp
  25. 25. 25#seocamp Chaque localisation est un portefeuille de contextes différents
  26. 26. 26#seocamp • Contextes limités mais maitrisés • Permettent de créer un contexte reproductible de mesure permettant de valider des hypothèses • Stabilité suffisante pour permettre la levée d’alertes • Vision concurrentielle, en parcours • Dareboost, mais pas que… Attention : no free launch Du synthétique pour faire levier Contrôler, influer, proposer, tester, valider
  27. 27. 27#seocamp Expérimentez Procédez par élimination, par blocage, testez vos scripts tiers, soyez curieux·ses !
  28. 28. 28#seocamp • Impliquez l’ensemble des équipes dans les problématiques abordées • Valorisez une culture de l’itération : certaines optimisations ne feront sens que dans un tout • Soyez patient·e·s et ne croyez pas aux formules magiques ! Transverses et agiles Une problématique complexe qui nécessite l’implication de tou·te·s
  29. 29. 29#seocamp Merci.
  30. 30. 30#seocamp ● Un format vidéo l’a emporté sur les autres il y a quelques années. Vous devriez toujours l’utiliser plutôt que d’avoir recourt à des GIF animés. Question mug ! On ne va pas se quitter comme ça…
  31. 31. 31#seocamp ● Un format vidéo l’a emporté sur les autres il y a quelques années. Vous devriez toujours l’utiliser plutôt que d’avoir recourt à des GIF animés. ● Mais vu que le sujet est ici la performance… quel est le troisième mot de ce paragraphe ? Question mug ! On ne va pas se quitter comme ça…
  32. 32. 32#seocamp MERCI AUX SPONSORS

    Be the first to comment

    Login to see the comments

  • nhoizey

    Jun. 13, 2018

L’essor des usages mobiles change la donne du Web, entraînant une nouvel intérêt pour l’optimisation de l’expérience utilisateur, à commencer par la Performance Web. Google multiplie les expérimentations sur ce sujet-clé pour l’entreprise, au risque de souffler un vent de panique sur le marché. Mais pour appréhender la performance d’un site web, encore faut-il savoir quels indicateurs collecter, comment les interpréter et surtout comment les améliorer. Nous verrons également ensemble comment cette petite révolution va nécessiter, comme dans le reste de l’activité SEO, de l’agilité, de la veille, et une vraie volonté d’expérimentation. En route pour un Web plus rapide !

Views

Total views

381

On Slideshare

0

From embeds

0

Number of embeds

242

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×