Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Améliorez la vitesse de
chargement
Surpassez vos concurrents !
Aymen Loukil#webisland
@LoukilAymen #webisland
UX ?
SEO ?
Technique ?
Marketing ?
Conversion ?
Business ?
C’est quoi la performance web ?
@LoukilAymen #webisland
La performance est La fonctionnalité
@LoukilAymen #webisland
Programme
● Pourquoi c’est important
● On optimise pour qui ?
● Métriques et objectifs
● Comment y...
Aymen Loukil
#TechnicalSEO #entrepreneur #speaker #ex-dev
Consultant SEO International
https://www.aymen-loukil.com @Louki...
@LoukilAymen #webisland
Un internaute, perd en moyenne 2 jours
d’attente par an..
@LoukilAymen #webisland
Le web est lent ?
“50% des sites mettent 13s à charger et être utilisables”
2
pit stops
F1
@LoukilAymen #webisland
WEB STRESS
@LoukilAymen #webisland
Attente = frustration
0 100ms
300ms
1000ms 10.000msSmooth Petit délai Tâche
normale
Perte de
focus...
@LoukilAymen #webisland
La lenteur est pire que l’indisponibilité..
@LoukilAymen #webisland
Time is Money
+ 500ms => -25% searches
-100ms => +1% revenue
@LoukilAymen #webisland
On optimise pour qui ?
A partir de 25 ans, notre capacité d’utiliser le web baisse de 0,8% /an
@LoukilAymen #webisland
Quelles connexions ?
France 14 Mbps
Denmark 24.41 Mbps
Japan 22 Mbps
Belgique 20 Mbps
Suisse 18.5 ...
@LoukilAymen #webisland
Quelles ressources matérielles ?
https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99...
@LoukilAymen #webisland
Métriques et objectifs
https://developers.google.com/
ça arrive ?
c’est utile ?
c’est utilisable ?
@LoukilAymen #webisland
Weber-Fechner Law : (+-) 20% imperceptible
@LoukilAymen #webisland
Visez 30% d’amélioration !
Exemple : 3 secondes X 0.3 = 0.9 Secondes à gagner
Avant une MEP, si on...
@LoukilAymen #webisland
Et par rapport à la concurrence ?
1. Être égal /meilleur ?
2. Faire au moins, moins bien de 20%
@LoukilAymen #webisland
Comment mesurer la performance ?
Synthétique
- Lab
- Dev, debug
- QA SEO
Une part de la vérité, pe...
@LoukilAymen #webisland
Mesure synthétique
webpagetest.org
@LoukilAymen #webisland
Les métriques
webpagetest.org
@LoukilAymen #webisland
Comparer synthétiquement
webpagetest.org
@LoukilAymen #webisland
Comparer les métriques
webpagetest.org
@LoukilAymen #webisland
La console Chrome
@LoukilAymen #webisland
Network Throttling (simuler connexions lentes)
@LoukilAymen #webisland
Lighthouse - Outil de diagnostic
@LoukilAymen #webisland
Automatiser vos rapports
https://github.com/GoogleChrome/lighthouse
$ npm install -g lighthouse
$ ...
@LoukilAymen #webisland
Automatiser avec Puppeteer
https://github.com/GoogleChromeLabs/puppeteer-examples
@LoukilAymen #webisland
RUM : Real User Measurement
@LoukilAymen #webisland
RUM : Real User Measurement
@LoukilAymen #webisland
Je vais demander à mes concurrents un accès GA
@LoukilAymen #webisland
Mes concurrents sont ils plus
rapides ?
@LoukilAymen #webisland
On va explorer la RUM publique
https://beta.httparchive.org/
https://developers.google.com/web/too...
@LoukilAymen #webisland
Proportions par type de connexion
Benchmarker, comparer !
@LoukilAymen #webisland
Proportions par type de support
Mieux connaître..
@LoukilAymen #webisland
Distribution FCP par support
Comment ça se passe par support
@LoukilAymen #webisland
Distribution FCP par support
@rick_viscomi
@LoukilAymen #webisland
Densité des utilisateurs avec FCP < 1s
Métriques, exigences différentes..
@LoukilAymen #webisland
Comparer l’évolution du FCP
Historiser, suivre..
@LoukilAymen #webisland
Suivre ces métriques dans le temps
Etude sites e-commerce : https://www.aymen-loukil.com/blog/top-...
@LoukilAymen #webisland
Requêtes Google BigQuery
Récupérez les requêtes ici
https://github.com/AymenLoukil/Chrome-user-exp...
@LoukilAymen #webisland
SpeedInsight intègre la RUM
@LoukilAymen #webisland
Scorecard speed
https://www.thinkwithgoogle.com/feature/mobile/
@LoukilAymen #webisland
Speed impact calculator
https://www.thinkwithgoogle.com/feature/mobile/
@LoukilAymen #webisland
Mesure de performance
● Corréler les métriques perf IT avec métrique perf business
● Enrichir synt...
@LoukilAymen #webisland
Comment y arriver ?
@LoukilAymen #webisland
Chargement d’une page web
Parse Compile ExecuteDownload
Réseau Matériel (processeur, mémoire)
@LoukilAymen #webisland
@LoukilAymen #webisland
@LoukilAymen #webisland
@LoukilAymen #webisland
@LoukilAymen #webisland
Faire plus light, plus rapide
http://vanilla-js.com/
@LoukilAymen #webisland
Coverage : code non utilisé
50% du code
n’est pas utilisé
[1.4MB potentiel
à gagner]*
ctrl+shift+p...
@LoukilAymen #webisland
Sur wordpress regarder :
wp_enqueue_script()
wp_enqueue_style()
Splitter le code
Juste ce qu’il fa...
@LoukilAymen #webisland
Les scripts externes ? [3rd party]
Third party badges
@LoukilAymen #webisland
Bloquer le chargement d’une ressource
@LoukilAymen #webisland
Top des 3rd party scripts [http archive]
@LoukilAymen #webisland
Comparer avec et sans 3rd party
https://developers.google.com
Les scripts externes [non maitrisés]...
@LoukilAymen #webisland
Optimiser le chemin critique
Donner en priorité ce qui est nécessaire au premier print et la ligne...
@LoukilAymen #webisland
Les ressources chargées avant le rendu
Faire l’inventaire des script
https://www.webpagetest.org/
@LoukilAymen #webisland
Javascript est une ressource bloquante
@LoukilAymen #webisland
Quel est l’élément héro
de la page ?
@LoukilAymen #webisland
@LoukilAymen #webisland
Prioriser le CSS critique
1. Installer CasperJS : http://casperjs.org/ (Node.js)
2. Télécharger ce...
@LoukilAymen #webisland
Utilisez les “Resource Hints” : preload
https://w3c.github.io/resource-hints/
@LoukilAymen #webisland
rel=”prefetch”
Gain de -30% sur le TTI
@LoukilAymen #webisland
Quelle serait la next page ?
@LoukilAymen #webisland
Prédire la next page
https://github.com/SamKnows/futurelink
@LoukilAymen #webisland
DNS-prefetch
@LoukilAymen #webisland
Passez en HTTP/2
HTTP/1.1 HTTP/2
Open
Close
Open
Close
T T
Avantages
● Multiplexage
● Compression ...
@LoukilAymen #webisland
Network API
@LoukilAymen #webisland
Adapter par rapport à la connexion
Compression Gzip
+ Réduit la taille des ressources
transmises
- Peut engendrer un surcoût
(TTFB)
https://varvy.com/pagespe...
Cache navigateur (static resources)
+ Réduit le nombre de
ressources à partir
de la deuxième
visite
Facebook a économisé 6...
@LoukilAymen #webisland
Compression d’images
Caesium :
https://saerasoft.com/caesium/
- Choisir le pourcentage de compress...
@LoukilAymen #webisland
Font-display
@font-face {
font-family: 'Saira Condensed';
src: url(fonts/sairacondensed.woff2) for...
@LoukilAymen #webisland
Font-display
https://font-display.glitch.me/
J’ai un gros.. TTFB
TTFB : Time To First Byte (octet)
Deux raisons possibles :
1- Serveur lent ?
Tester en http://localhos...
@LoukilAymen #webisland
Et à la fin, ce qui compte
c’est comment on le sent..
#perception
@LoukilAymen #webisland
Actif Vs Passif
@LoukilAymen #webisland
L’être humain sur estime
le temps passif paer 40% !
Richard Larson
@LoukilAymen #webisland
Loader si une action prend > 1.5s
@LoukilAymen #webisland
Barres de progressions
Animées : +6% plus
rapide
Animées et
accélérées :
+12% plus rapide
@LoukilAymen #webisland
Lecture : Faster Progress Bars
http://chrisharrison.net/projects/progressbars2/ProgressBarsHarriso...
@LoukilAymen #webisland
On va tricher !
onmousedown VS onclick
onmousedown peut nous faire gagner 150ms
@LoukilAymen #webisland
Bonnes pratiques de performance 2018
Ressources critiques en premier
Moins de javaScript
Moins de ...
@LoukilAymen #webisland
Bonne optimisation !
https://www.aymen-loukil.com
Nächste SlideShare
Wird geladen in …5
×

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

434 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Marketing
  • Als Erste(r) kommentieren

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

×