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


Forward proxy results


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>

Pagespeed what, why, and how it works

Documents

Transcript of Pagespeed what, why, and how it works