How to Make Your WordPress Website Load Faster
How many times have you followed a really interesting and compelling link only to land on a website that took forever to load?
Well, it turns out that for websites that take any longer than 3 seconds to load, visitor engagement falls off precipitously, while bounce rates go to the moon. In other words, letting your site take longer than 3 seconds to load will cause it to disappear from your audience’s view.
In fact, the optimal load time is 1.5 seconds or less for any kind of significant engagement. Even faster loading will further improve engagement, right up to the point where the site loads so fast that the delay becomes unnoticeable.
Moreover, the load speed for your site is one of the most important criteria for page ranking by Google’s algorithm.
I think you’ll agree that achieving load times for your site of less than 2 seconds, and preferably less than 1 second, is one of the most important things you can do to tune up your website, for going into business.
Let’s commit to the following goal: to have your wordpress site load in less than 3 seconds.
In keeping with the Pareto Principle (the 80 – 20 rule), let’s focus on the top few ways to make the most difference in speeding up your site.
Resize, Compress and Convert the Image and Photo Files
The first and most effective thing you can do to speed up your site is to make sure that the files that need to be loaded are no larger than absolutely necessary. The culprits here are usually photos and images, more than any other type of file.
It’s absolutely imperative to resize your images and photos to match your website’s pixel width. After all, it doesn’t make any sense to upload photos or images whose resolution exceeds anything that will ever be displayed.
So make sure that you set up a workflow or process (a content pipeline?) for all the images that you plan to upload onto your site. This will help you to systematically resize your images and photos so they don’t exceed your site’s limits for display quality and pixel width, to ensure most efficient file loading.
For example, you could decide on a conservative value of 1200 pixels for the display width of your site.
This width works for responsive web design, for optimal display on a range of display devices, from desktop through mobile.
Now when you set up your content pipeline, make sure that all of the full width images or photos are resized down to a width of 1200 pixels. Also make sure that images displayed at half width, say in a gallery, are resized to 600 pixels wide, and so on, depending on the gallery format. Otherwise you’ll waste precious upload bandwidth.
While resizing your images, consider compressing them by up to a factor of 4 or 5, which you can often do without seeing any noticeable degradation in their display quality.
Note that compressing an image file by a factor of 4 or 5 corresponds to saving a JPEG file at a quality level between 85 and 70 out of 100, where 100 yields no compression.
Finally, you want to convert your images and photos to a state-of-the-art file format for display across a wide range of web browsers. JPEG will d,o but WEBP is better, although not as universal just yet.
That pretty much covers everything you really need to do with photos and images. I think what you’ll find is that resizing and compressing images as I’ve outlined above, in addition to saving images for your site in either JPEG or WEBP formats will take you 80 percent of the way to your goal of a much faster website.
Check Your Site Speed
At this point you would do well to check website speed using one of several available tools. For example, you can perform a Google website speed test by using Google’s PageSpeed Insights tool (https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect).
Other options to test website speed include tools available at Pingdom (https://tools.pingdom.com/), notably the Pingdom Website Speed Test.
GT Metrix (https://gtmetrix.com/) also offers a tool for performing a convenient website speed test.
Basic Housekeeping for Site Speed
Until now, we have only looked at how to minimize the size of the files. The next thing we can do to significantly boost the page loading speed, is to minimize the number of files that need to be loaded.
Begin by auditing, editing and simplifying your site to make it as lean and clean as you possibly can.
For example, use a maximum of two fonts, and a maximum of two types of headings.
You can also limit the number of images that you include on your homepage, or any particular page on your website, to an optimal number, say a half-dozen.
Bear in mind that you don’t want to have any unnecessary or random images left on your site for a mere decoration. Every image that you include should be absolutely essential towards communicating the message whether it’s advertising sales copy to encourage visitors to buy or absolutely necessary graphical representations of concepts to explain and communicate your point.
Edit your written content for conciseness. Your readers will thank you.
In short, there’s a lot of basic housekeeping you can do for your site. Make sure that your site is as lean and clean as possible. As a result, you are sure to see a significant boost in loading speed.
Compress and Minify the Text Files
Beyond doing the hard work of editing, auditing and housekeeping, you can also use specific WordPress plugins, some of them free, to combine code files and to minimize or eliminate multiple different call-outs during site loading to things like CSS style sheets and JavaScript code.
You can also gain a significant edge on loading speed if you compress and minify the text files.
Make sure that you have installed and activated the most suitable WordPress plugins to find the various text code and text files for your website, then combine and compress them as far as possible.
This is all fairly straightforward and boils down to a matter of choosing the right options for some of the latest plugins that boost site performance, many available for free.
In future revisions I’ll provide a few choice examples of WordPress plugins that boost site loading speed. For the moment, consider installing the WP Super Minify plugin.
Optimize File Loading
Okay. By now we’ve taken care of the most significant, quantitative actions that boost website loading speed, in short,by making sure that we’re not needlessly loading any unnecessarily large files, and by making sure that we limit the number of files that we do have to load to the absolute minimum.
Now we can look at how to load our website more efficiently so that it becomes fully interactive and fully functional to the viewer in the shortest possible time.
Lazy Loading
The most effective way to do this is to implement lazy loading using a WordPress plugin.
There are several plugins available. I plan to share my opinions about which one you should choose in a future revision of this post.
What lazy loading does, in a nutshell, is to load only the image files and photo files that are within the viewport or within the current page view, fully visible in the visitor’s browser window. In other words, when a visitor first lands on your side, lazy loading ensures that the visitor sees all the photo or image content that would appear “above the fold” of the current viewport presented to the viewer by the browser.
Meanwhile, lazy loading suspends the default loading of all the images and photos not within the initial viewport, until after the site has been rendered fully interactive for the visitor.
With lazy loading, the visitor should be delighted by the super fast loading of the content that is immediately visible before scrolling down. Then as the viewer scrolls down, the lazy loading functionality kicks in and loads images and photos as they come into view, or as they enter the viewport. But by that time, the site has already been rendered fully interactive and functional. In other words, for all intents and purposes, the website is already loaded.
Beyond lazy loading, there are a few other ways to make site loading as efficient as possible.
Asynchronous Loading
The next trick is to implement asynchronous loading.
Asynchronous loading allows multiple files for your website to be loaded pretty much in parallel without being held up by the inline serial loading or rendering. I’ll add more detail as well as recommend the appropriate plugin for asynchronous loading in a future revision.
Implement Caching
Implement caching so that repeat visitors don’t have to load up all the same files again and again. There is a huge crop of WordPress plugins available to implement caching for your website.
Defer Javascript Loading
If your site relies on a lot of Javascript, then you need to know that Javascript processing can be quite cumbersome and may protract your site loading quite considerably. If that’s the case then you need to defer JS loading. Again, there are WordPress plugins for doing this.
Additional File Loading Tricks
There are two additional ways to increase your site speed through better file management. I’ll just mention them so you’re aware of them:
- Simplify and Consolidate the Browser / Server Interchange
- Minimize the number of HTTP requests
Eliminate Laggardly Plugins
Ironically, both the number of plugins and their quality can have a huge impact on loading speed.
As a rule of thumb, web designers limit the number of plugins for their sites to no more than about a dozen. If your site is slow and the population of plugins for your site is high, then consider dropping some of the plugins that you don’t rely on.
It then becomes a kind of detective investigation to ferret out the laggardly plugins from the remaining few.
But there are some notoriously slow plugins to look out for:
Jetpack, Contact Form 7, Nextgen Gallery, Wordfence Security and a few plugins which make up the rogues gallery of laggardly plugins, which I’ll cover in a follow up post.
Choose Faster Themes
The name of the game here is to choose faster, leaner themes. But how will you know if your theme impacts loading speed? Split testing is the answer. Swap themes and then check the effect on website speed.
I have some direct experience with the impact of WordPress themes on loading speed.
On this website, I originally used a premium, best selling theme that was super rich in features, and which caused my simple site to take13 seconds to load. Then I switched to a simple, lean and clean, free version of a popular theme, Astra. to get down into the 3 second realm.
Check out this article at the Kinsta site for results of testing an interesting line up of speedy themes (https://kinsta.com/blog/fastest-wordpress-theme/). Note that Astra ranks high on the list of the fastest contenders. Moreover, the article is a really interesting read.
Migrate to Faster Hosting
Well by now you’ve probably exhausted your options. But what if you still crave that extra bit of speed?
At this point, you can look at hosting.
My recommendation is to check out the latest recommendations by Darrell Wilson, who’s authority in this matter is rock solid. Lately, Darrell has been recommending Siteground and Namehero as the best value in reliable, high performance hosting providers. But he also recommends others if you’re willing to pay a premium for speed.
Within the product offerings of a specific hosting provider, you may find faster alternatives to what you have now. Generally, shared hosting is slowest, with speed and price increasing as you upgrade.
Use External Platforms for Video
One day the interwebz may have infinite bandwidth so that even the resource strapped solo entrepreneur can afford to self host video. That day is not today.
In the meantime, the way to serve up videos on your website is to use a third party platform.
There are dozens to choose from, with both free and paid services.
YouTube, Vimeo and DailyMotion are the three leading, free video platforms, with Vimeo offering an affordable $7 per month upgrade to “pro” service.
Kinsta has published a convenient run down of the 10 Best Video Hosting Solution (https://kinsta.com/blog/video-hosting/).
Summary and Conclusions
In summary, I’ll leave you with the following few bullet points to add to your web design checklist:
- Keep your website design lean and clean
- A fast site requires fastidious housekeeping, including website speed checks
- Select images and photos for a specific purpose, not for mere decoration
- Resize and compress all photos while converting them to JPEG or WEBP
- Install plugins to streamline how your website loads, and to help it load efficiently
- Keep track of which plugins you install, and replace or eliminate the laggardly ones
- Choose a fast WordPress theme (see the link, above, for a recent show down)
- Use external, third party platforms for data intensive media (video)
- Migrate to a faster hosting plan, or a faster hosting provider, if you must
Don’t be overwhelmed. Start at the top of the list and work your way through it!
Consult the Abundance of Online Resources for Achieving Load Times less than 3 seconds
There’s a plethora of resources online that dive deeply into myriad ways of speeding up your site’s loading speed.
I’d like to give a special shout out to Ben Sibley, at Compete Themes, for listing the most effective things you can do to speed up your site in order of decreasing effectiveness.
Leave a comment or your questions!
I’d love to hear from you. I plan to revise this article every month or so. I would love to include your suggestions and corrections.