1. PageSpeed
WebRTC
just in time performance optimization for the web
Ilya Grigorik igrigorik@google.com Make The Web Fast
http://modpagespeed.com/
http://ngxpagespeed.com/
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. 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. PageSpeed
Optimization Libraries
(PSOL)
Browser extensions PageSpeed Service
Apache
Online tool
mod_pagespeed
Nginx
Product integrations
ngx_pagespeed
API + 3rd Party 3rd Party
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. Performance "linter" in the browser
https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli
9. If we can tell you what to optimize
and how... can't we just optimize it
for you?
Yep.. we can!
10. PageSpeed
Optimization Libraries
(PSOL)
Browser extensions PageSpeed Service
Apache
Online tool
mod_pagespeed
Nginx
Product integrations
ngx_pagespeed
API + 3rd Party 3rd Party
11. 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/
12. mod_pagespeed adoption
1.0 Launch
● 200K+ mod_pagespeed installs EdgeCast
● Growing list of partners
Dreamhost
Go Daddy
14. 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
16. 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
17. The shrinking waterfall
mod_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 is
http://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.
18. How does it work?
Let's peek under the hood...
19. "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
20. Apache + PSOL = mod_pageseed 1.x
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
21. 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: 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.
22. 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
24. Example filter: HTML Collapse Whitespace
class 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
<pre> tag.
<pre> tag. </pre>
</pre> </body>
</body>
25. 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 TTL
Makes 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>
26. 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
http://modpagespeed.com/images/256x192wPuzzle.jpg.pagespeed.ic.axCBDOdaS8.webp
28. PageSpeed Optimization Library Architecture
General 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
29. 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/
30. PageSpeed Service (Google Hosted)
Your visitors
PageSpeed Service
https://developers.google.com/speed/pagespeed/service Your server
31. 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 user
Your 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
36. 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
37. Wordpress: ~50 Premium themes - Kbytes in
820 kb median, and ~2x improvement with PageSpeed
38. WordPress: ~1500 Free themes - start render
~900 ms first paint, PageSpeed helps cut down the tails...
40. 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
42. Forward proxy results
http://www.over-blog.com http://cookingwithfrank.wordpress.com
Edge, no proxy Edge + pagespeed 3G, no proxy 3G + pagespeed
Requests 34 21 Requests 85 28
Transferred 403.32 Kb 271.91 Kb Transferred 3.15 Mb 340.16 Kb
DOMContentLoaded 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
50. 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 Charter
1. Done Call for Proposals for HTTP/2.0
2. Oct 2012 First WG draft of HTTP/2.0, based upon draft-mbelshe-httpbis-spdy-00
3. Apr 2014 Working Group Last call for HTTP/2.0
4. 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
51. 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
52. A litany of problems.. and "workarounds"...
1. Concatenating files
○ JavaScript, CSS
○ Less modular, large bundles
2. Spriting images
○ What a pain... All due to flaws
in HTTP 1.1
3. Domain sharding
○ Congestion control who? 30+ parallel requests --- Yeehaw!!!
4. Resource inlining
○ TCP connections are expensive!
5. ...
@igrigorik bit.ly/perfloop
53. 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
54. Conditional optimizations for mod_pagespeed
Custom 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...
