Caching vs Optimization for Site Speed

Discover the unique differences in caching and optimization to speed up the page load on your site and why you need to do both.

Two Ways to Speed Up Your Site

Caching and optimization are two different things.

Each plays a unique role in making your site page load speed fast.

Caching is about storing elements of your site so they don’t have to be downloaded from the host anew every time a page/post is requested.

Optimization is about reducing the speed drags.

Two Types of Optimization

On-site optimization refers to the direct, site related elements that can impact your speed.

Load order optimization refers to rearranging how the elements that make up your page/post content load in the visitor’s browser.

Do On-site Optimization First

There is no way any caching plugin is going to effectively overcome inherent speed drags on a site.

The best way to speed up your site is to fix and reduce the drags on it first.

The biggest site speed drags, in order, are:

• Images
• Theme
• Plugins
• Security
• Database bloat
• Hosting

No online speed test is going to find all of those issues.

It takes looking on the host side of things too.

In fact, when chatting live with a client about their site audit report, we start with all of the issues found on the hosting side. And we already know what all of the speed issues are before we even begin chatting about what the online speed testers show. 

Plus, most clients see a noticeable speed difference in their site once we get those server and site-side things fixed, even without any type of caching or optimization plugin installed.

I kid you not!

The biggest bang for your buck is image optimization simply because those files are so large and take the longest time to download.

You need to optimize images prior to upload.

That way you won’t need any of those smush type plugins, as none of them really work that well anyway. And worse, most require you to carry double the image load on your hosting disk space too. All of the originals, plus all of the smushed ones. Hosting disk space is THE most expensive storage in the world.

Read the following posts for more image optimization help.

• Why Image Reduction and Optimization is the Quickest Way to a Fast Site
• How to Test Image Optimization for Faster Page Load Speed
• Why Squoosh is My Image Optimization Tool of Choice

Themes can be bloated messes and are the second leading drags with site page load speed.

You can usually only see these in the waterfall of speed tests. You’ll find all manner of css and js files. But you’ll also find loads of font files, including FontAwesome, which brings in a whole library of symbols even if you are only using one of them on the whole theme!

Plugins are another big source of site speed issues due to lots of css and js file requests. Some will also bring in their own fonts. And some are database hogs from hell!!!!

See the bottom of my Plugin resource page for a few of the worst offending speed drag plugins.

And, see the Speed section of my Helpful Posts page for how Pinterest and Instagram widget plugins are killing your site load speed too, plus easy and good looking alternatives to use instead.

Security and performance go hand in hand. You are renting a limited number of hosting resources like disk space, CPU, and memory. If bad bots are constantly chewing up those resources, there are fewer for human visitors to use, hence a slow site.

Hosting is most definitely a speed factor. But notice that it is at the bottom of the list, and for good reason. I have no idea why so many folks in Facebook blogging groups suggest changing hosts to improve speed. I can make a site run faster on any host, as the hosting is usually not the biggest speed offender. (Some hosts do give you better server-side caching right off the bat, and your site will run faster on it, but you could implement that same caching at the host you are on and get the same result. It just may not be set up by default.)

The other speed difference is the server stack the host uses. Apache is the slowest and Litespeed is the fastest, and you’re going to have to pay a little more for Litespeed servers.

But, what is the worst issue with speed at some hosts is the lack of proper security, and that some hosts don’t allow you to implement all security measures. If you could kick all those bad bots to the curb, you’d have more resources for your human visitors. That’s the main reason to move to a better host.

Do Load Order Optimization Second

Ever hear of “eliminate render blocking above the fold” issues in a speed test result?

That refers to rearranging the load order of content elements so that things a visitor can see, like text or an image, are delivered sooner in the load process rather than later.

The 2 most common render blocking elements are:

• JS – Javascript files – mainly from plugins and ads
• CSS – Cascading Style Sheet files – mainly from the theme and plugins

JS and CSS files don’t render anything we can see.

Hence, they are considered “render blocking” elements.

The “above the fold” reference is to what’s called the on_load point.

That’s the last line you can see on a page before you have to scroll.

Naturally it is much shorter on a mobile device than it is on a laptop or desktop screen.

But, just because the visual content is shorter on mobile, it doesn’t mean the load order of render blocking elements is shorter!!

That’s why you need some external help to rearrange the load order and get things like your first images toward the top.

For instance, you really don’t need the js and css files of your share buttons to load before your header logo image.

Nor do you need the Gravatars of commenters to load before the first embedded image of your blog post.

But, that’s exactly what happens!!

In fact, you can see the exact order of each site element request in the waterfall view of online testers and in the Request Headers section of those testers.

Defer

There are some site elements that need to load immediately, like the CSS file of your theme.

But others, like your social share plugins, and those Gravatar images of commenters can wait until later.

This is what a good optimization plugin can do for you.

It will detect what is loading and defer the less important elements, or those that don’t appear near the top of the page until later.

Minify and Combine

What if you could store all those CSS and JS files into a smaller file?

Think of it like packing a month’s worth of clothes into an overnight bag.

That’s called minification and it’s a great way to reduce and/or reorder those render-blocking elements that slow your page load time down.

You may also be able to bundle some CSS and JS, and even HTML files together to reduce the number of requests it takes to load your site.

That’s called combining.

Minification rarely breaks sites anymore.

But combining is a bit trickier.

The more aggressive it is, the greater the risk of breaking your site.

Fortunately, most all optimization plugins have a long list of things that break when combined, so they know what can and can’t be included.

And, if they miss one, they give you a way to manually exclude the file.

Lazy Load

Since a site visitor can only see a few images on your post prior to scrolling, why not defer the loading of the rest of the images until they do scroll?

That’s the premise of lazy loading.

It literally stops the image file from loading until needed, and that speeds up the initial page load too, as it takes those images out of the load order.

Do Caching Last

As mentioned previously, caching is all about storing certain elements of your site so that your pages/posts load faster.

There are several places to store those elements, including:

• The host – also called server-side caching
• CDN – Content Delivery Network, like Cloudflare
• The visitor’s device – also called browser caching, or client-side caching

Browser Caching 

This type of caching tells the visitor’s device which of your site elements to store into the browser so it does not have to be downloaded from the host or CDN again.

Browser cached elements can include:

• Fonts
• Header logo image
• Some CSS and JS files

You can also tell the visitor’s device how long to hold those elements in storage.

So, if the visitor goes to a second page on your site, it will load way faster than the first page because it can pull some of the page elements locally, meaning directly from their own browser or memory.

And if the visitor returns to any page/post on your site within a week, those same elements will still be stored on their device and your page/post will load quickly, even if it is their first time to visit that page/post (assuming they have not cleared their browser cache/history).

Server-Side or Host Caching

WordPress, themes, and plugins are all created on the PHP coding language. 

Your site is made up of several PHP files, like header.php, sidebar.php, etc. And all of those have to be compiled into a single document.

Plus, image files have to be pulled from the uploads folder.

And your content and links and such have to be pulled from the database.

All of that compiling and pulling is a strain on your hosting resources.

What if your most popular posts could be pre-compiled and a copy of them is just sitting there waiting to be delivered?

That’s called pre-loading.

And that copy is a server-side cached version of your post.

Not only does that speed up page load, it also lessens the load on your host.

But, don’t expect to see any real speed or resource savings on this until you get 25k+ hits a day on your site.

Plus, pre-loading at the host can really chew up resources in a hurry!!! It’s best to do pre-loading via a CDN, like Cloudflare.

CDN Caching 

If you order a pizza, you want it to come from down the street so it will be hot when it gets to you, right?

What if your site could be delivered to the visitor from down the street no matter where they live in relation to where your host server files are located?

That would cut out all of the internet wires and hubs that could be overloaded and slowing your site speed delivery down.

That’s exactly what a CDN like Cloudflare does. 

Last I looked, they had 35 mirrored locations in the U.S. alone. With that in play, your site files will be coming from down the street!!

And since they are a cached version of your site, most of it is sitting there pre-loaded and ready to go and doesn’t have to pull so much from your host every time someone requests a page/post.

Cloudflare gives you a LOT more security too. It’s fantastic for kicking bad bots to the curb before they ever even hit your hosting. That’s going to save you on hosting resources big time, and make your site faster.

Plugins for Optimization

There are plugins that do nothing but optimization. 

Autoptimize is a good example of one.

It literally reorders the page/post elements to ensure that your start render time is as fast as can be.

This equates directly to your perceived speed, or how long a visitor has to wait before they start to see the thing they came to see on your site. 

It also impacts how long a visitor has to wait between the time they see something and when they can scroll to see more.

Both of those things impact your “perceived speed” site load time.

The faster it is, the more likely your human visitor will be to stick around and read your content.

Plugins for Caching

There are plugins that do nothing but browser caching.

WP Super Cache is one.

It tells the browser what site elements to hold on the visitor’s device, and for how long.

You can also hard-code these caching directives in your .htaccess file.

In fact, some folks do that and then use an intelligent optimization plugin.

Plugins for Caching and Optimization

There are plugins that offer both caching and optimization. 

But, they can be tricky to configure properly.

Caching and optimization methods/plugins have to be coordinated with your:

• Host server type
• Server-side caching and optimization
• Your unique site elements

Good examples of combo caching and optimization plugins that are relatively easy to configure are:

• WP Fastest Cache Premium
• WP Rocket

Need Help with Your Site Speed?

I offer a site audit that finds all of the performance drags on your site, including those that are caused by lack of proper security. 

On average, I find 26 issues that no plugin or tester can find.

You get a 20-30 page report and a live chat to go over it in non geek-speak so that you can clearly see the issues too.

Not only can you get your site fast and secure, you’ll know how to keep it that way.