Ensure You’re Optimizing Behind the Scenes Too!
Everything Counts When Shooting for Better Load Times
We’ve talked about optimizing your page speed before, focusing on plugin audits or how to handle big images. But for every one thing on the frontend of your site to optimize, there’s something behind the scenes as well. While these might not have such an obvious effect, they’re still crucial for maintaining your site and serving it up as quickly as possible to your audience. While some of these may be on the more technical side, we’re here to help, right along with the rest of the WordPress community!
Minifying Files
One of the easiest things you can do to help the load time of your site’s pages is to minify your code files. When writing code in any language, from HTML to CSS to Javascript, there are certain formatting rules developers follow to make the guts of the site easier to read and troubleshoot. However, this nice formatting results in a lot of lines of code, each requiring a little more time for your user’s browser to process. For simple sites with a small stylesheet, this may not be such a big deal. For sites with many scripts and lengthy stylesheet, those little bits of extra time quickly add up.
Minifying a file is basically just removing all the extra line breaks and tabs that make it easier for people to read, instead making it faster for the computer to read. Best practice is to keep both files, do edits on the normal formatting, and then run it through a minification program and have the website serve the minified version. This can be done through an external service, or software built right into the website like WP Rocket.
Lazy Load for Images and Videos
This feature has less to do with optimizing assets, and more with optimizing how they’re loaded onto the page. Basically, you can configure larger assets like images and videos to only load right before they’re about to enter the user’s window. This means the page can load much faster since it only needs to load the images that are immediately visible. If the user never scrolls, then that time is saved. If the user does scroll, then the images will load right as the user is about to see them, and more quickly since the bulk of the page has already been loaded. There are a few different options for this: natively, through an API, or with a plugin that does this automatically.
Defer JavaScript Loading
This is similar but somewhat different to lazy loading visual assets. Oftentimes, JavaScript is loaded up in the header of a page. Since everything loads in order, then they’re often loaded first. However, with a lot of plugins or bulky native scripts, this can really slow down the load times of your website. And since plugins and scripts in the header are loaded across the entire site, this can sometimes slow down the loading time for a feature that the page doesn’t even utilize. In most circumstances, it’s safe to let the visible content to load first so the user can start interacting with the page, and then push the scripts to the back of the loading line.
If you want to defer custom scripts, it can be as simple as adding the async
or defer
variable to the scripts. These two have a few differences, but either will accomplish what we’re looking for. For targetting scripts you don’t have as much control over, like in a plugin, you can use a different plugin or a more complicated sitewide script that doesn’t get deferred.
Page Caching
Another effective tool is to set up page caching. As we’ve been talking about before, things like scripts and stylesheets go into the loading of a page as much as images and other assets. In essence, a cache takes these files and stores them locally on the user’s browser. This means that when that person comes back to the page, they don’t have to download every single relevant file again. The browser ‘remembers’ some of the information already, making the load much faster.
This browser caching is the most common method, and usually comes default with your WordPress hosting solution. There are a few instances where you may need to configure an outside solution, but as a rule you should not have more than one caching system in place at once. This will often drastically increase your load times, if not outright break your site. So check your hosting platform’s caching solution before implementing anything new.
Gzip Compression
Maybe minifying files just isn’t enough. Sometimes, even files without the extra formatting are still too big, and take too long for the user’s browser to load. Thankfully, there is a solution! Similar to compressing images, you can configure your server to compress these larger files, and send the zipped version when the user’s browser requests it. Downloading this zipped version happens significantly faster than the whole file, and unzipping (or decompressing) only takes a sliver of time as well. Thankfully, almost all operating systems and browsers can handle this, too!
There are a few exceptions, though. And this is one of the more complex solutions on this list. We won’t go into the gritty details here, but you can find great guides around on the web.
Implement a CDN
A Content Delivery Network, or CDN, is designed to help your site load more quickly worldwide. In general, when you’re purchasing space on a server to host your website, you’re only purchasing space on that one server. Hypothetically, if that server is located in California, then users in New York might experience a somewhat longer load time, let alone users across the ocean in Europe. A CDN is a system of servers more spread out geographically, each of which hold onto a cached version of the building blocks of your website. This eases the load that the original server has to send over, thus reducing load times even for people on the other side of the world.
Just by their nature, CDNs are the one thing on this list you can’t set up yourself. Bigger hosting solutions like WPEngine have them as an option, or you can look into highly-rated third-party solutions like Cloudflare.
Feeling a little overwhelmed? Don’t hesitate to reach out to us at Mr. WPress for help! We’ve had years of experience optimizing websites for lightning-fast load times, and we’d be delighted to help you serve up the best version of your site!