Way back in 2015, Microsoft released the findings of a study that revealed the average attention span had dropped from 12 to 8 seconds (that’s less than that of a goldfish).
There has been a lot of debate since then about whether or not that’s true. One thing is for sure though, in the age of Netflix, Amazon and Google – we want things fast. Actually…we want them pretty much instantly. Think about it, you’ve probably been out with your mates lately and at some point in the conversation or amid a friendly debate, someone said “Google it” or even “Ask Siri”, and seconds later the answer was revealed and the score was settled. Just like that.
Last year, Google revealed that 53% of mobile site visitors leave a page that takes longer than three seconds to load. With more than half of overall web traffic now coming from mobile, this isn’t information you can afford to ignore. Those extra seconds will have an increasingly significant impact on your ability to engage your website visitors and make sales.
Here are some ways you can start working towards optimising your website speed and stop losing potential customers.
Establish important benchmarks
- Test your website using Google’s free mobile page speed tool. This will tell you how long it takes for your website to load. Make of note of this number.
- Scroll to the bottom to see top fixes.
- You can also get a free report emailed to you with some tips on how to speed up your website.
- (Technical) Check your HTTP requests. A HTTP request occurs for each of the different parts of your web page such as images, stylesheets, and scripts. As a starting point, you’ll need to figure out how many you have:
- Open your webpage in Google Chrome.
- Right-click on the web page, click “Inspect,” then click the “Network” tab.
-
- In the bottom left, you can see the total requests this page makes (105 in the example above). Make a note of this number.
- Look through the files listed and check if any are unnecessary. Check the “Size” and “Time” columns to see how large the files are and how long they take to load. Tip: Start with the ones that take the longest to load.
- Repeat the steps above for all your key pages.
Optimise your images (DIY)
Images look pretty, but they take a lot of time to load. Optimising your images can dramatically improve your web page speed. If your website is highly visual, this step is crucial and is arguably the easiest and fastest way to speed up your website.
You’ll need to use image editing software such as Photoshop. If you don’t have Photoshop, try these other alternatives:
| Dimensions |
|
| File name |
|
| FIle type |
|
| File size |
|
Start reducing HTTP requests (Technical)
If you’re not familiar with CSS, JavaScript and HTML files, you may need to call in some experts for this step (we know a couple of guru’s so feel free to ask us).
To reduce your number of HTTP requests, you will need to minify and combine your files. In layman’s terms; minifying a file involves removing unnecessary formatting, whitespace, and code. You’re essentially leaning up your pages. When we talk about combining files, we literally mean combining multiple CSS and JavaScript files into one. Here’s a few ways you can do this:
If your site runs on WordPress, you can use a plugin (try WP Rocket – $39-199/year). Here are some steps you can follow once the plugin is installed.
Otherwise, we recommend using the following tools:
- HTMLMinifier (minify HTML)
- CSSNano and csso (minify CSS)
- UglifyJS (minify JavaScript)
How fast is your DNS server?
Let us explain. “DNS” stands for “Domain Name System”. This is is a server that holds a database of IP addresses and their associated hostnames. So, when you type “www.amazon.com.au” into your browser, your internet provider performs a “DNS lookup” to find the IP address associated with that URL and then directs you to the right website.
Why does this matter? Glad you asked. If your DNS provider isn’t fast, this step can be slower and can affect your website speed. We suggest checking out where your DNS provider stacks up and consider switching to a faster provider to speed up this process (FYI – GoDaddy ranks 27th and is more than 1500% slower than the number 1).
Browser caching
To put it simply, browser caching is the process of “remembering” information so it can be retrieved quickly. Here’s a fun, detailed explanation.
If you use WordPress, you are in luck – you can use a plugin like W3 Total Cache to enable browser caching. Install the plugin, go to General Settings > Page Cache and tick the box next to “Enable”. Voila! This simple step should give your site’s load times a boost.
Have a static HTML site? Caching can be enabled in your .htaccess file (if you just said “Huh?” or raised an eyebrow, it’s probably best to reach out to your web developer or an SEO expert). This step requires you to add code which will tell browsers what to cache and how long to store it. Here are some tips:
| Type of resource | Cache lifetime |
| Static | 1 week + |
| Third-party (widgets, ads, plugins) | 1 day + |
| JavaScript, CSS, images, media, PDFs | 1 week + (but < 1 year) |
Here’s an example of the code you would add to your .htaccess file:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive 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 text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##
Less is more
“Simplicity is the ultimate sophistication.” – Leonardo Da Vinci
Leo was definitely onto something…
When looking at your mobile site, think of what a mobile user’s intention may be in comparison to a desktop user. Make your call to actions clear and keep information and design minimal.
Responsive design is now the minimum bar for entry on mobile – but you don’t just want to do the bare minimum, right? Responsive design doesn’t consider the information customers are looking for on mobile. A good mobile strategy is your starting point to becoming mobile first – start with by asking “why?”. Figure out why mobile users are visiting your website (what information are they looking for, what are they trying to achieve?) and then build a strategy around scaling back your content to seamlessly and quickly meet their needs.
Check-in
If you implement the above changes, you should start seeing website speed improvement rather quickly. Once you’ve made your improvements, go back to Google’s free mobile page speed tool and check your results against your benchmark.
Do this on a regular basis – website speed should be a KPI to assess website performance.