WebRTC mod_pagespeed - Varnish

moneygascityInternet και Εφαρμογές Web

8 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

101 εμφανίσεις

WebRTC
Joshua Marantz
jmarantz@google.com
Ilya Grigorik
igrigorik@google.com
Make the Web Fast
mod_pagespeed
just in time performance optimization for the web
(the 1.0 episode!)

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

...

Why aren’t all web-sites fast?
EASE OF MAINTENANCE
Simple development & deployment flow
Ability to rapidly deploy changes to users
Support all browsers
Focus on content
Use automated tools!
SPEED
Inlined / sprites / minified resources
Long cache lifetimes
Exploit features in modern browsers
Track latest WPO techniques

mod_pagespeed ===
performance JIT
http://modpagespeed.com/
+

"
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.0

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

mod_pagespeed adoption

120K
mod_pagespeed installs

Many partner integrations

open-source module!
...

mod_pagespeed in action

mod_pagespeed in action

http://www.webpagetest.org/result/121004_0H_3C8/
T
he Shrinking Waterfall
http://www.webpagetest.org/result/121004_KP_CFM/3/details/
mod_pagespeed OFF
mod_pagespeed ON

Let's peek 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
&lt;pre&gt; tag.
</pre>
</body>
<body>
Whitespace is collapsed
in general.
<pre>
But not in a
&lt;pre&gt; tag.
</pre>
</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>
<link rel="stylesheet" type="text/css"

href="
styles/
yellow.css+blue.css+big.css+bold.css
.pagespeed.cc.
HASH
.cs
s”>
<div class="blue yellow big bold">Hello, mod_pagespeed!</div>
md5 sum of combined CSS file
Combined file Served with 1-year TTL
Makes CDNs more effective

PageSpeed
resource handler
mod_pagespeed integration into Apache httpd
HTTP
Request
Input Filter
Input Filter
PHP handler
default handler
(file system)
Output Filter
Output Filter
Input Filter
Input Filter
Cache
Resource
Fetcher
mod_pagespeed Output Filter
HTTP Response
Output Filter
PageSpeed Filter
PageSpeed Filter
PageSpeed Filter
HTML
Optimized HTML
Apache HTTP Core
Resource
Optimization
Finite State Machine
mod_pagespeed
css/images/js
html

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/
256x192
w
Puzzle.jpg
.pagespeed.ic.
axCBDOdaS8
.webp

General Purpose Rewriting Engine Infrastructure
PageSpeed Optimization Library Architecture

Rewriting Filters
C++ STL libpng libjpeg libwebp zlib OpenCV
Chromium 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

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
Custom configuration (VHost, .htaccess, ...)
ModPagespeedRewriteLevel PassThrough
ModPagespeedEnableFilters combine_css,extend_cache,rewrite_images
ModPagespeedEnableFilters 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>

Running A/B Experiments on Live Traffic with Googe Analytics
ModPagespeedRunExperiment on
ModPagespeedAnalyticsID "UA-XXXXXXXX-Y"
# one third of the users get the pagespeed optimizations
ModPagespeedExperimentSpec id=3;percent=33;default
# one third of the users get image compression only
ModPagespeedExperimentSpec id=3;percent=33;enabled=rewrite_images
# one third get an unoptimized site
ModPagespeedExperimentSpec id=5;percent=34
http://googledevelopers.blogspot.com/2012/07/measure-and-optimize-with-modpagespeed.html

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

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.com
http://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."


Open-source Apache module

Apache 2.2.x, 2.4.x

"Just in Time performance optimization for the web"

Content rewriting and optimization is done by the server

Applies web performance best-practices on the fly (e.g., image rewriting and optimization)

Widely deployed, tested by partners -
1.0 ready!

Team continues to improve filters and adding new functionality

e.g. mod_spdy integration!
Recap


I'm already using mod_deflate, mod_expires, ..., will mod_pagespeed help?

I'm already using a CDN, will mod_pagespeed help?

I'm using an upstream cache (Squid, Varnish, etc), will those still work?

mod_pagespeed has own cache, how do I configure it, do I need to flush it, etc?

will mod_pagespeed affect my page load time when cache is empty?

will mod_pagespeed consume a lot of resources?

Does mod_pagespeed do any specific optimizations for mobile?

Where do I learn more?

Is there a mailing list, bug tracker.. where do I find help?

https://developers.google.com/speed/pagespeed/mod

https://groups.google.com/forum/?fromgroups#!forum/mod-pagespeed-discuss

http://code.google.com/p/modpagespeed/issues/list
Frequently Asked Questions

Questions!
bit.ly/mod_pagespeed-gdl

The Life of an HTML Request
For each Apache FLUSH

(e.g. PHP flush())
Call mod_pagespeed
output filter with text chunk
Sniff for HTML & parse into event-sequence
For each pagespeed filter
For each event
Call filter-method
for event
Filters optionally mutate elements/characters