As mentioned in my last blog post, the speed of your website is vital. Since then Google has announced that speed will also be a factor for Google Search and Ads for mobile searches, it has been a factor for desktop searches for a while. (read the announcement here)
As a quick summary:
- Everybody wants to find the answer to a query as quickly as possible. Especially if you are on a data plan that costs per MB of data transferred.
- Users/Customers prefer a website that loads quickly, and studies have shown that 50% of the users abandon a query if the site takes longer than 3 seconds to load over mobile.
- A speedier website will allow you to handle more users at the same time and might save you some money on infrastructure.
Optimizing for speed
Optimizing a website can be a huge task, but some things will only take minutes and bring a massive speed boost. So, first you need to find out how your page is doing and what can be improved.
Run your website through:
- Test your mobile speed
After the test, you will see how your website compares to others in the same “industry” and a couple of top fixes. You can also get a full report sent to you by email. - Compare your mobile site speed
If your website is in Google’s database of “popular websites” you can compare it to other sites and by selecting your average monthly visitors, order value and conversion rate it will tell you how much more money you could earn by speeding up your website.
And of course the websites and services I mentioned in my previous post:
- Page speed insights
- WebPageTest
- Lighthouse, the Google Chrome developer tool
A couple of ideals to keep in mind:
- Your page should load in less than 3 seconds
- Average time to first byte should be less than 1.3 seconds
- Average request count should be lower than 50
- Google suggests that the average page weight should be less than 500KB… I haven’t seen many of those websites in a while 🙂 but smaller is better.
The big problems that I usually see and that are easy to fix are:
- Unoptimized images either because your website shows an image that’s huge as a small image or a heavy image that hasn’t been exported correctly.
PageSpeed Insights will let you download an optimised version of the images; you should check them to see if the quality is still good enough for what you have in mind. Exporting images with appropriate image dimensions (or using multiple versions and HTML srcset) and running the images through something like https://imageoptim.com/mac can save you a lot of space and make your website quicker. - Render blocking javascript or stylesheets, meaning javascript and CSS that loads before your content does. This can be a bit misleading as in most cases you need and want some javascript and stylesheets to load at the beginning or your website will look weird while loading (I’m simplifying quite a bit here). But loading stylesheets and javascript that you don’t need on page load is relatively easy to fix and to avoid in the future. Javascript that is only needed when a user clicks on a button can usually be loaded after the content.
- Minifying HTML, javascript and stylesheet, aka loading a version of the files that remove all unnecessary whitespace. Most CMS or frameworks have tools to serve minified versions of those files, check if your does and turn it on. If you want to aggregate your javascript scripts (which has less of an impact with http2) then you should test your website after turning that option on as, if your javascript scripts are included in a weird order they won’t work correctly.
- Compressing resources, enabling gzip on your server is usually an easy fix for your hoster or any developer.
- Browser caching, you should cache the resources you can cache, and for sure images and scripts. This is also an easy fix for any developer. Some external scripts can’t be cached however so don’t worry about those.
Then there are some that are more complicated to fix, and I’ll probably talk about those in a future blog.