- Patrick Scully
As a website owner, at some point you will wonder: how fast does my site load?
This guide will teach you how to run the perfect WordPress speed test and what to do with the results.
We have broken the important topics out into sections. Here are the questions we answer:
- what makes a WordPress site slow in the first place?
- how do you check your WordPress speed?
- what low hanging fruit to fix first?
- how to optimize the media library?
- why minimize the number of requests your page makes?
- which 3rd party tools are best to use?
Why is having a fast website important?
Companies much larger than yours and mine (think Walmart and Amazon) have done extensive studies showing how decreasing the page load time of your website will increase your conversion rates.
This makes sense. How long will you wait for a webpage to load before you tap the back button? In today’s fast-paced, mobile Internet landscape people have little patience.
Bottom line, increase website speed and lower your bounce rate.
Let’s get into it.
The Twelve Steps to Run a Perfect WordPress Speed Test
Here's are 12 steps you can do to test the speed of your website. Our WordPress speed optimization service does all of this for you if you don't have the time or desire.
- View your WordPress website on a desktop and mobile device and note any issues
- Use an online tool like GTMetrix to run a website speed audit
- Note how many requests your page makes to your server
- Examine the waterfall view to note any requests that take too long
- Look at the timings tab to see your TTFB and First Contentful Paint
- Check with your hosting provider to make sure software to up to date
- Review the file size of the images on the page
- Make a note of any iFrame embeds on the page like YouTube videos
- Use Chrome DevTools to run a Lightspeed Audit to get immediate insights
- Install P3 Plugin Profiler to check if any plugins installed are slow
- Run WP Optimize to check for database overhead
Fixing your slow website should start with understanding the different components of your website that make it work.
Much like tuning up a sports car, one should probably have at least a basic idea of how all the different parts and systems interact before tinkering away.
WordPress Sites as Fast as an F1 Race Car
In previous posts, we have described the various “systems” that power your WordPress websites: the HTML code that builds your pages visually, the PHP code that sends and receives data from the database, and the MySQL database that stores all content, settings, and other data points.
If your website is experiencing lags or sluggish page load time first you must understand which piece of the puzzle is falling behind.
Is your database messy and full of old data making queries slow?
Are your images in your HTML huge files making the browser work extra hard?
Maybe two plugins aren’t playing nice and you have some bad PHP code that needs a developer to untangle.
Before fixing, first, we must understand the root of the problem. We do that through running WordPress performance tests. ⬇️
WordPress Performance Tests
Any website speed test, regardless of if it is for a WordPress website, will cover a few fundamentals. Every website sits on a server, so server response time is important across the board. Other elements like database queries or PHP versions may not affect a website, let’s say a static HTML site for example.
How Fast Does My Site Load?
Good question. That is why we are here. First thing’s first open up your website on your phone or laptop. Try to use an incognito browser window if you know how to do that. This is a window that ignores your local cache.
When your website loads for the first time. What do you notice? Does it come up quickly? Do certain aspects lag? Does it take forever to see anything at all?
This is the first step to a thorough WordPress speed test. It is real people that will use your website. It’s these people foremost, you need to worry about pleasing.
Continue reading below to learn about the 3rd party website speed test tools we often use in the industry to peel back the onion and diagnose slow WordPress websites.
Testing for Desktop for Mobile
While you are testing your website on your own browsers, it is important to cover another point. Your website will load differently on desktop browsers vs mobile browsers.
For example, an iMac computer plugged in via ethernet cable to the modem visiting a website using Chrome or Safari for macOS will load that page fast (depending on Internet speeds).
However, an iPhone 6s, brutally slow after 4 years of everyday use, and out on Independence Blvd. in Charlotte, somewhere around Bojangles Coliseum, with 3 bars on a 3G network…… you get the picture.
Testing for different devices in different situations is key to a fast website.
Server Response Time
Your web server is literally like a server at a restaurant. You ask him for food, and he returns with the requested dish. You request a Manhattan, he promptly brings back some iced down house bourbon with a cherry in it.
The “request” happens when someone opens your homepage in their browser.
The “response” is your server sending them the correct content and images that make up your page so they see something.
This happens in a few seconds (hopefully).
A good server will be quick on his feet and know how to handle multiple tables at once making no mistakes and without making customers wait.
A poor server will get easily confused, trip over his awkward feet, and cause patrons to leave and not return.
Making sure you start with a good server is vital to your success online. Shared hosting is often not good enough. Those poor overworked servers are serving millions of requests a day and easily get bogged down.
This seems like an appropriate time for a self-plug, so I will mention with our CARE service you get your own private server. Like what Michael Jordan gets.
Time to First Byte
Back to it, what we what to look at first is a metric known as “Time to First Byte” or TTFB.
This literally means how long it takes for your server to send back the first byte of data when someone requests your website.
It’s not everything, but it’s something and what it signifies is how well your server can handle a request. The faster the response, the more “ready” or “capable” the server is.
In fact, TTFB is one of the key speed metrics that search engines like Google take into account when determining rankings and other scores like AdWords Page Quality. They have publicly stated that speed is a determining factor.
What to look at here comes down first to hardware and software. Much like your own personal computer. What hardware are you using? What version software are you running?
Your WordPress website runs on a server software/language called PHP. If you use GoDaddy shared hosting there is a chance your server is running PHP 5.6.
Well, version 7.4 is out and there are a lot of speed improvements that can instantly make your Time to First Byte scores a lot better. That’s a quick fix that takes no changes to your actual website. Reach out to your hosting provider today to find out what version of PHP your server uses. Or contact us, and we’ll find out for you.
That is just one example - others include what version of MySQL your database runs on, or if caching options like Redis or Varnish are present and more. We will go more in-depth into how to cache your website, using a good caching plugin, in a separate post.
First Contentful Paint
First Contentful Paint measures when something gets defined on the webpage. This could be a text block, an image or a canvas render. This timing shows when a user first gets some content and is more telling about your user experience than something like a font being loaded in the background.
The #1 goal is to please your users. The second goal is to please search engines. You will find if you strive to achieve goal #1, you accomplish goal #2 and more.
How do I check the response time of a website?
Glad you asked. There are a few neat performance test tools out there to use when analyzing a website speed.
- Google Pagespeed Insights - That’s right. An actual website speed test by Google. Also known as the Lighthouse speed test you can test your website by either visiting their free tool online or you can run an “audit” right in your browser. Assuming you still have your website up in the incognito window look in the right corner of your Brower for 3 dots, click that and find “More Tools”, hover over that and select “Developer Tools”. You are now in Chrome DevTools Now on the top of the screen that should open up to the right you should see different options like “Elements”, “Console” and “Network”. Find the one that says “Audit” and you‘ll see a button that says “Run Audit”. Click that and let it do its thing and you will get a bunch of information. Disclaimer - a lot of the suggestions on the Google Pagespeed insights report are technical.
- GT Metrix - This is an easy to use free website speed test tool that is also free to use. You enter the page you want to test and the tool will run through a series of tests outputting the results in a fairly easy-to-understand report at the end. There are different sections to look at like recommendations, but the key sections of the report, waterfall, and timings are only available if you register a free account with the site. The waterfall report will show you a graph look at the requests made by your page and the time to receive the correct response. The timings report is where you will find your TTFB metric among others.
- WebpageTest Tool - This tool has been around for a long time and while some consider the output dated and hard to read, the results are accurate and you will also get the waterfall and timings reports. One benefit that is clear to see is the letter grades your page receives. These will be right at the top of the results page and you can quickly see if you got an “A” in one section but an “F” in another. Optimize until you get all green “A”’s and you are in good shape.
- Pingdom - This may be the most well-known speed test tool and for good reason. It is highly accurate and gives clear information. The data will be like the other tools mentioned.
Google Analytics UG Data
These are just four tools available. There are others including good old Google Analytics. You can see the average page load time of your pages by digging into Analytics. The benefit of this data is it is user-generated meaning the timings come from the actual users visiting your website. The tools above all send a “bot” to act as a user, so the GA data may be closer to what users are experiencing.
Google Search Console Speed Reports (experimental)
This is a brand new feature located within Google Search Console. It is currently marked as experimental so it may not last, however with the amount of importance Google places on website speed, my guess is the report only expands with more features and accuracy. If you do not have a lot of traffic you may not get results from this report.
Optimizing WordPress Media Library
You may have noticed in your page speed reports when looking at the waterfall view that the requests taking the longest were the image files. This is common as the images on a webpage are often the largest files. They should take the longest to load. But they don’t have to take forever.
Reducing Image File Size
Image compression algorithms are nothing new but many people still do not know how easy they are to use. By using an image compression tool like Short Pixel or WP Smush you can optimize your entire WordPress media library in one click. Smaller image files reduce load impact and load quicker for visitors.
Unless you are a high-end photographer who needs to show off pixel-perfect images (in which case there are solutions for this) you need not show off the highest quality image file as possible.
Compress all images to improve load times. If you have 20 images on a page and you make each one load 100ms faster, that’s a whole 2 seconds you shaved off.
Enabling Lazy Loading
The second thing you can do to improve your website speed test scores is enabling lazy loading. This has nothing to do with making your images load faster, but it uses the philosophy of if your images are not within the viewable window of the browser, then why load them?
With lazy loading enabled your images only loaded when the user scrolls down to that area of the webpage.
Imagine you have a long blog post and there are 3 large images at the bottom. Your blog post will load quicker if you hold off on loading those 3 images until the user gets down there. Chances are they may never read the full post (why did you put images at the bottom again?) and so don’t bother loading the images. If they get down there your lazy loading script will load the image and Voila, a happy user.
Content Delivery Network
While running your speed test you may see suggestions to utilize a content delivery network or CDN. This is good advice but not necessary for every website. What this does is put your downloadable assets like images and CSS files on optimized servers around the world. This way no matter where your customer actually is, they are downloading content from a fast server near them. That is a rudimentary explanation but good enough for our purposes. We won't get into the specifics but there are free and cheap CDNs available that can be set up by anyone with decent technical skills.
Minimizing Browser Requests
Remember the whole deal with the server? The user makes a request. The server sends a response. Well, what if your webpages made fewer Http requests and required fewer responses to show your content?
Turns out that helps a lot and there are multiple ways you can do this.
Go back to your website speed test and look at the waterfall view again. Look for any requests ending is “.css”.These are files that are loading browser rules on how to display your website. What font to use. Colors. Spacing between sections. They contain all of those rules.
Using WordPress we often install multiple plugins which many times require their own CSS files. Installed 10 plugins? That may add 20+ new CSS files to the page, meaning 20+ more requests.
But CSS files are just text files, and we can combine all the rules into just one document.
Now when someone visits your website, your server only needs to send back one document with all your display rules versus dozens.
A good developer will work to combine as many files as possible along with optimizing the loading order for the files.
For example, display rules critical to your website look should load first (we call this Critical CSS). But we may not require scripts or display rules that control portions of the page that may be unseen upon the first load to load right away.
This will vary by site what a developer can combine, defer and optimize.
WordPress Speed Test Complete
You have now learned enough to run your own speed test on your WordPress website. The data you get back will be technical and often overwhelming. People study server, code, and media asset optimization for years so it’s not something you can learn in a single blog post (as well-written and informative as that post might be 😃).But what you can do is identify problem areas and be able to discuss the issues with an expert on a level that most business owners cannot.
- Point to a slow Time To First Byte and know that you should discuss upgrading your WordPress hosting.
- Show a webpage with request counts in the hundreds and look for a developer to help combine and reduce for better page load time
- Uncover images that take over a second to load and understand you need someone to help with image optimization
Knowledge is power. My goal is to give you that power as best as I can while getting more of my own every single day.
Free WordPress Speed Analysis
In fact, I’m happy to review your website and discuss improvement suggestions over the phone during a 15-minute free consultation. This will give you free insights into improving your website and lets me check out lots of different websites keeping my skills sharp and ahead of the curve.
Thanks for reading. Please consider sharing with other business owners in your network! You can copy and paste the text below for the perfect LinkedIn or Facebook post:
In 2020 keeping your website fast will help your sales and optimizations. The first step in improving your website speed is running a website speed test. If you use WordPress, here’s the full step-by-step process, written by Patrick Scully, on testing your website speed from server response time to code and media asset optimizations. This is truly the ultimate WordPress speed test guide.