Optimising the speed of your WordPress website is like preparing for a marathon race. You need to train hard, eat well, and focus on improving various aspects of your performance. Our WordPress Page Speed Optimisation Team has assembled this awesome list of WordPress page speed tools and resources to help make your pages load lightning fast. We also had Tim McMillen over at profound who has kindly pitched in on the technical elements here.
The key elements involved in WordPress page speed optimisation include:
- Image Optimisation: This is like making sure you wear the right running shoes. Images can take up a lot of space on your website, slowing it down. You need to optimise your images by compressing them without sacrificing their quality. This can be achieved by using plugins like Smush or EWWW Image Optimizer. You should always resize your images before uploading them to WordPress. This means the user only has to download the minimum amount of data, putting less load on their bandwidth and your server, ultimately resulting in faster page load times. Tim says “Consider trying one of these plugins to help reduce the impact that bloated images have on your load times.”
- Cache Control: This is like having water and energy drinks available throughout the race. Cache control helps reduce the time it takes for your website to load by storing data in the user’s browser cache. This can be achieved by using plugins like WP Super Cache or W3 Total Cache.
- Code Minification: This is like packing light for the race. Minification involves removing unnecessary code, spaces, and comments from your website’s files to make them smaller and faster to load. You can use plugins like Autoptimize or Fast Velocity Minify to achieve this.
- Asynchronous Loading: This is like having multiple water stations throughout the race to avoid long waiting times. Asynchronous loading helps to load scripts and stylesheets simultaneously, thereby reducing the load time. This can be achieved by using plugins like Async JavaScript or WP Deferred JavaScripts.
- Content Delivery Network (CDN): This is like having a team of pacers that help you maintain a consistent pace throughout the race. CDNs distribute your website’s static files, like images and videos, across multiple servers worldwide, reducing the distance that your content has to travel to reach the user’s browser. You can use CDN services like Cloudflare or Amazon CloudFront to achieve this.
- Lazy Loading: This technique loads images only when they are in the user’s view. This can speed up page load times by reducing the amount of content that needs to be loaded initially.
- Choosing a fast and reliable WordPress hosting provider: The speed and performance of your website is heavily dependent on your hosting provider. Choosing a fast and reliable host can significantly improve page speed. You run a Google search, visit a few WordPress hosts’ sites, compare prices and pick the cheapest. As with most things in life, you’ll get what you pay for though – there’s a cheap way of hosting which will share resources, bandwidth and have limited security or protection. The cheaper your hosting plan, the slower your site is likely to be. Rather than labour the point here, you should read the detailed post, Web Hosting Pitfalls Are Costing You a Fortune.
Useful Resources for Page Speed Optimisation
- 8 Awesome Page Speed Testing Tools – tools you can use to assess your page load times, which can identify elements which are impacting page speed and provide recommendations for areas to work on.
- The Complete Guide to Improving Page Speed – a comprehensive guide into the important metrics, the tools and techniques used to improve page speed
- Page Speed Optimisation Jargon-Buster – a summary of the acronyms and terms used in Page Speed Optimisation, their meanings and a brief explanation for each.
Improving WordPress Page Speed by Optimising Images
Optimising images on a WordPress website can greatly improve page speed and user experience. Benefits of image optimisation include faster loading times, reduced bandwidth usage, and improved search engine rankings.
By compressing images without sacrificing quality, reducing image file sizes, and lazy loading images, you can improve your website’s page speed, reduce bounce rates, and provide a better user experience for your visitors. Additionally, optimised images can also improve your website’s accessibility, as visually-impaired users can benefit from faster load times and smaller file sizes.
Resources for Optimising Images in WordPress
- How to Optimise Images to Increase Page Speed – a comprehensive guide to image optimisation to improve page load times
- Using Image Offloading to Improve Page Speed – you can host images on a separate hosting platform or server to improve page speed
- 6 WordPress Plugins For Optimising Images – popular plugins which can be used to optimise image load times on your WordPress site.
- WordPress Plugins for Image Offloading – use these WordPress plugins to enable image offloading
Using WordPress Caching to Improve Load Times
Caching is the process of storing frequently accessed data in a temporary location to reduce server load and speed up page load times. In the context of WordPress, caching involves storing web pages, images, and other website assets in a cache so they can be quickly retrieved and served to website visitors.
Think of caching as a library. When you check out a book from a library, the librarian checks to see if they have a copy available. If they do, they hand it to you right away. If they don’t, they go and get it from the shelves, which takes more time. Caching works in a similar way. When someone visits your website, the server checks to see if it has the page cached. If it does, it serves up the cached version, which is faster than generating the page from scratch.
The benefits of caching on a WordPress site are numerous. By reducing the amount of time it takes to generate and serve web pages, caching can significantly improve page load times, resulting in a better user experience. This can lead to higher engagement, more pageviews, and ultimately, increased conversions.
There are several caching plugins available for WordPress which can be easily installed and configured to cache pages, images, and other assets. These plugins can also provide additional performance optimisation features such as minification, browser caching, and content delivery network integration to further improve website speed.
Tim says:
There are a number of plugins that can cache content, but having experimented with some of them, they do give varied results, and can often be limited by your hosting infrastructure configuration. Here is a good article comparing 20 Popular WordPress caching plugins.
- How to Use Caching to Optimise Page Speed – A detailed explanation of caching, how it improves page speeds, and how to implement and optimise cache usage.
- WordPress Plugins for Web Page Caching – Popular WordPress plugins for caching webpages and other resources to speed up page delivery
Minifying WordPress HTML, Javascript and CSS Files
Minifying HTML, JavaScript, and CSS involves removing unnecessary characters such as whitespace, comments, and line breaks to reduce the size of the files. This process helps improve page speed by reducing the amount of data that needs to be transferred from the server to the browser, which results in faster page load times.
For example, imagine you have a book with lots of blank spaces and unnecessary comments. If you remove these unnecessary elements, the book becomes shorter and easier to read, which makes it quicker to get the information you need.
Similarly, when you minify HTML, JavaScript, and CSS files, you make them smaller and more efficient. This means that the browser can download and parse them more quickly, which results in faster page load times for your users.
Tim says: “It’s easy to minify CSS these days, with an abundance of online tools such as https://cssminifier.com/ available to use for free. “As with CSS, JavaScript can also be minified in the same way with the help of websites like https://javascript-minifier.com/ or http://jscompress.com/”
Resources for Code Minification in WordPress
- Page Speed: Minification of Code – an explanation of the concepts of minification and how they benefit page speeds
- HTML Minifier Plugins for WordPress – popular plugins and tools to minify HTML on WordPress sites
- 6 Awesome WordPress Plugins for Minifying Javascript – popular WordPress plugins for compressing and minifying Javascript to improve page load times
- 6 Awesome WordPress Plugins for Minifying CSS – plugins to compress and minify CSS files on WordPress sites
- Legacy Javascript and WordPress – how to fix bloated, legacy Javascript in WordPress
- WordPress Plugins to Help Reduce the Impact of Third Party Scripts – reduce WordPress page speed issues caused by third-party Javascript
Asynchronous Loading
Asynchronous loading is a technique used to improve page speed by loading different resources simultaneously rather than waiting for one resource to be loaded before starting another. It helps to minimise the time it takes for a web page to load by allowing the browser to start rendering the page while other resources are still loading in the background.
An analogy to understand this concept is like ordering food from a restaurant. Instead of waiting for all dishes to be cooked before serving, a restaurant can start serving dishes that are ready while the remaining dishes continue to cook in the background. This way, customers can start eating sooner instead of waiting for all dishes to be ready.
In the same way, asynchronous loading allows web pages to start rendering while resources such as JavaScript, CSS, and images are still loading in the background. This can help to reduce the overall load time of a web page, which can lead to a better user experience.
To implement asynchronous loading, web developers can use techniques such as lazy loading, deferred loading, and dynamic script loading. These techniques allow web pages to start rendering before all resources are loaded, improving page speed and performance.
Resources for Code Minification in WordPress
Resources for Using Asynchronous Loading in WordPress
- How to Use Asynchronous Loading to Improve Page Speed – an explanation of asynchronous loading, how to implement it and how it benefits page speed.
- WordPress Plugins Which Manage Asynchronous Loading – popular plugins which support asynchronous loading functionality on WordPress sites.
Using a Content Delivery Network (CDN) for Your WordPress Site
A Content Delivery Network (CDN) is a network of servers located around the world that store and distribute website content to visitors based on their geographic location. When a user requests a website, the server closest to the user delivers the content, which results in faster page load times.
Imagine that you’re a bookseller with a store in a small town. Whenever a customer comes in, you have to go to your storeroom in the back of the shop to get the book they want. This process can take a while, especially if the book is in high demand. But if you had multiple stores in different cities and towns, each with their own stock of books, you could quickly get the book the customer wants from the nearest store. This is similar to how a CDN works, with multiple servers spread around the world delivering website content to users.
By using a CDN, website owners can reduce the distance between their server and the user, which decreases latency and improves page load times. Additionally, a CDN can help absorb traffic spikes, distribute bandwidth usage, and wrap a comforting security blanket around your site too, protecting you from bot attacks and other perils of owning a website which would otherwise slow your site down. For those that don’t, third party services such as CloudFlare can be added separately.
Resources for Implementing a CDN for WordPress Sites
- Using a CDN (Content Delivery Network) to Improve Page Speed – explains the concept of a CDN, how CDNs work and the pros and cons associated with them.
- CDNs to Use With WordPress – popular Content Delivery Network solutions which work well with WordPress.
Enabling Lazy Loading in WordPress
Lazy loading is a technique that improves page speed by delaying the loading of certain resources such as images and videos until they are needed. This means that a webpage can load faster because the browser doesn’t have to wait for every resource to load before displaying the page to the user.
Lazy loading is like a waiter who brings you your food one dish at a time, instead of all at once. With lazy loading, the website loads the content that is necessary for the user to see first, like text and basic images, and then loads the rest of the content as the user scrolls down the page.
For example, imagine a webpage with multiple images, some of which are below the fold. Without lazy loading, all of the images would load at once, which could slow down the page load time. With lazy loading, only the images that are visible on the screen are loaded, and the other images are loaded as the user scrolls down the page.
Tim says: “If you have a media library full of legacy images that are just too big, or you just do not want to optimise every image you use on your website before you upload it, then consider trying one of these plugins to help reduce the impact that bloated images have on your load times.”
Resources for Implementing Lazy Loading on a WordPress Site
- Lazy Loading and How it Works – explains the concept of lazy loading, the benefits and how to implement it.
- 6 WordPress Plugins For Optimising Images – popular WordPress plugins for lazy loading images.
Using Fast WordPress Hosting
Web hosting packages can have a significant impact on website speed. A well-optimised hosting package can greatly improve website speed, while a poorly optimised one can slow it down.
For example, shared hosting, where multiple websites are hosted on a single server, can lead to slower website speed during periods of high traffic. In contrast, a dedicated server, where a website has exclusive use of a server, can result in faster website speed.
Similarly, the location of the server can affect website speed. If a server is located far away from the website’s users, it can lead to slower load times due to increased latency.
Other factors that can affect website speed include the server’s processing power, memory, and storage capacity. For example, a server with limited processing power and memory may struggle to handle high traffic, leading to slower website speeds.
Therefore, it is important to choose a web hosting package that is optimised for website speed and meets the website’s specific needs.
See: Web Hosting Pitfalls Are Costing You a Fortune
Tools to Test and Improve WordPress Page Load Times
If you’re a Chrome user, right-click on a page on your site and click, “Inspect Element”.
Use the Chrome Inspect Element function to check and improve WordPress page load times
There are options here to view your site, pretending that you’re using different devices but that’s a whole other blog post. We’re really interested in the Network tab. Make sure you have that selected and then refresh the page in your browser.
Assessing WordPress Page Load Times Using Google Chrome
As the page loads, the Network tab will show you how long each element is taking to load. Every image, every script, every part of your CSS and the server response time itself. That data should give you some clues as to where you can improve your page load time.
Run your WordPress site through Google’s Page Speed Test Tool. This free test will identify specific areas which are slowing your site down.
Keep a close eye on the average Page Speed in Google Analytics. You might even consider setting up a custom alert to email you when page load times spike – it only takes one plugin or excessive load on your server – if you’re not paying attention day to day, you could easily go weeks without noticing a dip in leads or sales through a mistake which can be easily fixed.
Use a website monitoring service. There are many available, though my personal experience is of Pingdom which has a free basic service and lots of other toys if you choose to pay.
Pingdom will email, tweet or even text you when your site is slow or not responding.
Pingdom will email, tweet or even text you when your site is slow or not responding.
Learn more: 8 Awesome Pagespeed Testing Tools
If you found this video useful, make sure you’re subscribed to our YouTube channel for more videos about how you can grow your business through Digital Marketing. In the meantime, do you have any pressing questions about WordPress page load times? Let us know in the comments, or click below to speak with one of our specialists and take advantage of our free, 19-point SEO Audit.Speak with a Specialist Get a Free SEO Audit. Or why not take a look at our WordPress Page Speed Optimisation Services?
