Download - Présentation de Page Speed au GDG de Nantes
![Page 1: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/1.jpg)
@cfalguiere
performance
goo.gl/4mmJQ
Google Page Speed
Claude Falguière @cfalguiere
GDG Nantes 19 Septembre
1mercredi 18 septembre 13
![Page 2: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/2.jpg)
@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
![Page 3: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/3.jpg)
@cfalguiere
cv
cv
cv
cv
cv
cv
cvSteve
performance
3mercredi 18 septembre 13
![Page 4: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/4.jpg)
@cfalguiere
vitesse
ou efficacité
ou capacité
objectif
Charles
4mercredi 18 septembre 13
![Page 5: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/5.jpg)
@cfalguiere
impression cohérence stabilité
Bob Alice
user experience
5mercredi 18 septembre 13
![Page 6: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/6.jpg)
@cfalguiere
Amazon :+100 ms -1% sales
Google : +500 ms –20% pages seen
Bob Alice
user experience
6mercredi 18 septembre 13
![Page 7: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/7.jpg)
@cfalguiere
0,5s 1s 2s 6s 8s
AttenteIdéal
Bob Alice
user experience
7mercredi 18 septembre 13
![Page 8: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/8.jpg)
@cfalguiere
Gainscoût
+1% sales+20% pages seen
Coût
Charles
optimisation
8mercredi 18 septembre 13
![Page 9: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/9.jpg)
@cfalguiere
Page SpeedYSlow
Log Apache
6s
identifier la cause
Profilage
Profilage
Profilage
9mercredi 18 septembre 13
![Page 10: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/10.jpg)
@cfalguiere
Locks
Capacité
Processus
identifier la cause
10mercredi 18 septembre 13
![Page 11: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/11.jpg)
@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
![Page 12: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/12.jpg)
@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
![Page 13: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/13.jpg)
@cfalguiere
source page speed
latence
13mercredi 18 septembre 13
![Page 14: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/14.jpg)
@cfalguiere
volume
répétition fractionnement
algorithmes
14mercredi 18 septembre 13
![Page 15: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/15.jpg)
@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
![Page 16: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/16.jpg)
@cfalguiere
best practices
PNG1 Ko
PNG?
JPGaplati
?
PNG?
16mercredi 18 septembre 13
![Page 17: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/17.jpg)
@cfalguiere
best practices
PNG1 Ko
PNG60 Ko
JPG aplati6 Ko
17mercredi 18 septembre 13
![Page 18: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/18.jpg)
@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
![Page 19: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/19.jpg)
@cfalguiere
Site
Page Speed Insights Online
diagnosticPage
Navigateur
diagnostic
Page Speed Insights Online
19mercredi 18 septembre 13
![Page 20: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/20.jpg)
@cfalguiere
Page Speed Insights Online
http://developers.google.com/speed/pagespeed/insights/
20mercredi 18 septembre 13
![Page 21: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/21.jpg)
@cfalguiere
Page Speed Insights Online
21mercredi 18 septembre 13
![Page 22: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/22.jpg)
@cfalguiere
Page Speed Insights Online
22mercredi 18 septembre 13
![Page 23: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/23.jpg)
@cfalguiere
Above the fold
23mercredi 18 septembre 13
![Page 24: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/24.jpg)
@cfalguiereCharles
24mercredi 18 septembre 13
![Page 25: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/25.jpg)
@cfalguiere
Page Speed Insights Online
25mercredi 18 septembre 13
![Page 26: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/26.jpg)
@cfalguiereYSlow26mercredi 18 septembre 13
![Page 27: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/27.jpg)
@cfalguiere
Page Speed Insights Online
9,4 Ko (19% reduction)
1,2 Ko (64% reduction)
27mercredi 18 septembre 13
![Page 28: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/28.jpg)
@cfalguiere
Site
Page Speed Insights Online
diagnostic
Page
diagnostic
Page Speed Insights API
Script
28mercredi 18 septembre 13
![Page 29: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/29.jpg)
@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
![Page 30: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/30.jpg)
@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
![Page 31: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/31.jpg)
@cfalguiere
Page Speed Insights
NavigateurExtension
Page
ChromeFirefox
Page Speed Insight
Site
diagnostic
Page
31mercredi 18 septembre 13
![Page 32: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/32.jpg)
@cfalguiere
Page Speed Insights Extension
https://developers.google.com/speed/pagespeed/insights_extensions
32mercredi 18 septembre 13
![Page 33: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/33.jpg)
@cfalguiere
Page Speed Insights Extension
33mercredi 18 septembre 13
![Page 34: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/34.jpg)
@cfalguiere
Page Speed Insights Extension
25,4 Ko (réduction de 25%)
12,3 Ko (réduction de 36%)
34mercredi 18 septembre 13
![Page 35: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/35.jpg)
@cfalguiere35mercredi 18 septembre 13
![Page 36: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/36.jpg)
@cfalguiere
Site
Page Speed Moduleet Optimisation
Page Speed Insights Service
Page
NavigateurPage Page
Page Speed Optimization Service
Module
36mercredi 18 septembre 13
![Page 37: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/37.jpg)
@cfalguiere
http://www.webpagetest.org/compare
Page Speed Optimization Service
37mercredi 18 septembre 13
![Page 38: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/38.jpg)
@cfalguiere
Page Speed Optimization Service
U.S.
Europe.
8,4s 3,9s
4,7s 3,8s
38mercredi 18 septembre 13
![Page 39: Présentation de Page Speed au GDG de Nantes](https://reader033.vdocument.in/reader033/viewer/2022052907/558e68011a28ab87218b4790/html5/thumbnails/39.jpg)
@cfalguiere
SiteModule
Page Speed Moduleet Optimisation
NavigateurPage
Page
Page Speed Optimization Module
Server WebApacheNginx
39mercredi 18 septembre 13