Podcast Episode

406 – Different Types of Caching for Your WordPress Site

Announcements

Is there a plugin for that?

With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.

For more great plugins, download my 50 Most Useful Plugins eBook.

Dark Mode is a beta plugin that might one day be part of the WordPress core that turns your dashboard into a dark mode

Different Types of Caching for Your WordPress Site

These are the six kinds of caching that are important considerations for a WordPress site:

  1. Storage of static assets in memory on the server, rather than disk storage
  2. Storage of static assets closer to your visitors, which is typically done with a CDN
  3. Whole page caching via an external process, like Varnish
  4. Whole page caching with a plugin like WP Super Cache
  5. Partial caching of transients with an in-memory datastore like Memcache
  6. Partial caching of transients with the WordPress database

Thank You!

Thank you to those who use my affiliate links. As you know I make a small commission when someone uses my link and I want to say thank you to the following people. For all my recommended resources, go to my Resources Page

Full Transcript

Business Transcription is provided by GMR Transcription.

On today’s episode, we are going to talk about one of my least favorite topics when it comes to websites, and that’s caching. We’re gonna talk about the different types of caching that your website can have right here on Your Website Engineer Podcast, Episode No. 406. Hello and welcome to another episode of Your Website Engineer Podcast. My name is Dustin Hartzler. And today we’re gonna be talking about something that I don’t like to talk about. But it’s important to know and important to dive in and figure out a little bit about what caching means. A lot of times we talk about oh, well, it’s probably a caching problem. Or maybe you should clear your browser cache. We talk about it. And we throw that term around a lot. But I don’t if we’ve ever dove in and really talked about what it means and what type of caching is out there. We’ll dig in, and we’ll talk about that in just a few minutes.

I do have two announcements and one plug-in to share with you. Let’s dive right in. The only announcement that I could really find – and it’s been a real slow news week when it comes to WordPress news. And I scoured the Web and couldn’t really find anything. But what I did find was one article on WPTavern.com. And it talks about how meet-up group organizers can now earn a WordPress.org user profile badge. Back in 2014, this was a new system or a new setup of a user profile and got a redesign in 2014. And now they included badges. If you’re a plug-in developer, you get a badge for that. If you’re a WordCamp organizer, you get a badge for that. If you’re a WordCamp speaker, there’s a badge for that. There are all kinds of different badges that are the contributions page. Now there’s a new one that is for the WordPress Community Team Meetup or Community Meetup. The meetup.com fees are paid by the WordPress Community Support Team.

If you are a Meetup organizer, head on over to the link in the show notes, and you can find out more there of how you can add your user ID there. And you can make sure that you are part of that. And you get that badge on your website. That’s really the only news that I could find. The other thing that I kind of shoehorned into news – and I just wanted to give you six months of advanced warning or advanced notification that WordPress at Dayton is going to be happening March 1 and 2 of 2019. That’s not quite six months away. If you are planning to come to the Dayton area when it’s going to be beautifully cold here in Ohio in the first weekend of March, we’re starting to put together all the things it takes for a WordCamp. We’re looking for speakers and whatnot. And if you want to come and hang out in my city, I would highly recommend that. It’s one of the first campsetters happening in North America.

If you wanna kick off your WordCamp season – if you go after the holiday travels and all that’s over. The website’s not ready yet. But put on your calendar March 1 and 2 to come to Dayton, Ohio. Let’s move on to the plug-in of the week. Let’s talk about a plug-in that I’ve been tracking for a long time. It’s a beta-level plug-in or a plug-in that’s in beta. It’s one of those ones that they’re developing in beta to hopefully be integrated and added into core somebody. But it is called dark mode. And this is a plug-in that’s got a thousand active installs. And it is basically allowing you to turn your WordPress site into a dark mode application. So, instead of having the right-hand side of your WordPress dashboard be very white and bright, this will turn things into more of a dark mode and make it much darker. It changes the colors a little bit. It looks really nice. And I’ve been following the progress awhile. I know that I’ve talked about this plug-in in the past.

It was probably six months or so ago. But things have changed a lot. There have been a lot of really neat improvements. And it’s really working well. If you wanna give that a test run to see what it looks like in dark mode – what WordPress can do in dark mode, then I recommend checking that out. Let’s talk about WordPress caching. Like I said at the top of the show, it’s one of my least favorite things because caching just makes things hard is how it feels to me, especially if you’re troubleshooting. I know that one of the things that happened to me when I was developing websites many moons ago, I was working on a website using GoDaddy. I was very frustrated because I was just learning how to use CSS. I was just trying to figure out the basics. And I was trying to change some colors. I was using the Chrome browser tools. Or maybe back in the time I was using the thing called Firebug.

And I was changing the colors. And then I would update the colors. I was testing the code. I would update it in WordPress. I would put it in the CSS area or whatever. And then I would refresh my page, and it didn’t work. I was just so frustrated. And I couldn’t figure out why my CSS wasn’t working and why every time I refreshed the page it wasn’t working. Well, it turns out that this was a very heavily cached website. And I was on GoDaddy servers. And it just took forever for those changes to actually go live and me to be able to see those changes made on my website. That’s kind of one of the reasons why I don’t like caching and that conversation about caching is just always so tough and so challenging. But just because I don’t like it and just because I try to avoid caching at all costs doesn’t mean that we shouldn’t talk about it. And we should go through and just talk about the different types of caching because we have that overarching bucket of caching.

But there’s a lot of different things that can be cached to help performance on a website. Caching is one of the easiest most effective ways to increase that performance of that WordPress software without investing in new hardware. If we don’t wanna change our server or upgrade our server or whatnot, caching is one of the best ways to fix some of those things. We talk about it casually all the time. We always throw that word around. In general, there are three types of caching that will make your WordPress site faster. The first one is static asset caching. This is keeping your images, style sheets and scripts more available. There’s whole-page caching. This keeps a rendered WordPress page and serves those rather than having them remade by WordPress every time somebody comes to your site. And then there’s partial caching where intermediate results are kept closer at hand for later use.

We’re gonna talk about each one of those broad three caching buckets that have two different ways that caching can be done. This is gonna be a 5,000-foot view. We’re not gonna talk about specific plug-ins or specific CDNs or different things. We’re just overarching, broadly talking about different ways that you can have your website cached. When you go to a website, you don’t type in your website engineer.com and then all of a sudden there’s all of the information for the homepage just stored on the server. That page is being generated or dynamically built from assets and things all over the place. It’s pulling in CSS files to get all of your styles. There are JavaScript files if you’ve got fancy animations and stuff going on. There are asset files for images and all kinds of different things. A page can easily have a hundred different requests. If you’ve got Facebook widgets and Twitter widgets, it’s pulling in information everywhere.

How a server has to deal with this is basically all these files are sitting on the server somewhere, whether that’s a spinning disk – an old-school hard drive that spins or flash storage. But that’s really expensive when it comes to speed for your Web browser to request a file and then they’ve gotta go get it from the server and bring it back. And you can’t really enable this. This is something that’s built into your server or your Web hosting package. You can store these files in the temporary memory or in the RAM. And rather than needing to read from storage, it’s storing right in RAM so it can just be spit out and downloaded much, much faster. This is something that different servers have enabled. And this is something to look at when you’re picking your hosting to see if they do this sort of thing. Do they do asset caching? Asset caching is usually what they’ll call it. And just take a note and see if that’s what they are doing.

It’s gonna be big performance boost if your host is doing that versus another host who’s not doing that. The other way that you can asset cache is by using something that you probably heard of before also that’s called a content delivery network or CDN. We’re not going to go into exhaustive details like I said. But there are plenty of different solutions that are out there that are basically a way that you can store your static assets and they’re cache closer to that person if their Internet connection is from viewing that page. If you’re in Ohio like me, I may put things on a CDN or a local storage. If you’re over on the West Coast of the states, I’ve used CDN, and they clone all my assets everywhere. Now they’re going to put those assets in California or somewhere so somebody in Oregon can download those assets a lot quicker because they’re a lot geographically closer to where those assets are actually stored.

That’s a way in a nutshell how CDNs work. They can duplicate your content all over the world to make it faster to load those static assets, whether they be the images or CSS pages or the style sheets or the JavaScript files or all of those types of things. That’s the first bucket of the asset caching. The next type of caching that I wanna talk about is whole-page caching. And you can do this within WordPress. Or you can leave WordPress completely out of it. The first way is to use this thing called a reverse proxy like a service called Varnish. And what this does is it catches your WordPress rendered HTML before it’s sent down to your visitor. And then the next time a visitor asks for the same page, Varnish serves its caught version. And the WordPress site doesn’t even need to be bothered with that request. Varnish is purpose built for this. It’s super fast. In WordPress hosting, you’ll need to go to a WordPress specific host to get this kind of caching. Or it’s generally not something that you can configure in the WordPress admin.

It’s a little bit more technically advanced. And this is something that a lot of partners like Siteground and some of the other big name companies like Pressable and some of those others do some sort of Varnish-type caching to make sure that users are not necessarily making WordPress load all the files from the theme and all the plug-in files and all the querying and getting all the information from the database. They’re caching it and basically keeping a snapshot of what that page is supposed to look like. And then when a customer or a user comes to that page, they’re getting a static version where there’s no need to talk to the database, and there’s no need to download all of these files; it’s just one file. If your host doesn’t offer this, you can use different plug-ins like WP Super Cache. There’s W3 Total Cache; there’s Rocket. There’s a bunch of them that are out there. But this gives you the same type of functionality.

It’s not quite as performant because you’re relying on PHP. PHP is the technology that WordPress is built on, but it’s not quite as fast as some of these newer technologies like Varnish. You’re basically doing the exact same thing. You’re getting big performance wins because your WordPress site is doing the same thing. Anytime somebody hits a new page, then that page is saved as a static page. And then the next time somebody comes to that page, it’s like the old-school HTML pages that we used to create back in the day. There are no database queries or nothing. It’s really fast. And that’s how it works. If you’re using a host that doesn’t do some sort of whole-site caching, then I recommend using WP Super Cache; and you can do the same type of thing. The last one is called partial caching of transients and more. This is where you store intermediate data rather than relying on re-fetching or rebuilding it every single time.

A great example of this is when you’re making API requests to maybe Twitter. Maybe you have a widget that’s pulling in the latest tweets. And you don’t want to go out every time a page is loaded to go out and grab new data from the API and then update it and display it. It takes a lot of resources just to do that. On a Twitter widget, you could pull in the data. You could store it in a transient – kind of a temporary area to store things. And from there, you could say oh, every 30 minutes. Has it been 30 minutes? Okay, no – pull in that same data. Now you’re only doing that only every 30 minutes. If you have 15 people hit your website in a 30-minute window, you’ve only pulled that Twitter API just once, which is really, really helpful. Some Web hosts have this built-in. And they have different names for it. It’s either a partial, a fragment or dynamic. And they cache this in a memory store like Memcache or Redis. They have a couple different names for it.

They’re basically storing all of this area not in your WordPress database. But they’re storing it in this memory store like Memcache, is what they call it. Whenever it’s explicitly stored or set by a plug-in or theme developer or even the ones that are explicitly stored by WordPress itself, all of that information will go to this kind of a third-party system and store there. And it gives you a nice performance boost. In general, when you’re building out a Web page or when you’re waiting for a Web page to load, from what I know is the more requests that it has from different sources, the more things that it can do in series. If you have a hundred items that it’s gotta download from the server where your website is, it can only do five or ten of those at a time. But if you have five from your website host and you have five from this caching place and this hundred from this other place and they’re all kind of downloading simultaneously, it’s gonna make your website load faster.

That’s what’s good about when somebody hits your database; it’s pulling in the database information. But then it’s pulling the transient data in from this Memcache stored area. Some Web hosts do this automatically. It’s not really anything that I would recommend setting up unless your host has it. If you don’t have it and if it’s not part of your hosting plan, then I recommend using the WP underscore options table and sending all of the transient information there. That’s just an easy way that you can say any time there’s a transient piece of knowledge or piece of data that needs to be stored, just send it to the WP options table. That’s a quick way for your website to pull in that information or get that information back out to display. It’s a recap. There are six different types of caching we talked about. We’ve got the storage of static assets in memory on the server rather than disk storage.

We have the storage of your static assets closer to your visitors like a CDN. We talked about whole-page caching with the external process like Varnish. We’ve got the whole-page caching with a plug-in like WP Super Cache. And we’ve got partial caching of transients within memory database like Memcache based on your server. We’ve got partial caching of transients with the WordPress database. Each of them have a big positive impact on your site speed. Each one is different. My hope is now that you feel comfortable, you understand the knowledge behind it and what things that your website host can be caching for you, what things that you need to set up on your own to make your website faster. And that’s just in general what I wanted to share today. And it’s a big misconception that caching is easy like just turn it on and you’re ready to go.

But there’s a lot of configuration and a lot of steps that you can do to make sure that it is working most, most effectively. That’s what I wanna share with you today. Take care. And we’ll talk again soon. Bye-bye.

Leave a Reply