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.

Améliorez la vitesse de chargement de votre site - Webisland 2018

369 views

Published on

Google et les utilisateurs deviennent de plus en plus exigeants par rapport à la performance des sites. En 2018, 50% des sites mettent environ 15s à se charger alors qu’au delà de 3s, on a +25% de taux de rebond, l’expérience est frustrante et l’impact est négatif.

Vous souhaitez surpasser les autres ? Satisfaire vos utilisateurs, gagner le respect de Google et voir un impact positif sur vos métriques (€, Bounce, dwell, ranking) ? Je vous donnerai mes meilleurs tips concrets et actionnables pour booster votre temps de chargement. De la méthodologie, des outils et des techniques avancées. #technicalseo #perfmatters.

Conférence pour audience multidisciplinaires (technique, marketing) et pas exclusive au développeurs
https://webisland.io

Published in: Marketing
  • Be the first to comment

Améliorez la vitesse de chargement de votre site - Webisland 2018

  1. 1. Améliorez la vitesse de chargement Surpassez vos concurrents ! Aymen Loukil#webisland
  2. 2. @LoukilAymen #webisland UX ? SEO ? Technique ? Marketing ? Conversion ? Business ? C’est quoi la performance web ?
  3. 3. @LoukilAymen #webisland La performance est La fonctionnalité
  4. 4. @LoukilAymen #webisland Programme ● Pourquoi c’est important ● On optimise pour qui ? ● Métriques et objectifs ● Comment y arriver ?
  5. 5. Aymen Loukil #TechnicalSEO #entrepreneur #speaker #ex-dev Consultant SEO International https://www.aymen-loukil.com @LoukilAymen
  6. 6. @LoukilAymen #webisland Un internaute, perd en moyenne 2 jours d’attente par an..
  7. 7. @LoukilAymen #webisland Le web est lent ? “50% des sites mettent 13s à charger et être utilisables” 2 pit stops F1
  8. 8. @LoukilAymen #webisland WEB STRESS
  9. 9. @LoukilAymen #webisland Attente = frustration 0 100ms 300ms 1000ms 10.000msSmooth Petit délai Tâche normale Perte de focus Frustration 3s : la conversion chute
  10. 10. @LoukilAymen #webisland La lenteur est pire que l’indisponibilité..
  11. 11. @LoukilAymen #webisland Time is Money + 500ms => -25% searches -100ms => +1% revenue
  12. 12. @LoukilAymen #webisland On optimise pour qui ? A partir de 25 ans, notre capacité d’utiliser le web baisse de 0,8% /an
  13. 13. @LoukilAymen #webisland Quelles connexions ? France 14 Mbps Denmark 24.41 Mbps Japan 22 Mbps Belgique 20 Mbps Suisse 18.5 Mbps State of Mobile Networks https://opensignal.com USA 12.5 Mbps Une page web en moyenne : 3.6Mb* 3.6 Mb 14 Mbps = 25s 16s(Japan)
  14. 14. @LoukilAymen #webisland Quelles ressources matérielles ? https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e 4s sur un iPhone 8 (800€) Vs 14s sur un Motorolla G4 (200€)
  15. 15. @LoukilAymen #webisland Métriques et objectifs https://developers.google.com/ ça arrive ? c’est utile ? c’est utilisable ?
  16. 16. @LoukilAymen #webisland Weber-Fechner Law : (+-) 20% imperceptible
  17. 17. @LoukilAymen #webisland Visez 30% d’amélioration ! Exemple : 3 secondes X 0.3 = 0.9 Secondes à gagner Avant une MEP, si on dégrade <20%, pas grave
  18. 18. @LoukilAymen #webisland Et par rapport à la concurrence ? 1. Être égal /meilleur ? 2. Faire au moins, moins bien de 20%
  19. 19. @LoukilAymen #webisland Comment mesurer la performance ? Synthétique - Lab - Dev, debug - QA SEO Une part de la vérité, permet de comparer, ne reflète pas la vraie perception de la performance Chez nos utilisateurs - Utilisateurs - Terrain (RUM) Reflète l’expérience de nos utilisateurs, pas toujours évident de l’avoir, comparaisons subjectives CrUX
  20. 20. @LoukilAymen #webisland Mesure synthétique webpagetest.org
  21. 21. @LoukilAymen #webisland Les métriques webpagetest.org
  22. 22. @LoukilAymen #webisland Comparer synthétiquement webpagetest.org
  23. 23. @LoukilAymen #webisland Comparer les métriques webpagetest.org
  24. 24. @LoukilAymen #webisland La console Chrome
  25. 25. @LoukilAymen #webisland Network Throttling (simuler connexions lentes)
  26. 26. @LoukilAymen #webisland Lighthouse - Outil de diagnostic
  27. 27. @LoukilAymen #webisland Automatiser vos rapports https://github.com/GoogleChrome/lighthouse $ npm install -g lighthouse $ lighthouse --perf https://webisland.io/ $ lighthouse --output-path=./report.json --output json
  28. 28. @LoukilAymen #webisland Automatiser avec Puppeteer https://github.com/GoogleChromeLabs/puppeteer-examples
  29. 29. @LoukilAymen #webisland RUM : Real User Measurement
  30. 30. @LoukilAymen #webisland RUM : Real User Measurement
  31. 31. @LoukilAymen #webisland Je vais demander à mes concurrents un accès GA
  32. 32. @LoukilAymen #webisland Mes concurrents sont ils plus rapides ?
  33. 33. @LoukilAymen #webisland On va explorer la RUM publique https://beta.httparchive.org/ https://developers.google.com/web/tools/chrome-user-experience-report
  34. 34. @LoukilAymen #webisland Proportions par type de connexion Benchmarker, comparer !
  35. 35. @LoukilAymen #webisland Proportions par type de support Mieux connaître..
  36. 36. @LoukilAymen #webisland Distribution FCP par support Comment ça se passe par support
  37. 37. @LoukilAymen #webisland Distribution FCP par support @rick_viscomi
  38. 38. @LoukilAymen #webisland Densité des utilisateurs avec FCP < 1s Métriques, exigences différentes..
  39. 39. @LoukilAymen #webisland Comparer l’évolution du FCP Historiser, suivre..
  40. 40. @LoukilAymen #webisland Suivre ces métriques dans le temps Etude sites e-commerce : https://www.aymen-loukil.com/blog/top-sites-ecommerce-p 2018/
  41. 41. @LoukilAymen #webisland Requêtes Google BigQuery Récupérez les requêtes ici https://github.com/AymenLoukil/Chrome-user-experience-report-queries
  42. 42. @LoukilAymen #webisland SpeedInsight intègre la RUM
  43. 43. @LoukilAymen #webisland Scorecard speed https://www.thinkwithgoogle.com/feature/mobile/
  44. 44. @LoukilAymen #webisland Speed impact calculator https://www.thinkwithgoogle.com/feature/mobile/
  45. 45. @LoukilAymen #webisland Mesure de performance ● Corréler les métriques perf IT avec métrique perf business ● Enrichir synthétique par RUM ● Segmenter par type de page (listing, checkout, product, editorial) ● Afficher les mesures dans les locaux ● Ne jamais arrêter les mesures
  46. 46. @LoukilAymen #webisland Comment y arriver ?
  47. 47. @LoukilAymen #webisland Chargement d’une page web Parse Compile ExecuteDownload Réseau Matériel (processeur, mémoire)
  48. 48. @LoukilAymen #webisland
  49. 49. @LoukilAymen #webisland
  50. 50. @LoukilAymen #webisland
  51. 51. @LoukilAymen #webisland
  52. 52. @LoukilAymen #webisland Faire plus light, plus rapide http://vanilla-js.com/
  53. 53. @LoukilAymen #webisland Coverage : code non utilisé 50% du code n’est pas utilisé [1.4MB potentiel à gagner]* ctrl+shift+p [win]
  54. 54. @LoukilAymen #webisland Sur wordpress regarder : wp_enqueue_script() wp_enqueue_style() Splitter le code Juste ce qu’il faut !
  55. 55. @LoukilAymen #webisland Les scripts externes ? [3rd party] Third party badges
  56. 56. @LoukilAymen #webisland Bloquer le chargement d’une ressource
  57. 57. @LoukilAymen #webisland Top des 3rd party scripts [http archive]
  58. 58. @LoukilAymen #webisland Comparer avec et sans 3rd party https://developers.google.com Les scripts externes [non maitrisés] peuvent dégrader la performance
  59. 59. @LoukilAymen #webisland Optimiser le chemin critique Donner en priorité ce qui est nécessaire au premier print et la ligne de flottaison CC optimisé CC non optimisé
  60. 60. @LoukilAymen #webisland Les ressources chargées avant le rendu Faire l’inventaire des script https://www.webpagetest.org/
  61. 61. @LoukilAymen #webisland Javascript est une ressource bloquante
  62. 62. @LoukilAymen #webisland Quel est l’élément héro de la page ?
  63. 63. @LoukilAymen #webisland
  64. 64. @LoukilAymen #webisland Prioriser le CSS critique 1. Installer CasperJS : http://casperjs.org/ (Node.js) 2. Télécharger ce script : https://github.com/ibrennan/automation/tree/master/content/critical-css 3. >casperjs app.js pour l’exécuter 4. Répondre aux questions 5. Copier le code CSS sorti et le coller en inline avant l’inclusion des fichiers de style
  65. 65. @LoukilAymen #webisland Utilisez les “Resource Hints” : preload https://w3c.github.io/resource-hints/
  66. 66. @LoukilAymen #webisland rel=”prefetch” Gain de -30% sur le TTI
  67. 67. @LoukilAymen #webisland Quelle serait la next page ?
  68. 68. @LoukilAymen #webisland Prédire la next page https://github.com/SamKnows/futurelink
  69. 69. @LoukilAymen #webisland DNS-prefetch
  70. 70. @LoukilAymen #webisland Passez en HTTP/2 HTTP/1.1 HTTP/2 Open Close Open Close T T Avantages ● Multiplexage ● Compression de header ● Meilleure priorisation ● Push serveur
  71. 71. @LoukilAymen #webisland Network API
  72. 72. @LoukilAymen #webisland Adapter par rapport à la connexion
  73. 73. Compression Gzip + Réduit la taille des ressources transmises - Peut engendrer un surcoût (TTFB) https://varvy.com/pagespeed/enable-compression.html
  74. 74. Cache navigateur (static resources) + Réduit le nombre de ressources à partir de la deuxième visite Facebook a économisé 60% des requêtes grâce au cache https://code.facebook.com/posts/557147474482256/this-browser-tweak-saved-60-of-requests-to-facebook/
  75. 75. @LoukilAymen #webisland Compression d’images Caesium : https://saerasoft.com/caesium/ - Choisir le pourcentage de compression - Version Desktop - Version CLI 25% d’une image est inutile (HTTPArchive)
  76. 76. @LoukilAymen #webisland Font-display @font-face { font-family: 'Saira Condensed'; src: url(fonts/sairacondensed.woff2) format('woff2'); font-display: swap; }
  77. 77. @LoukilAymen #webisland Font-display https://font-display.glitch.me/
  78. 78. J’ai un gros.. TTFB TTFB : Time To First Byte (octet) Deux raisons possibles : 1- Serveur lent ? Tester en http://localhost : pareil => Serveur lent Optimiser, BD*, cache serveur Si inférieur => Connexion lente 2- Connexion lente ? CDN, hébergeur Google préconise un TTFB de 200ms *https://fr.wordpress.org/plugins/query-monitor/
  79. 79. @LoukilAymen #webisland Et à la fin, ce qui compte c’est comment on le sent.. #perception
  80. 80. @LoukilAymen #webisland Actif Vs Passif
  81. 81. @LoukilAymen #webisland L’être humain sur estime le temps passif paer 40% ! Richard Larson
  82. 82. @LoukilAymen #webisland Loader si une action prend > 1.5s
  83. 83. @LoukilAymen #webisland Barres de progressions Animées : +6% plus rapide Animées et accélérées : +12% plus rapide
  84. 84. @LoukilAymen #webisland Lecture : Faster Progress Bars http://chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
  85. 85. @LoukilAymen #webisland On va tricher ! onmousedown VS onclick onmousedown peut nous faire gagner 150ms
  86. 86. @LoukilAymen #webisland Bonnes pratiques de performance 2018 Ressources critiques en premier Moins de javaScript Moins de requêtes Compression et minification Lazy loading Auditer les 3rd parties Stratégie de Fonts ‘Cacher’ les ressources statiques Ressources hints Le code de la prod = propre Viser 30% d’amélioration ! Culture performance partagée Equipes multi skills (tech, market, product)
  87. 87. @LoukilAymen #webisland Bonne optimisation ! https://www.aymen-loukil.com

×