Download - Pagespeed what, why, and how it works
WebRTC
Ilya Grigorik [email protected] Make The Web Fast
http://modpagespeed.com/http://ngxpagespeed.com/
PageSpeedjust in time performance optimization for the web
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● Domain Sharding● ...
The vast majority of web performance optimizations are well defined and understood rules, which can (read, should) be automated.
Why aren’t all web-sites fast?
EASE OF MAINTENANCESimple development & deployment flowAbility to rapidly deploy changes to usersSupport all browsersFocus on content
Use automated tools!
SPEEDInlined / sprites / minified resources
Long cache lifetimesExploit features in modern browsers
Track latest WPO techniques
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.
PageSpeedOptimization Libraries
(PSOL)
Browser extensions
Online tool
Product integrations
API + 3rd Party
PageSpeed Service
Apache mod_pagespeed
3rd Party
Nginxngx_pagespeed
● Help developers understand why their pages are slow and how to make their pages faster
● Increase awareness of web performance via integrations with Google properties and open source solutions
Insights Online
Insights for Chrome
Insights for Firefox
AdSense
WebPagetest, Gomez, others
PageSpeed Insights
Performance "linter" in the browser
https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli
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.
PageSpeed Insights API
If we can tell you what to optimize and how... can't we just optimize it for you?
Yep.. we can!
PageSpeedOptimization Libraries
(PSOL)
Browser extensions
Online tool
Product integrations
API + 3rd Party
PageSpeed Service
Apache mod_pagespeed
3rd Party
Nginxngx_pagespeed
mod_pagespeed === performance JIT
http://modpagespeed.com/
+
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
mod_pagespeed adoption
● 200K+ mod_pagespeed installs● Growing list of partners
Dreamhost
Go Daddy
1.0 LaunchEdgeCast
mod_pagespeed in actionCase Studies
Edgecast & mod_pagespeed CloudFront & Strangeloop Akamai & Blaze Aqua Ion Cloudfront Torbit
CDNs & Front End Optimization (FEO)
EdgeCast Networks makes the web faster with Google’s mod_pagespeed
mod_pagespeed in actiona hands-on example...
mod_pagespeed in actionVideo 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
http://www.webpagetest.org/result/121004_0H_3C8/
The shrinking waterfall
http://www.webpagetest.org/result/121004_KP_CFM/3/details/
mod_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.
How does it work?Let's peek under the hood...
"PageSpeed Optimization Libraries (PSOL) are a set of C++ classes that automatically optimize web pages and resources they use, using a server-independent framework."
https://developers.google.com/speed/pagespeed/psol
Open 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
Apache + PSOL = mod_pageseed 1.x
Core and Optional filters
mod_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 require additional testing:
● large number of optional filters, examples:○ ability to configure image recompression levels○ image inlining, defer javascript, combine javascript○ and many others
Every site has full control over which filters are applied, and mod_pagespeed can be configured via all the usual Apache mechanisms.
Things you don't 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 filtersLet's peek (deeper) under the hood...
Example filter: HTML Collapse Whitespace
class CollapseWhitespace : public RewriteFilter {
virtual void Characters(HtmlCharactersNode* node)
if node is not in PRE tag
replace contents matching "[ \n\t]*" with " "
}
<body> Whitespace is collapsed
in general. <pre> But not in a
<pre> tag. </pre> </body>
<body>Whitespace is collapsedin general.<pre> But not in a
<pre> tag. </pre></body>
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.
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>
<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>
md5 sum of combined CSS fileCombined file Served with 1-year TTLMakes CDNs more effective
Example Filter: Image Rewrite
http://modpagespeed.com/images/256x192wPuzzle.jpg.pagespeed.ic.axCBDOdaS8.webp
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
PageSpeedresource handler
mod_pagespeed integration into Apache httpd
HTTP Request
Input FilterInput Filter
PHP handler
default handler (file system)Output Filter
Output Filter
Input Filter
Input Filter
CacheResource Fetcher
mod_pagespeed Output Filter
HTTP Response Output Filter
PageSpeed FilterPageSpeed Filter
PageSpeed Filter
HTML
Optimized HTML
Apache HTTP Core
Resource OptimizationFinite State Machine
mod_pagespeed
css/images/js
html
General Purpose Rewriting Engine Infrastructure
PageSpeed Optimization Library Architecture
Rewriting Filters
C++ STL libpng libjpeg libwebp zlib OpenCVChromium PageSpeed Insights SDK Google CSS Parser
HTML Parsing & Rewriting Framework
HTTP Caching & Header Manipulation
URL Parsing and Reconstruction
HTTP Resource Management
HTTP Content Cache
Metadata Cache
HTTP Fetch
Threading System
Logging
Configuration
Server Interface
Background Resource Optimization Machine
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_pagespeedDiscussion group: https://groups.google.com/forum/#!topic/ngx-pagespeed-discuss/
PageSpeed Service (Google Hosted)
https://developers.google.com/speed/pagespeed/service
Your visitors
PageSpeed Service
Your server
1. CNAME your www. to ghs.google.com2. Tell PSS where your origin server is located (ex, origin.mysite.com)3. Visitors hit Google front-end
a. PSS fetches content from origin, runs optimizationsb. PSS serves the response to the user
Your visitors are talking to Google servers: ● Low latency● Traffic offload● Global cache infrastructure● 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!
PageSpeed Service (Google Hosted)
Your visitors
PageSpeed Service
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...
● proxy all requests from phone to mod_pagespeed
Optimizing proxy for your phone
www
mod_pagespeed
● optimize css, js, html● optimize images● use mod_pagespeed as a cache
● faster render + onload● (much) fewer bytes
https://00f.net/2012/06/02/mod-pagespeed-as-a-proxy-for-your-phone/ - Frank Denis
ModPagespeedRewriteLevel CoreFilters
ModPagespeedEnableFilters rewrite_images
ModPagespeedEnableFilters combine_heads
ModPagespeedEnableFilters combine_javascript
ModPagespeedEnableFilters convert_jpeg_to_webp
ModPagespeedEnableFilters convert_png_to_jpeg
ModPagespeedEnableFilters inline_preview_images
ModPagespeedEnableFilters make_google_analytics_async
ModPagespeedEnableFilters move_css_above_scripts
ModPagespeedEnableFilters move_css_to_head
ModPagespeedEnableFilters prioritize_visible_content
ModPagespeedEnableFilters resize_mobile_images
ModPagespeedEnableFilters sprite_images
ModPagespeedEnableFilters defer_iframe
ModPagespeedEnableFilters defer_javascript
ModPagespeedEnableFilters detect_reflow_with_defer_js
ModPagespeedEnableFilters lazyload_images
ModPagespeedJpegRecompressionQuality 75
Forward proxy + mod_pagespeed config
https://00f.net/2012/06/02/mod-pagespeed-as-a-proxy-for-your-phone/ - Frank Denis
Forward proxy results
https://00f.net/2012/06/02/mod-pagespeed-as-a-proxy-for-your-phone/ - Frank Denis
Edge, no proxy Edge + pagespeed
Requests 34 21
Transferred 403.32 Kb 271.91 Kb
DOMContentLoaded 39 s 2 s
3G, no proxy 3G + pagespeed
Requests 85 28
Transferred 3.15 Mb 340.16 Kb
DOMContentLoaded 50 s 1.2
http://cookingwithfrank.wordpress.comhttp://www.over-blog.com
"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."
A few useful tips and tricks
Per request configuration (headers)
Experimenting with mod_pagespeed
GET /rewrite_css.html HTTP/1.1 Host: modpagespeed.com ModPagespeed: on ModPagespeedFilters: rewrite_css
https://developers.google.com/speed/docs/mod_pagespeed/experiment
Per request configuration (query string)
http://modpagespeed.com/rewrite_css.html?ModPagespeed=on&ModPagespeedFilters=rewrite_css
or, mod_proxy + mod_pagespeed!
https://developers.google.com/speed/docs/mod_pagespeed/config_filters
Customizing mod_pagespeed filters
Custom configuration with .htaccess
mod_pagespeed configuration (VHost, .htaccess, ...)
ModPagespeedRewriteLevel PassThroughModPagespeedEnableFilters combine_css,extend_cache,rewrite_imagesModPagespeedEnableFilters rewrite_css,rewrite_javascript
https://developers.google.com/speed/docs/mod_pagespeed/experiment
Custom 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>
Allow mod_pagespeed to fetch and rewrite resources from:
Authorizing and mapping (additional) domains
ModPagespeedDomain http://example.com ModPagespeedDomain http://cdn.example.com ModPagespeedDomain http://styles.example.com/css
https://developers.google.com/speed/docs/mod_pagespeed/domains
Configure 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
Thanks!
Ilya Grigorik [email protected]
https://developers.google.com/speed/pagespeed/servicehttp://modpagespeed.com/http://ngxpagespeed.com/
Mailing list: mod-pagespeed-discussAnnouncements: mod-pagespeed-announce
Let's 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.0
HTTP 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...
● Substantially and measurably improve end-user perceived latency over HTTP/1.1 using TCP● Address the "head of line blocking" problem in HTTP● 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○ 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
Make things better
Build on HTTP 1.1
Be extensible
@igrigorik bit.ly/perfloop
A litany of problems.. and "workarounds"...
1. Concatenating files○ JavaScript, CSS○ Less modular, large bundles
2. Spriting images○ What a pain...
3. Domain sharding○ Congestion control who? 30+ parallel requests --- Yeehaw!!!
4. Resource inlining○ TCP connections are expensive!
5. ...
All due to flaws in HTTP 1.1
@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
Custom sharding strategy for non SPDY!
Conditional optimizations for mod_pagespeed
<ModPagespeedIf spdy> ModPagespeedDisableFilters combine_css,combine_javascript</ModPagespeedIf>
Custom filters if mod_spdy is present
and much, much more...
<ModPagespeedIf !spdy> ModPagespeedShardDomain https://www.example.com, https://example1.cdn.com,https://example2.cdn.com</ModPagespeedIf>