Pagespeed what, why, and how it works


Published on

1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Pagespeed what, why, and how it works

  1. 1. PageSpeedWebRTCjust in time performance optimization for the webIlya Grigorik Make The Web Fast
  2. 2. If you care about performance, then...● Automatic Image Compression & Resizing● Minify CSS, JavaScript and HTML● Inline small images, CSS, and JavaScript● Cache Extension● Defer JavaScript● CSS/JavaScript Combining● Domain Mapping The vast majority of web performance optimizations● Domain Sharding are well defined and understood rules, which can● ... (read, should) be automated.
  3. 3. Why aren’t all web-sites fast? SPEED EASE OF MAINTENANCE Inlined / sprites / minified resources Simple development & deployment flow Long cache lifetimes Ability to rapidly deploy changes to users Exploit features in modern browsers Support all browsers Track latest WPO techniques Focus on content Use automated tools! If it can be automated, it should be. Performance optimization is no different. By removing the burden from the team, you also enable a wider range of dynamic optimization.
  4. 4. PageSpeed Optimization Libraries (PSOL)Browser extensions PageSpeed Service Apache Online tool mod_pagespeed NginxProduct integrations ngx_pagespeed API + 3rd Party 3rd Party
  5. 5. PageSpeed Insights ● Help developers understand why their pages are slow and how AdSense to make their pages faster ● Increase awareness of web performance via integrations with Insights for Firefox Google properties and open source solutions Insights for Chrome Insights Online WebPagetest, Gomez, others
  6. 6. Performance "linter" in the browser
  7. 7. PageSpeed Insights API require net/https require json uri = URI.parse( ) http =, uri.port) http.use_ssl = true params = { :key => API KEY, :url =>, :strategy => desktop, :rules => ... } uri.query = URI.encode_www_form(params) req = res = http.request(req) jj JSON.parse(res.body) WebPageTest, Gomez, Neustar Webmetrics, ShowSlow, GTMetrix, WordPress, ... your monitoring app, etc.
  8. 8. If we can tell you what to optimizeand how... cant we just optimize itfor you?Yep.. we can!
  9. 9. PageSpeed Optimization Libraries (PSOL)Browser extensions PageSpeed Service Apache Online tool mod_pagespeed NginxProduct integrations ngx_pagespeed API + 3rd Party 3rd Party
  10. 10. mod_pagespeed === performance JIT + mod_pagespeed is an open-source Apache module, developed and maintained by Google, which automatically rewrites and optimizes your web-pages and associated assets on the page. ● 40+ optimization filters ● highly configurable ● single server and cluster friendly ● CDN and cache friendly
  11. 11. mod_pagespeed adoption 1.0 Launch● 200K+ mod_pagespeed installs EdgeCast● Growing list of partners Dreamhost Go Daddy
  12. 12. mod_pagespeed in action Case Studies
  13. 13. CDNs & Front End Optimization (FEO)Edgecast & mod_pagespeed CloudFront & Strangeloop Akamai & Blaze Aqua Ion Cloudfront Torbit EdgeCast Networks makes the web faster with Google’s mod_pagespeed
  14. 14. mod_pagespeed in actiona hands-on example...
  15. 15. mod_pagespeed in action Video link Side-by-side comparison of the page load time improvements with mod_pagespeed enabled on the site. mod_pagespeed highlights: ● bandwidth savings through on- the-fly image (re)compression ● cache extension for improved CDN performance ● improved render and first paint times through asset re-ordering and optimization
  16. 16. The shrinking waterfallmod_pagespeed OFF mod_pagespeed ON Same site, with respective waterfalls before and after mod_pagespeed optimization. With mod_pagespeed on, the number of requests is reduced, as well as the overall size of the page, yielding a significant improvement in render and page load times.
  17. 17. How does it work?Lets peek under the hood...
  18. 18. "PageSpeed Optimization Libraries (PSOL) are a set of C++classes that automatically optimize web pages and resourcesthey use, using a server-independent framework."
  19. 19. Apache + PSOL = mod_pageseed 1.xOpen source Apache module, launched as beta in November, 2010. ● 40+ Rewriters ○ core filters + optional filters ● Global + VHost configuration ● Configurable resource fetching (cross-domain, etc) ● A/B testing ● Apache 2.2, 2.4+ ● .deb and .rpm installers, or build from source ● Stable and beta release channels
  20. 20. Core and Optional filtersmod_pagespeed ships with a default, safe set of rewriting filters: ● extensively tested and optimized to ensure that they can be enabled, safely, on any site ○ ex: rewrite css, rewrite javascript, combine css, rewrite images, extend cache, and others.Optional filters must be enabled by the site owner, and requireadditional testing: ● large number of optional filters, examples: Every site has full control over which filters are applied, and ○ ability to configure image recompression levels mod_pagespeed can be configured ○ image inlining, defer javascript, combine javascript via all the usual Apache ○ and many others mechanisms.
  21. 21. Things you dont need to do... *● Change your content generation workflow● Change your CSS / JS / HTML or other markup● Run manual compression or add build steps● ...* when using mod_pagespeed
  22. 22. Example filtersLets peek (deeper) under the hood...
  23. 23. Example filter: HTML Collapse Whitespaceclass CollapseWhitespace : public RewriteFilter { virtual void Characters(HtmlCharactersNode* node) Same site, with respective if node is not in PRE tag waterfalls before and after replace contents matching "[ nt]*" with " " mod_pagespeed optimization. With mod_pagespeed on, the} number of requests is reduced, as well as the overall size of the page, yielding a significant improvement<body> in render and page load times. <body> Whitespace is collapsed Whitespace is collapsed in general. in general. <pre> <pre> But not in a But not in a &lt;pre&gt; tag. &lt;pre&gt; tag. </pre> </pre> </body> </body>
  24. 24. Example: Combining multiple CSS files <link rel="stylesheet" type="text/css" href="styles/yellow.css”> <link rel="stylesheet" type="text/css" href="styles/blue.css"> <link rel="stylesheet" type="text/css" href="styles/big.css"> <link rel="stylesheet" type="text/css" href="styles/bold.css"> <div class="blue yellow big bold">Hello, mod_pagespeed!</div>Combined file Served with 1-year TTLMakes CDNs more effective md5 sum of combined CSS file <link rel="stylesheet" type="text/css" href="styles/”> <div class="blue yellow big bold">Hello, mod_pagespeed!</div>
  25. 25. Example Filter: Image Rewrite class RewriteImages : public RewriteFilter { virtual void StartElement(HtmlElement* element) { if element is IMG and has SRC attribute Lookup SRC+WIDTH+HEIGHT in metadata cache HIT: rewrite SRC attribute with optimized image EXPIRED: Fetch image in background & compute md5 sum CHANGED: Re-optimize in background & save STILL THE SAME: Freshen metadata cache MISS: Fetch image & optimize image in background Synthesize optimized URL with content md5 Store result in metadata cache with expiration
  26. 26. mod_pagespeed integration into Apache httpd Input Filter Apache HTTP Core mod_pagespeedHTTP Input FilterRequest Input Filter PageSpeed Input Filter resource handler Resource Cache Fetcher PHP handler css/images/js Resource Optimization default handler html Finite State Machine (file system) Output Filter PageSpeed Filter Output Filter HTML PageSpeed Filter mod_pagespeed Output Filter Optimized HTML PageSpeed Filter Output Filter HTTP Response
  27. 27. PageSpeed Optimization Library ArchitectureGeneral Purpose Rewriting Engine Infrastructure Server Interface HTTP Content Cache Rewriting Filters HTTP Resource Metadata Cache Management HTML Background HTTP Fetch HTTP Caching Parsing & URL Parsing and Resource & Header Rewriting Reconstruction Optimization Manipulation Framework Machine Threading System C++ STL libpng libjpeg libwebp zlib OpenCV Logging Chromium PageSpeed Insights SDK Google CSS Parser Configuration
  28. 28. nginx + PageSpeed: ngx_pagespeed Alpha ngx_pagespeed is an nginx port of mod_pagespeed, it is a work in progress, not yet ready for production, but progressing (very) quickly. The development is collaboration between Google, Taobao, and a number of external individual contributors. Project goal: ngx_pagespeed should have feature-parity with mod_pagespeed, and leverage the same PSOL infrastructure and optimization filters. Project on GitHub: Discussion group:!topic/ngx-pagespeed-discuss/
  29. 29. PageSpeed Service (Google Hosted) Your visitors PageSpeed Service Your server
  30. 30. PageSpeed Service (Google Hosted) 1. CNAME your www. to 2. Tell PSS where your origin server is located (ex, Your visitors 3. Visitors hit Google front-end a. PSS fetches content from origin, runs optimizations b. PSS serves the response to the userYour visitors are talking to Google servers: ● Low latency ● Traffic offload ● Global cache infrastructure PageSpeed Service ● PageSpeed rewriting and optimization ● Configurable rewriters ● Up-to-date, no maintenance ● DOS protection, etc, ...Oh, and all the PageSpeed optimizations!Status: private beta (invite only), launching in 2013! Your server
  31. 31. PageSpeed Service
  32. 32. Performance case studies...
  33. 33. PageSpeed Service Load-Time (sec) Speed Index Bytes In (Kb) Original 7.715 5241 1388 PSS Default 5.960 (-23%) 4492 (-14%) 920 (-34%) PSS Aggressive 5.529 (-28%) 3229 (-62%) 889 (-36%)
  34. 34. Try it yourself...
  35. 35. WordPress theme analysis● 820 kb median for premium themes!● 46 requests median● PageSpeed: ○ ~2x improvement in downloaded bytes ○ ~1.3 improvement in number of requests● 1.4 s first paint for premium themes ○ 2x improvement with aggressive PageSpeed● 2243 median Speed Index ○ 1.4x improvement with PageSpeed ○ 2.3x improvement with aggressive
  36. 36. Wordpress: ~50 Premium themes - Kbytes in 820 kb median, and ~2x improvement with PageSpeed
  37. 37. WordPress: ~1500 Free themes - start render ~900 ms first paint, PageSpeed helps cut down the tails...
  38. 38. mod_pagespeed as forward proxy!unexpected, but really cool use case...
  39. 39. Optimizing proxy for your phone● proxy all requests from phone to mod_pagespeed www mod_pagespeed ● optimize css, js, html ● faster render + onload ● optimize images ● (much) fewer bytes ● use mod_pagespeed as a cache - Frank Denis
  40. 40. Forward proxy + mod_pagespeed configModPagespeedRewriteLevel CoreFiltersModPagespeedEnableFilters rewrite_imagesModPagespeedEnableFilters combine_headsModPagespeedEnableFilters combine_javascriptModPagespeedEnableFilters convert_jpeg_to_webpModPagespeedEnableFilters convert_png_to_jpegModPagespeedEnableFilters inline_preview_imagesModPagespeedEnableFilters make_google_analytics_asyncModPagespeedEnableFilters move_css_above_scriptsModPagespeedEnableFilters move_css_to_headModPagespeedEnableFilters prioritize_visible_contentModPagespeedEnableFilters resize_mobile_imagesModPagespeedEnableFilters sprite_imagesModPagespeedEnableFilters defer_iframeModPagespeedEnableFilters defer_javascriptModPagespeedEnableFilters detect_reflow_with_defer_jsModPagespeedEnableFilters lazyload_imagesModPagespeedJpegRecompressionQuality 75 - Frank Denis
  41. 41. Forward proxy results Edge, no proxy Edge + pagespeed 3G, no proxy 3G + pagespeedRequests 34 21 Requests 85 28Transferred 403.32 Kb 271.91 Kb Transferred 3.15 Mb 340.16 KbDOMContentLoaded 39 s 2s DOMContentLoaded 50 s 1.2 "Using a mod_pagespeed proxy can drastically improve your mobile experience, and save you a couple bucks by requiring less data transfers. After using this setup for a while, going back to a non-proxied setup feels incredibly painful and sluggish." - Frank Denis
  42. 42. A few useful tips and tricks
  43. 43. Experimenting with mod_pagespeedPer request configuration (query string) request configuration (headers) GET /rewrite_css.html HTTP/1.1 Host: ModPagespeed: on ModPagespeedFilters: rewrite_css or, mod_proxy + mod_pagespeed!
  44. 44. Customizing mod_pagespeed filters
  45. 45. mod_pagespeed configuration (VHost, .htaccess, ...)Custom configuration with .htaccess ModPagespeedRewriteLevel PassThrough ModPagespeedEnableFilters combine_css,extend_cache,rewrite_images ModPagespeedEnableFilters rewrite_css,rewrite_javascriptCustom configuration at VHost level <VirtualHost *:80> DocumentRoot /www/example1 ServerName ModPagespeedRewriteLevel PassThrough ModPagespeedEnableFilters combine_css,extend_cache,rewrite_images ModPagespeedEnableFilters rewrite_css,rewrite_javascript </VirtualHost>
  46. 46. Authorizing and mapping (additional) domainsAllow mod_pagespeed to fetch and rewrite resources from: ModPagespeedDomain ModPagespeedDomain ModPagespeedDomain an optimized fetch path: ModPagespeedMapOriginDomain localhost * ModPagespeedMapOriginDomain http://localhost ModPagespeedShardDomain,
  47. 47. Thanks! list: mod-pagespeed-discussAnnouncements: mod-pagespeed-announceIlya Grigorik
  48. 48. Lets talk about SPDYerr... HTTP 2.0!
  49. 49. SPDY is HTTP 2.0... sort of...● HTTPBis Working Group met in Vancouver in late July● Adopted SPDY v2 as starting point for HTTP 2.0HTTP 2.0 Charter1. Done Call for Proposals for HTTP/2.02. Oct 2012 First WG draft of HTTP/2.0, based upon draft-mbelshe-httpbis-spdy-003. Apr 2014 Working Group Last call for HTTP/2.04. Nov 2014 Submit HTTP/2.0 to IESG for consideration as a Proposed Standard @igrigorik
  50. 50. It is expected that HTTP/2.0 will... M ake● Substantially and measurably improve end-user perceived latency over HTTP/1.1 using TCP thin Address the "head of line blocking" problem in HTTP gs b● ette r● Not require multiple connections to a server to enable parallelism, thus improving its use of TCP● Retain the semantics of HTTP/1.1, including (but not limited to) ○ HTTP methods ○ Status Codes ○ URIs Build on HTTP 1.1 ○ Header fields● Clearly define how HTTP/2.0 interacts with HTTP/1.x ○ especially in intermediaries (both 2->1 and 1->2)● Clearly identify any new extensibility points and policy for their appropriate use le xte nsib Be e @igrigorik
  51. 51. A litany of problems.. and "workarounds"...1. Concatenating files ○ JavaScript, CSS ○ Less modular, large bundles2. Spriting images ○ What a pain... All due to flaws in HTTP 1.13. Domain sharding ○ Congestion control who? 30+ parallel requests --- Yeehaw!!!4. Resource inlining ○ TCP connections are expensive!5. ... @igrigorik
  52. 52. mod_spdy is a SPDY module for Apache 2.2 that allows your web server to take advantage of SPDY features like stream multiplexing and header compression. This is the open source home for mod_spdy. ● configuration at VHost level <VirtualHost *:80> DocumentRoot /www/example1 ServerName SpdyEnabled on SpdyMaxStreamsPerConnection {n} SpdyMaxServerPushDepth n </VirtualHost>
  53. 53. Conditional optimizations for mod_pagespeedCustom filters if mod_spdy is present <ModPagespeedIf spdy> ModPagespeedDisableFilters combine_css,combine_javascript </ModPagespeedIf>Custom sharding strategy for non SPDY! <ModPagespeedIf !spdy> ModPagespeedShardDomain,, </ModPagespeedIf> and much, much more...