présentation de page speed au gdg de nantes
DESCRIPTION
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é clientTRANSCRIPT
@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