Page load times will always be a concern for web developers, especially as you discover new ways to impress visitors with custom imagery, dynamic content, and more video.
That’s because with each new asset added, your site has to generate additional HTTPS requests in order to communicate with your visitors’ browsers. And those HTTPS requests will incrementally slow your site… way wayyyy down.
This guide will cover what HTTPS server requests are, the tools you should use to keep track of them, and then the ways you can cut back on those requests within WordPress. Continue reading, or jump ahead using these links:
- What Are HTTP Server Requests?
- Tools to Track HTTPS Server Requests and Related Issues
- Reducing the Number of HTTPS Server Requests for Your WordPress Site
What Are HTTP Server Requests?
There is nothing more important than the user experience. This is what inspires visitors to subscribe to your blog, buy your products, or reach out for more information on your services.
Anything that compromises that experience—even if it’s just a web page taking a few seconds too long to load—can jeopardize your conversion rate.
So, here’s what you need to know about HTTPS server requests and why they happen:
Every time someone visits your website… Scratch that. Every time someone visits one of your web pages (and think about how many there are on your site), their browser puts in a request to your website:
“Hey, uh, can you send me all those files from your site so I can share this with your prospective visitor/reader/customer?”
It’s then your site’s responsibility to send over each and every file that your website is comprised of. This includes text, images (which is usually what the majority of files are), video embeds, CSS and JavaScript files, and even Gravatar images that appear in your comment feeds. And each file receives a separate server request.
Once all the server requests have been processed and files are transferred to the browser, your website can then be loaded on your visitors’ screens. But if your WordPress site has tens or even hundreds of files to send to your visitors’ browsers, what do you think that does to page load time?
Nothing good.
And that becomes exponentially worse as your site grows in popularity and receives simultaneous HTTPS server requests. Case in point: 40% of people lose their patience with a website if they have to wait more than three seconds for a page to load. Kissmetrics also reports that a one-second delay in a page response when a visitor engages with it can cost up to 7% in conversions.
So, you need to find a way to cut down on how many files need to be transferred to a browser if you want those load times to stay peppy.
The solution then isn’t to use fewer images or dynamic content or to go so minimal with your design that it’s overwhelmingly boring. While the size of files and quantity of files matter, there are ways to get around this in WordPress.
Tools to Track HTTPS Server Requests and Related Issues
Thankfully, there’s no need to play the guessing game here. It’s not like your visitors are seeing the white screen of death and you have no idea what’s caused it. There are a number of tools that will help you track the source of lag time in your site’s loading times.
Here are some of the more reliable (and free) ones:
Google Chrome Developer Tools
If you want an in-depth look at how long each element and file is performing on your WordPress site, take a moment to open it in a Chrome browser window. Once there, navigate to the settings tab called Developer Tools.
A new panel will open on the right side of your screen. Click on the Network tab and, from here, you’ll be able to review what’s happening on your page.
You can even drill deeper into the timing of individual elements as well to see if there is one thing in particular that’s holding everything else up.
Google PageSpeed Insights
Of course, that’s not the only tool available from Google to help you detect issues with HTTPS server requests. Ideally, if you’re using Developer Tools, you should have PageSpeed Insights in your arsenal as well.
Once you’ve run your site through the tool, you’ll receive results for both the mobile performance of the site as well as desktop.
Each of these assessments will provide you with a score out of 100 in terms of how well it performs and then will give you tips on how to optimize your site for improved performance.
GTmetrix
GTmetrix is another page speed assessment tool that will provide you with a performance score for your website.
However, the way GTmetrix handles this is a bit more comprehensive—and reassuring—than Google. So, although you may see a score that’s in the yellow or red (which is not good), you can hover over each of the data points to see what the average scores and load times are. This will give a more realistic idea of how well or poorly your page is performing.
In your assessment from GTmetrix, you’ll receive standard tips on how to optimize a page for speed. Each tip will have a corresponding score next to it, letting you know where you’ve done things right and where there are areas for improvement. And if you want even more assistance on those weaker areas, simply click on the down arrow and GTmetrix will tell you which files could use some work.
Pingdom
Pingdom is very similar to GTmetrix in how it works and the information it delivers.
The main difference between the two tools is probably the speed in which it delivers its results. Oh, and the interface is a little nicer to look at.
Otherwise, you’re going to receive pretty much the same exact assessment from both sites—which is exactly what you need if you’re trying to save time in assessing your site’s problems and want to narrow down what’s not working.
WebPageTest
I’d also like to throw WebPageTest in here.
While the site is a little clunkier and the results not as easy to read as some other tools, I like the bar graph used to display how long each file takes to load.
While there may be an overwhelming amount of data on this page and no tips on how to resolve specific slowdown issues, I still think the visualization of the heavier elements is good to have around. You can always use this in conjunction with Google’s Developer Tools to narrow in on the problematic elements on your site.
Reducing the Number of HTTPS Server Requests for Your WordPress Site
Now that you know how to identify the troublesome areas on your website, let’s talk about how to nip the overarching issue in the bud: decreasing the number of HTTPS server requests for your WordPress site. Here are 9 things you can do now to keep them to a more reasonable number:
1. Delete Unnecessary Images
I’m not saying you need to start sacrificing images for the sake of cutting down on HTTPS server requests. Instead, I think you should focus on keeping your media library in super squeaky-clean shape. So, if there are images you’re not using—even if you hope to use them in the future—ditch them. They’re doing nothing but adding extra weight and server requests your site doesn’t need.
2. Delete Other Unnecessary Files
You may be surprised by what you discover in the page speed assessment tools above. They may tell you that it’s not the images causing a problem, but instead it’s something like a social media feed plugin or an embedded video. If there’s anything on your site you deem unnecessary and it’s causing bloat, scrap it. This includes plugins and themes you’ve installed, but aren’t using at the moment.
3. Reduce File Size
Another thing you must do? Get the WP Smush plugin and automate the compression of your site’s images. If you want to keep those beautiful, high-resolution images on your site and the quality intact, then you need to compress them.
4. Create a CSS Image Sprite
Using CSS, you can create what’s known as a CSS image sprite. Basically, this CSS file will combine all of your image files into one. Use this guide from W3 Schools to create your own.
5. Do Lazy Loading
Have you ever heard of lazy loading? If not, give this article from Raelene Morey a gander. Basically, these plugins only send server requests when a user scrolls down to an image on the page. This saves your website from having to send unnecessary HTTPS server requests to the browser for images that your visitors never even come close to encountering.
6. Ignore Irrelevant Assets
The WP Asset Cleanup plugin works similarly to how lazy loading plugins do. However, rather than focus on delaying the server requests for unviewed images, this plugin detects when there is a plugin, file, or other asset that exists within your theme, but not on that specific page. It then keeps that asset from being loaded and detected on that page; thus, decreasing the number of server requests that have to go out to browsers.
7. Use Hummingbird
A caching plugin is an absolute must for WordPress websites—especially if you rely on visitors returning to it time and time again. For those return visitors, there’s really no need for you to process the same server requests if nothing has changed, and so a caching plugin will remove the need to do that.
WPMU DEV’s Hummingbird plugin is perfect for this. In addition to managing browser caching, it also takes care of file compression, CSS, JavaScript, and HTML minification, and also adds a CDN to speed things up even more. You’ll also have access to performance reports in case you don’t feel like using one of the third parties above to assess the state of your site’s speed.
8. Combine CSS and JavaScript Files
WordPress websites are bound to have numerous CSS and JavaScript files floating around. Rather than continue to send each file as a separate server request to your visitors’ browsers, though, you can merge them into a singular file.
Just keep in mind that your merged CSS file should reside within the header of your website. Your JavaScript file then needs to go in the footer.
9. Limit External Images
The most common example of this shows up in the comments feed of a blog. Did you know that if you leave the default WordPress commenting system in place that it’ll automatically use Gravatar (another Automattic property) to pull in commenters’ photos and bios? Those photos then become additional server requests you have to send to browsers, and that could get messy if you run a popular blog. Commenting plugins will help you avoid this problem.
Wrapping Up
Oh, the joys of developing WordPress websites. There is so much that can be done within WordPress, but it’s easy to lose sight of how all of those beautiful themes, cool plugins, and awesome images can become excessive in the eyes of a browser simply trying to process it all. But, never fear: if you keep a page speed monitoring tool close by and abide by the nine server request reduction tips above, your site performance should be fine.
Tags:
