407: How Core Web Vitals and Image Size Impact Search Ranking with Andrew Wilder

This episode is sponsored by Clarity C L A R I T I. And I kid you not, I was going to record this half an hour ago, but I was in Clarity and realized there's an opportunity for Pinch of Yam that is a project we should move forward with. So I created a video, communicated it with a Pinch of Yum team, and said, hey, we should move forward on this and really get to work cleaning this up. In our case, what I had done is I said, hey, show me all of the posts in the past year on Pinch of Yum. And then I sort ordered that in reverse order by page views. So I was looking at pages that on Pinch of Yum in the last year got zero page views, and I realized we have a lot of really thin, not valuable content and it's important to clean that up. In our case, we're gonna delete a lot of that content and we should have done that a long time ago, but we just didn't get around to it. And it wasn't until I was using Clarity that I realized that that was something that we should have done. I was able to see that a.

Lot of, like, old giveaway posts and things like that.

So we're going to move forward with that and clean up Pinch of Yum. And that's what Clarity is for. It's to help you discover that actionable information to create a project around it. And either you can follow the project.

Or you can assign it to somebody.

Within your team and then track the impact that that has by making notes or seeing when you made those changes over time. We bring all the information in from WordPress, Google Search Console, and Google Analytics. You hook it all up and. And then you can sort, order, and use Clarity kind of like a Swiss army knife for your content. So if you're interested in checking it out, go to clarity.com food C-L-A-R-I-T-I.com food and that will get you 50% off your first month. Thanks to Clarity for sponsoring this episode.

Hey there. This is Emily from the Food Blogger Pro team, and you're listening to the Food Blogger Pro podcast. Today on the podcast, Bjork is interviewing Andrew wilder from the NerdPress team, and he also happens to be the food blogger pro WordPress support expert. Andrew has been on the podcast countless times and with good reason. He's super effective at explaining really technical, complicated topics to the Food Blogger Pro community. And we always learn a ton when he's on the podcast. In this episode, Andrew's taking a deep dive into Core Web vitals and explains how they're calculated and why it's important to optimize your site with Core Web vitals in mind. Andrew and Bjork also discussed the best practices for blog image sizes, including the best method for compressing your images and even more frequently asked questions about featured images. It's a really great episode. Some of the topics they talk on are a little bit more advanced, so don't get overwhelmed if you don't understand everything. It's one of those great episodes to keep in your back pocket because they talk about a lot of really valuable information that will come up at some point along your blogging journey. So I won't keep you waiting. We'll just kick things off and I'll let Bjork take it away.

Andrew, welcome to the podcast.

Hello, Bjork. Glad to be back.

It's almost as if we've done this before, just a couple of times. It's great to have you back. I feel like you are one of those connections that we have in this space where, um, it's like you've kind of always been around. We've been. We've been around forever. You've been around forever, and here we are. We're still around.

You know, when I started my food blog in 2010, I thought I was late to the party.

So here we, you know, isn't that interesting? It's one of the things that I see as a through line. It feels like there's always this like, oh, is it too late to start? Like you said, 2010, is it too late to start? People still saying 2022 is. It's too late to start. A lot of stuff happening in the world. But I'm this. I'm a big believer in if you have the ability to create content that connects with people, things are going to change.

But if you have a skill in.

A specific area and you can communicate well, you're going to find success with that. One of the ways that we talk a lot about that people are finding success with that is publishing content online on a blog. Obviously, it's the name of the podcast, Food Blogger Pro. You work with a lot of bloggers, hundreds and hundreds of bloggers with your business as we get into it, just so people have a little bit of a reference point. My guess is most people who listen are familiar with you, familiar with your service. And my guess is a lot of people actually work with you at NerdPress. But can you talk a little bit about your history, give a Little backstory and talk about what NerdPress is before we jump into the nerdy part of NerdPress.

Sure. So my company is called NerdPress. We are a website support and maintenance company. We work exclusively with WordPress sites, and we're a bunch of nerds. So there's the name for you. I started my own food blog in 2010 as a career change from my previous career in theater. So now this is, I guess, the third career change. And I'd always dabbled in websites. I built my first website in 1998, I think it was. And so when I started my food blog, I knew what I was doing. I had done SEO work, so it was doing pretty well with Google. And then I found the food blogging community. I went to the International Food Bloggers Conference in Seattle and had an amazing time. And it kind of grew from there as I started to meet people and fall in love with food bloggers as well and the whole community. And then when people found out I knew what I was talking about with the technical stuff, they're like, hey, can I hire you to fix this? And can you help me with this? And, you know, I like to help people. So I said yes. And it kind of grew and more and more and people needed more help. And then I found out I was, or realized I was doing the same kind of stuff every time, where I was like, setting up backups and fixing security issues. And so I started to standardize this into a package of services, and we made it a subscription so we could do onboard ongoing support. And I think that was 2013 that I started doing that. So we, I. I say we now. I, at the time, it was just me was one of the first people doing WordPress maintenance and support. It was like me and WP Sitecare. And that was kind of it, you know? Now obviously there's a whole industry of WordPress help because there's so many websites and so many people.

Yeah, it's like 42% of the web I saw. I looked up runs on WordPress. Yeah.

Yeah. So it's. So we switched or I set up that subscription model and started help people helping people on an ongoing basis. And then in 2017, I hired Sergio for help because I was. I was drowning by myself. And then by the start of 2020, we were five people, and now we are actually 19 people.

That's crazy. Yeah, I remember the first. Some of the times, those early times when you're hiring and we're having conversations around like, hey, what does it look like? Hire on board. And now it's like 19 people. It's like, it feels like you blink and, and suddenly it's like, wow, this is a business with lots of different people and looks very different than it did in 2017, let alone 2013. It feels like a great example of that adage around people underestimate what you can do in 10 years and overestimate what you can do in a year. And it's that perfect point of 10 years. And you know, to, to look back at that and be like, oh my gosh, like, that's, that's incredible. And, and it, it's a testament to the work that you do, both the technical side, but also the people side. And one of the things I've realized doing what we do as long as we have is you have to have both of those. You know, you have to make people feel. It's kind of like going to a doctor. Like, one of the things that's most important with the doctor that you see is not only their ability to like, assess and diagnose an issue that you're having, but also the spirit in which they do it. And NerdPress does such a good example of balancing those two things and excelling at both of those things. So it makes sense that you've grown in the way that you have. One of the things that you, that I love about interviewing people like you is that you have a really unique view on. It's kind of like somebody who's a banker and like, you get to see a bunch of bank accounts and for you, you and your team, you work with a bunch of bloggers and you get to see a bunch of the inner workings of websites and the things that make them tick and the things that make them successful. From a technical aspect, one of those pieces that we haven't talked about in a long time on the podcast, and maybe it was last time we talked about it, it was with you, is this. These technical considerations from Google. So it's a search related consideration called Core Web Vitals.

And can you talk about what those.

Are and just give us a high level refresher on why it's important for us as creators to pay attention to this technical thing called Core Web Vitals. Sure.

But first, can I say that was a masterful transition.

No. Good. All right. Well, it's almost as if we'd done 400 podcasts.

That was very impressive. So Core Web Vitals and we, I think we last talked about this on the podcast. I think it was like almost two years ago, which, you know. So when we're talking about what we could talk about, I'm like, hey, let's do like a core web vitals, where are they now? Episode.

Yeah, yeah, yeah.

Because when we were talking about it, it wasn't yet a ranking factor. Like it was just about to roll out. Google gave us warning and said, hey, hey, this thing's coming. Look alive.

Can you talk about. And for those who aren't familiar, the idea of a ranking factor, what that is and how those like get added.

So Google. Well, Google, Google's job is to take all the information on the Internet and give you an answer to your query. Right. And so there are the search results. And it has to ra search results and say, here's your first search result. We think it's the most likely one, but maybe number two or three or ten are better answers and you get to pick what you want to see. So the way it does this is it looks at hundreds of different factors, we call them ranking factors. And it basically looks at the site and all the links and all the like, all the details. And what those ranking factors are usually is trade secret. Like, that is Google's special sauce. Right. And people are constantly trying to reverse engineer this. And that's why you have like tools like Semrush and Ahrefs like that look at data and try to piece together and reverse engineer the Google algorithms that do this. Google doesn't even know what the algorithms are. They're, you know, this could be a whole other podcast, but they're using AI and have been for years. So they don't. Like, you couldn't ask a Google engineer who's in the search department, what are the 200 ranking factors? Yeah, like they can't tell you.

Yeah.

You know, but we do know broad strokes. And there are some ranking factors where Google has said, hey, this is a ranking factor.

Yep. And whenever, whenever we get that information, it's, it's like this little golden nugget. Because what we're trying to do in this world is create content that people see. And one of the best ways for people to see content, the type of content that we're creating at least is through search. And because most of the algorithm is obscured, you don't know what it is, you know, kind of general best practice. But when Google does say, hey, we're going to let you know, this is important, it's like, great, you've given us the answer key. Now we just need to like complete fill it out. But that's the Hard part is it's technical and that's why NerdPress exists. So we have this ranking factor. We know it's important. Google has told us, hey, this is now a ranking factor. So it's going to, if you're better at this, it's going to help improve your search results. But what within Core Web Vitals are those things?

What are those things? Sure. So Core Web Vitals is basically looking at performance or speed and user experience. They started with three metrics. So they're basically saying, okay, we're going to start with these three things that you can be scored on that are quantifiable and things that you can improve. So we're going to grade you on these three metrics and we can talk about the specifics. They've also said over time there may be others. So they've left it open. They haven't added any new ones yet. So two of them are actually really about speed and performance. One is about user experience right now. So should I do a quick recap of.

That'd be great. Yeah.

Okay. So the primary performance one is called Largest Contentful Paint or lcp. And that is how long it takes the biggest thing that's visible when the page loads to load. So usually that's like your biggest image. Or it might be your. If it's a really long post title, it might be the post title. Whatever the thing is that's visible before you scroll, whatever the biggest thing is, however long that takes, that's your largest Contentful paint time. It's just measured in time in seconds. So if it's below two and a half seconds, that's considered good, actually. Or below or equal to two and a half seconds.

Sure.

And so every time a person goes to your page, you know, goes to your homepage or goes to a blog post, if they're using the Chrome browser, Google tracks that time and sends that data back to Google Headquarters. And so Google collects all this data of the performance data and says, hey, on average this blog post has an LCP time of 1.8 seconds, which would be very good. 1.8 is fantastic, actually. Or it might be 3.8 seconds, and that's going to land you in the needs improvement range. Or if it's over four seconds, you're in the evil poor range. Right, sure. So that's largest Contentful Paint. The second one is called first Input delay.

Real quick on Largest Contentful Paint. One of the things I always find so helpful with any technical thing is creating a visual to try and understand what it's actually saying, so largest we get content full meaning content like thing. So largest thing paint in. Is that essentially saying how long? Like if you imagine a canvas is the idea like it's painting it onto a canvas. So like, how long does it take if the browser is a canvas for the largest piece of content to get like painted onto the canvas? Is that me extrapolating too much from that, that phrase, or is that essentially what it's trying to say?

That's exactly what it's trying to say. Yeah. Okay, there's an. To take it a step further, there is another metric. This was not one of the ranking factors, but they do return this in the PageSpeed Insights dashboard when you test one of your pages called First Content Full Paint. So that's how long it takes for the very first thing to appear. You know, because when you go to a website, you just get this white screen at first, right? And the browser has to go get the document from the server, the HTML document, get that. That's the roadmap to building the page. Then it has to download some resources like JavaScript and images, and then it starts to draw something or paint on the page. So the first contentful metric is how long it takes for the first thing to appear, whatever it is that's visible. It could be a font, it could be an outline, it could be a picture, whatever it is. Then the largest contentful paint is what's. How long does it take for the biggest thing to appear? And so the reason they're using Largest Contentful Paint as the metric for ranking is that's a proxy for speed. So they've decided First Contentful Paint isn't really that good. Yeah, you're seeing something happen, but it could take.

And you could manipulate it where you're maybe loading in something really small just to get a good first content propane score. And.

Yeah, and, and actually first content. First content happening soon is also really good because once the user sees something happening, they're going to stick around and watch it load. You know, if you wait two and a half seconds and then everything appears, that feels a lot longer than waiting half a second and then things appear over the next two seconds, if that makes sense. So there's just a, there's a human time frame and perception thing in play here. But I think Largest Contentful Paint's a pretty solid stand in if you're going to pick one score. So I don't begrudge Google for picking that one, to be honest.

That makes sense. Great. So that's the first one. That's the first one that makes sense. Second one is first input delay.

That is basically the amount of time that once the user tries to do anything like click or scroll, what the response time is of the website and how long it takes. The good news is we can kind of ignore this one. On most food blogs and blogs in general, we don't see it being an issue. So I don't want to spend a lot of time on it. It's very Rare. I think one out of like 500 sites we've found an issue. So if, if there's something like really bogging down the page and it's like the page is non responsive, you might have an issue. But normally this is not an issue at all, thankfully.

So, so this, the idea with this would be everything is loaded and then you go to interact with the page, click on a link, scroll. How much of a delay is there? Maybe we would use the term snappy, like how snappy is the site when you're interacting with it? And what I hear you saying is it's usually not an issue. Like this isn't something on a normal WordPress site where unless there's some weird circumstance where there's broken code or who knows what, you're not going to run into an issue here. So this is like good to know what it is, good to understand it, but it's not the kind of thing where most people are going to be spending a lot of time troubleshooting it.

Yep, I think we, we have literally spent zero time on it. So. So thankfully you don't have to worry about FID first, first input delay and then the third one. And this is definitely the hardest one. It's called cumulative layout shift. And that's a measurement of how much things move around on the page once they're loaded. So this is the user experience metric because how many times have you like gone to click a button and then something loads right above and pushes the button down on the page and you end up clicking a picture which is a link that takes you to another thing. And so that's a really bad experience. And so when something loads on the page, it should stay in that place. So that's called cumulative layout shift. So layout shift is pretty easy to understand. Right. Things are shifting around in the layout of the page. The cumulative score is the tricky part. This measures across the entire user's experience on the page from top to bottom. So as they scroll, if things keep moving. And every time something moves, it adds to the Score. It's a cumulative score. Cumulative score for that. That page view.

Yep. So it's not just like a pass fail. It's not like, did something move? You get a fail. It's how much shifting was there. Like you. The page loads and then an ad goes in and it shifts it down. And then you know that ad, a different one loads and it changes sizes. So then it shifts again. Or maybe you have a really big image that takes a while to load and populates and it shifts things around. All of that adds up to get your. The score for the cumulative layout shift. And you don't want that because it's a bad user experience. And what's interesting to point out with this, and maybe a good reminder is these are all just like, Google isn't the government. It's not like you're going to get like punished or get like a ticket for it. It's just a company that's making up these rules based on what they want to see and what. And what their goal is. And what the goal of a search engine is, is to give people the best experience possible. And it's interesting to think about with Google where they have some control over the experience. They have all control over the experience on the search result page, but they don't have control, like once somebody leaves the page and goes to another site.

Even though it might reflect on Google.

As a company and their ability to like, surface a good piece of content. So it's kind of like, correct me if I'm wrong on this, but it's like Google trying to control the experience that people have once they leave Google and wanting it to be a really good experience and saying, if you're not going to do this, then we're not going to show you as high up because we want people to have a really good experience. Is that kind of what's happening with this?

Yes.

Period. Yeah.

Yeah, I think so. I think it's. I think it's in Google's best interest. You know, I mean, you said Google's just a company, they're a insanely powerful company, right?

Yeah.

It doesn't have a lot of competition. Not really, but I don't. I, like, I think it is aligned.

I.

Core web vitals are kind of frustrating, right? Because they're really hard. But I think it's aligned with everybody's best interest. You know, it's good for visitors, it's good for Google. It makes Google, you know, like everybody wins when. When sites are loading fast and smooth. So I think it's it is a good thing for the web. Now, should you have a private company, one of the most powerful companies in the world, dictating what those standards are on the web? Sure. That's a philosophical question. We could spend a whole podcast on.

Yeah, yeah, yeah.

You know, but that's what it is, right?

Yep, yep. And in a lot of ways, like you said, these initiatives that they have make the web a better place. Like, it's better for a user in general if you go to a website and it's not shifting around all over the place, or if it loads quickly or a big one, you know, years ago was if it's a secure URL. So HTTPs versus HTTP. And inevitably what happens then is everybody scrambles to get their site to have an HTTPs URL, because Google has said, oh, this is going to be a ranking factor. And so they can push that stuff forward. The hard part here with any of this, and I think a lot of people will resonate who listen to this, is most people get into this because. And we actually did a survey with Food Blogger Pro members, like, what do you love most about it? Most people don't say core web vitals and troubleshooting IT issues. It's like recipe development, photography, maybe it's writing. It's more of the creative elements that go into publishing. Now for some people, they do love that stuff.

But for somebody who.

Yeah, go ahead.

I was just. I'm guilty of that.

Yeah, yeah, yeah, exactly. And that's why you do what you do. Um, but if somebody's getting into this and they're like, I want to make sure that I have good core web vitals, one of the easiest ways is if they have the ability and the budget and the bandwidth is to work with an expert, to work with a nerd press. And that's the easy answer. You guys eat, sleep, and breathe this.

If somebody wants to tiptoe into trying.

To, like, understand it themselves or even, like, do as much as they can, what does it. What does it look like to be aware of best practices with core web vitals and pursue the best possible score that you can?

I mean, we could.

We could.

We could do many, many podcasts on that. So all the blog posts out there, like, how to score well on core web vitals, make it sound really easy. It's not. This is an incredibly complex thing because the web is very complex. To distill it down. I think the best thing you can do is start with the right theme, the right web hosting, like, start building your site or make sure. Your site is built well from the ground up with the tools you're using that aren't going to work with you instead of against you.

Yeah, you know, talk about some of those. Like I know you have service providers, you work with theme companies, you see a lot of the ins and outs of those who are your favorites.

So perfect example is the Feast plugin and the Feast theme. You know, Skyler is doing great work. He's staying on top of best practices. When a new client comes to us and they're already set up with the Feast ecosystem of, you know, the Genesis theme plus the Feast, you know, Foodie Pro or one of the other themes plus the Feast plugin. We know it's going to be pretty easy for us to optimize. We still have to do some work but out of the box it's pretty close. And so then we add optimization plugins on top. So we our preferred tool is still BP Rocket. We also use perfmatters. We won't use Perf matters on its own because it doesn't cache HTML. That's a whole other thing. So you want to have as little stuff on the page as possible. So you have to optimize less when you're installing 20 different plugins that all have lots of JavaScript that are giving you bells and whistles on the page. All that stuff has to be loaded so to it makes it harder to perform well on the core of the metal. So the first step is really like start with the minimum tools you need that are coded well and then get rid of the stuff you don't need and then optimize from there.

And when you say stuff do you mean plugins and themes? Is that like you want to be running lean and you don't want to have a bunch of kind of cruft weighing you down?

Yeah, exactly. And it, you know, I think as a non technical person it's hard to tell what has cruft and what doesn't. You know there's a very popular contact form plugin called Contact Form 7 which it does a perfectly fine job as a contact form, but it also adds a style sheet and a JavaScript to every page on your site even if the contact form isn't on that page. Well, that's silly.

Right.

So and I, I don't mean to call them out necessarily but I mean it like that's totally unnecessary and going to slow your site down. And as the site owner, unless you're willing to like dig into the code on this, you're never going to know that. And so I think it is at the point where it makes sense to have someone who does this stuff all day long look at it and say, hey, wait, if we get rid of this plugin, we're going to solve this problem. We don't have to optimize that. And then we can, you know, and, and it's kind of like a domino effect of things too. You know, older themes that need a certain JavaScript library to make your menu load. Well, if we, if it's in your menu, it's above the fold, so we can't delay it. And that's going to hurt your LCP score.

Right?

Stuff like that.

Yep. You had mentioned this page, Speed Insights. Can you talk about what that is and how do people use that tool and what's. What's happening with that when you go and put your URL in there?

Sure. So PageSpeed Insights is a web page testing tool that Google provides. Let me get the address here real quick. It's pagespeed.web.dev dev. I'm sure we can link to it in the show notes. I think we did a whole episode on this a while back. We should dig that one up and link to it too.

Yeah, we'll link to that. If I'm trying to remember, we've had a lot of core web vitals.

Right.

Conversations, whether on the podcast or live Q&As and.

Yeah, so real quick. PageSpeed Insights is basically a free testing tool where you can put a URL from your site into the tool and it runs some tests and there's two components to it. The first at the top, it will return the actual core web vitals metrics, which is the real world user data that it collects through the Chrome browser. And then below that, it will actually show the results of a simulated test and it'll give you a big score. I hate the big score. I wish they'd get rid of it because it doesn't actually mean anything and people freak out when it's not very good. But it tests several other metrics and then gives you that big score. And so that's just a tool for helping optimize your site so that in the real world performance it'll be improved.

When. When you say a big score, you mean like it's an overall score that it's giving you in terms of like, you got an A on this paper?

Yes. It gives you a. Literally a score of 0 to 100.

Sure.

And it's kind of ridiculous because it doesn't mean Anything they they look like.

It's not like if you get 80 out of 100, it's not going to show you as high. It's just like a score to help you understand. Out of a hundred.

Yes.

What's your opportunity? Like, what's the gap between getting too.

Perfect and a lot of people see that score change and get really worried when unless something's changed on their site, they're probably fine if they're already in the good range in core web Vitals. So the top metrics, the core web vitals, the largest contentful paint, first input, delay and cumulative layout shift. Those will show right at the top of PageSpeed Insights. You can also see this data in your Google Search Console under the performance section or corporate vitals section. And that shows you pages that are in the good needs improvement or ranges.

Yep. Can you talk about what Google Search Console is and why people should have that set up?

Sure. So Search Console is another free tool from Google. You can create an account that basically like if you have a Google account, you basically just go to Search Console and you're logged in with your Google account and then you could add your website to it. They call it a property. So you can add multiple domains there if you have multiple sites. And once you add, you prove that you are an authorized owner of the domain. Once you prove that, you'll get all this information from Google about how Google sees your site. And it's super helpful. Like, if you're just starting out, it is the best free tool available, really. You can drill down on search queries and top pages. You can look at backlinks, you can look at all this other stuff.

Right.

So it's a super useful tool that is if you aren't set up for Search Console already, you definitely should get that.

Yeah.

And it's free.

It's kind of like getting a little bit of a analogy on the fly here. It's like if you had a neighbor and you did one of those yarn cups, telephones. Yarn telephone cups. Stick with me here. And your neighbor is Google and you are yourself the publisher. It's the closest thing you can get to like communicating back and forth with Google or at least hearing what Google is saying. It like plugs in directly to the kind of Google's view of your site. And it's interesting. Even I have it pulled up here as we're talking. There's like, there's even just a core web vitals section that is like poor, needs improvement or good. Like it just tells you these are the pages on your site, are they good? Do they need improvement or are they poor? And we'll give you information on those. So there's been a few times I've connected with publishers and they're like, yeah, I don't have set up Google Search Console. And it's like, oh, my gosh, it's like you said, such a great free tool. So PageSpeed Insights free search Console free. This will surface the information for you. And like we've said, there are some really technical pieces that go into actually achieving some of the, you know, best practices around core web vitals. Good to have an idea of what those are. Probably not on this podcast. Can we jump into each one of those and say, like, here's what you need to tweak and change and adjust in order to fix all of the, you know, thousands of different instances that you'd need to fix or improve. But there are other things that we can be thinking about as creators that are just going to increase the user experience that somebody has when they go to our site. And one of those is the general speed of how quickly the site loads. And for a food site, one of the primary ways you can do that is by making sure your images aren't like elephants and that instead they are cheetahs. And a lot of times what will happen is we will be running sites and all our images are elephants. They're. They're huge, they weigh a lot and they're slow moving. And we want to get to like, cheetah images, which are fast and quick and. And create a good user experience. That's my analogy. Can you talk about behind the scenes, what that actually means? Like, you have an image, it's really heavy. What's happening and why is that bad?

So not only do you have that, but you have to balance that with. You want a beautiful cheetah?

Yeah, yeah, yeah.

Great. Especially food bloggers, you know, you don't. You want your pictures of food or whatever to look beautiful and enticing? So you have to balance that. Right. So with images, basically, there's the. The thing that slows you down is the file size. You know, how. How many kilobytes or megabytes is that actual image? Because the browser has to download that file before it can show it to the visitor. And keep in mind, most visitors are on mobile these days and they may be on. Not on a WI FI connection. Right?

Yeah.

So you need to.

And real quick, as a.

As a note for a takeaway for people, if the only way that you are using your site right now is by pulling up your laptop and visiting your site at least once a week. Take some time to just browse your own site on your phone because I think what happens is we are so used to desktop and probably 70 to 80% of anybody who's visiting your site is doing it on mobile. So I'm glad that you said that. It's an important call out and a good reminder.

And if you're not happy with how the images look, go look on your phone, because that tiny phone screen, they might actually look good to you.

Yes. Right.

Keeping in mind you're not gonna, your visitors are not gonna scrutinize your images the same way that you do, which is totally fair that you know you're gonna be picky, I get it. But on that little phone screen, you know, the resolution on those screens is beautiful. It may look great on that 3 inch or 2 inch wide image when it doesn't look great on desktop. And so you just have to balance that.

Right, Great. So important takeaway, mobile versus desktop.

Talk about what we can be doing.

As creators when it comes to setting ourselves up for success for those cheetah images. Like they look good and they're fast. Obviously we want to be exporting images. Well, I won't even assume like what start to finish, what does the process look like and, and what are best practices when it comes to good looking but also fast images.

So there's two things that impact, well, three things that impact the size of the image. I'm going to oversimplify a little bit, but the first, when I say size, I mean file size. The first is the physical size. How wide is it and how tall is it? That's measured in pixels. So when you take a picture from your camera phone, there's a 20 megapixel camera or whatever it is now, and the image might be 4,000 something pixels by 3,000 pixels, or they might be even higher on a higher resolution camera that's way bigger than you need for the web. And the trick is every pixel contains color information, right? And hue, saturation, brightness, all that stuff is crammed into each of those pixels. So when you take 4,000 pixels and you multiply it by 3,000 pixels, that's millions of these data points. Right? And so if you scale your image down, it's an exponential difference. If you cut that from 4,000 pixels wide to 2,000 pixels wide, you're also cutting the other dimension in half proportionately. And so cutting the width in half actually means it's going to use about a quarter of the same file size because it's height times width. So the size of the image is one of the most important things you can pay attention to. We recommend 1200 pixels wide for blogs. In almost every case that works perfectly. We started that recommendation a couple of years ago. The number originally came from Google. Go figure. Not actually for web pages, but for the Discover feed. Google says if you want to be in the quote unquote Discover feed, if you want a large thumbnail in the Discover feed, make sure you have at least one 1200 pixel wide image on the page somewhere.

That's.

That's where they like the one time Google has said a pixel size. Yeah, they said 1200 point blank. But what.

Can you talk about what the Discover feed is for those who aren't familiar?

Yeah, it's basically like a. On mobile, in the Google app, there's like this algorithm that says, hey, you might also like these things. And it's kind of like a news feedback. I think it's more popular on Chrome or on Android devices. Right. But you can use. If you just load the Google app on any device. I think it has it in there.

Yeah. And that would be another. It's interesting because there's, it's a way that you can get traffic is through Google Discover. And what's interesting is it's not search, it's Discover. Like it's surfacing in a similar way to like a for you page on like an Instagram or Twitter would kind of maybe randomly surface information that you could interact with that you're not necessarily following or you didn't seek out. It's kind of, it feels like Google's answer to like a feed that you might not be following, but they think it's like content you're interested in. So it'd be even for myself a good reminder to go back and like use that app a little bit because it's. Yes. We've occasionally had stuff get picked up on there and it would, you know, there's a, like some post that Lindsay had about her grocery store, like Aldi post and it was. Got like 70,000 views in a couple days. Yeah, page views. Because it was on Discover.

I have a, I have a client who in February had a post that was featured at the top of Discover and 1 1/2 million page views that day.

Oh my gosh.

That is so awesome. It's insane.

And the crazy thing is it's been tumbleweeds ever since. Right, sure.

Right. Like it's, it's very spiky. Yeah.

Kind of like web stories going, taking off. So I wouldn't, don't spend all day trying to get in the Discover feed because that's not going to work. But you want to make sure that when you do get in the Discover feed, you're going to get a large thumbnail and the 1200 pixel wide. So 1200 pixel wide image recommendation kind of originally came from there. But what we found is on Retina displays, which are like the 4K displays or the really high resolution which most screens are these days, you're actually cramming more pixels in to the same amount of space. So it gets really confusing. But on desktop, the width of the content area is roughly 800 pixels wide in sort of the old school non retina version. But you can take a 1200 pixel wide image and squeeze it down into those 800 pixels and it looks really sharp. And one and a half times is about the right ratio to get a really nice looking sharp photograph. Sure. If you're on a desktop monitor and you just put an 800 pixel wide image there, it's going to feel a little fuzzy because our eyes, that sharpness.

It reminds me a little bit. Our daughter Solvi, she's four years old and she has went to a friend's house and they did these coloring things where there's like a really big piece of plastic, I don't know what it is, what the material is, and they color it and then you bake it for like 15 minutes and it comes out and it's this tiny little piece of jewelry that looks like super shiny and it looks, you know, really professional and. But it, but when you start with it, you're just kind of doing these big lines and you're coloring, but then it shrinks it down and then it looks super sharp. It's kind of a similar thing happening with images where it's like a little bit bigger and it might look a little bit soft when it's bigger, but then when you, when you shrink it, when you bake comes out looking a little bit sharper.

You are on fire with the analogies today.

That's my role. You just do the technical stuff and then I'll do like a real life kind of applicable analogy. So images, we want to have a larger image, essentially a larger image than the space that is going in.

Just slight.

And that's just slight.

Be careful because people are like, I don't want people to hear, oh, a larger image is better. You don't need it to be any larger than 1200 pixels wide, except in rare cases. So on a food blog, 1200 is plenty. That's also enough to be future proof. For a long time, like pre2020 or so, people were uploading like 600 pixel wide. And then the content area got 800 and that was too small and we found 1200. We've been making that recommendation for a couple years and that's holding up because really we've kind of reached saturation of like how big we want things to get. And it's not going to get a lot larger. But if you were to put a 2,400 pixel wide image there, it's going to be four times larger in terms of download, but there won't be a noticeable increase or improvement in quality. Sure. So 1200 is that sweet spot. And we're talking about width here too. The height should be whatever is appropriate for the image, whether it's vertical or horizontal.

So you set the, you set the width when you're exporting, let's say you use Lightroom, you set the, the width at 1200, you export. Are you setting a quality within Lightroom or is that, do you have a recommendation for that?

So that's, that's the second factor that really heavily influences the file size most of the time.

Oh, then.

And the third factor is the file type. Actually let me talk about file type first because it's a little easier and not all of them have quality settings. So the two most common file types right now that you'll encounter are JPEG and png or trying to remember what JPEG stands for. PNG is portable network graphics. But JPEG is really good for photographs. PNG is really good for line art, illustrations, logos, things like that. And PNG can have transparency so you can have like something floating over something else. But PNG is not good at photographs.

Yep. And jpeg Joint Photographic Experts Group.

Thank you.

Which is the group that created the JPEG standard. First. It's, I'm learning as we go.

That's, that's very self referential and that's actually why sometimes you'll see JPEG and sometimes you'll see jpg. Yeah, Extensions and they're the same thing.

Look at that. Great png.

So it's important to use the right format. If it's a photo, use jpeg. If it's a text or illustration, use png. If it's something that has both. Like a Pinterest image where you have a photo with text overlay. Usually JPEG is the way to go. So choose the right format. Can't stress that enough. Photos, as in the PNG format, tend to be like 10 times larger. So something that could be 30 kilobytes as a JPEG might be 300 as a PNG.

And the reason that you would want that is because it's going to look better, it's going to be sharper. If it's a logo or something transparent, that's just going to be better in that format. But you wouldn't want to do that format if it's just going to be an image. Right.

And JPEG is also not great at doing sharp lines like text. It gets a little blurry around the edges. So that's why you don't want to use JPEG for your logo. You want to use PNG. There's a newer format called WebP out there that was developed by Google, so it's their newer format. Generally it does compress better for more things, but it's not compatible with everything. And there's a whole layer of complexity of kind of the transition from JPEG to webp right now that makes it very complicated. So not worry about webp for the moment, but as you're exporting from.

To put a pin, or not necessarily put a pin in that, but to wrap that conversation on webp, the reason why you, even though it might be a better image, the reason why you wouldn't want to do it is because you said compatibility, meaning there might be a browser that on somebody's phone or desktop where it doesn't know how to load that image. Is that what you're saying?

Yes.

Got it.

And most browsers now are pretty good. It's been long enough and they've kind of built it feature. But there are many other purposes or ways images get used. Right. Like Facebook needs to be able to download your image for previews on Facebook, right? Yeah, that's just one example. I think it can handle webps, but there are other services that may not handle it just yet.

Sure.

And over time that's going to change and improve. The. The bigger challenge with WebP is because we've got sites now that have all these JPEG images. Are we going to. Are we going to duplicate all those files and create webps and have to store all those files and back up all those files? You know, so it gets complicated. So I don't want to, I don't want to go too far in the weeds on that. Also, I don't know if your image editor can export in webp to Start with. Right. I know you can upload a webp format. It's just another format. It's a way of saving data, you know, and the idea with all these formats is to try to get the best picture quality in the smallest amount of file size.

Yeah, that's what we're after. Right. And so 1200 pixels wide, probably most of the time you're going to be doing jpeg, Right? Let's say it is in Lightroom. It's been years since I've used Lightroom. But are you picking a quality size when you're exporting from Lightroom?

Yes. So JPEG has a variable quality option. So you can say the different tools have different scales, but we could say 0 to 100 or I think 1 is 0 to 11. So we're like 10 or 10 out of 100 will be very low quality. So it's gonna be super blurry and pixelated and look horrible. This file size is going to be really low. It's gonna be very small and load quickly. That's not gonna look so great. But you don't want to set it at 99 or 100 because the file size is going to be huge. Right. Because it's basically how much compression there is on the image. So what you want to do is find that sweet spot where you're just before it looking back. Because once it looks good, you don't need to dial back the compression anymore.

Right.

All you're going to do is get a bigger file and it's not going to look any better.

Sure. So you're. So you're exporting it. And again, JPEG, 1200 pixels wide, you want to get it to the point where it's not getting too soft, where it's noticeable, you export it.

But then when you're importing it to.

Your website, is compression happening again at.

That point before we get there?

Sure.

The answer is maybe. But before we get there, I want to talk a little bit more about exporting real quick.

Okay.

So you've got the variable quality. I know in some tools you can specify a file size output you don't like.

You can pick. I want it to be 100 kilobytes.

Exactly. And then what it will do is just adjust the quality to hit 100 kilobytes. You don't want to do that. We do tell people, if you're exporting a 1200 by 1800 pixel image, say you want that to be around 200 to 400 kilobytes at the most. When you export and the reason we say 200 to 400 is it's going to vary depending on what the image is. JPEG is not great at compressing things with a lot of texture and detail because the way the algorithm works it, like samples pixels next to it and kind of compresses those together. So if you've got a picture of like a table with a burlap background and, you know, something that has lots, like a salad that has lots of sesame seeds on it, right, where you've got all this really fine detail, that is going to need to be a bigger file to look good. If you have something that's like a chocolate chip cookie on a white tablecloth, all that white can get compressed into very little space. So that might be on the 100 or 200 kilobyte range. What you don't want to do is say, hey, make them all 100 kilobytes. Because the big images are going to get too blurry and the small images may be bigger than they need, have larger file size than they need, to be sure.

So if you're doing an export of 10 images, you don't want to say, make them all 100 kilobytes, because you need to treat each image especially or the type of image it is, is it complex? Are there a lot of colors? Is there a lot of, you know, contrast? Is it? Or is it, you know, a picture of the night sky and to race black? Yeah, exactly. And that's going to be a lighter image.

And I think you will have to test your for yourself because everybody's photos are different. You know, your camera's different. You might be using Photoshop or Lightroom. And so I recommend experimenting once you find that quality setting, let's say it's 78%, you know, that lands. You know that you look at the pictures after they're exported from Photoshop or Lightroom, and you go, hey, those look pretty good. And the file sizes are generally between 100 and 400 kilobytes. And you're not seeing like 1.5 megabytes. Right. Once you figure this out, you probably don't have to tweak it much after that. You're going to go, okay, this is good for my workflow. Now I've got these, you know, five images for this blog post that are all two or 300 kilobytes each. Now I can put them into WordPress.

And for those who, for those who aren't watching, that was Andrew extending his hands out, saying, follow up question. Yeah. And at that point. There's also compression happening. Or there could be compression happening on your site. So, like the export from Lightroom or Photoshop, you're compressing the image so it's not the full image, which we just talked about. But a lot of sites have this functionality happening when you're loading it into your site. So how do you know that you're not over compressing something?

Well before that even happens, as soon as you upload an image to WordPress, it generates what are called thumbnails. The number of thumbnails will vary based on your theme and your plugin, because those can say, hey, give me more thumbnails. But by default, I think there's four thumbnail sizes. So there's. And if you go to Settings Media, you'll see them. There's, there's the creatively named thumbnail thumbnail size, then there's medium large and. And then actually those are the three sizes in the settings. Then there's also one called medium large, that's. It doesn't have a setting. I think that's 768 pixels wide. So what happens is you upload an image and WordPress says, okay, great, I'm going to make copies of this image, but make them smaller. And so it'll create anywhere from five to 50 smaller versions of that same.

File, and you'd have more. If there's a plugin you use that needs different sizes or a theme, they're going to potentially automatically create those additional image sizes.

Yep. And so, you know, if you install WP Recipe Maker, it's going to say, hey, I need these four other image sizes that 500 pixels wide at this format, because it knows Google needs that for the recipe. So it sizes that correctly. So on average we'll see anywhere from 10 to 20 thumbnails created per site. So just be aware that as soon as you upload an image, it does that little processing thing while you wait. What it's doing is generating all those thumbnails.

And that's when, like, if you're on your homepage on desktop and you right click on a thumbnail for a post and you say, copy image URL and paste it in. A lot of times it'll be like, you know, on picture of me, I'm looking at one. It's like butter chicken dash 400 times 400 x 400. Like, Lindsay didn't upload that image, but when she uploaded the original image, WordPress created a square image. That's 400 by 400. Yep.

And so those are Your thumbnails. Thumbnails are great. Those on mobile, those will also be used as part of the image source set. So it probably won't serve the full size on your mobile, you'll serve a thumbnail that's smaller. So that helps speed things up. So, yeah, there'll be anywhere from 10 to 20 thumbnails that are generated. Now that right there on your server, there are going to be settings that are controlled by your hosting company of, like, what tools are doing that scaling. That scaling algorithm is not going to be as good as what's in Photoshop or Lightroom. Like, those are the pro tools. Right. Like a web server isn't designed to scale images.

Sure.

So there's going to be some quality loss. And the reason I bring that up is it's another reason not to upload huge images to your site. When you upload, let's say, right out of your camera at 4,000 by 3,000, the first thing that happens actually is WordPress will scale that down before making the thumbnails. And I think if it's over 2560 in either direction, I think that's the number. What it'll do is actually say, hey, that's too big. I'm going to create one that's 2560 by however tall, and it'll append dash scaled to the file name instead of a number. The dash scaled is 2560 in either direction. And then if you scale down from there, you're going to do a second scaling algorithm. Right. That's going to then go through that process and possibly degrade the quality a little bit more.

So the thumbnails are created off of the scaled version?

I believe so, but actually, don't hold me to that.

Sure.

But now, getting to your question about other optimization happening on the server, there are a lot of image optimization plugins that basically take the images that are on the server, the one you uploaded, and all the thumbnails, and then do a further compression or optimization algorithm on them. The two most popular are Short Pixel and Imagify. Actually, I should say those are the two most popular paid versions. A very popular free one is Smush. The free version of Smush doesn't really do that much. So take that info what you will. There's a number of these plugins out there, and what these are doing is applying a very sophisticated algorithm to try to shrink the size without hurting the quality to varying effect.

Right.

Or to varying success. But these are very aggressive algorithms that are kind of smarter than the original JPEG algorithm. So when you export from Photoshop, you're using kind of the classic jpeg. These newer algorithms are basically taking that and applying, like, human psychology and how our eyes see things and getting rid of the extra pixels we don't really need and shrinking the images really more. And what we found is if you start with a really big image, like 1 1/2 megabytes, it probably won't get, like, short pixel, for example, won't get you down to 200 kilobytes. It might get that big one down to 400 kilobytes. But if you start with an image that looks good at 400 kilobytes, it might compress it down to 150 or 200 kilobytes and look just as good. So that's why you kind of want to have it pretty well optimized when you upload. So then short Pixel or imageify can then take it to the next level and shrink it down even more.

Yeah, like kind of do the last 20% of Polish on the compression.

Exactly. And actually it can be a lot more than 20%. It's pretty impressive. What they can do depends on the image again. And so going back to the scaled algorithm thing, what you don't want to have happen is uploading large images, scaling them down, and, and then compressing them. So since we recommend 1200 pixels wide, you can have short pixel. Also scale things to 1200 pixels maximum. If you're optimizing your existing library. You know, you uploaded lots of large images in the past. It's really helpful because you can say, hey, scale all these down to 1200 pixels.

Sure.

So that'll speed things up for, you know, if you've been blogging for years in general, going forward, you don't want to upload something. Like imagine you upload something out of your camera that's 4,000 by 6,000 or 4,000 by 3,000. WordPress, then scales it down to 2560 by whatever, then then short pixel scale causes it to be scaled down to 1200 pixels and then it compresses it.

Yeah.

So all these steps, there's a little bit of quality loss every time. So by uploading at 1200 pixels, you're already skipping those and you're starting with a higher quality source image. That's going to help preserve the quality.

Yeah, it's. You're controlling it a little bit more along the way as opposed to releasing control of compression and the quality and ending up with something that maybe looks really soft because it goes through multiple versions of compression without you picking what that level is. Yep, that makes sense.

And JPEG is what's called a lossy algorithm. Like you, you actually do lose quality every time you recompress with jpeg. So the trick is the fewer times you have to do that, the better.

Sure, that makes sense. Great. So before we wrap up, sometimes I just like to ask as a catch all, anything else that you feel like is important or any questions that you've heard come up a lot or anything that you feel like as creators we should be thinking about from a web optimization core web vital site speed perspective.

Well, there's one, one tip I want to give everybody about featured images actually that we didn't hit on yet. You know, we've been recommending to make them 1200 pixels wide by 1200 pixels tall. So making them square. And the reason we do that is because they're going to get cropped in all sorts of which ways. The featured image. We usually set the featured image on the post and also on the recipe card using the same image. And you've probably noticed like in Google search results, they don't use square images, they always crop it. But in different formats, they crop it differently. So on mobile and desktop they crop it different ways. So making them square makes it work out kind of in all formats. But here's, here's the secret to making sure your thumbnails look good when they're shown on Google, because it's going to get cropped. Make sure on your feature featured images, the focal point is in the center of the image because that won't get cropped out. If you have like this cool, you know, angled view, like a 45 degree angled view of your, of your dish. And the focal point is in the very front or at the very bottom of the image that's going to get cropped out or might and then the rest looks blurry. So. And Google's going to butcher your image, bottom line. Right. They're going to do what they're going to do. So that's a way to help guarantee that your thumbnail looks good in the search results, which will hopefully get you more click throughs.

Got it. So featured image, is that when you talk about that, is that within the recipe card itself? So you have a recipe card, there's a featured image within that recipe card. Is the recommendation for that to be 1200 by 1200?

Yes, that. And also on the blog post in WordPress, there's a thing called featured image.

Got it.

And you don't have to set that one square, but it's easier and so we'll usually set that one to square as well. Your theme will use the blog posts featured image, like when it shows on the homepage or in your archive pages. So you may want to change that to look right for whatever the proportions are for your thumbnails in your recipe index or your homepage, but definitely on the recipe card. Going square is, is usually the best way to go Square.

And 1200 is the 1200 because of Google Discover like we were talking about.

Before you know it, it's really more just for consistency, like, sure. You know, when we're talking about this stuff, if I say to Everybody, just use 1200 pixels wide and hey, make your recipe image Square. It's still 1200. Like it's easy and it works. There's, there's no downside to doing that.

Yep, yep. Great. That's awesome.

And if you've, you know, if you've been using 900 by 900, like you don't need to go back and edit all your recipes. So I don't want to, I don't want anybody to freak out about that. Yeah.

But just moving forward. Yeah, that as general best practice or.

If you're updating an old post, that's a good time to use larger images if you need to.

Awesome. That's great. My guess is there are going to be people who are listening to this and at this point they'll have some steam coming out of their ears because they're trying to comprehend all this along with the other hundred things that have to go into the day to day of creating a site and publishing content and taking pictures. And the good thing is there's companies like nerdpress that exist. And really nerdpress is a company that specialized in the food space. Like, I know it's not the only type of site that you work with, but you really understand you. I mean, you said it yourself when at the beginning you started with a food site. You knew people who had food blogs because they, you met at conferences, they asked you to help. And now here we are, you know, 10 years later, continuing these conversations around optimization and site maintenance. For those who are interested in not figuring this out on their own, you know, there's a great opportunity to work with NerdPress. And I know some of the most popular blogs in the world, food blogs in the world are clients of yours. Can you talk about if somebody wants to follow up with you? Like, at what point would that make sense? What's the best way to connect what does that process look like? Because I know coming out of this, there will be people who are. Would be interested in connecting with you and the NerdPress team.

Yeah, absolutely. So we are. We are a team and we have, you know, our first core. Core value is always be helpful. Like, so we like, we're a helpful bunch. So anytime you want to contact us and have questions, we're happy to jump in and help. So the first step is to go to our website. Of course, that's nerdpress.net and if you want to reach out, you can email us@supporterdpress.net but we have information about our support plans and what's included in all the plans on our site. And we actually just launched a new frequently asked questions. I'm very proud of it. We actually went through like our last year of frequently asked questions.

Yeah, that's awesome.

And put them in order from most asked to least asked. So hopefully that will be useful for everybody. But yeah, take a look at our site. You'll see we have three different plan levels. So we're trying to meet you where you are in your blogging journey. And our goal really is to take all this technical stuff off your plate and be a trusted partner to help you through your blogging journey. So you can spend a lot more time doing what you love, which I assume is not figuring out how vitals. Yeah. And instead, you know, freeing you up to focus more on great food photography and developing recipes and, you know, all of those things you love to do. And so, you know, we found it's a really good match because we're a bunch of nerds who like to, like, we're problem solvers. And like, you should see in our Slack channel, if somebody emails us with like a really new, interesting, tricky thing, like everybody piles on and wants to help.

Yeah, yeah.

You know, like, oh, a new problem to solve.

It's just naturally those are the people that do that type of work are people who like to solve technical problems.

Yes. Yeah, for me, that's always interesting.

You know, the other thing that's really great about the site is you are featuring all of the different dogs of the NerdPress team. So if nothing else, it's a good reason to go and check out all of these awesome dogs. Real life nerd press team members. Well, thank you, Andrew. You're a huge help to this community, you know, podcast listeners, food blogger, pro community. And I know that over the years, people have gotten not only inspiration but also really actionable information from you and your team. And you do really good work. So thanks for all you do on a broad level. And also thanks specifically for coming on the podcast today.

Always my pleasure. Thank you.

Hey there, Alexa here from the Food Blogger Pro team. We hope you enjoyed this episode and thanks so much for tuning in. You know, this podcast is just one of our favorite things. It allows us to connect with so many creators, so many people doing awesome things in the world of food and online business. And we just so appreciate you being here and listening, you know.

Thank you.

The podcast is not the only thing we have going on. We actually have a membership called the Food Blogger Pro Membership and their members get access to courses and forum discussions and discounts and events exclusively for them. And in this content we like to talk about timely strategies and things that can just help you do what you love to do a little bit better. It's a great place to be. And if you're interested in joining, you can go to foodbloggerpro.com join but I wanted to give you a quick little sneak peek into what we have going on on Food Blogger this month. So on the 4th we have our coaching call and it's with Brendan from drinkingcoffee.com and in that call, Bjork and Brendan talk about finding consistent success, defining a desired vision for running a blog, building a team and selling products. It's a good one. And Brendan has such a cool, cool site. So we're really excited to share that with our members. Next on May 11, we're talking with our email marketing expert, Ali. You've heard of her on the podcast many, many times and she's going to be talking about chat, choosing an email service platform and creating opt ins for your audience. So members will have a chance to ask their specific questions to Allie before and on that call. And it's just gonna be a great one. And then on the 18th we have a really exciting new course coming. It's all about Inshot. Inshot is one of those apps that have just been really, really popular these days for helping creators make reels and TikTok videos. And we're going to show you some some specific tips and also show you kind of how you edit from start to finish using Inshot. So excited about that one. And last but not least, on the 25th we have a brand new blog post coming out all about trending recipe ideas in the summertime. So we're talking about different ingredients that are trendy, different recipe ideas and more. It's going to be a good one. So that is going to be our May. And we hope to see you on Food Blogger Pro again. You can learn more and join today@foodbloggerpro.com join all right, that does it for us this week. We will see you next time. And until then, make it a great week.