Présentation de Page Speed au GDG de Nantes

@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ère
Architecte Technique Valtech
Membre du Paris JUG
JUG Leader Duchess France
Leader Devoxx4Kids-FR

@cfalguiere
cv
cv
cv
cv
cv
cv
cvSteve
performance

@cfalguiere
vitesse
ou efﬁcacité
ou capacité
objectif
Charles

@cfalguiere
impression
cohérence
stabilité
Bob Alice
user experience

@cfalguiere
Amazon :
+100 ms
-1% sales
Google :
+500 ms
–20% pages seen
Bob Alice
user experience

@cfalguiere
0,5s 1s 2s 6s 8s
AttenteIdéal
Bob Alice
user experience

@cfalguiere
Gains
coût
+1% sales
+20% pages seen
Coût
Charles
optimisation

@cfalguiere
Page Speed
YSlow
Log Apache
6s
identiﬁer la cause
Profilage
Profilage
Profilage

@cfalguiere
Locks
Capacité
Processus
identiﬁer la cause

@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

@cfalguiere
4G
1Gb à l’arrêt
100Mb en mouvement
Réseau local ﬁlaire
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

@cfalguiere
source page speed
latence

@cfalguiere
volume
répétition
fractionnement
algorithmes

@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

@cfalguiere
best practices
PNG
1 Ko
PNG
?
JPG
aplati
?

@cfalguiere
best practices
PNG
1 Ko
PNG
60 Ko
JPG
aplati
6 Ko

@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/

@cfalguiere
Site
Page Speed
Insights Online
diagnostic
Page
Navigateur
diagnostic
Page Speed Insights Online

@cfalguiere
http://developers.google.com/speed/pagespeed/insights/

@cfalguiere

@cfalguiere
Above the fold

@cfalguiere
Charles

@cfalguiere

@cfalguiereYSlow

@cfalguiere
9,4 Ko (19% reduction)
1,2 Ko (64% reduction)

@cfalguiere
Site
Page Speed
Insights Online
diagnostic
Page
diagnostic
Page Speed Insights API
Script

@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"
Exemple de requête
Librairies client (Javascript, Python, Ruby, Java ...)

@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": { ...

@cfalguiere
Page Speed
Insights
Navigateur
Extension
Page
Chrome
Firefox
Page Speed Insight
Site
diagnostic
Page

@cfalguiere
Page Speed Insights Extension
https://developers.google.com/speed/pagespeed/insights_extensions

@cfalguiere

@cfalguiere
25,4 Ko (réduction de 25%)
12,3 Ko (réduction de 36%)

@cfalguiere

@cfalguiere
Site
Page Speed Module
et Optimisation
Page Speed
Insights Service
Page
Navigateur
Page Page
Page Speed Optimization Service
Module

@cfalguiere
http://www.webpagetest.org/compare

@cfalguiere
U.S.
Europe.
8,4s 3,9s
4,7s 3,8s

@cfalguiere
SiteModule
Page Speed Module
et Optimisation
Navigateur
Page
Page
Page Speed Optimization Module
Server Web
Apache
Nginx

@cfalguiere
Claude Falguière
@cfalguieregoo.gl/4mmJQ
Merci

Présentation de Page Speed au GDG de Nantes

Recomendados

Recomendados

Más contenido relacionado

Similar a Présentation de Page Speed au GDG de Nantes

Similar a Présentation de Page Speed au GDG de Nantes (20)

Más de Claude Falguiere

Más de Claude Falguiere (20)

Présentation de Page Speed au GDG de Nantes