Présentation de Page Speed au GDG de Nantes
Upcoming SlideShare
Loading in...5
×
 

Présentation de Page Speed au GDG de Nantes

on

  • 597 views

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é client

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é client

Statistics

Views

Total Views
597
Views on SlideShare
597
Embed Views
0

Actions

Likes
1
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Présentation de Page Speed au GDG de Nantes Présentation de Page Speed au GDG de Nantes Presentation Transcript

  • @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 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 Gains coût +1% sales +20% pages seen Coût Charles optimisation 8mercredi 18 septembre 13
  • @cfalguiere Page Speed YSlow 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 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 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é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 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 à 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 15mercredi 18 septembre 13
  • @cfalguiere best practices PNG 1 Ko PNG ? JPG aplati ? 16mercredi 18 septembre 13
  • @cfalguiere best practices PNG 1 Ko PNG 60 Ko JPG aplati 6 Ko 17mercredi 18 septembre 13
  • @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/ 18mercredi 18 septembre 13
  • @cfalguiere Site Page Speed Insights Online diagnostic Page 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
  • @cfalguiere Charles 24mercredi 18 septembre 13
  • @cfalguiere Page Speed Insights Online 25mercredi 18 septembre 13
  • @cfalguiereYSlow 26mercredi 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-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" 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 Navigateur Extension Page Chrome Firefox 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
  • @cfalguiere 35mercredi 18 septembre 13
  • @cfalguiere Site Page Speed Module et Optimisation Page Speed Insights Service Page Navigateur Page 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 Module et Optimisation Navigateur Page Page Page Speed Optimization Module Server Web Apache Nginx 39mercredi 18 septembre 13
  • @cfalguiere Claude Falguière @cfalguieregoo.gl/4mmJQ Merci 40mercredi 18 septembre 13