Improve Your PageSpeed Insights Score With These Steps

48 Shares

As a Growth-Driven Web Designer, my goal, as well as designing web pages that are user-friendly, is always to make a website perform at it’s best.

However, this can be quite challenging at the best of times, and I’ll explain why shortly.

My never-ending struggles with page load times

Over the years, I’ve done my fair share of stressing out over my own website’s page speed score.

Which is why when I decided to modify the design of Magnet4Blogging a few years back, I made ‘improving page loading times’ a top priority.

However, I soon realized that optimizing for page load and speed was always going to be a work in progress.

For guidance, I relied heavily on Google’s PageSpeed Insights tool.

If you’re not sure what this tool is all about or why you should care to use it, read this first.

Additionally, let me tell you why I think this tool is so important for you to use as a website owner.

Why is PageSpeed so important?

Two very simple reasons:

Reason one, SEO:

If you care about your website’s performance in the search engines, you should definitely work towards improving your PageSpeed score. Google doesn’t like slow websites.

Reason two, your website users:

If you care about providing your website users with the best possible experience when they visit your site, you should definitely work towards improving your PageSpeed score.

Any page on your site or post on your blog that takes a long time to load does one thing, it turns visitors away.

That’s right, your new visitors especially, will leave and when that happens you’ve lost an opportunity to convert that visitor into a subscriber or a customer.

My website speed score

As I said, I’ve struggled with my website speed score over the years because I’m constantly adding and removing features from my website.

Before optimizing my site recently, the PageSpeed Insights Score for the homepage for Magnet4Blogging was 36. See image below.

Now at first, I thought this was ridiculously bad, but then I tested some other more popular sites and blogs similar to my own and found that it wasn’t actually all that bad.

That being said, it still needed improving, a lot.

I’ll say this again, working on improving your page speed score can be a continuous work-in-progress, especially if you’re changing themes, plugins, installing scripts, building in new features, etc. regularly.

So here are some things I suggest you do if you’re suffering from a low page speed score.

#1. Optimize your images

So, the first step to take is to optimize the images on your website, obviously.

You can do this by downloading all of the images for the page you want to improve the page speed for, then using a tool called Tiny PNG to compress the image files.

The new images outputted will have a much smaller file size that you can use for your site. See image below.

#2. Enable compression

You can learn more about the benefits of compressing compressible resources on your WordPress website to help reduce the time these resources take to download here.

To enable compression of resources on your website you can install a plugin called WP Performance Score Booster, you can find it here. Though please don’t depend on using this plugin alone to fix your slow site.

#3. Minify resources

Another way to improve your PageSpeed Insights score is by reducing the size of your website’s resources altogether.

These are HTML, CSS, and JavaScript.

Again, you can learn more about the benefits of doing this here in much greater detail, but generally speaking, minifying your resources helps to improve your page load time.

To help reduce the size of your website’s resources, you can use a free plugin called Fast Velocity Minify, which you can find in the WP repository here.

#4. Leverage browser caching via .htaccess

This can be a little bit tricky to do, especially if you’re not comfortable with hacking into your .htaccess file.

Unfortunately, I wasn’t able to find a reliable enough plugin out there to help solve the browser caching issue.

What I was able to find, however, was a great article written by Thomas Griffin detailing the procedures of leveraging browser caching in WordPress via .htaccess.

Unfortunately, I can’t give Thomas’s blog any credit because it’s no longer active.

Anyhow, I was able to apply the code provided in Thomas’s original article to my .htaccess file and deal with most cacheable resources, but not all of them entirely, regardless it helped to increase my score ever so slightly.

Here is the code if you want to use it:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
EspiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

Important Note: Please make sure you backup your .htaccess file before you modify it in any way.

#5. Eliminate render-blocking (JavaScript, not CSS)

Before you jump up and down with joy in thinking I’ve found a solution for this, I’ve not been able to completely resolve this issue for my website.

I’ve checked various forums, including the one over on WordPress.org and no one seems to know of a complete solution there.

There are some plugins available but upon testing a few of them, they ended up breaking my test site more than solving a problem, so be careful with any plugins you find.

What I was able to do however was to eliminate render blocking for JavaScript only, using one simple plugin that I found.

The plugin is called Scripts-to-Footer and can be found here. It simply moves your website scripts to the footer of your site, away from above the fold.

Again this is a plug-and-play plugin, and you can turn on or off the plugin in specified posts or pages if you wish.

You might want to check out this detailed post over on Hostinger for eliminating both CSS and JavaScript render-blocking.

Final words of wisdom

Well, there you have it. Some simple tips and tricks to follow to improve your Google PageSpeed score.

I will try and update this post again in the future, as and when I find better and smarter solutions and tools to continue improving the Site Speed Insights score, so check back soon.

My new improved speed score is?

Below is a screenshot of the final website speed test score which I managed to take to 61, but as I said earlier, I’m continuously trying to improve this each time I update my site with new features and content.

I hope you’ve been able to pick one or two useful tips from this post to apply to your WordPress website or blog and improve your Google PageSpeed Insights score.

Best of luck.