How to Improve Page Loading Times
Top Ways to Increase Website Performance and Decrease Page Loading Times
We’ve put together here a list of super easy ways to reduce your page loading times and improve the overall experience for your customers and clients.*
It is well known that if your page takes more than 4 seconds to load the customer will turn away before they have even had a chance to look at your wonderful website!
Google even indexes slow websites and ranks them at a lower position. If you want a better chance at good SEO and getting those customers and sales, you absolutely need to have a fast loading page.
How do I check the speed of my website?
There are lots of great websites that will test your website for free. And in some page testing websites they will even give you recommendations on what needs fixing. Here are our top favourite page testing sites:
https://developers.google.com/speed/pagespeed
As always, before doing any major edits on your website we recommend backing up your site, that way you will have peace of mind in case anything goes wrong.
We recommend ManageWP for backups (FREE or only $2 per month per website! And you can manage multiple websites with their awesome dashboard).
You can also manage and upload/update new theme and plugin versions from here.
Here are some steps you can take to help improve your website’s loading times. We’ve broken the steps down into beginner, intermediate and advanced to help you get started.
We’ve split our guide into three parts:
BEGINNER:
- Image types and compression
INTERMEDIATE
- Caching
- Content Delivery Networks
ADVANCED
- Shared Hosting
- Hosting (VPS)
---------------- LEVEL: BEGINNER ----------------
Reduce the Size of Images:
This covers:
- Image Size
- File Type
- File Size
- Image Compression
Image size: Make sure the image you upload is the correct size (know your dimensions).
- Fullscreen images: You’ve just designed a lovely fullscreen image for your home page hero section or slider to really ‘wow’ your customers and it looks great! But do you really need a 4000px+ size? The majority of screens that your customers use will display a HD screen size (1920x1080px) just fine.
- Logo: The same goes for your logo in the menu bar. Most logo areas in the menu bar are specifically designed to fit in larger screen sizes as well as smaller screen sizes (such as in the responsive/mobile/tablet menu). Again, you don’t want a 2000px sized logo if the maximum height in the logo space is only 52px.
File type: Provide the correct file type for the purpose.
- JPG: This is the most common type of image you will see on any type of publication (print or web). It’s very simple and can hold millions of different colors within it.
- PNG: Similar to JPG, but this file type allows for alpha levels providing transparency. This is great as it gives you more design options, but increases the overall file size of the image.
- GIF: These are typically an ‘animated’ image. GIFs are layered graphics put into a sequence to display as an animation. They can be very complex or very simple, but either way their file sizes are bigger than a JPG or PNG.
File size: Print and web images need very different sizes.
- Print images need higher resolutions so that they can be printed out correctly on all different types of paper and products. They need a dpi of 300. This makes the images a lot larger in scale and file size.
- Web images do not need such high resolutions because your screens display differently to paper. They only need a dpi of 72. This can help keep the images smaller in scale and in file size. You can then compress the images further without losing any visual quality.
Image compression:
- Automatic: This can be done within your WordPress website itself using a plugin that will automatically compress (smush) the image sizes for you. Wordpress.org already has a great list of good plugins. You can choose which is best for you: https://wordpress.org/plugins/search.php?q=image+smush But beware this can be a big hog on your server’s resources and may slow the server down if you are on a small shared hosting.
- Manual: One of the page speed test websites we love actually provide an insight to which images need compressing AND provide a copy of the compressed image for you! https://gtmetrix.com
There are also a few good websites that can compress the images for you, just run a search on Google to find the best one for you.
---------- LEVEL: INTERMEDIATE ----------
Caching
This covers:
- Caching Plugins
- Minifying
- Enable gzip compression
- Enable Browser cache, Object Cache, Database Cache
- Content Delivery Networks (CDN)
Caching Plugins: Using a caching plugin is probably the second best thing you can do to improve page loading times (see Step Four: Hosting for the first and best thing you should do).
Our top three plugins for WordPress for caching is:
- W3 Total Cache
- WP SUPER CACHE
- Breeze (works even better on Cloudways servers!)
All of these work great, and it depends on your needs as well as server resources and hosting permissions.
You will need to research how to use these plugins and how they best work within your hosting, but they are very simple to get the hang of.
So sometimes you will have to do a bit of trial and error with this. Get it wrong and it can break the page, get it right and your page will now load 2-3 seconds quicker!
Minifying: Outputs all of the lines of a file onto one line making the file a lot smaller in size.
This works best for html, CSS, and most JS files. JS files are bit more tricky due to how they are loaded into page, and the location where they are loaded in.
Enable gzip compression: Like image compressing and minifying, this can be done automatically on your server. Again you will need to check if your hosting allows this.
Enable Browser cache, Object Cache, Database Cache: These can be really useful if you have repeat customers, large amounts of pages views at time and more. (Check with your hosting on what they allow).
Content Delivery Networks (CDN): A CDN is a network of geographically dispersed servers that deliver cached content from the website to the user based on the geographic location of that user.
For example, the user is in France and your website is in North America. The CDN will display a cached version of your website in France, making the page load quicker as the CDN is nearer to the user.
There are lots of great CDNs to use, with free and premium accounts available.
One of the more popular free to use CDNs is Cloudflare.
You can then link your CDN up to your caching plugin in your WordPress site.
---------- LEVEL: ADVANCED ----------
Hosting
This covers:
- Shared Hosting
- VPS Servers
Shared Hosting
It used to be that for decent hosting you had to buy a dedicated server which would cost hundreds of dollars per month just to make your website load faster and perform better with each request.
The other main option was to share a server which was much, much more affordable, but the downside was that you often shared the server with hundreds(!) of other websites which would all be fighting for control of the server’s resources. This is called Shared Hosting.
But over the last five years there has been a revolution in the types of servers available with a whole range of pricing structures, control options and the ability to scale (upgrade or downgrade) the servers to your specific needs. These are called VPS servers.
For WordPress websites this was great! Software evolves at an extremely fast rate and the hardware sometimes struggles to keep up (you’ll often see with computer games). So the problem that many people face today is that they still have a slow website even after completing all the steps above to improve page loading times. The software isn’t the issue -the hardware is the issue.
WordPress is a massive hog on server resources. What do we mean by server resources?
- RAM
- Hard drives
- Bandwidth amounts
- Memory allocation
etc
VPS Servers:
With a VPS server you can easily set up your very own server which has a large amount of resources and even upscale it if you need more! Their pricing is fantastic as well, starting from just $7 a month.
Not only that, you have the ability to control pretty much all of the settings on the server without any restrictions normally imposed by a Shared Hosting account.
- Need to add more RAM? Done.
- Need to use a faster hard drive such as a SSD? Done.
- Need a large bandwidth amount? Done.
- Need to increase your WordPress memory allowance? Done.
You get the point… :)
However, this does often mean that you will need to have quite an extensive specialist knowledge of the command line code to set all of this up (which is a big leap from being just a website designer or WordPress user).
Eek!
This is where managed VPS servers come into the picture. These servers are managed by the specialist hosting company and they have set up a very easy to use control panels for you, instead of you having to learn all that command line code stuff!
In this day and age there is no reason not to be using a VPS server for your WordPress website. Here are our two favourite companies for VPS servers:
We wouldn’t recommend these two if we weren’t using them ourselves. They have fantastic support, software and services. (We’ve done a lot of trial and error with many different companies over the years so believe us when we say we recommend them).
Cloudways - Prices start from $10 per month for VPS hosting
*Please note that we do not provide support for any of the plugins or software in this article. By following the information in this article you do so at your own risk and we accept no responsibility for any loss or error of content or database. Make sure you backup your website and work often.