We all know that website speed matters. No one likes a slow website. Even the most causal of all web users will prefer a faster websites over slower websites. It's become so important that Google uses website loading speed as a ranking factor, so don't hesitate! Get your website loading time as low as possible.
Today I'm going to show you how to improve the speed of your WordPress website. You will also learn how to check the speed of your website along with tips on reading the test results.
By following this information, you'll learn how to keep your WordPress website fast!
The speed optimization process is pretty standard for most websites. It involves a database & script optimization, image resizing and compression, and a few other adjustments.
Our website, Bocain Designs, usually loads in one to two seconds. We even using a theme that some developers would call "bloated" (Betheme, at the time of writing this).
I like to compare a fine tuned website to a fuel efficient car.
If you insist on towing a 10,000 pound trailer with your fuel efficient car, you can expect the efficiency to take a major hit.
There are many ways to figure out how fast your website loads. The easiest way to do this is to visit your own website after clearing your browser cache of course.
Important: When checking your website speed or loading, do so with a clean cache. This gives you a better idea how the website loads for a real visitor.
When we optimize WordPress websites, we rely on a a few industry website testing tools to get the job done.
Pingdom Tools lets you select from a list of test locations. When assessing a client's website, I'll run tests from a few locations. When I do this, I take into consideration the client server location and where their target demographic lives.
When you run a test on Pingdom Tools, you get a summary card with a score, total size, loading time, and number of requests. Your primary focus should be on the load time and page size.
Load time impacts the user experience. Total page size impacts the amount of server resources necessary to load the page, along with the data transfer to the visitor's device.
With more and more people using mobile devices, it's important to keep the total size as low as possible to ensure a fast loading web page.
After you scan your website on Pingdom Tools, scroll down the page for more details. Scroll to the section seen below, and use the filter to sort the contents by largest file size . This lets you spot the problem files quickly.
It's not uncommon to find large images or a few oversized scripts after doing this and from there, you can come up with a solution.
To get the most out of GTmetrix, sign up for a free account. By doing this, you're given more tools and access to finer data points. This includes being able to select your test location, browser type, and a few other settings.
When you reach the results card, focus on a few key metrics: Fully Loaded Time and Total Page Size.
GTmetrix gives you scores for different factors. This website is already well optimized but has some problems relating to the images.
You can expand the results to learn more about it. For the image results, we can actually see what their exact recommendations are.
A word of caution - Use your own eyes when optimizing images.
It's common for these websites to recommend over-compressing your images, because they can't actually see the image. Don't over compress your images just to receive a higher "score" on a speed test.
If you're logged into an account on GTmetrix, you can click on the Timings tab for a much better loading time explanation. It's also recommended to take notice of the Contentful Paint time. This closely represents the user experience loading time.
Like Pingdom Tools, GTmetrix offers a waterfall chart which details your files in the order they loaded, and how long it takes to load them.
You can spot 404s and other errors here that may be slowing your site down.
This one is a bit less known but very helpful! As the name suggests, it's for image optimization. When we want to visually assess how well I can scale image sizes down, this tool is priceless!
Google, GTmetrix, and Pingdom tools do let you find large images, but they don't go as far as imgix Page Weight Tool.
Here's an example of how imgix works. After scanning a website you receive a summary of your page's total image size, and what the size could be with compression. Imgix gives you a detailed view, image by image, showing you before and after file sizes.
How much extra bloat are you requiring your users to download for the same user experience?
It also provides a detailed view, going image by image, detailing how big your image files are compared to how small they could be, if saved in an optimized format.
Google's Pagespeed tool recommends best practices, but doesn't provide a breakdown of details like the other test sites do.
This is our least favorite website speed testing tool out of the four listed in this post. We've mentioned it out of respect, but we rarely use this tool for assessing site speed.
We've found that using GTmetrix and Pingdom Tools for resolving website loading issues is sufficient.
Check out Google PageSpeed
Your website's speed will vary based on a few factors, many of which change on a daily, or hourly basis. It's important to be mindful of your location, your server's location, and any website speed testing tool locations. Many website speed testing tools allow you to select a test location. Select a location closest to your target website's demographic to see how it might load for them.
An easy way to test your website speed, without the use of a testing tool, is to visit your website from a browser that hasn't cached your pages yet.
What does this mean? If you use Google Chrome to browse the web, install Firefox, and visit your website. This gives the same user experience as someone who visited your website or the first time.
A few things to watch for while doing a fresh browser test:
We currently use a plugin called WP Rocket for optimizing WordPress websites.
We started using WP Rocket in 2016. Before using WP Rocket, we had been using W3 Total Cache or WP-SuperCache for optimizing loading times on WordPress websites. These are still good options, but if you don't mind spending a few dollars, WP Rocket is superior in many ways.
It's simple to use and still offers optimization methods like:
Depending on your website's size, content, and web host, you might be able to get by without a caching plugin at all.
If your web host happens to be SiteGround, their server-side caching tool (SuperCacher) does a fantastic job by itself. It's compatible with WP Rocket, but you may find it unnecessary.
If you're not afraid to tinker around with some code, you can add the following to your server's .htaccess file to improve how fast your website loads.
A Warning: If you are not comfortable with editing your .htaccess file, do NOT do it. Breaking this file can make your website unreachable.
If you're on a computer with a photo editing software like Photoshop, Photopea, or Paint, you already have the tools to get the job done!
It's important to resize your images based on how you plan to use the image. If it's going to be a full width background on your website, you may want the image to be 2000 pixels wide. If the picture is a head shot for an about page, you don't need it to be larger than 1000 pixels in width.
Resizing your images before adding them to your server will cut down on unnecessary page load sizes, and cut down on the need for lots of storage space.
Once your images have been scaled down to the appropriate size, you want to save it in a compressed format. When saving the image for your website, make sure you're saving in RGB mode, and not CMYK mode. CMYK file sizes will be much larger than RGB.
Our favorite online tool for compressing images is Dynamic Drive's Image Optimizer. It only lets you compress a single image at a time, but it gives you upwards of ten different copies of that same image. This lets you pick the one that "smallest, best looking" version of your image.
If you have many images to optimize, Dynamic Drive's tool is not the way to go. For bulk online image compression, you can use a tool like Compress JPEG to optimize up to 20 images at once. You can use their auto-optimization setting, or specific exact amounts by going through each image, one by one.
Test! Make sure you haven't broken any features on your website, or broken how it looks. Visit your website in a browser (clear your cache!), and pay attention to how fast the page loads, and how it looks. Is anything off? Missing? Non-functioning?
When optimizing your WordPress website with a plugin, you sometimes have to do a bit of trial and error to learn which configuration delivers the best results.
If everything is still working fine, re-visit the test websites from earlier, and run new tests. It's important to make sure your test location (for Pingdom and GTmetrix) is the same as the initial test, to get a more accurate set of data.
If you followed the advice in this post, you should have seen a significant improvement to your website loading speed, while seeing a reduction in total website size. Your scores most likely improved too, but in some cases, scores may actually go down, when speed is improved, and that is OK! This is one of the few times you can say "test scores don't matter" - website speed does.