Présentation de Page Speed au GDG de Nantes

555
-1

Published on

Présentation de Page Speed au GDG de Nantes. Page Speed est un outil open source d'audit de performance des pages Web côté client

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
555
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Présentation de Page Speed au GDG de Nantes

  1. 1. @cfalguiere performance goo.gl/4mmJQ Google Page Speed Claude Falguière @cfalguiere GDG Nantes 19 Septembre 1mercredi 18 septembre 13
  2. 2. @cfalguiere http://cfalguiere.wordpress.com @cfalguiere +Claude Falguiere Claude Falguière Architecte Technique Valtech Membre du Paris JUG JUG Leader Duchess France Leader Devoxx4Kids-FR 2mercredi 18 septembre 13
  3. 3. @cfalguiere cv cv cv cv cv cv cvSteve performance 3mercredi 18 septembre 13
  4. 4. @cfalguiere vitesse ou efficacité ou capacité objectif Charles 4mercredi 18 septembre 13
  5. 5. @cfalguiere impression cohérence stabilité Bob Alice user experience 5mercredi 18 septembre 13
  6. 6. @cfalguiere Amazon : +100 ms -1% sales Google : +500 ms –20% pages seen Bob Alice user experience 6mercredi 18 septembre 13
  7. 7. @cfalguiere 0,5s 1s 2s 6s 8s AttenteIdéal Bob Alice user experience 7mercredi 18 septembre 13
  8. 8. @cfalguiere Gains coût +1% sales +20% pages seen Coût Charles optimisation 8mercredi 18 septembre 13
  9. 9. @cfalguiere Page Speed YSlow Log Apache 6s identifier la cause Profilage Profilage Profilage 9mercredi 18 septembre 13
  10. 10. @cfalguiere Locks Capacité Processus identifier la cause 10mercredi 18 septembre 13
  11. 11. @cfalguiere S3 Quad-core 1.4GHz 1Go iPhone5 Dual-core 1.02GHz 1Go MacBookAir Dual-Core i5 1,7 GHz 4 Go Bureautique Core i3 3GHz 2 / 4 Go iPhone4 800 MHz 512 Mo HTC desire 1 GHz 576 Mo S4 Quad-core 1.9GHz 2Go capacité mémoire et CPU 11mercredi 18 septembre 13
  12. 12. @cfalguiere 4G 1Gb à l’arrêt 100Mb en mouvement Réseau local filaire 1 Gbit/s 500 Mbit/s réels ADSL2+ WIFI 802.11.b WIFI 802.11.a / 802.11g 3G+ HSPA < 10 Mbit/s réels autour de 15 Mbit/s théorique 10 à 25 Mbit/s réels autour de 50 Mbit/s théorique > 500 Mbits Image Framework Musique 2 Mo 16 Mbps 75 ms 500 ms 2,5 s 150 Ko 1 Mo 5 Mo 3 Mo 24 Mbps 48 ms 300 ms 1,5 s 12 Mo 96 Mbps 12 ms 80 ms 400 ms capacité réseau 12mercredi 18 septembre 13
  13. 13. @cfalguiere source page speed latence 13mercredi 18 septembre 13
  14. 14. @cfalguiere volume répétition fractionnement algorithmes 14mercredi 18 septembre 13
  15. 15. @cfalguiere Permettre d’interagir le plus tôt possible JS et CSS non bloquants Réduire les volumes à transporter configuration du cache et des eTags / compression taille des images / crunching minification des CSS et Javascript / filtrage { Réduire le nombre de requêtes sprites CSS librairies en bundle Réduire les opérations consommatrices ou différables Optimiser le serveur best practices 15mercredi 18 septembre 13
  16. 16. @cfalguiere best practices PNG 1 Ko PNG ? JPG aplati ? 16mercredi 18 septembre 13
  17. 17. @cfalguiere best practices PNG 1 Ko PNG 60 Ko JPG aplati 6 Ko 17mercredi 18 septembre 13
  18. 18. @cfalguiere Page Speed Extension pour Chrome et Firefox Module web server pour Apache/Nginx Insights Online Insights Optimization Page Speed Server Insights API Optimization API https://developers.google.com/speed/pagespeed/ 18mercredi 18 septembre 13
  19. 19. @cfalguiere Site Page Speed Insights Online diagnostic Page Navigateur diagnostic Page Speed Insights Online 19mercredi 18 septembre 13
  20. 20. @cfalguiere Page Speed Insights Online http://developers.google.com/speed/pagespeed/insights/ 20mercredi 18 septembre 13
  21. 21. @cfalguiere Page Speed Insights Online 21mercredi 18 septembre 13
  22. 22. @cfalguiere Page Speed Insights Online 22mercredi 18 septembre 13
  23. 23. @cfalguiere Above the fold 23mercredi 18 septembre 13
  24. 24. @cfalguiere Charles 24mercredi 18 septembre 13
  25. 25. @cfalguiere Page Speed Insights Online 25mercredi 18 septembre 13
  26. 26. @cfalguiereYSlow 26mercredi 18 septembre 13
  27. 27. @cfalguiere Page Speed Insights Online 9,4 Ko (19% reduction) 1,2 Ko (64% reduction) 27mercredi 18 septembre 13
  28. 28. @cfalguiere Site Page Speed Insights Online diagnostic Page diagnostic Page Speed Insights API Script 28mercredi 18 septembre 13
  29. 29. @cfalguiere Requiert une API key (via la Google API console) Information transmise Score : valeur entre 0-100 Rule : par exemple download size ou client-server-round-trip times Rule Result : suggestion produite, par exemple activer la compression Rule Impact : par exemple le volume gagné par la compression $ curl "https://www.googleapis.com/pagespeedonline/v1/ runPagespeed?url=yourURL&key=yourAPIKey" Page Speed Insights API Exemple de requête Librairies client (Javascript, Python, Ruby, Java ...) 29mercredi 18 septembre 13
  30. 30. @cfalguiere {  "kind": "pagespeedonline#result",  "id": "/speed/pagespeed",  "responseCode": 200,  "title": "PageSpeed Home",  "score": 90,  "pageStats": {   "numberResources": 22,   "numberHosts": 7,   "totalRequestBytes": "2761",   "numberStaticResources": 16,   "htmlResponseBytes": "91981",   "cssResponseBytes": "37728",   "imageResponseBytes": "13909",   "javascriptResponseBytes": "247214",   "otherResponseBytes": "8804",   "numberJsResources": 6,   "numberCssResources": 2  }, ... Sample result ...  "formattedResults": {   "locale": "en_US",   "ruleResults": {    "AvoidBadRequests": {     "localizedRuleName": "Avoid bad requests",     "ruleScore": 100,     "ruleImpact": 0.0    },    ...    "MinifyJavaScript": {     "localizedRuleName": "Minify JavaScript",     "ruleScore": 97,     "ruleImpact": 0.1417,     "urlBlocks": [      {       "header": { ... Page Speed Insights API 30mercredi 18 septembre 13
  31. 31. @cfalguiere Page Speed Insights Navigateur Extension Page Chrome Firefox Page Speed Insight Site diagnostic Page 31mercredi 18 septembre 13
  32. 32. @cfalguiere Page Speed Insights Extension https://developers.google.com/speed/pagespeed/insights_extensions 32mercredi 18 septembre 13
  33. 33. @cfalguiere Page Speed Insights Extension 33mercredi 18 septembre 13
  34. 34. @cfalguiere Page Speed Insights Extension 25,4 Ko (réduction de 25%) 12,3 Ko (réduction de 36%) 34mercredi 18 septembre 13
  35. 35. @cfalguiere 35mercredi 18 septembre 13
  36. 36. @cfalguiere Site Page Speed Module et Optimisation Page Speed Insights Service Page Navigateur Page Page Page Speed Optimization Service Module 36mercredi 18 septembre 13
  37. 37. @cfalguiere http://www.webpagetest.org/compare Page Speed Optimization Service 37mercredi 18 septembre 13
  38. 38. @cfalguiere Page Speed Optimization Service U.S. Europe. 8,4s 3,9s 4,7s 3,8s 38mercredi 18 septembre 13
  39. 39. @cfalguiere SiteModule Page Speed Module et Optimisation Navigateur Page Page Page Speed Optimization Module Server Web Apache Nginx 39mercredi 18 septembre 13
  40. 40. @cfalguiere Claude Falguière @cfalguieregoo.gl/4mmJQ Merci 40mercredi 18 septembre 13

×