Dramatically Improving Your Google Page Insights Score

Aug 21, 2019 Freelancing

When I first launched my website I knew I needed to handle my Search Engine Optimization (SEO) if I wanted to rank high on Google.

Having a high Google page insights score is one of the ways to easily improve your search engine rankings.

All you need to do is paste in your domain name and Google will quickly analyse your website to see how efficiently optimised it is.

Once you have your results you will be given a score out of 100 for both the mobile and desktop versions of your website. Along with your score you will be provided 'opportunities' to improve your score.

Here are some of the ways I quickly achieved a higher score.

Install Google Lighthouse

The first thing I recommend doing is installing Lighthouse. Lighthouse is simply a Google Chrome plugin which when installed allows you to run a test on your website to give you a more detailed run down of the aspects of your site you can improve.

I noticed that the opportunities that Google page insights gave were very useful, but Lighthouse was able to give a more detailed run down of what I needed to improve.

Minify CSS/Javascript

Probably the easiest and most common thing to fix first is minifying your CSS and Javascript.

By default your CSS and Javascript file will output your code line by line. The more code you have the greater amount of lines your file will take up, the more lines you take up will result in a larger file size.

Google insights will pick up on this and notify you that the file sizes need to be reduced.

The easiest way I've found is using a task runner such as Gulp or Grunt. Webpack is beginning to emerge in popularity but for more basic websites I prefer to go with the former.

My personal preference is Gulp, and using npm packages such as gulp-clean-css and gulp-uglify you can easily compress your CSS and Javascript into a single line of code which greatly reduces the file size.

If you're unfamiliar with task runners here's an easy to follow tutorial on how to use Gulp to minify your CSS and Javascript:

Gulp Tutorial

Concatenate Files

Following on the Gulp theme another great way to reduce http requests is by concatenating files.

Let's say your website has three different CSS files. You might have one for your main styles, one for an animation library and another for a slideshow plugin.

If you output all three files that's three separate http requests. That's going to slow down the response time of your site and also harm your insights score.

With Gulp you can install an npm package called gulp-concat. This allows you to take those three individual CSS files and merge them in to just one CSS file. That's two less http requests resulting in a faster website and an improved insights score.

Compress/Resize Images

After I'd minified my CSS and Javascript I looked at compressing and resizing my images down.

When I first launched my site I'd quickly added some of the images without resizing them down to the lowest size possible.

The first thing I did was went through all my images and opened them up in Photoshop. When exporting images in Photoshop you can set a percentage for the quality the image will be saved at.

If you save your image at 100% quality then obviously the file size will be at its largest. I found that even setting them at just 60% maintained the quality of the images and more importantly it would reduce my image size by 200/300kb in some instances.

If you don't have the luxury of programs like Photoshop, or you simply don't have the time to learn how to use it there are some online platforms which help you achieve a similar result.

There are many online image resizers out there.

Along with resizing my images down I used image compressing programs to remove a lot of the unnecessary metadata from my assets whilst still maintaining quality.

A good option if you're using a Mac is ImageOptim.

If you're not using a Mac you could try something like Caesium.

SEO/Meta Tags

It's crucial to have the absolute basic SEO meta tags, and if you don't Lighthouse will pick up on this and reduce your SEO score.

I recommend having the title, description and viewport meta tags in place as a bare minimum.

Here's a basic guide on what's required.

Gzip Compression

Gzip compression is essentially a method of compressing your files to make them smaller in size. By doing this you increase your chances of your website running at a faster speed.

There are a few ways to tackle this.

The first is to add some settings to your .htaccess file.

In my case the second option was to turn Gzip compression on via the php.ini file on my web host.

If you're unsure how to do this it's worth getting in touch with your hosting provider and asking them to enable it for you.

Third Party Plugins

Finally, I'd like to look at third party plugins.

On my website I use fonts from Adobe. In order to use the fonts I have to place a script in my head element of my website.

The good thing about this is I have the freedom to use beautiful fonts which make my website look a lot more slick. The downside is that I'm using a third party plugin which will slow down my site and also affect my Google page insights score.

Another third party plugin I use is Google Analytics. This allows me to monitor my traffic, see what users click on most, track my worst performing pages and many more.

It's an extremely useful tool, but this also affects my score.

The point is it's not possible to have a perfect score and also use fantastic resources, you have to find a balance.

I would try and limit the plugins as much as possible, and if there's a better solution which doesn't hinder you then it's probably worth it.

With all the optimisations I made I improved my score from around the 60s mark into the 90s. I'm going to try and improve my score further in the future without compromising what's beneficial for my website.

Hopefully this helps you with your own website and boosts your SEO rankings!