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.
- convert_jpeg_to_webp reduces the size of images that are downloaded by webp-capable browsers.
F**k it, we'll do it live!
Our biggest ever edition of TNW Conference is fast approaching! Join 10,000 tech leaders this May in Amsterdam.
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:
As for ngx_pagespeed, install from the latest source and enable these filters in your configuration:
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters lazyload_images,inline_preview_images;
Top Image Credit: Shutterstock