Eliminate render-blocking resources (PageSpeed Insights Solutions)

After running Google PageSpeed Insights on the most recent version of I.T. Recipes we found some issues that will slow down our website. One of which is eliminate render-blocking resources.

What are render-blocking resources?

Our weekly food shop consists of walking around a local supermarket with a list and collecting everything we need. There are other people present, items on shelves we don’t need, minor changes to the shop layout and 5 different mustard’s to choose from. These are render-blocking resources. To eliminate render-blocking resources, we could have a supermarket that only we had access to, only had the products we wanted and never changed. Online shopping is as close as we can get.

Render-blocking resources are items, code, and images that load before they are needed.

I.T. Recipes currently has a performance score of 65. Carry on reading right to the bottom to see our results and don’t forget to check out.

In-Line CSS

CSS is a great example of loading something that’s not yet needed. We have a file called style.css that contains all of our custom CSS. Some of these changes you are looking at right now, but some are specifically for WPForms and our Request a Recipe page. If you don’t request a recipe, why are we loading that CSS?

It’s easier to write CSS in a separate file, but for website speed it’s better to include them next to the element they refer to. 

If when we went shopping, we had to walk to the end of the aisle to find the location of our favourite biscuits from a map. Then go down the aisle to collect them. It would take us a lifetime to shop. That’s how we traditionally write CSS, in a separate location. A caching plugin can take care of this and add the labels to the shelves, so we can walk down the aisle and find the perfect chocolate digestive.

But it’s only 119.4 KB. Why does it matter?

119.4 KB or 119.4 KiB (KB and KiB are the same thing) 

Though the size is small, in fact the photo below is only 124 KB, so it’s smaller than a photo of doughnuts.

The browser still has to process this information. It would be like us picking up every single pack of biscuits and then putting them back on the shelf until we find our favourite ones. The complete process is a waste of time, giving your website the appearance that it’s slow.

Slow is not good for your SEO, it’s a ranking factor for Google and it’s always Mobile first. If your site is slow on a mobile phone, then it will not rank high for either Desktop or Mobile searches.

What is the solution?

Caching

Every time someone visits your WordPress site, it generates a new page. WordPress will take the ingredients, mix them together, and display the finished product. We have made it fresh while you wait. This site is not an artisan bakery, though, and this page hasn’t changed in a while. A caching plugin will store a ready-made page and display it when requested. A ready-made sandwich from the fridge, aisle.

Minify

Minify does what it says on the tin. It will take your JavaScript, CSS, and HTML and removes all the blank space and unnecessary comments.

Not Minified Code

.wpforms-form .wpforms-title {			/* Only apply to WPForm titles */
font-size: 35px !important;			/* Size of text */
font-family: 'Nunito', sans-serif !important;	/* Font to use */
}

.wpforms-form {					/* Only apply to WPForm */
	font-family: 'Roboto', sans-serif !important;	/* Font to use */
}

Minified Code

.wpforms-form .wpforms-title {font-size: 35px !important;font-family: 'Nunito', sans-serif !important;}.wpforms-form {font-family: 'Roboto', sans-serif !important;}

What caching plugins are available?

The list is quite long and will depend on your host. Many hosts have their own caching plugin for you to use, others have their own caching systems, while some will recommend particular caching plugins. Though we will use WP-Optimise for this recipe and go over both caching and minification. It is worth considering using your host’s own or recommended method for caching. They would have optimised their servers for that particular plugin or service and help us eliminate render-blocking resources.

Please follow our WordPress Backup recipe before cooking

Results

After we eliminate render-blocking resources, we have taken I.T. Recipes performance score from 65 to 82. That’s a huge jump. It’s impossible to achieve a perfect score, though we will be slowly trying

Tweet

Struggling with the above recipe? Hire a chef to do it for you