Render-blocking Resources: The Key To Your Website’s Speed

Render-blocking Resources

The term render-blocking resources first came to my attention when the PageSpeed gave my website an F performance score. That certainly got my attention! After all, the scores are based on how quickly a website is displayed in the user’s browser and that is an important metric. Obviously, the less waiting for your content, the better.

What are the render-blocking resources? These resources are CSS (Cascading Style Sheets) and JS (JavaScript) files that “tell” the browser how to display the website content. They are regular text files with extensions .css and .js, respectively. The browser has to wait until these files are received before it can display (aka render) the content. Hence, render-blocking.

After implementing the optimizations described in this post, the website’s speed scores improved dramatically, as shown in the screenshot below. Consequently, these optimizations proved practical and effective!

Effects of reducing render-blocking resources. — Page speed after optimizations.

The Fully Loaded Time is still a little bit high in this pic, but adding support for HTML/2 (items 7 and 8) and caching (item 12) further reduce it. Read on!

One: Getting Information

You need to measure the performance of your website before you do anything else. There are several sites that test your website’s speed. They also pinpoint specific problems and offer suggestions for improvement.

Two: Basic Housekeeping

1. Compress images.

Large images can impose a heavy load on your server traffic. Fortunately, many tools exist to reduce image size. I have been using TinyPNG online compression with good results. Additionally, they have a tool to check how much you can save by better compressing your images.

2. Compress videos.

If you host videos to enliven web pages, compress and resize them to reduce load. After all, videos do not need to be IMAX quality. The best tool I found for video conversion is HandBrake. It’s also free and open source.

3. Minify scripts.

Minification reduces the size of text-based scripts, such as CSS, HTML, JavaScript or XML, by removing unneeded characters. Extra spaces, tabs, newlines, and comments are only used for formatting to make them easier to read by humans. Minify online with this tool.

Note: Minification is different from the compression of files into a binary form ( item 4), which is used for transmission only. The files must be decompressed by the browser before processing. Conversely, the browser can parse and process minified scripts.

Three: Server Optimizations

Most web hosts provide easy access to modify your server configuration. Therefore, these changes are easy to make and may result in noticeable speed improvements.

4. Enable gzip compression.

That means configuring the web server to compress all text files sent to clients. Web files such as HTML, CSS, JavaScript, XML are all text-based. Needless to say, reducing their size also cuts transmission and waiting time. Compression is simple to implement ( here is a how-to), effective (70% size reduction is possible) and has virtually no downsides.

5. Leverage browser caching (i.e. add expires headers).

Each browser has a cache to locally store and reuse resources downloaded from the server. Pictures and scripts are examples of files that rarely change so they can be safely cached by the browser. Expires headers, as the name implies, inform the browser of the “expiration date” of each resource. Check the tutorial on why and how to do it.

6. Update PHP to version 7.

WordPress is written in PHP. Version 7 of PHP offers significant performance gains. In fact, it is almost twice as fast as previous versions! With this in mind, update if you have not yet done it. (The exact procedure depends on your web host.) Incidentally, PHP 7.3 (the newest) is about 10% faster than version 7.2, so update to the newest version.

Warning: the PHP update can break some obsolete pieces of code, so backup your site and proceed with caution.

7. Support HTML/2.

HTTP/2 ( RFC7540) is a major update of the HTTP protocol. It improves efficiency, speed, and security of web transfers. Most browsers support HTTP/2 only for HTTPS connections. Therefore, your support for HTTPS (SSL) is essential. You can test if your web host supports HTTP/2 with this tool.

8. Accept only HTTPS.

If your site supports HTTP/2, the HTTPS (secure) connections are faster than the regular HTTP connections. Using my website as an example, the page load is a full second shorter for HTTPS. (Please compare the screenshot below with the previous one.) Consider setting your server to only accept HTTPS connections.

Page speed improvement with HTTPS and HTTP/2.

Four: WordPress Optimizations

Even if your website is fairly small and contributes little to the load, other WordPress components – such as plugins, themes, and widgets – add these render-blocking resources. They are addressed in this section.

9. Remove unneeded plugins.

Plugins are essential to extend WordPress functionality. However, they add their own CSS and JavaScript files, which slow down your website. My advice is to delete all the plugins that are disabled – you clearly do not need them. Moreover, do a cost/benefit analysis of the remaining ones and delete the ones you can live without. The improvement may surprise you.

10. Host a video using HTML5 <video> tag

and not a plugin. For example, my website had used a plugin for displaying short videos. While convenient, the plugin caused so much delay that it had to be removed. Instead, I embedded the video in a webpage using HTML5 <video> tag directly. It was quite simple to do. This (very comprehensive) post shows you how.

11. Switch themes?

Your WordPress theme adds a lot of render-blocking resources. Ostensibly, a theme needs a lot of CSS in order to style the website. Is it a necessary evil or a better option exists? That is a non-trivial question as changing themes is a serious decision. My website uses a theme based on the Genesis framework. I have been generally happy with it, so I decided to leave it in place. For now.

12. Add caching plugin.

WordPress builds web pages dynamically from a database. That repeats every time browser requests a page, which adds a delay. Caching plugins first generate static HTML pages from the dynamic WordPress content then serve these static pages to clients. This is much faster. My website implements the WP Fastest Cache plugin. The speed improvements are shown below.

Notably, server-based caching solutions outperform caching plugins. So, check if your web host offers server caching.

Five: Future Optimizations

It goes without saying that speed improvement is an ongoing and never-ending process. Consequently, some possible improvements were not implemented. They are listed here for completeness (together with the reasons for postponing them). To learn more, refer to an excellent article on the subject.

Switch to a faster web host – this is a business decision that needs to balance higher costs and benefits.
Use a CDN (Content Delivery Network) – likewise.
Remove or minimize ads – this website has no ads.
Do not link to slow sites – not a perceived problem.
Prevent hotlinking to your images and videos – this likely will be the next optimization to carry out.