PageSpeed Part II – JavaScript/CSS

In this post we will cover Google’s PageSpeed Insights suggestions for optimizing text based resources such as HTML, CSS, and JS. The suggestions offered often sound like technical jargon, so below is my attempt to demystify what they mean and what can be done about them.

Before diving deeper into the subject. It is important to be able to know what resources are causing the suggestion in the first place. When running a PageSpeed Insights test, under each suggestion there is a “Show How To Fix” link. When you click that link it shows the resources that PageSpeed thinks should be fixed. Doing this, you can find out if the problem is being caused by a specific plugin, a theme file, or if the resource is on a different domain.

In general, when you visit a web page, the first resource that is requested is an HTML file for that page. It’s a file that contains the basic content and structure for the site. The HTML file may request CSS resources which are used to describe how the page should look, it may also request JavaScript resources which are used to describe how the page can be interacted with.

Remove Render-Blocking JS

Your browser reads the HTML file from top to bottom. By default when the HTML requests a JavaScript resource, the browser stops reading the HTML file until that resource has been downloaded and executed. This means that if a JS resource is requested near the top of the file, the page must stop loading before it has even had a chance to display anything. This is known as Render-Blocking JS.

There are a couple of solutions for this such as telling the browser to not load JS until the rest of the HTML has been read, or telling the browser to download the JS while it is reading the HTML and only execute it once it has been fully downloaded. I won’t go over these solution in depth, because they are going to be very difficult to implement without technical expertise in this area and even then it may not be practical when using WordPress.

The reason for this is because most JavaScript files are loaded by WordPress plugins. Which means as soon as the plugin is updated, the files will revert back to how they were unless the author of the plugin themselves corrected the problem.

Follow these steps to improve this suggestion:

• Use as few plugins as necessary.

• If you see that a plugin is causing a lot of render-blocking JS, try to find an alternate plugin that is coded better.

• If the problem is due to a code-snippet, see if there is an alternate async compatible code-snippet available.

• Decide whether the performance:benefit ratio is worth having the plugin or code-snippet.

Minify Resources

This is the practice of removing all white space and non-executable code from JS and CSS files. This makes the file size smaller which will make it faster to download. In addition to this you can concatenate files together, i.e. if you are loading five JS files, they can all be combined into one file so that only one resource needs to be requested and loaded. The only downside to this is it reduces code readability and can occasionally cause bugs if not configured properly. Plugins like autoptimize can perform this task for you.

Follow these steps to improve this suggestion:

• Use autoptimize to minify and cache your JS and CSS files, ask a web developer for assistance if you need help configuring it

• Don’t use plugins that require loading a lot of resources

Optimize CSS delivery

You want your CSS to be consolidated into as few files as possible because a page cannot be displayed until all CSS has been downloaded and processed. If this were not the case, the user would see a flash of unstyled content until the CSS had finished downloading and processing.

There is a tricky way around this. You can put only critical CSS (The CSS needed to format the HTML before scrolling the page down a.k.a “above the fold content”) in the HTML itself (Inline CSS). Then you can tell the browser to ignore loading the rest of the CSS until the page has been displayed. This is fairly difficult to implement properly without a web developer, and in my opinion doesn’t give a big enough performance boost to justify its implementation for most web sites. Also, if you ever change your CSS file, your critical CSS would need to be updated.

Follow these steps to improve this suggestion:

• Use autoptimize to minify and cache your JS and CSS files, ask a web developer for assistance if you need help configuring it

• Autoptimize can also be used to implement critical CSS, which should likely be done by a web developer

Enable Compression

JS, CSS, and other filetypes can be compressed on the server before they are sent to the user, making their file size smaller. We have this taken care of in most cases, but you can let us know if you get this warning for a resource being loaded by your server and we can update your server configuration for you.

Follow these steps to improve this suggestion:

• If you’re hosted with us, email us or use our contact form to have us take a look. Make sure to check first if the resource that needs to be compressed is actually loading from your Orange Geek VPS

• If you’re not hosted with Orange Geek, ask your current web host about this issue

In our final post in this series we will be covering the rest of Google PageSpeed Insights Suggestions as well as general mobile optimization tips.

 


Read the rest of the posts in this series:

PageSpeed or page speed, Which is more Important?
Page Size and Number of Requests
PageSpeed Part I – Image Optimization
PageSpeed III – Optimize the Mobile Experience, Browser Caching, & Redirects