Page load speed is the single most important aspect of a website.
This may sound a bit dramatic, but it’s true.
It’s all good and well having a beautiful website, but if its overall performance causes a negative experience, you may very well be compromising your brand and business.
The modern day consumer is an impatient and fickle one, and keeping them waiting isn’t a good idea. With the recommended total page load time averaging roughly three seconds, there’s very little room for error.
There are a number of ways which one can increase their website’s performance. The following blog post offers a few tactics that you can employ.
If you’re not fond of reading, watch Episode 15 of Divi Chat instead, where, a group of expert Divi web developers discuss various tactics that they’ve employed to boost the performance of both their own and their client’s websites.
How to Test the Speed of Your Website
There are a number of online tools that will help you test the speed of your website, often from different locations around the world.
Some of these tools assess site speed by a grade. This isn’t always the best measure, so rather use these tools as a guide and don’t be too strict about the grading.
How To Increase the Speed of Your WordPress Website
The following blog post is broken down into three sections, and it explains how you can improve your website’s site speed and performance before you build, while you’re building the website and after it’s gone live.
Even if your web project is not in a specific stage, read through each point and see what applies.
Plan: Designing for Speed Before Your Build
While it may not alway be possible, if you are in the position of starting from scratch, we’d recommend considering the following:
1. Plan Your Website
Websites come in many different shapes and sizes, and while there may be trends or patterns that can apply to each, no two websites are the same.
A one-page website will look and perform very differently to a portfolio showcase website with lots of imagery. Similarly, a membership site will perform differently to an e-store.
If you can plan and map out your site’s functionality – and possibly forecast how the business owner may choose to grow his or her website over a period of time – you’ll be able to build the website with a solid game plan in mind.
Site speed can be remedied post-launch with a number of plugins or third party services, but somewhat predicting where a site will lead in the future will allow you to give your client a heads up on what they may incur cost-wise, as well as the sort of work that you’d be billing them for, should these bridges need to be crossed.
2. Select a Good Host
The next step is to select a hosting service provider.
While this may seem like an easy step, there are a myriad of things to keep in mind when selecting the hosting company, such as:
- Traffic sources: If the website’s intended audience is locally based, it’s generally safe to opt for a host in the same location as the business. If the audience is international, it may do the website well to start with a hosting company based on the geographical location. The physical distance between the server and the site user can have an effect on page load speed as data calls must travel quite a distance in order to display a web page.
- CDNs: The point above, relating to the distance between server and search source, can be negated through the use of a CDN (Content Delivery Network). I’ll cover CDNs in detail a bit later, but keep in mind that some hosting service providers already include entry CDN options for their users, whereas others don’t. For example, A2 Hosting includes CloudFlare CDN services, and WPEngine includes MaxCDN services.
- Hosting package options: Generally speaking, most hosts will offer shared hosting, VPS hosting, dedicated hosting and/or managed hosting. If you’re forecasting that the site you’re going to build will have a lot of URLs, large scores of traffic, user upload/submit options for documents, etc., it may be wise to consider opting for either a more advanced shared hosting plan, or, jumping further up in the ranks of hosting options (i.e., VPS or Managed Hosting).
- Important features: When selecting a hosting company, try and opt for one that offers the latest version of PHP (7), server side caching, enhanced security features and SSL certificates (these are no longer optional, but are mandatory).
Selecting a host can be a challenge in itself, but to make the process easier we suggest the following companies:
Check out Review Signal for reviews and comparisons of different hosting companies.
Build: Developing with Website Performance in Mind
If you’ve begun the process of building a website, keep the following in mind while you are building.
1. Be Clever with Imagery
Large and unoptimized imagery is often the single biggest culprit affecting site speed. Sometimes, a client just doesn’t have enough knowledge about website imagery and/or how to manipulate and resize pictures before they upload them to their website.
With this, make sure that you offer some instruction on this topic for your client.
When planning out a website, it’s quite easy to figure out which web elements will be used, and in which areas they’ll be placed. If you’re using the Divi theme, you’ll be aware of how these web elements translate into various modules in the Divi Builder. Here, you can refer to the Elegant Themes post on Divi-specific image sizes to know exactly what sizes to set your images as, relative to the specific module.
As well as modifying the size of the image, it’s important to understand which image format you should be using when adding imagery to the web. Also relevant here, is understanding the different compression types (lossy vs. lossless) for when you reach the point of compression.
While there are a number of other image processing tools available (GIMP, Lightroom etc.,) Photoshop is the most well known and commonly used. To use Photoshop, you can buy an online license for Adobe Creative Cloud.
To resize an image and make it ready for the web, execute the following steps:
- Import your image into the program (Photoshop used here as an example)
- Navigate to Image > Image Size and enter an appropriate size (relating to the Elegant Themes post above, if you’re using Divi)
- Then navigate to File > Export > Save as Web, and select the appropriate image file type. Play around with the quality scale until you find a happy balance between image size and image quality.
- Save your image.
Before you import the new, smaller and compressed, image to your WordPress Media Library, run it through another stage of compression using an online Image Compression tool, such as:
If you’re worried that the people who will be working on your website will not be following the image compression steps mentioned above, then opt for an on-site tool that offers image optimization.
The following plugins can simply be installed on your site and, with very little set up required, will start resizing and compressing images from within your WordPress website.
Have a read through of this post by Elegant Themes and check out the following plugins :
2. Delete WP Post and Page Revisions
While you’re working on a site, you’re constantly making changes here and there. Every time that you edit or update a page or post in WordPress, the change is stored in the database, which can slow down data processing times and cause a site to lag.
To limit the number of page and post revisions, you can either:
3. Keep an Eye on Your Plugins
Plugins are incredible pieces of software that will help bring a world of functionality to your website.
Before traveling down the road of debating the correct number of plugins used on a website, consider instead the features that each plugin presents and keep in mind the quality of the how each plugin was written.
When a collection of unnecessary plugins are loaded on to a site, a stream of unnecessary scripts will run. This increases the number of database calls and adds to page speed load.
The number of plugins on your website has won’t really matter too much if the plugins themselves are all serving a purpose. Just make sure that each plugin is playing a unique role and that its job can’t be satisfied by a better alternative.
When selecting a plugin to use on your website ask yourself:
- Can I achieve this aesthetic or functional change in any other way?
- Is this plugin well supported?
- What are the plugin reviews like?
- When was the plugin last updated?
- Is the plugin compatible with the latest version of WordPress?
- Is the plugin compatible with Divi and the Divi Builder (if applicable to your development style)?
4. Use a Caching Plugin
As your build starts drawing to a close, remember to add a caching plugin before you wrap things up.
A caching plugin will basically create a smaller, static copy of your website’s pages and serve this static version (not the dynamic version, which relies on multiple database calls) to your site viewers. By reducing the database calls until the page or post is updated and servicing this copy, your site viewer will enjoy shorter load times.
The actual process is certainly a lot longer and more intricate, but this is essentially how a caching plugin works.
There are a bunch of caching plugins available, most notably:
Engineer: How You Can Enhance Site Performance for a Live Site
If you’ve launched a site and are looking to speed it up, go through all of the above-mentioned action points and see what you can do to remedy the pace.
- Would upgrading to a better hosting package help? Could changing your hosting company altogether be the solution?
- Look through the Media Library. Are the images unnecessarily large? Can they be made smaller and compressed further? Although a hefty task, could you save some load time by downloading, resizing, compressing and re-uploading the images? Could you trade off resources to install or purchase an image compression plugin for the site?
- What other plugins are loaded? Are they really important? Can you find a more multifunctional plugin to replace two superfluous ones?
- Does the website have a caching plugin set up?
If you’ve done everything you can, consider using a CDN.
1. Add a CDN
A CDN (content delivery network) allows you to store a small, compressed version of your website on a number of servers located all around the world.
As mentioned above the actual physical distance between your server and the person who is browsing your website can have an effect on page load speed as data has to continually travel a specific distance.
As opposed to simply keeping one version of your website on one single server (as set up through your hosting company), opting for a CDN will allow you to store your site on a number of internationally dispersed servers, thus, decreasing the distance between server and request source, and increasing your page load time.
Selecting a CDN service provider is quite a task. There are many providers to choose from, and at the end of the day, you’ll need to have a pretty strong understanding of the website in question, it’s objectives and the allocated budget.
Some CDN service providers offer a flat rate of pricing, others base their pricing off of bandwidth consumption. At the same time, some CDN service providers offer additional security measures which is a great value.
A few recommended CDN services providers include Cloud Flare and MaxCDN.
2. Monitor Your Website Regularly
To really make the most out of our website, it should be monitored, assessed and tweaked regularly.
For this, use these tools to keep checking on the website’s performance:
Taking this a step further, the web developer and client can choose to adopt a more long-term approach and build a relationship over time.
Here, the client can opt for a maintenance plan, one where the developer offers hands-on services to help keep the website performing at its optimal at all times.
This could include running performance scans on a regular basis, checking for broken links, setting up redirects where applicable, and maybe even some keyword planning with a bit of content tweaking.
At the end of the day, as site performance and page speed have a direct effect on user experience, prioritizing performance is possibly the most important aspect of designing web interfaces as they’ll certainly dictate a website’s longevity and a brand’s success.
We want to hear from you!
Have you worked on a slow site before? What did you do to solve the site speed problem? Are there any points not mentioned above that you think should be included? What tools, software or plugins have you used that you’d recommend for enhancing site speed and performance?
We hope that you’ve enjoyed reading this blog post and that it has given you a bit of help and guidance in the field of website performance.
If you have questions or comments, please share them below. We love receiving your feedback!
Thanks for reading!