11 Tips to make your website load faster
Can you make your website faster?
4 in 10 people leave a website that takes 3 seconds or longer to load. 4 people who could have engaged with your business, bought from you or even have become advocates of your brand. This statistic, combined with Google’s mobile first indexing, page speed as a ranking factor, and considering your users’ varying bandwidths around the world – there’s never been a more important time to ask ‘how to make your website load faster?’
Let’s review 11 quick and easy tips you can use today – that’s right – today.
These tips will make your website faster.
1. Improve your hosting plan to make your site loading faster
People consider optimising images for faster site loading but fail to invest in the quickest fix available to them, improving their hosting plan.
If you’re using a shared hosting plan for your website, and have the budget – stop right now.
When you have huge websites with rich features and a large database of e-commerce products, your website will slow down. This is painfully noticeable when your website runs on a shared hosting plan because you’re splitting a server between an array of other websites.
This is why you should consider switching to the best hosting plan you can find within your budget.
It’s a simple fix which will take any decent webmaster no time at all to implement.
I would recommend upgrading from shared to something like a Virtual Private Server or even a Dedicated hosting plan.
It’s difficult to give a precise answer because it truly depends on your budget and where you’re currently at.
If you can improve it – do it.
2. Limit HTTP Requests
What is an HTTP request?
Every time a user’s web browser wants to load a file, the server is communicated with through Hypertext Transfer Protocol.
This is an HTTP request.
Now why should we care about the number of HTTP requests?
The more HTTP requests, the more time it will take to load each request.
There’s a few quick and easy ways to limit HTTP requests on your website:
- DRY – Do Not Repeat Yourself (in code or design)
- Single stylesheets (Developers using preprocessor languages like Sass and SCSS should use a master @import file to modularise styles using a single HTTP request)
- Take advantage of CSS Sprites (more on that later).
Another quick and easy fix. I’d recommend reading further about HTTP requests and how you can reduce them to make your website load faster on this HubSpot post.
3. Optimise images to make your website load faster!
If your images are heavy in file size, you can bet they will be a pain to your user.
Ever went on a website and waited a few seconds for that beautiful background image to slowly fade into existence?
How about when you saw a tiny thumbnail of that hoodie you wanted to purchase but now you can’t view the full size image?
This is where image optimisation is essential.
Remember – the less assets your users need to load, the better.
If you’re not on WordPress, I’d recommend this free image optimisation software or Optimizilla, a free web app.
If you’re on WordPress, you can use WP Smush, a free plugin which also comes with a Pro version available to purchase.
Although WP Smush is powerfully incredible if you’re an 80 / 20 thinker, you should consider how many plugins your WordPress website uses already. More on that later.
So, the best tools for me (and likely you, circumstances may vary) are Riot and Optimizilla.
4. Use CSS Sprites to make your website load faster
Remember when web developers started gamifying their web applications to improve user engagement?
There’s another nifty secret we learned, courtesy of the video game industry.
It’s called CSS Sprites.
Ever thought Pacman looked like one image from different views?
That’s the sort of approach sprites are given in video game development.
Game developers would create a bitmap file with an array of images in a grid. They controlled which image was displayed to the player – loading a single file as opposed to.. Well, lots.
Web developers can use this idea too. Remember when we spoke about HTTP requests?
Let’s reduce the HTTP requests on multiple images by integrating them all using a CSS sprite!
Check out this free tool which will do all the heavy lifting for you and generate CSS sprites for you.
Remember, in SEO we should aim to maximise the results from the effort expended.
6. Reduce external scripts and only use must-have code libraries
This one’s quite obvious.
Again, the DRY principle springs to mind.
Furthermore, when you’re planning a project, consider whether you really need to use libraries like Bootstrap and jQuery if you can achieve the same results without them.
Unless your team’s time and budget are limited, you should consider ditching a lot of your frameworks to make your site faster.
You may also consider building your own in-house framework. You’ll make a trade off in the way of time and expense up front but may find you save time and improve efficiency in the future.
That decision is up to you. If you’re simply a business owner, maybe avoid this. If you have a team of devs at your service, it could be right up your street!
7. Minify HTML, CSS and Js files
This one’s fairly simple. Every character in your file equates to more space being consumed.
That includes whitespace, line breaks.. Even comments!
I’d recommend always having a backup of your commented code and a minified version, without comments and whitespace on your live host.
Here’s a free tool which will automatically minify your code. You’re welcome!
8. Refactor code
My eighth tip to make your website faster has got to be refactor your code.
This means removing redundant CSS styles, correct usage of the cascade and following correct naming conventions. This is particularly important when working as part of a development team but it is something all writers of code should practice.
Will you write your class names in lowercase and separated by underscores or will you use camel case?
That example seems minute and almost petty but it reduces mistakes and redundant code.
Do you really need that particular style if there’s another class which achieves something similar?
Why not get more out of our time and use this free web tool to make your websites load a little faster?
9. Embrace AMP to make your website load faster
AMP is a rather nifty, new way of publishing content which loads quickly for your users. It’s safe to say Google are pushing it pretty hard right now. Why not learn more about it on the blog?
10. WordPress Users Should Limit Plugins and Server Backups
Did you know each backup of your site can slow down your server, making your website bigger and longer to load?
You should minimise the amount of backups you make. To do this, schedule your backups to free cloud storage services like Dropbox or even Google Drive. Remove your old backups.
Also, make sure you remove redundant themes from your WordPress admin while you’re at it!
11. Test Speed and Follow Advice
You should check your website’s speed and do a full speed audit before you plan a website speed improvement strategy.
Now you probably want to do this not only for your users but also your Google rankings so where better to learn how to make your website load faster than by using Page Speed Insights by Google. It’s free and creates a report for you.
Want to learn what makes a great report?
Still struggling? Check out this amazing post on scoring 100/100 in Google’s page speed tests by Felix Tarcomnicu on Moz.
Did you Learn Something New?
I sure hope you did! Want to chat about making websites load faster and how you can make your site faster? Tweet the SEO and Social team @pirlmediagroup today!