Speeding up mobile pages with mod_pagespeed and ngx_pagespeed
By Jan-Willem Maessen, Software Engineer
Recent betas (1.5 and later) of
mod_pagespeed
and
ngx_pagespeed
introduce new optimizations that render pages up to 2x faster, particularly on mobile devices.
This webpagetest video shows the results:
This speedup comes thanks to two new PageSpeed optimizations:
- prioritize_critical_css finds the CSS rules that are used to initially
render your page.
- The critical image beacon identifies the images that appear on screen when your page
is first rendered and uses this to guide lazyload_images and
inline_preview_images.
These combine with two existing PageSpeed
optimizations:
- defer_javascript prevents scripts from running until the page has
loaded.
- convert_jpeg_to_webp reduces the size of images that are downloaded by webp-capable
browsers.
What happens when you turn on these optimizations
Let’s compare the behavior of the page before and after optimization:
Before optimization, first render doesn’t occur until the CSS has
arrived (vertical gray bar at 2.3s), and images (purple) don’t finish downloading until
substantially later. The large above the fold image dominates above the fold rendering time
(vertical blue bar at 3.4s).
During optimization, the prioritize_critical_css filter inlines the
CSS required to render the page directly into the HTML. The inline_preview_images filter
creates a low-quality version of the large above the fold image and inlines that in the page.
The core
image
optimization filter also inlines some of the smaller above the fold images. The
above the fold content is fully rendered after only 2.0s (vertical orange line).
Only after the page is rendered is the JavaScript code run thanks to the defer_javascript
filter. At the same time the full-resolution version of the above the fold image is loaded;
since convert_jpeg_to_webp is enabled, it is served in webp format and is smaller than the
original even though the quality is the same. The full resolution version of the page is
available after 3.1s (vertical gray line – still faster than the original page). The
lazyload_images filter means the remaining images won’t be loaded until the page is scrolled
(or, in the most recent version of PageSpeed, after all the other page content has been
loaded).
Enabling these optimizations
To enable these optimizations in mod_pagespeed,
download and
install the latest beta. To do a test like the one you see here, simply add these lines to
your pagespeed.conf file:
ModPagespeedEnableFilters
prioritize_critical_css,defer_javascript
ModPagespeedEnableFilters convert_jpeg_to_webp
ModPagespeedEnableFilters
lazyload_images,inline_preview_images
If you use ngx_pagespeed,
install
from the latest source and enable the filters in your configuration:
pagespeed EnableFilters
prioritize_critical_css,defer_javascript;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters lazyload_images,inline_preview_images;
Compare your results to pages loaded with
?ModPagespeed=off or with
?ModPagespeedFilters=core. If you see breakage on your site with the
new filters, try omitting
defer_javascript and/or
lazyload_images from the list of enabled filters.
Conclusion
We hope you’ll try out the latest optimizations and let us know how they work for you.
Meanwhile we’ll continue our quest for better optimizations and faster page performance. If
you’re interested in joining the conversation, check out
https://code.google.com/p/modpagespeed/
and subscribe to our discussion list,
mod-pagespeed-discuss@googlegroups.com.
Jan-Willem Maessen is
a Software Engineer on the PageSpeed team, and helped build many of the optimizations
including the ones you see here. He's been known to hit otherwise reasonable consenting
software engineers about the head with a steel longsword.
Posted by Scott Knaster,
Editor
