Making the Web Faster by chenmeixiu

VIEWS: 4 PAGES: 7

									                         Making the Web Faster
                     Google I/O 2011: Tuesday, May 10, 11:30-12:15


Table of Contents
        Table of Contents
        Speaker
        Summary
        Notes - mod_pagespeed
           What is mod_pagespeed?
           Why make your website fast?
           Why use mod_pagespeed?
           What does mod_pagespeed do?
           Example: Combining CSS files
           mod_pagespeed Adoption Flow
           mod_pagespeed Architecture
           mod_pagespeed Adoption on the Web
           mod_pagespeed Site Latency Improvements
           mod_pagespeed Image Size Reduction
           Case Study androidacademy.com
           androidacademy.com: Timeline
           androidacademy.com: Waterfall
           androidacademy.com: Consistency and Test Methodology
           mod_pagespeed Road-map
           mod_pagespeed: Summary
        Notes - WEBP
        Notes - WebP in Opera
           Opera Turbo
        Q&A




Speakers
     Joshua Marantz - Technical :Lead
     Richard Rabbat - Product Manager
     Håkon Wium Lie - CTO, Opera Software




Summary
     Looks at improving page load speed and reducing network overhead using the Apache
     mod_pagespeed module. Covers how the module works, how it’s used and includes
     examples of how to use it and the measured benefits for typical web applications. The
     talk also covers the WebP image compression format, covering its many features and
     looking at best practices on how to use it.
Notes - mod_pagespeed

First section by Joshua Marantz

What is mod_pagespeed?

3 new technologies. Apache module auto rewrites existing pages html and CSS pages and uses
the WebP image format to improve image compression.


Why make your website fast?

User satisfaction, optimizing delivery of Web assets to clients can be hard, the technologies are
well known, but there are many trade offs: minifying images; agility (cashing vs pushing out site
updates rapidly); version caching.
You want to take advantage of features/techniques available in new browsers, while continuing
to support older browsers. To do this you use server side intelligence to determine the features
available in the User Agent accessing the page.


Why use mod_pagespeed?
Solution is to use optimization tools that work with existing assets and optimize automatically.
No need to do everything by hand.


What does mod_pagespeed do?
Based on the Best Practices from the two Web Performance bibles (O’Reilly books referenced
as images in the slide). minifying, in-lining small images and other assets, demo site is
modpagespeed.com


Example: Combining CSS files
Four small CSS files which would usually generate separate http requests, all bundled into
one request. You can do this by hand but mod_pagespeed does it for you. Concatenated name
which includes MD5 hash of combined CSS file. One-year TTL in example. Changes to the files
result in recomputed hash. Long cache life, but instantly updateable


mod_pagespeed Adoption Flow
Pre-built binaries for Centos and Debian. No need for any change in content creation. Longer
cache lifetimes, lower bandwidth.


mod_pagespeed Architecture
Two sections. Pagespeed auto-rewrites pages. Apache module for caching HTTP content, plug-
in architecture for (potential) multi-platform support, but now Apache httpd only


mod_pagespeed Adoption on the Web
Has been launched for 6 months, Dreamhost support in November (dates on slide say
November 2011 bu should be November 2010), press a button to enable. Go Daddy support,
enabled through a single line in a config file. Built on large base of source code. 54,000 sites
running mod_pagespeed today


mod_pagespeed Site Latency Improvements
28 sites compared. webpagetest.org on the client side, built-in tests for various browsers, but
IE8 used for test. Blue line represents first page view, red line represents subsequent views
when cache is warm. 20-30% improvement is not surprising, in these cases just by downloading
mod_pagespeed and turning it on. For manually tuned sites though it will probably just add
overhead, these are sites where the lines descend below the axis.


mod_pagespeed Image Size Reduction
get rid of 75% of the bytes by making thumbnails. No need to run ImageMagick manually on
images, let mod_pagespeed do it. Better compression ratios, optimized color maps...


Case Study androidacademy.com
HTTP response header shows mod_pagespeed in use (X-Mod-Pagespeed value)

 A video from YouTube was then shown, this showed a side by side comparison of loading a
page with and without mod_pagespeed


androidacademy.com: Timeline
Time to first byte takes longer, because of re-write pipeline. But we gain so much by the time
just up to the first paint. Improvements are even more pronounced on repeat views


androidacademy.com: Waterfall
Waterfall diagrams. Collected and rendered by Web-Page. Waterfall diagram is much shorter
when using for first view when using mod_pagespeed, remember that images are also smaller.
For repeat views, the server returns 304 not modified HTTP responses, here the browser has a
copy of resource, and checks back with the server to see if it's still valid. These requests are low
bandwidth, but require a complete round trip. This happens even if cache is enabled.


androidacademy.com: Consistency and Test Methodology
Repeated 50 times, web measurement is hard, so we have to do it over many requests.
Measurement variance. androidacademy.com hosted out of the UK so this requires
intercontinental communications, lots of jitter because of this. one or three repeats not enough.
Here the graphs show a fair amount of jitter but improvement is pretty clear.


mod_pagespeed Road-map
Want to make the whole web faster, working with may partners, integration with popular web
caches, should be easy to integrate into other HTTP stacks. Also want to make the web more
fast, image spreading, WebP, Deferred JavaScript execution, they are all both anxious and
excited. Much effort into measurement, which of these measurements have most impact, allow
the users to measure the benefits by providing them with the appropriate tools.

More image stuff at http://modpagespeed.com, the main page is a list of features. Josh went
through an example of the rewrite_images features which can be seen at
http://modpagespeed.com/rewrite_images.html and
http://modpagespeed.com/rewrite_images.html?
ModPagespeed=on&ModPagespeedFilters=rewrite_images
In firebug/Inspect Element you see that the Puzzle.jpg is usually 235KB, but mod_pagespeed
using WebP makes it 21KB and it's hard to see the difference on the page. Also the Cuppa.png
is in-lined, meaning one less line in the waterfall for this page.



mod_pagespeed: Summary
Open Source Apache module licensed under APL, Two main points:

1. Makes web sites faster through Best Practices
2. It’s automatic


Notes - WEBP
Second Section by Richard Rabbat

When they set out to work on mod_pagespeed, Josh and Richard were told they were crazy.
The best practices to help make web pages as fast as possible was already there, but Josh
and Richard decided to make it automatic (that was the crazy part). Google are willing to let
you try and fail, as long as you don’t always fail. It was amazing when they launched this, a and
they were really surprised how much users wanted it. Josh mentioned that we have been doing
measurements, with webpagetest.org, but there is also the Google Analytics Site Speed tool
this can be used for measuring page speed, and can tell site owners what users are likely to
experience in terms of latency.

WebP was also a crazy idea, most images are JPEG, a losey format, GIF was still used for
specific use cases such as transparency and animation. People like small animations. PNG is
used for High Quality icons and graphs. An example being the Google I/O logo where you want
the text to be clearly readable.

An Image is worth a 1000 words. images are in the hundreds of KB range, HTML pages are
in the tens of KB, but the power of client side processors and Algorithm improvements mean
that we can support more complex compression formats on the client side. Proposed image
format that’s better than jpeg, based on VP8 bitstream, pre-launch study of a 900k JPEG image,
showed re-compression with WebP gave a 39.8% improvement. JPEG re-compression only
gave 14%


Study shows WebP 40.4% smaller for Low bit-rate compression, much better than JPEG and for
high bit-rate as good as PNG.

The initial focus was on speed. Received good feedback, but users wanted better encoding, we
improved the encoder, less focus on transitions

Next. Bunch of new features, people expressed a need for MetaData (XMP), animation, 3D-
stereoscopy, tiling, spriting, JNI interface and Lossless

Animation: Normal response is “just use the video tag” but designers want to create animated
images using tools like PhotoShop, not ffmpeg.

Tiling, display parts of the image as you download

CSS background images, group images together, example given was two image tags specifying
fragments that were individual images, multi-image is an image that contains both of these
images.

3D JPEGs often don't make sense on a 2D display. In WEBP you have Left image and right
images and present 2D for some, 3D for others dependent on the features supported by the
display device

Also looking at a JNI interface, and lossless compression

WebP currently supported in Picasa, Gmail, Google App Engine, hardware support with VP8
compatibility

They have a good encoder, using Assembler to make it even faster




Notes - WebP in Opera
The third section of the talk was given by Håkon Wium Lie who is CTO of Opera Software

A footnote multi-background images in CSS. on Weird CSS syntax. It was included in CSS
when Håkon proposed it in 1994 and multi-background images is still weird today, shouldn't
need to do it, there are better options.

Word of warning, automated technology for performance has limits, take responsibility for your
HTML and CSS, need bright minds to do the coding.

Opera starts on the client, currently 100m Opera mini users, which is a small client on handsets,
brings Web access to ordinary folks, proxy servers fetch the original page, compress it and send
it to handset, 60 billion pages per month today. Important in places such as Russia, Indonesia
and India where you pay per KB.

Opera turbo, compresses HTML, CSS and images, used with the normal Opera desktop
application, you can turn it on and off, and Opera will suggest it as an option when connected
to a slow network. Smaller user base than Opera mini. WebP support in Opera turbo. Saves
50% of bandwidth for typical page. Time to load of course also goes down. WebP and Opera
are a perfect match. At low compression, JPEG has significant artifacts, WebP less artifacts and
smaller. JPEG compression on JPEG images is poor, WebP on JPEG works well.

Showed examples of many JPEG images, the original and re-compressed with JPEG and with
WebP. WebP tended to lose detail as opposed to create artifacts, one of the images showed a
person’s forehead with less wrinkles (and significantly less artifacts)

Disappearing wrinkles, WebP for beauty!


Opera Turbo

New formats can be disruptive
Way to go before you can use WebP everywhere
Chrome and Opera support WebP, others others don’t, he hopes that other browsers will
support it in the future. Don't exclude users by assuming WebP support. Test sites with many
browsers. Google not always good at testing. Make your web site work for everyone as a
priority.



Q&A

Q for Josh, Using RackSpace … (didn’t hear the product name) and pay on compute cycle
basis, how does mod_pagespeed affect this, what about CDNs? any performance gain there?

A. Regarding compute costs, mod_pagespeed uses a lot of caching, and amortized over
the entire web application it should be about the same in terms of cost with and without
mod_pagespeed enabled

Combined resources in CDN, we support CDNs, makes more resource cacheable at the edge.
Multi-server is not a problem

Q. PNG became popular because it had no patent encumbrance, how is the team working to
address patents?

A. We’re not lawyers and can’t really talk about patents

Q. VP8 documentation is limited.

A. We are doing lots of work on VP8 docs.

Q. Is there a Formal specification?
A. [Richard] Have submitted an information RFC but doesn't know if there are other plans for a
more formal specification

Q. Does mod_pagespeed change the page design paradigm, should web designers do less
performance work upfront now and just let mod_pagespeed do the optimization?

A. [Richard] Please don't, html pages sometime lie and it’s impossible for mod_pagespeed
to optimize them. Importance of mod_pagespeed, every time you change the pages, you
don't want to re-optimize manually. [Josh] No need to make a complete 100% optimal design,
gradually consider maintainability and efficiency, take one step at a time.

Q. Will mod_pagespeed be available for Google App Engine?

A. This is the 3rd most important bug in their bug list, not currently available but they’ve talked
to the GAE team and they are excited. Focus now is on stability with Apache. Focus on core
technology.

Q. We’ve had a lot of success with Nginx in front of Apache, Can they use mod_pagespeed in
this configuration

A. Nginx in front of Apache with Apache using mod_pagespeed should work great

Q. mod_pagespeed, what is it’s applicability to SmartPhones and tablets?

Page speed-up is general, round trips on mobile are expensive. Mobile best practices are
different, mod_pagespeed allows you to deliver a page customised for the User Agent, using
image in-lining only on browsers that support it. Also transcode images to WebP for those that
support it. Server side decisions based on User Agent will benefit mobile.

Q. Hosted management system, manual assets of HTML and CSS, can they just use the Image
compression from mod_pagespeed?

A. Use other tools such as ImageMagick, mod_pagespeed just helps you automate it. In fairly
large sites, can do edge level page compression, compress before pushing to the CDN.

Q. What about an API, send images to the API, get a compressed version back and send that to
the CDN?

A. That’s something of interest that they would consider doing at some point

Q Time to first byte is increased. Can some of this processing be done offline?

Great question. Conservative approach, dynamic and personalised based on the HTML and on
the context of the request, therefore caching on the server side is not so attractive. Cache other
resources such as compressed images.

								
To top