An introduction to Hello, WP!, and the topic that brought Josh and Micah to the podcasting table – caching. On this episode, they speak to two of WPMU DEV’s “hidden heroes” to learn the basics of caching and scoring big on Google PageSpeed Insights.
Automate optimization on your website with Hummingbird’s utility belt packed with file compression, asset optimization, a complete caching suite, Cloudflare integration and performance monitoring that really gets your site flying!
Use this link to get Hummingbird and all of WPMU DEV’s products FREE for 30-days.
Micah Dailey: I’ve been using WordPress for several years now, in fact I made my first blog on WordPress when I was like…I think 14 years old. Aww what a time…prepubescent, never been kissed, and nobody in the world understood. We’ll save that for a different podcast, though.
Anyway, back to WordPress…it wasn’t until recently that I realized there was a whole world around WordPress, an entire culture inside of it, and a thriving community that contributes to it.
So that’s exactly what made us think this podcast might be a good idea. I mean, think about it: A guy stumbles into a vast online ecosystem and wants to discover its community by learning from the people who make it so special. But when we sat down to start recording a few months ago…I was a little apprehensive.
Micah Dailey: I’m intimidated by the WordPress community–
Josh Dailey: You’re intimidated?
Micah: Just being honest; right off the bat. I’m intimidated by it. And this is just from my initial…small interactions on the blog and WPMU’s blog, because I you know I’ve been–
Josh: Trolling [laughter]
Micah: [laughter] Searching…trolling…l–leaving nasty comments on …. I’ve just been going through the blog, the discussions, looking at as much as I can just to kind of get a glimpse of what’s going on–
Josh: Right.
Micah: And right off the bat, just because I’m probably closer to a beginner; but, with the experience that I’ve had, I’m somewhat of–
Josh: Yeah, you’ve got a few sites up there.
Micah: Yeah…I’m somewhat of an implementer–
Josh: Right.
Micah: I’m not even close to a developer. Yeah… Google is my is my school. I go to Google to find any code–
Josh: [funny voice] Hey, Goo Goo!
Micah: [laughs] Hey, Goo Goo! Gimme some…Gimme some code, Goo Goo! Seriously, I search Google for each particular thing that I need to fix.
Josh: Right. There’s the introverted side of us all that’s intimidated to not know what we’re talking about, and so we’re on a mission…to…or you are–
Micah: I’m the one on the mission–
Josh: You are on a mission…to discover WordPress
Micah: Yeah, recently, because of you…I realize that I had no clue what WordPress was– that there was a community attached to it, or that surrounded it, and I’m curious. I want to know what it is.
Josh: And so we thought it would be a good idea–for some reason–we thought it would be a good idea to record this journey…to just give our listeners a window back into what it’s like trying to start from scratch and enter into a community, which can be an uncomfortable thing, But, also the kinds of things that you uncover along the way.
Micah: Yeah
Josh: The little gems you find along the way…
Micah: Yeah. Oh, get a little closer…
Josh: Get closer to the microphone, okay.
Micah: [fading] That’s perfect.
[music]
Micah Dailey: So, friends, welcome to Hello, WP, the show that reminds you what it’s like to be a new WordPress user like me. My name is Micha, that was Josh, and on each episode we’re gonna take on different topics with the goal in mind to discover WordPress and it’s valuable community while giving you–the listeners–a window into the “user experience”. It’s a podcast for everyone from the WordPress beginner to the WordPress pro.
[music]
Segment #1: The Beginning
Micah: Okay… now you know what inspired us to make the show; but how do we get here? What interesting, yet controversial, topic brought us to the podcasting table? That’s what we’re gonna spend the rest of this episode discussing.
Micah: My relationship to you in the past has been to call you every time I run into an issue while making something on WordPress. [laughs]
Josh: Right. No, it’s more like you know me as someone connected with WordPress.Whereas, really I’m just a WordPress marketeer. I use WordPress, I can put sites together in WordPress, But, I’ve surrounded myself with professionals, and if I don’t have the answer–
Micah: They do.
Josh: They do.
Micah: Quick backstory here: Yes, Josh’s a long-time WordPress user and WPMU DEV employee. And yes, he has been my go-to WordPress person for over ten years, because he’s actually the one who introduced me to WordPress. However, saying that’s my relationship to him is a bit of an understatement. Josh’s also my long-time brother and by long-time brother I mean we have the same parents. I’ll try not to read into why he wanted to underplay that so much while we were recording.
Anyway, so before getting hired to WPMU DEV, I was making sites for a handful of clients with Josh acting as my resident quote unquote WordPress tour guide. I’d called him for his thoughts and advice and he directed me to keep my hands and feet in the tour bus at all times–or whatever tour guides say. But it was actually in one of these conversations where our first topic for this podcast was born; something that’s always baffled me…
Josh: Recently, you you put this site together for one of your clients, and you called me up and you asked about what I thought about the site.
Micah: Mm. Yeah.
Josh: I looked at the site and it was beautiful…you did a fantastic job laying the site out. But, we dropped it into a PageSpeed test and it was not good.
Micah: Not so good.
Josh: Essentially what happened is,, you ran your page speed test in Google and then I also suggested looking at…WP Check Up. Now the the tension is… you run your site through one of these scans and as a new user, you get a red X next to caching. What do you do?
Micah: I…I would clear the…[laughter] but wait, ‘cause this is…this is honestly what…what I thought caching was…I’ve just cleared the … my browsers …everything. Just, you know clear the history, clear… everything in the… from my…from my browser.
Josh: Right. Yeah, okay, so there are a gamut of cache tools. You go to WordPress.org: free tools–like crazy. So… Hummingbird is one of those tools. It’s an amazing tool. I send you over its DEV Man’s superhero sidekick for speed…for speed optimizations.
Micah: Can… can you say that in DEV Man’s voice?
Josh: Hm. I wish I could. We might have to get DEV Man over here to do it.
Micah: [laughing] Let’s get DEV Man in here real quick.
Josh [as DEV Man]: Well, hello everyone! I’m DEV Man, and I’m here in the studios for the first-ever episode. [laugher]
Josh: But back to our story. So, we’ve got hummingbird installed on Micah’s site, now. And, I can show you you’ve got problems with your site. But I’m not the guy to fix the problems.
Micah: Yeah
Josh: We know we’ve got a cache issue… right? And so, we’re going to get one of the Hummingbird professionals on to talk to us about how to set up Hummingbird caching to get the most out of it for your site.
Josh [Announcer Voice]: Hello, WP is brought to you by Hummingbird, the automated speed booster with file compression, asset optimization, cloudflare integration, performance monitoring, and of course: a complete cache suite.
Micah: [laughing] Why are you reading it like that? It’s an ad: it doesn’t make sense–it’s free, it’s at WordPress.org.
Josh [Announcer Voice]: Downloaded free on WordPress.org.
Micha: That works.
Josh: [laughing] What, is it too contrived?
Micah: No, it’s just… that works.
[music]
Segment #2: Caching and Minifying
[Ringing]
Anton: Hello?
Josh: Anton!
Micah: Josh reached out to our developers at WPMU DEV and was connected with Anton, the co-lead developer of Hummingbird. It almost feels like we’re talking to the Hummingbird herself–or maybe her brain? I don’t know.
Josh: …and so we wanted to talk to you specifically about the topic of caching today.
Anton: Okay, perfect.
Micah: So Anton, nice to meet you, by the way.
Anton: Nice to meet you as well.
Micah: I was telling Josh my understanding of caching in the past has been very limited. Could you kind of go through the different types of caching?
Anton: Okay. So, basically caching is storing some data for faster access later on. …If we’re talking about web development web sites, we have two types of caching that we’re gonna talk about: it’s space caching and browser caching. There are some different smaller types of caching, like gravatar caching, which just specific to WordPress platform. We have the RSS caching… that handles the RSS feeds so basically that’s the four types of caching that we have right now.
Josh: Okay, so if you’re storing data on hardware, that’s something that our listeners probably wouldn’t get into and that would fall more into the type of hosting that you use in the importance of having maybe some real nice hosting with a good cache system built into it, right?
Anton: Yes. In terms of server caching…most of it is done by your host and you’re probably not gonna see any settings, some control panel…[fades]
Micah: Okay, so if you’re a little confused already–like I was–let me take you on a little journey.
[music]
Micah: Say you’re on a nice beach vacation and you take a beautiful photo of the ocean. Caching is kinda like being able to pull out the photo album whenever you want to relive that moment, instead of having to drive all the way back to that location. It’s storing information for quick access later on, except better, because caching updates the scenery, so to speak, as it changes. The types of caching that Anton explained first–and what hummingbird actually helps with–is software caching. The big ones being your site’s pages and your browser. The other two he mentioned are RSS and Gravatar are smaller kind of bonus types. Last, but definitely not least, Josh Dailey just mention something called hardware caching. That happens in physical servers, so it’s kind of big picture stuff. Most people don’t have huge server stored in their garage. So, I’ll keep this simple: The best thing that you can do for your site in regard to hardware caching is to get really good hosting. Okay, back to Hummingbird.
[music]
Josh: See that when you go into Hummingbird and you pull up your page cache settings here, we’ve…got a bunch of page options for, you know, excluding or including pages, and by default, all of those are on. Why would you want to exclude anything?
Anton: Yeah. Page caching is basically… it allows Hummingbird to process the page and store a static copy for a user to get really fast later on in time. And this is the most resource-heavy part of websites. Basically, you would want to include page caching on as much pages as possible. But there are some times that you would want to exclude a page and it’s usually pages where you have some dynamic content to a certain user or user group. For example, if you’re doing geolocation…[fades]
Micah: Now, I didn’t know too much about geolocation before and Anton mentioned this, so if you’re wondering what it is: One way a website can use geolocation is to serve area-specific content to a user. This actually happened to me the other day. I’m in Arizona, and I visited a healthcare website with a banner that said, “affordable health care for Arizona residents”. Now, that company wouldn’t want somebody in, say New York, to see that message. So, they’d turn off caching on that page.
Other great examples of pages you wouldn’t want to include caching are e-commerce-specific pages or pages that visitors share personal information on. So, for example, the cart page, the checkout page, or a Contact Us form page.
Josh: So, moving on to a browser caching: What’s the difference between browser caching and page caching?
Anton: For page caching, you’re gonna store the complete version in HTML of the page. And for browser caching, you’re just allowing the user’s browser to store static assets–that’s your images, CSS files, JavaScript files–basically all this is going to be downloaded once and stored in the browser caching.
Josh: So, if I was trying to explain that, say, to a client: Browser caching–those assets would be saved directly to your browser locally on your computer, and maybe the first time they visit they won’t see a massive benefit, but the second time and thereafter, you might.
Anton: Yeah.
Josh: Okay. [pause] Oh! Something that kind of perplexing and maybe a little bit intimidating when you first jump onto a plugin and there’s a lot of different settings there… One thing that we noticed was all those different pages in the page cache settings that you can exclude or include: How often does just the default kind of settings work, and when should you start playing around in and testing other…configurations?
Anton: Okay, so actually the default settings are pretty good. And for the majority of websites, I would suggest leaving the default on and not change anything else. You might want to exclude a page or maybe add some setting that will allow you to debug what’s happening. But in general, the plugin is gonna work out of the box, without any additional configuration.
Josh: Oh, nice.
Micah: But, what’s the process for experimenting with these? Do I just turn them off and then just go and refresh my page, or…?
Anton: Ah, so, Hummingbird is built in a way that’s gonna preserve your website no matter what happens. Even if you turn a setting that’s gonna ruin a page for you, like if you think it’s ruined, you just turn the setting back off and you’re gonna revert to the previous version of the page that you had….So, if you want to experiment just toggle the setting, refresh the main page a couple of times to see if it’s working properly, and if it is, leave it on. If it’s not working, or if you want something else, just toggle it back off and refresh the page.
Micah: Can you tell us a bit about expiring times?
Anton: Okay, so there’s a lot…[fades]
Micah: I gotta cut in here. I realize I just said “expiring times” instead of “expiry times”. Once again you’re seeing how little I know about this stuff. But, expiry times are similar to the expiration date on a food product: It determines how long you want content stored on a server. Hummingbird and in most other caching plugins have settings to customize these values.
Anton: If I were to explain to a child how this works: A user wants to get a page. He’s asking the server, “Give me this page,” and the server is serving all the content to the user, the browser is downloading all the images, the CSS files, the JavaScript files…and let’s say tomorrow, user wants to get this page again. So, he’s asking the server, “Give me the page once more.” And the server is saying, “Okay, like you have expiry time of eight days, check…check your copy; maybe it’s valid”.
Josh: So you must have a really smart child. [laughter] I think the way you broke that down makes a lot of sense, though.
Micah: So you’re saying with expiry times, that if you extend it, it’s not more beneficial to the to the user?
Anton: Well, if you’re not doing a lot of adjustments on your website, it’s safe to say you can usually extend the time to thirty days, maybe a couple of months. But, if you’re making constant changes to your code base, or if you’re uploading new images, making new posts…I wouldn’t go, like, to over eight days.
[music]
Micah: I’m not gonna say the short chat with Anton gave me complete cache clarity. In fact, learning about its complexity left me with more questions than I had when we started. And just when I thought it couldn’t get more confusing, before ending the call, he said something slightly unbelievable–and to some, maybe even magical.
Anton: Do not be afraid to use Hummingbird. I’ve seen quite a lot of users afraid of changing the settings, playing around, and thinking that Hummingbird is gonna break their website–it’s not. So, if you want to get to the perfect 100 Google score, you you’ll have to play around the configuration a bit.
Micah: Wait a second, what? You can’t just casually say something like that and expect a very competitive budding journalist with a 30 on Google Page Speed not to fact check it.
[music]
Micah: Has Hummingbird helped anyone score the dreamy 100 on Google? Well, that’s what I was eager to find out. Unfortunately, before we started searching, the answer came to us in the form of…a Care Bear?
[music]
Josh: You are not only a developer and CSS mastermind, but on top of that you are a tattoo artist?
Man’s Voice: Yeah…
Josh:… And a self-proclaimed Care Bear.
Micah: What?
Josh: Yes. He told me he might look rough on the exterior, but he’s actually very cuddly. [laughter]
Man’s Voice: Everyone looking like me is supposed to be a Care Bear.
Micah: Can you…
[laughter]
Josh: Okay, so you’ve got a Mohawk, a luscious beard…
Man’s Voice: Yeah, I’ve got the beard and…. I don’t know. I’m heavy. I’m a heavy dude.
Josh: Okay, so I’ve never talked to you face to face before?
Man’s Voice: Nope.
Josh: And so your name pronounced correctly Konstantinos?
Konstantinos: Yeah, yeah. That’s right.
Josh: That’s part of my mission in this company is trying to figure out how to say everybody’s names right. All right, you published something on our Slack channel…We saw you had scored a perfect 100 on Google PageSpeed, which, basically, when I saw that, I thought that’s like…
Konstantinos: [laughs] It’s hacking.
Josh: That it’s like a picture of Big Foot. A lot of people say: If you get to an 85, you’re doing pretty good. What is your take on that? What do you think?
Konstantinos: I totally agree and actually my standards? Well, first of all, let me say that I have no idea about SEO or anything like that. I’m just a developer. In my experience, everything above like even 70 is really good. Just because…I am in the mindset that Google, they are actually using code to measure your website, so they don’t actually understand what you’re trying to do. Like, if you have a website, which is like, with a fully graphical interface that requires heavy Javascript, they will either way tell you that, okay, your website is slow. I know it’s slow, because I designed it to be slow.
[laughter]
Konstantinos: Yeah, but it gives a better experience, you know. So, people are always trying to achieve the perfect 100 and that’s why I managed to do it; just because I wanted to see what’s the difference. And basically the difference, at least on my website, which is not a big website, it’s like at zero-to-nothing. There’s seriously not much of a difference.
Josh: Okay, this is what I want to know: What are your tips for getting the best performance out of a WordPress site?
Konstantinos: Um, so it should be to minify everything. Like our CSS and our Javascript.
Micah: Can you explain minify real quick?
Konstantinos: Yeah, minification is like when you are using Word to type out a sentence, think of that sentence with removing basically all spaces.
Micah: Okay
Konstantinos: So, all of the code, basically, within the file…all of the spaces are removed, all of the comments are removed, all of the…um…the enters, when you leave a new line are removed, so everything is crumbled up on top of the file, so the actual file size is less.
The extra thing, which is kind of critical, is to remove the render blocking resources. Those are basically all of the files that they are loading in the header part of the page. So, when you load up a page you you first have to wait for all of those extra assets to load, and then you can move on to the content. So, a trick with that is to extract any CSS that is actually needed for the first render of the page–that’s what we called critical CSS. So, you just put only that CSS on the head part, and move everything else on the footer. So, it actually loads after the page, or even better if you can load it via async or defer, which is actually loading after the whole page is loaded. So, that’s even better.
Most people as well only care about their first page. So, for example I’m going to PageSpeed insights, I’m putting in my website, and just ping my first page. ‘Cause that’s what people usually open. That’s not the case, because if they find you via Google or whatever else, they might end up on a different page on your site, so that has to be optimized as well.
Josh: So that actually brings up a really interesting point. I don’t think people realize that they have to scan every page. They think they’re running a site test, when they’re actually only running a page speed test.
Micah: I didn’t know that.
Konstantinos: Yeah that’s why Google calls it PageSpeed insights; it’s not website insights.
Micah: Hmm. Do you think people should be striving for a 100 PageSpeed, and if not, what do you think people should be looking to do?
Konstantinos: As I’ve said before, they should take under consideration everything that any…measurement website or plugin tells them to do. Because it’s either way for the better. It’s never for the worst.
Micah: Yeah
[music]
Micah: At the time of this interview, Google scored PageSpeed with something called Chrome User Experience Reports, which basically means scores were calculated from a site’s code being cross-checked with real user metrics. This system was intentionally designed to focus on all the ways a site could improve, and resulted in the 100 PageSpeed becoming an ever-elusive Big Foot. AKA, a standard for perfection a plebe like myself could never reach. As of November 2018, though, Google changed the way it analyzes page speed. It now uses an open source tool, also from Google, called Lighthouse, which rates a site’s speed off of its actual real-time performance and not on how it should be performing. This new scoring system brings the one hundred page speed out of the clouds and makes it truly attainable for everybody. Don’t worry though; Chrome User Experience Reports will still be there to help you continue improving. And maybe that’s the point.
Conclusion
Micah: When building websites, learning about complex topics, or joining an intimidating new community, we’re required to accept the ongoing process of growth and improvement. Not because will never be good enough, but because we’ll never know enough. Now I realize I may be teetering on the edge of oversimplification. But hear me out for a second. In a way, the commitment to constant development is freeing. It frees us from the burden of perfection and it allows us to slow down and remember the people we’re making improvements for. Change for the good of your end users, change for your own good, change for the good of your community. I just had my first child, and despite feeling completely unfit, I’m now faced with the responsibility of showing him what’s most important in life. And instead of facing him towards perfection and telling him to start running, I’d rather encourage him to slow down and enjoy every step. Because perfection is overrated.
Alright, you were thinking it, so now I gotta say quotes like:
“It’s about the journey not the destination”;
“Joy isn’t found in the finishing of an activity, but in doing of it”;
“The biggest room in the world is the room for improvement”;
“The only impossible journey is the one you never begin…” [fade out]
[music]
Credits
Micah: Hello, WP is a podcast by WPMU DEV. It’s produced by me, Micah Dailey, and Josh Dailey. I also did the editing and original score for this episode. Our show’s art was created by our super design team: Julian, Yudy, and Osh. And the special thank you to Anton and Konstantinos for sharing their wealth of knowledge with us for our very first episode. I’m honored to work with such fantastic people.
Read the full transcript
