@cfalguiere
performance
goo.gl/4mmJQ
Google Page
Speed
Claude Falguière
@cfalguiere
GDG Nantes
19 Septembre
1mercredi 18 s...
@cfalguiere
http://cfalguiere.wordpress.com
@cfalguiere
+Claude Falguiere
Claude Falguière
Architecte Technique Valtech
Me...
@cfalguiere
cv
cv
cv
cv
cv
cv
cvSteve
performance
3mercredi 18 septembre 13
@cfalguiere
vitesse
ou efficacité
ou capacité
objectif
Charles
4mercredi 18 septembre 13
@cfalguiere
impression
cohérence
stabilité
Bob Alice
user experience
5mercredi 18 septembre 13
@cfalguiere
Amazon :
+100 ms
-1% sales
Google :
+500 ms
–20% pages seen
Bob Alice
user experience
6mercredi 18 septembre 13
@cfalguiere
0,5s 1s 2s 6s 8s
AttenteIdéal
Bob Alice
user experience
7mercredi 18 septembre 13
@cfalguiere
Gains
coût
+1% sales
+20% pages seen
Coût
Charles
optimisation
8mercredi 18 septembre 13
@cfalguiere
Page Speed
YSlow
Log Apache
6s
identifier la cause
Profilage
Profilage
Profilage
9mercredi 18 septembre 13
@cfalguiere
Locks
Capacité
Processus
identifier la cause
10mercredi 18 septembre 13
@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...
@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 80...
@cfalguiere
source page speed
latence
13mercredi 18 septembre 13
@cfalguiere
volume
répétition
fractionnement
algorithmes
14mercredi 18 septembre 13
@cfalguiere
Permettre d’interagir le plus tôt possible
JS et CSS non bloquants
Réduire les volumes à transporter
configura...
@cfalguiere
best practices
PNG
1 Ko
PNG
?
JPG
aplati
?
16mercredi 18 septembre 13
@cfalguiere
best practices
PNG
1 Ko
PNG
60 Ko
JPG
aplati
6 Ko
17mercredi 18 septembre 13
@cfalguiere
Page Speed
Extension
pour Chrome et Firefox
Module web server
pour Apache/Nginx
Insights Online
Insights Optim...
@cfalguiere
Site
Page Speed
Insights Online
diagnostic
Page
Navigateur
diagnostic
Page Speed Insights Online
19mercredi 18...
@cfalguiere
Page Speed Insights Online
http://developers.google.com/speed/pagespeed/insights/
20mercredi 18 septembre 13
@cfalguiere
Page Speed Insights Online
21mercredi 18 septembre 13
@cfalguiere
Page Speed Insights Online
22mercredi 18 septembre 13
@cfalguiere
Above the fold
23mercredi 18 septembre 13
@cfalguiere
Charles
24mercredi 18 septembre 13
@cfalguiere
Page Speed Insights Online
25mercredi 18 septembre 13
@cfalguiereYSlow
26mercredi 18 septembre 13
@cfalguiere
Page Speed Insights Online
9,4 Ko (19% reduction)
1,2 Ko (64% reduction)
27mercredi 18 septembre 13
@cfalguiere
Site
Page Speed
Insights Online
diagnostic
Page
diagnostic
Page Speed Insights API
Script
28mercredi 18 septem...
@cfalguiere
Requiert une API key (via la Google API console)
Information transmise
Score : valeur entre 0-100
Rule : par e...
@cfalguiere
{
 "kind": "pagespeedonline#result",
 "id": "/speed/pagespeed",
 "responseCode": 200,
 "title": "PageSpeed Hom...
@cfalguiere
Page Speed
Insights
Navigateur
Extension
Page
Chrome
Firefox
Page Speed Insight
Site
diagnostic
Page
31mercred...
@cfalguiere
Page Speed Insights Extension
https://developers.google.com/speed/pagespeed/insights_extensions
32mercredi 18 ...
@cfalguiere
Page Speed Insights Extension
33mercredi 18 septembre 13
@cfalguiere
Page Speed Insights Extension
25,4 Ko (réduction de 25%)
12,3 Ko (réduction de 36%)
34mercredi 18 septembre 13
@cfalguiere
35mercredi 18 septembre 13
@cfalguiere
Site
Page Speed Module
et Optimisation
Page Speed
Insights Service
Page
Navigateur
Page Page
Page Speed Optimi...
@cfalguiere
http://www.webpagetest.org/compare
Page Speed Optimization Service
37mercredi 18 septembre 13
@cfalguiere
Page Speed Optimization Service
U.S.
Europe.
8,4s 3,9s
4,7s 3,8s
38mercredi 18 septembre 13
@cfalguiere
SiteModule
Page Speed Module
et Optimisation
Navigateur
Page
Page
Page Speed Optimization Module
Server Web
Ap...
@cfalguiere
Claude Falguière
@cfalguieregoo.gl/4mmJQ
Merci
40mercredi 18 septembre 13
Prochain SlideShare
Chargement dans…5
×

Présentation de Page Speed au GDG de Nantes

887 vues

Publié le

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

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
887
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×