Introducing the 'Speedy' template

In an effort to improve both real and perceived performance of sites, we recently launched a 'speedy' template.

Why a new template?

Because some of the recommended fixes require changes to the markup, we felt that rather than requiring all developers to update their existing templates, adding an additional opt-in template would be preferable. The existing templates will remain unchanged while we evaluate the real-world results and continue to refine the new 'speedy' template. (Google notes that "PageSpeed Insights is being continually improved and so the score will change as we add new rules or improve our analysis.")

What does the new template do?

The new template identifies CSS important for rendering styles "above the fold" and inlines this critical CSS into the <head> of the markup. The rest of the framework CSS is loaded by inline JavaScript (with a <noscript> fallback) while render-blocking JavaScript is moved to the end of the page, in the <body>.

How do I use it?

Before you use the new template, you'll need to make sure that any JavaScript included inline on your pages is moved to the end of your page, after 'all.js'. If you're using UNLcms, these scripts can instead be placed in the JavaScript textarea in your site's enabled theme (in 'Appearance'). The scripts will then be loaded in the correct order. If you're not using UNLcms, you will need to move your inline JavaScripts after 'all.js' in your 'speedy_body_scripts.html' file.

Once the JavaScripts have been moved, you can enable the new template. If you're using UNLcms, check the 'Speedy template' checkbox at the bottom of your site's enabled theme (in 'Appearance'). Likewise, you can uncheck it at any point should you choose to no longer use it. If you're not using UNLcms, you can choose to use the Speedy template included in the latest framework release.

While our metrics are improving, we still see room for improvement and will continue to refine the 'Speedy' template. If you have feedback or would like to contribute code, we welcome contributions.

Additional Reading: