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.
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!
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.
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
4. Enable gzip compression.
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.
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.
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.