Pagespeed   what, why, and how it works
Upcoming SlideShare
Loading in...5
×
 

Pagespeed what, why, and how it works

on

  • 9,891 views

 

Statistics

Views

Total Views
9,891
Views on SlideShare
9,876
Embed Views
15

Actions

Likes
35
Downloads
101
Comments
1

2 Embeds 15

https://twitter.com 12
http://localhost 3

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

Pagespeed   what, why, and how it works Pagespeed what, why, and how it works Presentation Transcript

  • PageSpeedWebRTCjust in time performance optimization for the webIlya Grigorik igrigorik@google.com Make The Web Fasthttp://modpagespeed.com/http://ngxpagespeed.com/
  • 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.
  • 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.
  • PageSpeed Optimization Libraries (PSOL)Browser extensions PageSpeed Service Apache Online tool mod_pagespeed NginxProduct integrations ngx_pagespeed API + 3rd Party 3rd Party
  • 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
  • Performance "linter" in the browser https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli
  • PageSpeed Insights API require net/https require json uri = URI.parse(https://www.googleapis.com/pagespeedonline/v1/runPagespeed ) http = Net::HTTP.new(uri.host, uri.port) http.use_ssl = true params = { :key => API KEY, :url => http://railsconf2012.com/, :strategy => desktop, :rules => ... } uri.query = URI.encode_www_form(params) req = Net::HTTP::Get.new(uri.request_uri) res = http.request(req) jj JSON.parse(res.body) WebPageTest, Gomez, Neustar Webmetrics, ShowSlow, GTMetrix, WordPress, ... your monitoring app, etc.
  • If we can tell you what to optimizeand how... cant we just optimize itfor you?Yep.. we can!
  • PageSpeed Optimization Libraries (PSOL)Browser extensions PageSpeed Service Apache Online tool mod_pagespeed NginxProduct integrations ngx_pagespeed API + 3rd Party 3rd Party
  • 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 http://modpagespeed.com/
  • mod_pagespeed adoption 1.0 Launch● 200K+ mod_pagespeed installs EdgeCast● Growing list of partners Dreamhost Go Daddy
  • mod_pagespeed in action Case Studies
  • 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
  • mod_pagespeed in actiona hands-on example...
  • 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
  • The shrinking waterfallmod_pagespeed OFF mod_pagespeed ON http://www.webpagetest.org/result/121004_KP_CFM/3/details/ Same site, with respective waterfalls before and after mod_pagespeed optimization. With mod_pagespeed on, the number of requests ishttp://www.webpagetest.org/result/121004_0H_3C8/ reduced, as well as the overall size of the page, yielding a significant improvement in render and page load times.
  • How does it work?Lets peek under the hood...
  • "PageSpeed Optimization Libraries (PSOL) are a set of C++classes that automatically optimize web pages and resourcesthey use, using a server-independent framework."https://developers.google.com/speed/pagespeed/psol
  • 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
  • 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.
  • 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
  • Example filtersLets peek (deeper) under the hood...
  • 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>
  • 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/yellow.css+blue.css+big.css+bold.css.pagespeed.cc.HASH.css”> <div class="blue yellow big bold">Hello, mod_pagespeed!</div>
  • 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 expirationhttp://modpagespeed.com/images/256x192wPuzzle.jpg.pagespeed.ic.axCBDOdaS8.webp
  • 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
  • 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
  • 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: https://github.com/pagespeed/ngx_pagespeed Discussion group: https://groups.google.com/forum/#!topic/ngx-pagespeed-discuss/
  • PageSpeed Service (Google Hosted) Your visitors PageSpeed Service https://developers.google.com/speed/pagespeed/service Your server
  • PageSpeed Service (Google Hosted) 1. CNAME your www. to ghs.google.com 2. Tell PSS where your origin server is located (ex, origin.mysite.com) 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
  • PageSpeed Service
  • Performance case studies...
  • 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%)
  • Try it yourself...http://webpagetest.org/compare
  • 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
  • Wordpress: ~50 Premium themes - Kbytes in 820 kb median, and ~2x improvement with PageSpeed
  • WordPress: ~1500 Free themes - start render ~900 ms first paint, PageSpeed helps cut down the tails...
  • mod_pagespeed as forward proxy!unexpected, but really cool use case...
  • 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 https://00f.net/2012/06/02/mod-pagespeed-as-a-proxy-for-your-phone/ - Frank Denis
  • 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 https://00f.net/2012/06/02/mod-pagespeed-as-a-proxy-for-your-phone/ - Frank Denis
  • Forward proxy results http://www.over-blog.com http://cookingwithfrank.wordpress.com 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." https://00f.net/2012/06/02/mod-pagespeed-as-a-proxy-for-your-phone/ - Frank Denis
  • A few useful tips and tricks
  • Experimenting with mod_pagespeedPer request configuration (query string) http://modpagespeed.com/rewrite_css.html?ModPagespeed=on&ModPagespeedFilters=rewrite_cssPer request configuration (headers) GET /rewrite_css.html HTTP/1.1 Host: modpagespeed.com ModPagespeed: on ModPagespeedFilters: rewrite_css or, mod_proxy + mod_pagespeed! https://developers.google.com/speed/docs/mod_pagespeed/experiment
  • Customizing mod_pagespeed filters https://developers.google.com/speed/docs/mod_pagespeed/config_filters
  • 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 www.example.com ModPagespeedRewriteLevel PassThrough ModPagespeedEnableFilters combine_css,extend_cache,rewrite_images ModPagespeedEnableFilters rewrite_css,rewrite_javascript </VirtualHost> https://developers.google.com/speed/docs/mod_pagespeed/experiment
  • Authorizing and mapping (additional) domainsAllow mod_pagespeed to fetch and rewrite resources from: ModPagespeedDomain http://example.com ModPagespeedDomain http://cdn.example.com ModPagespeedDomain http://styles.example.com/cssConfigure an optimized fetch path: ModPagespeedMapOriginDomain localhost *.example.com ModPagespeedMapOriginDomain http://localhost https://www.example.com ModPagespeedShardDomain https://www.example.com https://example1.cdn.com,https://example2.cdn.com https://developers.google.com/speed/docs/mod_pagespeed/domains
  • Thanks!https://developers.google.com/speed/pagespeed/servicehttp://modpagespeed.com/http://ngxpagespeed.com/Mailing list: mod-pagespeed-discussAnnouncements: mod-pagespeed-announceIlya Grigorik igrigorik@google.com
  • Lets talk about SPDYerr... HTTP 2.0!
  • 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 http://lists.w3.org/Archives/Public/ietf-http-wg/2012JulSep/0971.html @igrigorik bit.ly/perfloop
  • 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 bit.ly/perfloop
  • 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 bit.ly/perfloop
  • 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. ● http://code.google.com/p/mod-spdy/Custom configuration at VHost level <VirtualHost *:80> DocumentRoot /www/example1 ServerName www.example.com SpdyEnabled on SpdyMaxStreamsPerConnection {n} SpdyMaxServerPushDepth n </VirtualHost> https://developers.google.com/speed/docs/mod_pagespeed/https_support#spdy_configuration
  • 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 https://www.example.com, https://example1.cdn.com,https://example2.cdn.com </ModPagespeedIf> and much, much more...