Important update: This post has now been archived. Please check out the updated version of this post on improving page speed and core web vitals here.
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 its best.
However, this can be quite challenging at the best of times, and I'll explain why shortly.
Over the years, I've done my fair share of stressing out over my own website's page speed score.
This 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.
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.
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 the 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.
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 the image below.
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.
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.
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.
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 is 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.
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.
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.
