Speeding up mobile pages with mod_pagespeed and ngx_pagespeed

November 07, 2013


Link copied to clipboard
Author PhotoBy 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