PageSpeed
Service (PSS) is an online service to speed up the rendering of your web pages by
rewriting and serving them through Google. While PSS’s optimization techniques benefit most
platforms and browsers, today I’d like to focus on some of the PSS rewriters that are
especially effective on mobile web pages. PageSpeed Service optimizes the web pages in such a
way that users can start viewing and interacting with your pages as soon as possible.
Prioritize
Critical CSS: To avoid page reflows, modern browsers do not render pages until the
CSS is downloaded and parsed. These CSS files are often tens of KBs because they include all
the styles needed for the entire site. These blocking requests are especially bad on mobile
devices, where network round trip times are high. The Prioritize Critical CSS rewriter speeds
up rendering by identifying the minimal CSS required to render that page and including it in
the HTML file. This not only saves an extra round trip to download additional files but also
reduces the CPU consumed by the browser. Finally, a reference to the original CSS file is
included at the end of the page to lazy-load the non-critical CSS.
Defer
JavaScript: The HTML specification requires the browser to stop, download, and
execute each synchronous JavaScript file before proceeding to build and render the page - this
requirement can significantly slow down rendering. PSS circumvents this behavior by rewriting
the HTML to defer execution of all JavaScript until after the page is first rendered. This
benefits pages that are mostly rendered via HTML markup rather than JavaScript.
Optimize
Images: Mobile screens are almost always smaller than their desktop counterparts.
Large, high quality images translate to excessive bytes on the wire, slowing down page loads.
PSS can resize images on the server to fit required dimensions and re-compress them to the
optimal format, without perceptible visual loss. For very large images above the fold, PSS can
also inline a low quality preview image for initial rendering. Once the rest of the page
content loads, it is replaced by the original image, creating a seamless experience.
Furthermore, images below the fold can be lazy-loaded, which prevents them from competing with
the rest of the page load.
PageSpeed Service includes several rewriters
that speed up the rendering of web pages. Using PageSpeed Service, the mobile pages of TopNewsToday and Net1News are now 61%
faster and 68%
faster respectively. Alex Tsvetanov of TopNews Today says, “With Google PageSpeed
Service, we increased our unique visitors and total pageviews by 100%, while reducing our
bounce rate by 30%”. Massimo Romanello, CEO of Net1News says, "Thanks to Google PageSpeed
Service, we have been able to reach 200,000 unique daily visitors with the same existing
infrastructure and have made our site one of the quickest in the news sector".
PageSpeed takes just a few minutes to set up and requires no code changes on your site. Check out how
much PageSpeed can speed up your site. I encourage you to try out these features by signing
up for PageSpeed Service and letting us know what you think at page-speed-service-discuss@googlegroups.com.
Ram
Ramani is an Engineering Manager on the Make the Web Faster Team in Mountain View.
He is a believer in "Faster is better".
