Google says its latest PageSpeed modules help render pages up to 2x faster, particularly on mobile devices

As part of its mission to speed up the Web, Google today announced the latest beta versions of its mod_pagespeed and ngx_pagespeed modules add new optimizations that result in a big performance bump. The company says it is seeing pages rendering up to 2x faster, particularly on mobile devices.

The jump comes thanks to new PageSpeed optimizations (the first two) and existing PageSpeed optimizations (the last two):

• 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.
• 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.

Google has a test that shows you the improvement in real-time:

Normally, the first render doesn’t occur until the CSS has arrived, images don’t finish downloading until substantially later, and the large above-the-fold image dominates above the fold rendering time. After 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, while the core image optimization filter also inlines some of the smaller above-the-fold images.

To enable these optimizations in mod_pagespeed, download the latest beta, install it, and 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

As for ngx_pagespeed, install from the latest source and enable these filters in your configuration:

pagespeed EnableFilters prioritize_critical_css,defer_javascript;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters lazyload_images,inline_preview_images;

Google warns, however, that the new filters could lead to problems on your site. If you do see issues, try omitting defer_javascript and/or lazyload_images from the list.

See also – Google unveils new guidelines and PageSpeed Insights tool to help site owners optimize for mobile and Google releases version 2.0 of its Octane JavaScript benchmark tool with a focus on reducing latency

Top Image Credit: Shutterstock