09.Nov.17

Pantaley Stoyanov

Pantaley Stoyanov

Google PageSpeed Insights optimizations and recommendations, Part 1/3

We must adopt a "mobile first" way of thinking when organizing CSS and JS.

This set of articles is all about how to get a high score on PageSpeed Insights. There are many articles that are just copy pasting guidelines directly from the Google’s documentation. Many are luring with titles like "get score 100/100" and many are using just some plain simple dummy webpages.

The pain happens when you need to fix a large live website. Most of the articles are just clickbait and not about helping you with real life practical solutions or examples.

Compared to the described above, my set of articles aims to save time and do the job right.

Let's take a look at the basic optimizations that we can implement. They are the ones that are easy to understand, but sometimes not so to implement.

Minify JavaScript, CSS and HTML

If you are using a CMS, there is a pretty good change that it’s already using minification/compression (should not be confused with HTTP compression). If not, there are plenty of addons/plugins like the case in WordPress. For large projects this could be automated with npm packages. For smaller ones you may use IDE addons and watchers or do it manually with web tools.

In some cases, you can download a bundle of optimized resources straight from the PageSpeed Insights tool, there is a link at the bottom of the page called “Download optimized image, JavaScript, and CSS resources for this page.”.

Download-bundle

Personally, I use this bundle only for images and never for JS, CSS or HTML files, but the point here is that minifications are a common thing and there is always an easy solution.

You might come across to the term uglify. This is an additional minification only in JavaScript where all names (variables, functions, etc) are shortened. This is also a way to protect to some degree your code or at least make it harder to be copied.

Enable compression

This optimization is the HTTP compression mentioned above and is a little more difficult. It’s more difficult only because the activation depends on your hosting. Basically, you need to activate gzip or deflate compression. There are different ways to enable compression, depending of what kind of server the page is hosting for example apache, IIS, nginx, etc. Fortunately, there is plenty of information in Google on this topic.

Optimize images

To be honest, most of the time I’m cheating using PageSpeed Insights’ bundle mentioned above and replacing the images with compressed ones.

I’ve tried Photoshop’s settings for exporting images, used different tools, but it’s time consuming in cases when you need to tweak the settings, because it is not the same for different images and formats.

For me the easiest way to get the right images is to check them through PageSpeed Insights and download them with the “Download optimized image, JavaScript, and CSS resources for this page.” link.

Leverage browser caching

Check which files PageSpeed Insights wants to cache. If all of them are from your server, you need to enable caching. There are again many good articles explaining how it’s done and again the settings are different on different type of servers for example apache, IIS, nginx, etc.

It becomes challenging when the files are external. For example, we are using Google Analytics on our website. The GA code snippet is downloading an external JS file from a different domain with different cache settings (https://www.google-analytics.com/analytics.js). The workaround is to download the JS file, upload it to our server and load it manually before the GA code. However, I’m strongly against this as Google might make changes and the hardcoded JS may break the statistics. You should have the same concerns with other libraries too.

My recommendation is to leave alone all external JS files from third-party services as they won’t reflect too bad on the overall score or if else consider carefully the consequences.

Prioritize visible content

Google wants you to reduce the amount of HTML needed to render above-the-fold (upper half of the page) content. What does that mean? Well, probably there is too much inline and/or internal stylesheet (the CSS between <style> tag). Basically, the whole HTML document is too large. You could use too much nested HTML tags, microdata, microformats or something that makes your HTML file too crowded.

In my case, most of the time it’s the internal stylesheet. So be careful how much CSS you are writing directly into the HTML document. The same is true and for the internal JavaScript code.

Don’t worry too much about this optimization, in some cases there will be no practical way to minimize further your HTML and it’s not so heavy on the overall score.

Next, we will focus on how to eliminate render-blocking JavaScript in above-the-fold content.

Need consulting on this topic?

Yes No

Thank You! We will be in touch.