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 #perfmatters - Tuniseo 2018

249 views

Published on

En naviguant sur le web, personne n'aime attendre ! Les utilisateurs sont frustrés au delà de 3s et ont tendance de quitter votre site voire même ne plus y revenir s'il est lent. Google, n'arrête pas d'appuyer sur l'importance de la vitesse de chargement des sites et l'intègre même dans les facteurs de son algorithme. Vous souhaitez vous démarquez des autres dans ce web lent (50% des sites internet se chargent en 15s en 2018) ? Satisfaire vos utilisateurs avec une expérience fluide, plaire à Google et voir un impact positif sur vos KPIs (CA, taux de rebond, positionnement SEO) ? Je partagerai avec vous des techniques actionnables et méthodologies pour booster la performance de votre site (web et mobile).

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

Performance web #perfmatters - Tuniseo 2018

  1. 1. @LoukilAymen #tuniseo TECHNIQUES AVANCÉES POUR AMÉLIORER LA PERFORMANCE WEB Aymen Loukil
  2. 2. C’est quoi la performance ? UX ? SEO ? Technique ? Marketing ? Conversion ? Business ?
  3. 3. @LoukilAymen #tuniseo Performance is The Feature. No performance, no feature
  4. 4. Programme du jour Pourquoi c’est important01 02 03 04On 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 #tuniseo #TUNISEO 2 jours d’attente par an ! Un internaute, perd en moyenne 2 jours d’attente par an..
  7. 7. @LoukilAymen #tuniseo Pitstop Formula 1
  8. 8. @LoukilAymen #tuniseo Le web est lent ? “50% des sites mettent 13s à être utilisables” = 2 pit stop F1
  9. 9. @LoukilAymen #tuniseo WEB STRESS
  10. 10. @LoukilAymen #tuniseo + 500ms => -25% searches -100ms => +1% revenue Time is Money
  11. 11. @LoukilAymen #tuniseo Mobile First Requirement
  12. 12. @LoukilAymen #tuniseo #TUNISEO Pour qui : Quelle connexion ? 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)
  13. 13. @LoukilAymen #tuniseo #TUNISEO Pour qui : Quel matériel ? 4s sur un iPhone 8 (800€) Vs 14s sur un Motorolla G4 (200€) https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
  14. 14. @LoukilAymen #tuniseo #TUNISEO Pour qui : Quels ages ? A partir de 25 ans, notre capacité d’utiliser le web baisse de 0,8% /an
  15. 15. @LoukilAymen #tuniseo https://developers.google.com/ ça arrive ? c’est utile ? c’est utilisable ? Métriques
  16. 16. @LoukilAymen #tuniseo Loi de Weber-Fechner
  17. 17. @LoukilAymen #tuniseo Exemple : 3 secondes X 0.3 = 0.9 Secondes à gagner Au moins +30% d’amélioration
  18. 18. @LoukilAymen #tuniseo Synthétique - Lab - Dev, debug - QA SEO Chez nos utilisateurs - Utilisateurs - Terrain (RUM) CrUX Mesure de la performance
  19. 19. @LoukilAymen #tuniseo webpagetest.org Comparer en synthétique
  20. 20. @LoukilAymen #tuniseo webpagetest.org Mesure de la performance
  21. 21. @LoukilAymen #tuniseo Simuler une connexion lente
  22. 22. @LoukilAymen #tuniseo Google Lighthouse Addon Chrome Console>Audit
  23. 23. @LoukilAymen #tuniseo Exemple résultat Lighthouse
  24. 24. @LoukilAymen #tuniseo https://github.com/GoogleChrome/lighthouse $ npm install -g lighthouse $ lighthouse --perf http://www.tuniseo.tn/ $ lighthouse --output-path=./report.json --output json Industrialiser la mesure
  25. 25. @LoukilAymen #tuniseo Console Google Chrome
  26. 26. @LoukilAymen #tuniseo https://github.com/GoogleChromeLabs/puppeteer-examples Puppeteer
  27. 27. @LoukilAymen #tuniseo La RUM : temps de chargement
  28. 28. @LoukilAymen #tuniseo La RUM : localisation
  29. 29. @LoukilAymen #tuniseo Mes concurrents sont ils plus rapides ?
  30. 30. @LoukilAymen #tuniseo https://beta.httparchive.org/ https://developers.google.com/web/tools/chrome-user-experience-report On va exploiter la RUM
  31. 31. @LoukilAymen #tuniseo Benchmarker, comparer ! Proportion par connexion
  32. 32. @LoukilAymen #tuniseo Mieux connaître.. Proportion par support
  33. 33. @LoukilAymen #tuniseo Métriques, exigences différentes.. Se comparer avec les autres
  34. 34. @LoukilAymen #tuniseo Historiser, suivre.. Suivre dans le temps
  35. 35. @LoukilAymen #tuniseo Etude sites e-commerce : https://www.aymen-loukil.com/blog/top-sites-ecommerce-pe 2018/ Suivre dans le temps
  36. 36. @LoukilAymen #tuniseo Récupérez les requêtes ici https://github.com/AymenLoukil/Chrome-user-experience-report-queries Requêtes BigQuery
  37. 37. @LoukilAymen #tuniseo • 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 (#fierté #succès) • Jamais arrêter la mesure Mesure de performance
  38. 38. @LoukilAymen #tuniseo On est prêt ! Comment y arriver ?
  39. 39. @LoukilAymen #tuniseo Charger une page c’est comme s’habiller
  40. 40. @LoukilAymen #tuniseo Parse Compile ExecuteDownload Téléchargement Exécution et affichage Pendant les 15 secondes ...
  41. 41. @LoukilAymen #tuniseo
  42. 42. @LoukilAymen #tuniseo
  43. 43. @LoukilAymen #tuniseo http://vanilla-js.com/ Faire plus light JS natif : 35X plus rapide que jQuery
  44. 44. @LoukilAymen #tuniseo Le lendemain d’une certaine refonte.. Chute de la conversion +12% en taux de rebond Baisse du CA
  45. 45. @LoukilAymen #tuniseo 50% du code n’est pas utilisé [1.4MB potentiel à gagner]* ctrl+shift+p [win] Trouver du code non utilisé
  46. 46. @LoukilAymen #tuniseo Sur wordpress regarder : wp_enqueue_script() wp_enqueue_style() Juste ce qu’il faut ! Faire plus light
  47. 47. @LoukilAymen #tuniseo Third party badges Les scripts externes, souvent coupables
  48. 48. @LoukilAymen #tuniseo Bloquer les ressources externes
  49. 49. @LoukilAymen #tuniseo https://developers.google.com Comparer avec / sans
  50. 50. @LoukilAymen #tuniseo Le pire scénario ? “Scripts externes bloquants et indisponibles”
  51. 51. @LoukilAymen #tuniseo Caesium : https://saerasoft.com/caesium/ 25% d’une image est inutile (HTTPArchive) Compressez les images ! Essayez les nouveaux formats : JPEG 2000, JPEG XR, et WebP
  52. 52. @LoukilAymen #tuniseo Donner en priorité ce qui est nécessaire au-dessus de la ligne de flottaison Prioriser le chargement
  53. 53. @LoukilAymen #tuniseo Faire l’inventaire des script https://www.webpagetest.org/ Prioriser le chargement
  54. 54. @LoukilAymen #tuniseo 1 Kg de fer Vs 1 Kg de coton
  55. 55. @LoukilAymen #tuniseo JavaScript le plus coûteux 38 fois plus couteux qu’un JPEG
  56. 56. @LoukilAymen #tuniseo Bienveillance envers vos users JavaScript Notre User
  57. 57. @LoukilAymen #tuniseo Charger les ressources intelligemment Scripts essentiels Scripts non essentiels
  58. 58. @LoukilAymen #tuniseo Quel est l’élément héro de la page ?
  59. 59. @LoukilAymen #tuniseo Quel est l’élément héro de la page ?
  60. 60. @LoukilAymen #tuniseo 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 Prioriser le CSS critique
  61. 61. @LoukilAymen #tuniseo DNS prefetch : accélérer la résolution
  62. 62. @LoukilAymen #tuniseo https://w3c.github.io/resource-hints/ Preload : Ressource prioritaire
  63. 63. @LoukilAymen #tuniseo Gain de -30% sur le TTI Prefetch : Page suivante
  64. 64. @LoukilAymen #tuniseo Quelle est la page suivante ?
  65. 65. @LoukilAymen #tuniseo https://github.com/SamKnows/futurelink Prédire la page suivante
  66. 66. @LoukilAymen #tuniseo HTTP/1.1 HTTP/2 Open Close Open Close T T Passez en HTTP/2
  67. 67. @LoukilAymen #tuniseo Charger les fonts autrement https://www.fasterize.com/fr/blog/nos-optimisations-webperf-dediees-aux-fonts/
  68. 68. @LoukilAymen #tuniseo @font-face { font-family: 'Saira Condensed'; src: url(fonts/sairacondensed.woff2) format('woff2'); font-display: swap; } Charger les fonts autrement
  69. 69. @LoukilAymen #tuniseo Ce qui compte le plus c’est la perception de l’utilisateur
  70. 70. @LoukilAymen #tuniseo Etat actif / passif
  71. 71. @LoukilAymen #tuniseo L’être humain surestime le temps passif par 40% ! Richard Larson, MIT
  72. 72. @LoukilAymen #tuniseo Loader si >1.5s
  73. 73. @LoukilAymen #tuniseo Animées : +6% plus rapide Animées et accélérées : +12% plus rapide Barres de progression
  74. 74. @LoukilAymen #tuniseo http://chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf Lecture : Faster progress bars
  75. 75. @LoukilAymen #tuniseo onmousedown VS onclick onmousedown : gain de150ms
  76. 76. @LoukilAymen #tuniseo Take aways pour une meilleure performance web • Culture de performance (Équipes multi skills, #perfmatters) • Less is more • Chargement intelligent des scripts (preload, async, defer) • Prioriser le CSS critique • Auditer les ressources externes • Chargement intelligent des fonts (Font-display) • Mettre en cache les éléments statiques • Viser 30% d’amélioration !
  77. 77. @LoukilAymen #tuniseo Bonne Perf ! Merci https://www.aymen-loukil.com
  78. 78. tuniseo.tn

×