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

http://goo.gl/4mmJQ

http://goo.gl/4mmJQ

@cfalguiere

http://cfalguiere.wordpress.com@cfalguiere+Claude Falguiere

Claude FalguièreArchitecte Technique Valtech

Membre du Paris JUGJUG Leader Duchess FranceLeader Devoxx4Kids-FR


https://github.com/cfalguiere/ClojureBigDataJugSummerCamp2012






@cfalguiere

cv

cv

cv

cv

cv

cv

cvSteve

performance


@cfalguiere

vitesse

ou efficacité

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

Gainscoût

+1% sales+20% pages seen

Coût

Charles

optimisation


@cfalguiere

Page SpeedYSlow

Log Apache

6s

identifier la cause

Profilage

Profilage

Profilage


@cfalguiere

Locks

Capacité

Processus

identifier la cause


@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


@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


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


@cfalguiere

best practices

PNG1 Ko

PNG?

JPGaplati

?

PNG?


@cfalguiere

best practices

PNG1 Ko

PNG60 Ko

JPG aplati6 Ko


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




@cfalguiere

Site

Page Speed Insights Online

diagnosticPage

Navigateur

diagnostic



@cfalguiere


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




@cfalguiere



@cfalguiere



@cfalguiere

Above the fold


@cfalguiereCharles


@cfalguiere



@cfalguiereYSlow26mercredi 18 septembre 13

@cfalguiere


9,4 Ko (19% reduction)

1,2 Ko (64% reduction)


@cfalguiere

Site


diagnostic

Page

diagnostic

Page Speed Insights API

Script


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


Exemple de requête

Librairies client (Javascript, Python, Ruby, Java ...)


https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=yourURL&key=yourAPIKey




@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

NavigateurExtension

Page

ChromeFirefox

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%)


@cfalguiere35mercredi 18 septembre 13

@cfalguiere

Site

Page Speed Moduleet Optimisation

Page Speed Insights Service

Page

NavigateurPage 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 Moduleet Optimisation

NavigateurPage

Page

Page Speed Optimization Module

Server WebApacheNginx


@cfalguiere

Claude Falguiè[email protected]/4mmJQ

Merci


http://goo.gl/4mmJQ

http://goo.gl/4mmJQ

Technology

Présentation de Page Speed au GDG de Nantes