Post on 27-Jun-2015
description
@cfalguiere
performance
goo.gl/4mmJQ
Google Page Speed
Claude Falguière @cfalguiere
GDG Nantes 19 Septembre
1mercredi 18 septembre 13
@cfalguiere
http://cfalguiere.wordpress.com@cfalguiere+Claude Falguiere
Claude FalguièreArchitecte Technique Valtech
Membre du Paris JUGJUG Leader Duchess FranceLeader Devoxx4Kids-FR
2mercredi 18 septembre 13
@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
Gainscoût
+1% sales+20% pages seen
Coût
Charles
optimisation
8mercredi 18 septembre 13
@cfalguiere
Page SpeedYSlow
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
S3Quad-core 1.4GHz1Go
iPhone5Dual-core 1.02GHz1Go
MacBookAir Dual-Core i5 1,7 GHz4 Go
BureautiqueCore i3 3GHz2 / 4 Go
iPhone4800 MHz512 Mo
HTC desire1 GHz576 Mo
S4Quad-core 1.9GHz2Go
capacité mémoire et CPU
11mercredi 18 septembre 13
@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éelsautour de 15 Mbit/s théorique
10 à 25 Mbit/s réelsautour de 50 Mbit/s théorique
> 500 Mbits
Image FrameworkMusique
2 Mo 16 Mbps
75 ms500 ms2,5 s
150 Ko1 Mo 5 Mo
3 Mo 24 Mbps
48 ms300 ms 1,5 s
12 Mo 96 Mbps
12 ms80 ms 400 ms
capacité réseau
12mercredi 18 septembre 13
@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 à transporterconfiguration du cache et des eTags / compressiontaille des images / crunchingminification des CSS et Javascript / filtrage{
Réduire le nombre de requêtessprites CSSlibrairies en bundle
Réduire les opérations consommatrices ou différables
Optimiser le serveur
best practices
15mercredi 18 septembre 13
@cfalguiere
best practices
PNG1 Ko
PNG?
JPGaplati
?
PNG?
16mercredi 18 septembre 13
@cfalguiere
best practices
PNG1 Ko
PNG60 Ko
JPG aplati6 Ko
17mercredi 18 septembre 13
@cfalguiere
Page Speed
Extension pour Chrome et Firefox
Module web serverpour Apache/Nginx
Insights Online
Insights Optimization
Page Speed Server
Insights API Optimization API
https://developers.google.com/speed/pagespeed/
18mercredi 18 septembre 13
@cfalguiere
Site
Page Speed Insights Online
diagnosticPage
Navigateur
diagnostic
Page Speed Insights Online
19mercredi 18 septembre 13
@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
@cfalguiereCharles
24mercredi 18 septembre 13
@cfalguiere
Page Speed Insights Online
25mercredi 18 septembre 13
@cfalguiereYSlow26mercredi 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 septembre 13
@cfalguiere
Requiert une API key (via la Google API console)
Information transmise
Score : valeur entre 0-100Rule : par exemple download size ou client-server-round-trip timesRule Result : suggestion produite, par exemple activer la compressionRule 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
@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
@cfalguiere
Page Speed Insights
NavigateurExtension
Page
ChromeFirefox
Page Speed Insight
Site
diagnostic
Page
31mercredi 18 septembre 13
@cfalguiere
Page Speed Insights Extension
https://developers.google.com/speed/pagespeed/insights_extensions
32mercredi 18 septembre 13
@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
@cfalguiere35mercredi 18 septembre 13
@cfalguiere
Site
Page Speed Moduleet Optimisation
Page Speed Insights Service
Page
NavigateurPage Page
Page Speed Optimization Service
Module
36mercredi 18 septembre 13
@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 Moduleet Optimisation
NavigateurPage
Page
Page Speed Optimization Module
Server WebApacheNginx
39mercredi 18 septembre 13
@cfalguiere
Claude Falguière@cfalguieregoo.gl/4mmJQ
Merci
40mercredi 18 septembre 13