Slow Loading Websites

Having a speedy website is important for any site; as surfers we are all so impatient these days and if we’re sat waiting for a site to load we get fed up, lose interest and move on. Research shows we have less than 3 seconds to grab a site visitor’s attention. Google’s bots can penalise our sites too because they place value on the user experience – a slow site does not represent a positive user experience.
As website owners, we don’t want our hard work to go to nothing and have visitors clicking off, so here we look at some of the most common reasons for slow loading times, along with steps you can take to speed it back up. We’ve categorised it into basic , basic+ & advanced as some are easy fixes, other’s not so…
Keep in mind that this is designed as an introduction to the issues, a Google search using the terms we mention here will help you learn in much greater detail.

BASIC STEPS

Step 1 – Establish your current site speed

First of all, let’s find out what you’re dealing with. If you haven’t already, get a Google Analytics account. You’ll find the site speed here: Behaviour > Site Speed > Overview.
Both Pingdom and GTMetrix are great (and free) tools used by the pro’s worldwide. They’re straightforward to run a test and don’t worry too much when you see the results – which can be overwhelming! See it as helpful advice, which you can act on. You’ll soon be a pro. Go step by step though, and record your edits. Both sites provide support pages for help.

Retesting your page speed

When you’ve made any changes, pop back into Google Analytics/Pingdom/GTMetrix to check your speed again. Finger’s crossed you’ll see some improvements. Keep a note of the changes you make, and the speed test results – when you’re making lots of changes you may be glad of your notes.

Step 2 – Compress your images

Un-optimised Images

A large amount of un-optimised images is the most common cause for a website to slow down. High-resolution images are generally used for printing; imagine a large outdoor poster and the detail it requires to be so big. These high-res images will consume huge amounts of bandwidth while loading all that detail therefore will take far longer to load the page it sits on. 
An image for web on the other hand needs far less detail, hence the reason we must optimise images – making them smaller for a web page whilst keeping their quality. The load time for a smaller, well optimised image will be nice and quick while the image retains its detail.
Don’t make the mistake of uploading an image straight from your phone and resizing them from within your website’s media library, this is not optimising. This simply forces your website to display it smaller, the detail is still packed in there. Best practice is to only upload web friendly images. A photo taken on your phone will be huge so it needs to be as small as possible to play nicely on your site and still be a great looking image. 
If you plan on using many images on your site, you must optimise them, using both the correct size for where it needs to go, and using the correct image format:

Image format

JPEG images are much smaller in size compared to image formats such as a PNG or GIF. Therefore a web page will load faster if the images are JPEG’s rather than a PNG or GIF. A gif is a moving image so there are times when you feel you must use it, but only when a moving image is needed.

Image size

Have a look at the images you already have in your WordPress Media Library. You’ll see their sizes, hopefully in kb – Any image size that is 1mg or over is way too big and needs to be dealt with as priority. Look at the size in pixels (px) too, check that they are less than 2000px.
Each post will have an option for a featured image – the one that can sit at the top of the page and show up on category pages. A good size for a featured image would be 1200px wide by 600px high, and ideally less than 100kb.
Should you have a featured image on a page that links to perhaps a home page slider, you may want these larger in pixel size. 2000px wide could be acceptable as you will have just a handful of pages like this so it won’t be a drain on resources. But try them both, if the smaller size works, don’t go bigger.
An everyday blog post image must be much smaller because you potentially have lots of them. A full width web page image should be around 600-800px wide. An image that sits within the text of your post should be around 400px wide. Always optimised though.

How to optimise your images

It’s best practice to edit your images before uploading them to your website, to do this you will need editing software such as Photoshop where you can resize an image and ‘save for web’. Photoshop is an expensive option but there are alternatives such as Adobe Photoshop Elements, Affinity Photo or Pixelmator Pro that offer more affordable options. Free alternatives include Gimp and Paint that will help you to resize your own images into the right size. Canva is a free graphic creating software and can produce web friendly images too.
Once uploaded to your site, a plugin such as WP-Optimize or Smush from WPMUDEV (free and pro versions are available) will further reduce every image you upload so they use as little resources as possible.
Recap:

• Check the file size of your images, anything above 1MB is a no-no. 300kb or less is better.
• Use JPEG for large images. Keep PNG’s for site icons, and GIF’s for moving images.
• The waterfall test at Pingdom or GTMetrix is useful to check images.
• Use an image optimisation plugin like Smush from WPMUDEV or WP-Optimize

Step 3 – Audit your plugins

A website with no plugins will present a baron and ineffective website, so we really do need plugins in our lives. BUT even sites that have been developed by a professional can fall foul of plugin conflicts which can slow your site or worse, produce the white screen of death. So it’s good practice to know what you’ve got at all times.
Literally make a list of what you have and what they’re used for, and keep track of everything. Make sure that you really do need those plugins and if you don’t need them, delete them. But take care – should you not know what a plugin does, be careful not to delete it. It could be essential so do your research and know exactly what you’re doing. Always know your plugins.
This is a good site for help: https://optimwise.com/how-audit-clean-up-wordpress-plugins/
And here for some more technically advanced help – https://www.siteground.com/tutorials/wordpress/optimize-performance/
Pro tip: Create a time machine document or a spreadsheet with columns for date, plugins and speed. Whenever you make changes on your site, make a note of it; the date and what your speed is before and after. This will highlight which plugins are properly working for you. You might find a wonderful flashy plugin that adds flashing lights to an image – but it makes your site slow. My advice? Bin that plugin.

Step 4 – other checks 

Advertising Content

Do you use your website for advertising? It’s a great way to monetise a site with high traffic, but you must take care not to compromise your site’s performance or its user experience with too many.
Website advertisements generate HTTP requests (see more later), which need additional processing time, therefore can slow the site. A handful of these extra requests won’t have too big an impact but start overdoing it and you’ve got a problem. So take care to limit the amount of display ads, using them only where you need them to ensure better performance for your website.

Flash Content

Although using Flash can add interactivity to your site, it is likely to contribute to a website’s slower speed. Flash makes your content bulkier, and the bigger the file size is, the slower your page will load. This is why Flash is used less and less in modern web designing.
If your site uses flash, reducing the size of its files would significantly improve loading speed. Or look for HTML5 alternatives to replace your existing Flash content.

PHP Version

Login to your hosting control panel and check your PHP version, it may need updating.
 

BASIC +

It’s getting a little more tech now but help is available with the right plugins;

gZIP Compression

Enabling gZIP compression instructs the server to pack all the web objects into a single container before being sent over to the requesting browser.
This compression reduces the size of data being transferred between your server and the visitors’ browser therefore lowering your site’s response time, and helps serve the requested content much faster.
gZIP is an easy performance task so if you are yet to enable gZIP compression on your website, then you should do so. A gZIP compression plugin like Hummingbird Pro will help you to do this.

Install a caching plugin

Caching a site refers to the process where a computer remembers a website rather than forcing it to reload the page every time it is visited, this leads to a faster load time. There are lots of basically free caching plugins, W3 Total Cache is a popular plugin and has lots of settings in addition to caching to play with, Hummingbird  Pro by WPMUDEV are also excellent choices.
A site will be cached upon visiting, and any further requests for the same content gets served from the cached memory, which speeds up the data retrieval process.
By implementing caching, you are likely to experience a huge improvement in the performance of your website.
Warning: Caching can drastically improve performance but take care with the settings. Plugins will do the job for you, and should warn you when you wonder into its more expert settings. Leave those advanced settings alone unless you really do understand how to use them.

Code Minifying

Unclean coding can cause slow sites. When you are designing your site, excessive white spaces, empty new lines and other unnecessary elements can find their way into your site’s code, all contributing to a slow site.  Removing these unnecessary elements will compress the code, reduce the file size and improve the overall page load time and if may well boost your SEO performance too. This process is known as minifying. If you are not familiar with coding, there are several online tools that can be used to clean and minify your stylesheet files. Again, Hummingbird by WPMUDEV can help with this.
 

ADVANCED

This section refers to more advanced web developing. We’ve included to give a novice an idea on what goes on behind the web designing scenes but a novice should not attempt to fix any of this.

JavaScript Issues

The use of JavaScript & jQuery in plugins have made it convenient for designers to add dynamic content to websites but they take time to be loaded, interpreted then executed which can result in significant delay when loading a web page.

• JavaScript scripts can get bloated, a web developer will be able to see what is really needed and remove what isn’t.
• The HTML5 attribute async (Asynchronous loading) tells the browser to load this script without blocking the page. If you don’t use this already, you could look deeper into using async.
• Using a single script for all your tools could be helpful, see Segment or Google Tag Manager.

HTTP Requests

HTTP requests are made whenever a user visits your page, the browser performs several requests to load each of the files such as JavaScript, CSS, as well as your image files. Having too many can slow down your site and make your visitors click off. Potential customers leaving can be costly to a business so it’s good practice to limit those requests where possible.

• Analyze your site at GTMetrix or Pingdom to identify your site’s HTTP requests.
• Reduce the number of files on your pages where possible. Includes CSS, images, javascript. This means removing those files that are not essential but are creating requests.
• Set your website to load JavaScript files asynchronously
• Minify your CSS and Javascript files reduces # of total files users will have to download. (plugin suggestion: Hummingbird by WPMUDEV)

CDN (content Delivery Network)

A CDN service is a network of independent web servers in different geographic locations that can serve web content to visitors with high performance, therefore it can be particularly helpful if a site attracts world-wide visitors.
Depending upon the actual location of your visitor, the requested content gets served by the node located at the nearest available data centre. It would minimise the round-trip-time (RTT) and serve the requested content in a much quicker time. Your hosting may already use a CDN as standard, take a look at your hosting Control Panel to check. You may have settings to edit there, please ensure you make a note of all the settings you edit.

Conclusion

Your website’s page load speed will depends on a number of factors which can make it a difficult task to identify the actual cause of its slow page load. 
Check your images first, run regular health checks with Google Analytics, GTMetrix or Pingdom.
Look at your site’s Apache parameters, PHP version & configurations.
Once you have a wonderfully fast loading site again, remember your the rules of designing your site – keep it smart & simple. Function over design. And always optimise your images.