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

Listen to this episode of The Food Blogger Pro Podcast using the player above or check it out on Apple Podcasts, Google Podcasts, or Spotify.

A blue image of a desk with an open laptop and the title of Andrew Wilder's episode of The Food Blogger Pro Podcast, 'Search Ranking.'

This episode is sponsored by Clariti.


Welcome to episode 407 of The Food Blogger Pro Podcast! This week on the podcast, Bjork interviews Andrew Wilder from NerdPress.

Last week on the podcast, Bjork chatted with Brittany Hennessy. To go back and listen to that episode, click here.

How Core Web Vitals and Image Size Impact Search Ranking

Do you ever feel overwhelmed by the nitty gritty tech side of running a food blog? Well then, this week’s podcast episode is for you. Bjork is chatting with Andrew Wilder, our WordPress Support Expert, and the Founder and CEO of NerdPress.

In this episode, Andrew takes 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. They also discuss the best practices for blog image sizes, including the best method for compressing your images, and frequently asked questions about Featured Images.

Andrew is a frequent flyer guest on the podcast for a reason — he is super knowledgeable, and can teach us all about the tech side of blogging that many of us struggle with! If that sounds like you, you won’t want to miss this episode.

A photograph of a man sitting at a desk in an office with a quote from Andrew Wilder's episode of The Food Blogger Pro Podcast, "Core Web Vitals is basically looking at performance, or speed, and user experience."

In this episode, you’ll learn:

  • All about Andrew’s journey of starting and growing NerdPress as a business.
  • Why it’s important for creators to pay attention to Core Web Vitals.
  • More about Google’s Ranking Factors (and how they relate to Core Web Vitals).
  • Everything you need to know about Core Web Vitals, including how they’re calculated and how to optimize for Core Web Vitals.
  • What Google Search Console is, and how to set it up.
  • The process for optimizing and compressing the images on your site.
  • The difference between .jpeg, .png, and .webp, and when to use them.
  • Best practices for sizing and cropping your Featured Images.
  • More about working with Andrew and the NerdPress team.

Resources:

About This Week’s Sponsor

We’re excited to announce that this week’s episode is sponsored by our sister site, Clariti!

With Clariti, you can easily organize your blog content for maximum growth. Create campaigns to add alt text to your posts, fix broken images, remove any broken links, and more, all within the Clariti app.

Sign up for Clariti today to receive:

  • Access to their limited-time $45 Forever pricing
  • 50% off your first month
  • Optimization ideas for your site content
  • An invitation to join their exclusive Slack community
  • And more!

You can learn more and sign up here.

If you have any comments, questions, or suggestions for interviews, be sure to email them to [email protected].

A blue graphic that reads "Join the Community!" with the Food Blogger Pro logo.

Transcript (click to expand):

Bjork Ostrom: This episode is sponsored by Clariti, 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 Clariti and realized there’s an opportunity for Pinch of Yum that is a project we should move forward with. So I created a video, communicated it with the 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 use. So I was looking at pages that on Pinch of Yum in the last year got zero page use, 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 going to 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. It wasn’t until I was using Clariti that I realized that that was something that we should have done. I was able to see that. There’s a lot of 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 Clariti 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 then you can sort order and use Clariti like a Swiss Army knife for your content.

So if you’re interested in checking it out, go to clariti.com/food, C-L-A-R–I-T-I dot com slash food, and that will get you 50% off your first month. Thanks to Clariti for sponsoring this episode.

Hey there. It’s Bjork here. Jumping in quick for a little update. Something that we’re excited about, it’s one of the things that we get most excited about here at Food Blogger Pro is bringing somebody new onto the team. One of the things that we’re constantly trying to do, specifically within Food Blogger Pro, is figure out how can we create the best product possible and the product, a lot of it at least for Food Blogger Pro, is the content that we’re creating. It’s really, we think of it as two things, the content and the community. You know the content from this podcast. That’s one of the things that we do, but that’s the free version of the content. We also have the premium version of content, which is what you get when you sign up to become a Food Blogger Pro member.

We want to continue to invest resources, time, and energy into that area, so we’re bringing on somebody that we’re calling a content creator and editor. So this would be somebody who’s really interested and fascinated in two categories. One would be the world of technical expertise, and WordPress, and software tools that you can use to build and grow your blog. I’m guessing there’s a lot of people who listen to this podcast that would fall into that category. One of the things that you love about the process of building a following is learning the best practices, learning the things that are really working well for people who want to grow an audience and grow their blog. So that would be one piece.

The second piece would be somebody who’s a good teacher and educator, somebody who likes the process of thinking about something, learning about something, and then distilling that information down into actionable, insightful, and helpful media. So that usually, for us, for Food Blogger Pro, means recordings and screen recordings and walking people through certain processes, but we also do blog posts and podcasts and things like that.

So the position is content creator and editor, and specifically in a sentence, what you’ll do is you’ll be editing, auditing, and creating course content for Food Blogger Pro. We have lots of people who are creating content. If you’re a Food Blogger Pro member, you know that there’s all sorts of different people who are creating content, so you wouldn’t be the sole individual creating the content, but you would be going through the process of learning information or distilling down what you already know into actionable, insightful information for Food Blogger Pro members.

So an example of some other things you do, so plan an outline, recording course content, editing course content that’s been created by somebody else. So if you’re somebody who really loves the process of editing video and getting that organized and uploading it, maintaining a course auditing process. We have a lot of courses on Food Blogger Pro and we want to make sure that we’re staying up-to-date with that information, so having a process to make sure that information is all up-to-date, and just planning, outlining, writing, maybe proofreading content about growing an online food business, which is what we talk about on this podcast.

So it’s a part-time position. 20 hours a week is what we’re thinking for this, Monday through Friday. It’s remote, so you can work anywhere in the US, US preferred or at least US time zones so we’re overlapping. Starting date would be mid-May, and this would be a good fit for you if you feel comfortable breaking down technical topics into understandable points, you know how to run a blog on WordPress, you understand how food creators create and share content online, so different social media platforms.

This one I think is really important, that you have a deep desire to teach and to mentor others, that’s just a part of who you are. Maybe you get really excited when a family member or a friend wants to learn something new and you can teach them. This is also important, but having a positive, helpful attitude. It’s not only our technical expertise, but the spirit in which we interact with others, we think that’s really important as well.

There’s some additional benefits even for part-time employees that we have. We have a 401(k) plan with a 4% match, vacation days, sick days. We take the week off between Christmas and New Year’s, and you’ll get a new computer, and some money, a thousand dollars to build your home office. So even for a part-time position, there’s some great benefits that come along with working with the team, and we’d love to hear from you if you’re interested.

So if you feel like this would be something you want to at least learn more about, potentially go through the process of applying, you can go to foodbloggerpro.com/creator. Again, that’s foodbloggerpro.com/creator and see if it’s a good fit for you, go through the application process. We’d love to have a conversation with you and we’d love to add somebody not only smart, sharp, and capable, but also kind and helpful to our team. So if that sounds like you, we’d love to hear more from you and would love to have a conversation with you. Again, check that out by going to foodblogger pro.com/creator. All right. Let’s check out this episode.

Emily Walker: Hey there, this is Emily from the Food Blogger Pro team, and you are 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.

Bjork Ostrom: Andrew, welcome to the podcast.

Andrew Wilder: Hello, Bjork. Glad to be back.

Bjork Ostrom: It’s almost as if we’ve done this before.

Andrew Wilder: Just a couple of times.

Bjork Ostrom: It’s great to have you back. I feel like you are one of those connections that we have in this space where it’s like you’ve always been around. We’ve been around forever, you’ve been around forever, and here we are, we’re still around doing our thing.

Andrew Wilder: When I started my food blog in 2010, I thought I was late to the party.

Bjork Ostrom: Isn’t that interesting?

Andrew Wilder: Crazy.

Bjork Ostrom: It’s one of the things that I see as a throughline. 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 are still saying, 2022, “Is it too late to start?” A lot of stuff happening in the world, but 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?

Andrew Wilder: 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. I had always dabbled in websites. I built my first website in 1998, I think it was.

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. Then I found the food blogging community. I went to the International Food Bloggers Conference in Seattle and had an amazing time, and it grew from there as I started to meet people and fall in love with food bloggers as well and the whole community.

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? Can you help me with this?” I like to help people, so I said yes, and it grew more and more and people needed more help. Then I found out or realized I was doing the same kind of stuff every time where I was setting up backups and fixing security issues. So I started to standardize this into a package of services and we made it a subscription so we could do ongoing support. I think that was 2013 that I started doing that.

So 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 me and WP Site Care and that was it. Now, obviously, there’s a whole industry of WordPress help because there’s so many websites and so many people that help.

Bjork Ostrom: It’s 42% of the web, I saw it. I looked up runs on WordPress. Yeah.

Andrew Wilder: So I set up that subscription model and started helping people on an ongoing basis. Then in 2017, I hired Sergio for help because I was drowning by myself. Then by the start of 2020, we were five people, and now we are actually 19 people.

Bjork Ostrom: That’s crazy. I remember some of the times, those early times when you’re hiring and we’re having conversations around, “Hey, what does it look like to hire your onboard?” Now, it’s 19 people.

Andrew Wilder: It’s nuts. It’s nuts.

Bjork Ostrom: It feels like you blink 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. To look back at that and be like, “Oh, my gosh, that’s incredible,” it’s a testament to the work that you do, both the technical side but also the people side.

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 have to make people feel … It’s like going to a doctor. One of the things that’s most important with the doctor that you see is not only their ability to 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 I love about interviewing people like you is that you have a really unique view on … It’s like somebody who’s a banker and you get to see a bunch of bank accounts. For 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 last time we talked about when it was with you is these technical considerations from Google. So it’s a search-related consideration called Core Web Vitals. Can you talk about what those are and just give us a high level of refresher on why it’s important for us as creators to pay attention to this technical thing called Core Web Vitals?

Andrew Wilder: Sure, but first, can I say that was a masterful transition?

Bjork Ostrom: Good. All right.

Andrew Wilder: Well done.

Bjork Ostrom: It’s almost as if we’ve done 400 podcasts.

Andrew Wilder: That was very impressive. So Core Web Vitals, I think we last talked about this on the podcast, I think it was almost two years ago. So when we were talking about what we could talk about, I’m like, “Hey, let’s do a Core Web Vitals where are they now episode,” because when we were talking about it, it wasn’t yet a ranking factor. It was just about to roll out. Google gave us warning and said, “Hey, hey, this thing’s coming. Look alive.”

Bjork Ostrom: Can you talk about, and for those who aren’t familiar with the idea of a ranking factor, what that is and how those get added?

Andrew Wilder: Well, Google’s job is to take all the information on the internet and give you an answer to your query, right? So there are the search results and it has to rank the 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 10 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 details.

What those ranking factors are usually is trade secret. That is Google’s special sauce. People are constantly trying to reverse engineer this, and that’s why you have tools like SEMRush and Ahrefs 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. This could be a whole other podcast, but they’re using AI and have been for years. So you couldn’t ask a Google engineer who’s in the search department what are the 200 ranking factors. They can’t tell you, but we do know broad strokes, and there are some ranking factors where Google has said, “Hey, this is a ranking factor.”

Bjork Ostrom: Yup, and whenever we get that information, it’s like this little golden nugget because what we’re trying to do in this world is create content that people see. 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 it, the algorithm, is obscured, you don’t know what it is. You know 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 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 if you’re better at this, it’s going to help improve your search results, but what within Core Web Vitals are those things?

Andrew Wilder: 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 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?

Bjork Ostrom: That’d be great, yeah.

Andrew Wilder: 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 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. So every time a person goes to your page, 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. 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?

Bjork Ostrom: Sure.

Andrew Wilder: So that’s largest contentful paint. The second one is called first input delay.

Bjork Ostrom: 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 contentful meaning content like thing, so largest thing paint. Is that essentially saying how long? If you imagine a canvas, is the idea like it’s painting it onto a canvas? So how long does it take if the browser is a canvas or the largest piece of content to get painted onto the canvas? Is that me extrapolating too much from that phrase or is that essentially what it’s trying to say?

Andrew Wilder: That’s exactly what it’s trying to say, yeah. 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 Contentful Paint. So that’s how long it takes for the very first thing to appear because when you go to a website, you just get this white screen at first, 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. Could be a font, it could be an outline, it could be a picture, whatever it is. Then the largest contentful paint is how long does it take for the biggest thing to appear. 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 another 10 seconds.

Bjork Ostrom: You could manipulate it where you’re maybe loading in something really small just to get a good first contentful paint score.

Andrew Wilder: Actually, 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. 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 a human timeframe and perception thing at play here, but I think largest contentful paint is 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.

Bjork Ostrom: Yeah, that makes sense. Great. So that’s the first one.

Andrew Wilder: That’s the first one.

Bjork Ostrom: That makes sense. Second one is?

Andrew Wilder: 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 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 500 sites we’ve found it an issue. So if there’s something really bogging down the page and it’s like the page is non-responsive, we might have an issue, but normally, this is not an issue at all, thankfully.

Bjork Ostrom: So 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. What I hear you saying is it’s usually not an issue. 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 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.

Andrew Wilder: Yup. I think we have literally spent zero time on it, so thankfully you don’t have to worry about FID, first input delay. Then the third one, and this is definitely the hardest one, is 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 gone to click a button and then something loads right above and pushes the button down the page and you end up clicking a picture, which is a link that takes you to another thing. So that’s a really bad experience.

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. 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 for that page view.

Bjork Ostrom: 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? The page loads, and then an ad goes in and it shifts it down, and then 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 the score for the cumulative layout shift. You don’t want that because it’s a bad user experience.

What’s interesting to point out with this and maybe a good reminder is these are all just … Google isn’t the government. It’s not like you’re going to get punished or get a ticket for it. It’s just a company that’s making up these rules based on what they want to see and what their goal is, and what the goal of a search engine is is to give people the best experience possible.

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 once somebody leaves the page and goes to another site, even though it might reflect on Google as a company and their ability to surface a good piece of content.

So it’s 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 what’s happening with this?

Andrew Wilder: Yes.

Bjork Ostrom: Period. All right. Yes, period.

Andrew Wilder: Yeah, I think so. I think it’s in Google’s best interest. I mean, you said Google’s just a company. They’re a insanely powerful company, right? It doesn’t have a lot of competition, not really, but I think it is aligned. Core Web Vitals are frustrating because they’re really hard, but I think it’s aligned with everybody’s best interest. It’s good for visitors, it’s good for Google. Everybody wins when sites are loading fast and smooth. So I think 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? That’s a philosophical question we could spend a whole podcast on, but that’s what it is, right?

Bjork Ostrom: Yup, and in a lot of ways, like you said, these initiatives that they have make the web a better place. 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 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 Blocker 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.

Andrew Wilder: I was going to say I’m guilty of that.

Bjork Ostrom: Yeah, exactly, and that’s why you do what you do, 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 the NerdPress, and that’s the easy answer. You guys eat, sleep, and breathe this. If somebody wants to tiptoe into trying to understand it themselves or even do as much as they can, what does it look like to be aware of best practices with Core Web Vitals and pursue the best possible score that you can?

Andrew Wilder: I mean, we could do many, many podcasts on that. So all the blog posts out there that are 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. 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. For example-

Bjork Ostrom: Can you talk about some of those? 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?

Andrew Wilder: So perfect example is the Feast Plugin and the Feast Theme. Skylar’s 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 in an ecosystem of the Genesis theme plus the Feast 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.

So then we add optimization plugins on top. So our preferred tool is WP Rocket. We also use Perfmatters. We won’t use Perfmatters 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 it makes it harder to perform well on the Core Web Vitals. So the first step is really 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.

Bjork Ostrom: Yeah, and when you say stuff, do you mean plugins and themes? Do you want to be running lean and you don’t want to have a bunch of croft weighing you down?

Andrew Wilder: Yeah, exactly. I think as a non-technical person, it’s hard to tell what has croft and what doesn’t. 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 content form isn’t on that page. Well, that’s silly. I don’t mean to call them out necessarily, but I mean, that’s totally unnecessary, “I’m going to slow your site down,” and as the site owner, unless you’re willing to dig into the code on this, you’re never going to know that.

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.” It’s like a domino effect of things too. Older themes that need a certain JavaScript library to make your menu load, well, 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.

Bjork Ostrom: Yup. You had mentioned this PageSpeed Insights. Can you talk about what that is and how do people use that tool and what’s happening with that when you go and put your URL in there?

Andrew Wilder: Sure. So PageSpeed Insights is a webpage testing tool that Google provides. Let me get the address here real quick. It’s pagespeed.web.dev, D-E-V. 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.

Bjork Ostrom: Yeah, we’ll link to that. I’m trying to remember. So we’ve had a lot of Core Web Vitals conversations, whether on the podcast or live Q&As.

Andrew Wilder: 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’ll return the actual Core Web Vitals metrics, which is the real world user data that it collects through the Chrome browser. 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. So that’s just a tool for helping optimize your site so that in the real world performance it’ll be improved.

Bjork Ostrom: When you say a big score, you mean it’s an overall score that it’s giving you in terms of like, “You got A on this paper”?

Andrew Wilder: Yes. It gives you literally a score of zero to a hundred. It’s ridiculous because it doesn’t mean anything. They look at-

Bjork Ostrom: It’s not like if you get 80 out of a hundred, it’s not going to show you as high. It’s just like a score to help you understand out of a hundred what’s your opportunity, what’s the gap between getting to perfect.

Andrew Wilder: A lot of people see that score change and get really worried. 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 Core Web Vitals section, and that shows you pages that are in the good, needs improvement or poor ranges.

Bjork Ostrom: Yeah. Can you talk about what Google Search Console is and why people should have that set up?

Andrew Wilder: Sure. So Search Console is another free tool from Google. You can create an account that basically … 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 can add your website to it. They call it a property. So you can add multiple domains there if you have multiple sites. 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. It’s super helpful. 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 back links. You can look at all this other stuff. So it’s a super useful tool that if you aren’t set up for Search Console already, you definitely should get that, and it’s free.

Bjork Ostrom: It’s like getting a little bit of 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 communicating back and forth with Google or at least hearing what Google is saying. It plugs in directly to the Google’s view of your site. It’s interesting even, I have it pulled up here as we’re talking, there’s even just a Core Web Vitals section that is poor, needs improvement or good. 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.”

There’s been a few times I’ve connected with publishers and they’re like, “Yeah, I haven’t 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. Like we’ve said, there’s some really technical pieces that go into actually achieving some of the 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, “Here’s what you need to tweak and change and adjust in order to fix all of the thousands of different instances that you’d need to fix or improve”? 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 or a food site, one of the primary ways you can do that is by making sure your images aren’t like elephants in that instead they are cheetahs.

A lot of times what will happen is we will be running sites and all our images are elephants. They’re huge, they weigh a lot, and they’re slow moving, and we want to get to cheetah images, which are fast and quick and create a good user experience. That’s my analogy. Can you talk about behind the scenes what that actually means? You have an image, it’s really heavy. What’s happening and why is that bad?

Andrew Wilder: So not only do you have that, but you have to balance that with you want a beautiful cheetah, a cheetah that look great, especially food bloggers. You want your pictures of food or whatever to look beautiful and enticing, so you have to balance that, right? So with images, basically, the thing that slows you down is the file size, 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. Keep in mind, most visitors are aren’t mobile these days and they may be not on a wifi connection, right? So you need to-

Bjork Ostrom: Real quick 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.

Andrew Wilder: If you’re not happy with how the images look, go look on your phone because that tiny phone screen, it might actually look good to you. Keeping in mind, your visitors are not going to scrutinize your images the same way that you do, which is totally fair, that you’re going to be picky, I get it, but on that little phone screen, the resolution on those screens is beautiful. It may look great on that three-inch or two-inch wide image when it doesn’t look great on desktop. So you just have to balance that, right?

Bjork Ostrom: 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, they look good and they’re fast. Obviously, we want to be exporting images. Well, I won’t even assume. Start to finish, what does the process look like and what are best practices when it comes to good-looking but also fast images?

Andrew Wilder: 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. 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. The trick is every pixel contains color information 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?

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 proportionally. 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 webpages, 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. The one time Google has said a pixel size, they said 1200, point blank.

Bjork Ostrom: Can you talk about what the Discover feed is for those who aren’t familiar?

Andrew Wilder: Yeah. Basically, on mobile in the Google app, there’s this algorithm that says, “Hey, you might also like these things,” and it’s like a newsfeed. I think it’s more popular on Chrome or on Android devices, but if you just load the Google app on any device, I think it has it in there.

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

Andrew Wilder: I have a client who in February had a post that was featured at the top of Discover and one and a half million page views that day.

Bjork Ostrom: Oh, my gosh. That is so awesome.

Andrew Wilder: It’s insane. The crazy thing is it’s been tumbleweeds ever since, right?

Bjork Ostrom: Sure, right. It’s very spiky.

Andrew Wilder: Yeah, like web stories taking off. So 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 originally came from there, but what we’ve found is on retina displays, which are 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 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. One and a half times is about the right ratio to get a really nice looking sharp photograph. If you’re on a desktop monitor and you just put an 800 pixel of white image there, it’s going to feel a little fuzzy because our eyes got that sharpness.

Bjork Ostrom: It reminds me a little bit, our daughter Selvi, she’s four years old and she has went to a friend’s house and they did these coloring things where it was 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 15 minutes and it comes out and it’s this tiny little piece of jewelry that looks like super shiny and it looks you really professional, but when you start with it, you’re just doing these big lines and you’re coloring, but then it shrinks it down and then it looks super sharp. It’s a similar thing happening with the images where it’s a little bit bigger and it might look a little bit soft and it’s bigger, but then when you shrink it, when you bake it, it comes out looking a little bit sharper.

Andrew Wilder: You are on fire with the analogies today.

Bjork Ostrom: That’s my role. You just do the technical stuff and then I’ll do a real life applicable analogy. So images, we want to have a larger image, essentially a larger image than the space that it’s going in.

Andrew Wilder: Just slightly, just slightly. 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. Pre–2020 or so, people were uploading 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 reached saturation of how big we want things to get, and it’s not going to get a lot larger, but if you were to put a 2400 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. 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.

Bjork Ostrom: So you set the width when you’re exporting. Let’s say you use Lightroom. You set the width at 1200, you export. Are you setting a quality within Lightroom or do you have a recommendation for that?

Andrew Wilder: So that’s the second factor that really heavily influences the file size. Most of the time … 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. I’m 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. .png can have transparency so you can have something floating over something else, but .png is not good at photographs, and .jpeg-

Bjork Ostrom: It’s Joint Photographic Experts Group.

Andrew Wilder: Thank you.

Bjork Ostrom: Which is the group that created the .jpeg standard. I’m learning as we go.

Andrew Wilder: That’s very self-referential. That’s actually why sometimes you’ll see .jpeg and sometimes you’ll see JPG as extensions, and they’re the same thing.

Bjork Ostrom: Look at that. Great.

Andrew Wilder: You learn something every day.

Bjork Ostrom: So we’ve got .png, .jpeg.

Andrew Wilder: 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.

Bjork Ostrom: Got it.

Andrew Wilder: So choose the right format. Can’t stress that enough. Photos in the .png format tend to be 10 times larger. So something that could be 30 kilobytes as a .jpeg might be 300 as a .png.

Bjork Ostrom: 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.

Andrew Wilder: 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 don’t 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. There’s a whole layer of complexity of the transition from .jpeg to .webp right now that makes it very complicated. So let’s not worry about .webp for the moment, but as you’re exporting from-

Bjork Ostrom: To put a pin or not necessarily put a pin in that, but to wrap that conversation on .webp, the reason why, 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?

Andrew Wilder: Yes.

Bjork Ostrom: Got it.

Andrew Wilder: Most browsers now are pretty good. It’s been long enough and they’ve built the feature, but there are many other purposes or ways images get used. Facebook needs to be able to download your image for previews on Facebook. That’s just one example. I think it can handle web piece, but there are other services that may not handle it just yet. Over time, that’s going to change and improve.

The bigger challenge with .webp is because we’ve got sites now that have all these .jpeg images, are we going to duplicate all those files and create .webps and have to store all those files and back up all those files. So it gets complicated. So 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. I know you can upload a .webp format. It’s just another format. It’s a way of saving data. The idea with all these formats is to try to get the best picture quality in the smallest amount of file size.

Bjork Ostrom: That’s what we’re after. So 1200 pixels wide, probably most of the time you’re going to be doing .jpeg. 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?

Andrew Wilder: Yes. So .jpeg has a variable quality option. The different tools have different scales, but we could say zero to 100 or I think one is zero to 11. So 10 out of 100 will be very low quality, so it’s going to be super blurry and pixelated and look horrible, but this file size is going to be really low. It’s going to be very small and load quickly. That’s not going to look so great, but you don’t want to set it at 99 or 100 because the file size is going to be huge 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 looking back because once it looks good, you don’t need to dial back the compression anymore. All you’re going to do is get a bigger file and it’s not going to look any better.

Bjork Ostrom: So you’re exporting it, 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?

Andrew Wilder: Before we get there … The answer is maybe, but before we get there, I want to talk a little bit more about exporting real quick. So you’ve got the variable quality. I know in some tools you can specify a file size output. You don’t want to do that.

Bjork Ostrom: You can pick, “I want it to be 100 kilobytes.”

Andrew Wilder: Exactly, and 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. 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 of the way the algorithm works. It samples pixels next to it and compresses those together.

So if you’ve got a picture of a table with a burlap background and something that has lots, like a salad that has lots of sesame seeds on it, whether 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 have larger file size than they need to be.

Bjork Ostrom: 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 specially or the type of image it is. Is it complex? Are there a lot of colors? Is there a lot of contrast or is it a picture of the night sky and it’s black?

Andrew Wilder: Yeah, exactly.

Bjork Ostrom: That’s going to be a lighter image.

Andrew Wilder: I think you will have to test for yourself because everybody’s photos are different, your camera’s different, you might be using Photoshop or Lightroom. So I recommend experimenting. Once you find that quality setting, let’s say it’s 78%, 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 1.5 megabytes.

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 five images for this blog post that are all 200 or 300 kilobytes each. Now I can put them into WordPress.”

Bjork Ostrom: For those who aren’t watching, that was Andrew extending his hands out saying, “Followup question?”

Andrew Wilder: Pass the ball back.

Bjork Ostrom: Yeah, pass the ball back. Love that. At that point, there’s also a compression happening or there could be a compression happening on your site. So 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 overcompressing something?

Andrew Wilder: 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. If you go to settings media, you’ll see them, the creatively named thumbnail, thumbnail size, then there’s medium large. Actually, those are the three sizes in the settings. Then there’s also one called medium large that 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.” So it’ll create anywhere from five to 50 smaller versions of that same file.

Bjork Ostrom: You 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.

Andrew Wilder: Yup, and so if you install WP Recipe Maker, it’s going to say, “Hey, I need these four other image sizes at 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.

Bjork Ostrom: That’s when 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 Pinch of Yum I’m looking at one, it’s like butter chicken dash 400 x 400. Lindsay didn’t upload that image, but when she uploaded the original image, WordPress created a square image that’s 400 by 400.

Andrew Wilder: Yup. So those are your thumbnails. Thumbnails are great. 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 speeds things up. So yeah, they’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 what tools are doing that scaling. That scaling algorithm is not going to be as good as what’s in Photoshop or Lightroom. Those are the pro tools. A web server isn’t designed to scale images. So there’s going to be some quality loss. 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. 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. Then if you scale down from there, you’re going to do a second scaling algorithm. That’s going to then go through that process and possibly degrade the quality a little bit more.

Bjork Ostrom: So the thumbnails are created off of a scaled version.

Andrew Wilder: I believe so, but actually, don’t hold me to that, 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 ShortPixel 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 when you will.

There’s a number of these plug-ins 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 or to varying success, but these are very aggressive algorithms that are smarter than the original .jpeg algorithm. So when you export from Photoshop, you’re using the classic .jpeg. These newer algorithms are basically taking that and applying 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.

What we found is if you start with a really big image like one and a half megabytes, it probably won’t get, ShortPixel 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 want to have it pretty well-optimized when you upload so then ShortPixel or Imagify can then take it to the next level and shrink it down even more.

Bjork Ostrom: Do the last 20% of polish on the compression.

Andrew Wilder: Exactly. Actually, it can be a lot more than 20%. It’s pretty impressive what they can do. Depends on the image again. So going back to the scaled algorithm thing, what you don’t want to have happen is uploading large images, scaling them down, and then compressing them. So since we recommend 1200 pixels wide, you can have ShortPixel also scale things to 1200 pixels maximum. If you’re optimizing your existing library, 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.” So that’ll speed things up if you’ve been blogging for years.

In general going forward, you don’t want to upload something. Imagine you uploaded something right 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 ShortPixel causes it to be scaled down to 1200 pixels and then it compresses it. 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.

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

Andrew Wilder: .jpeg is what’s called a lossy algorithm. 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.

Bjork Ostrom: Sure. That makes sense. Great. So before we wrap up, sometimes I’d just like to ask as a catchall, 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 Vitals, site speed perspective?

Andrew Wilder: Well, there’s one tip I want to give everybody about featured images, actually, that we didn’t hit on yet. We’ve been recommending to make them 1200 pixels wide by 1200 pixels tall, so making them square. 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. You’ve probably noticed 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 in all formats, but 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 featured images the focal point is in the center of the image because that won’t get cropped out. If you have this cool angled view, a 45-degree angled view 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.

Bjork Ostrom: Got it.

Andrew Wilder: 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 clickthroughs.

Bjork Ostrom: Got it. So featured image, 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?

Andrew Wilder: Yes, that and also on the blog post in WordPress there’s a thing called featured image.

Bjork Ostrom: Got it.

Andrew Wilder: You don’t have to set that one square, but it’s easier. So we’ll usually set that one to square as well. Your theme will use the blog post’s featured image when it shows on the homepage or on 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 usually the best way to go.

Bjork Ostrom: Square and 1200. Is the 1200 because of Google Discover like we were talking about before?

Andrew Wilder: It’s really more just for consistency. 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,” it’s easy and it works. There’s no downside to doing that.

Bjork Ostrom: Yup. Great. That’s awesome.

Andrew Wilder: If you’ve been using 900 by 900, you don’t need to go back and edit all your recipes. So I don’t want anybody to freak out about that.

Bjork Ostrom: Yeah, but just moving forward as general best practice.

Andrew Wilder: Yeah, or if you’re updating an old post, that’s a good time to use larger images if you need to.

Bjork Ostrom: 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 a hundred things that have to go into the day-to-day of creating a site and publishing content and taking pictures. The good thing is there’s companies like NerdPress that exist, and really, NerdPress is a company that’s specialized in the food space. I know it’s not the only type of site that you work with, but you really understand. I mean, you said it yourself when at the beginning you started with a food site, you knew people who had food blogs because you met at conferences, they asked you to help, and now here we are 10 years later continuing these conversations around optimization and site maintenance.

For those who are interested in not figuring this out on their own, 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, 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 would be interested in connecting with you and the NerdPress team?

Andrew Wilder: Yeah, absolutely. So we are a team and we have our core value is always be helpful. So 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. If you want to reach out, you can email us at [email protected], but we have information about our support plans and what’s included in all the plans on our site. We actually just launched a new Frequently Asked questions. I’m very proud of it. We actually went through our last year of frequently asked questions-

Bjork Ostrom: Nice. Yeah, that’s awesome.

Andrew Wilder: … and put them in order for 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 on your blogging journey. 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-

Bjork Ostrom: Core Web Vitals.

Andrew Wilder: Yeah, and instead freeing you up to focus more on great food photography and developing recipes and all of those things you love to do. So we found it’s a really good match because we’re a bunch of nerds who like to … We’re problem solvers. You should see it in our Slack channel. If somebody emails us with a really new, interesting, tricky thing, everybody piles on and wants to help. We’re like, “Ooh, a new problem to solve.”

Bjork Ostrom: Naturally, those are the people that do that type of work are people who like to solve technical problems. Yeah. That’s great.

Andrew Wilder: For me, that’s always interesting.

Bjork Ostrom: 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 NerdPress team members.

Well, thank you, Andrew. You’re a huge help to this community, podcast listeners, Food Blogger Pro community. 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.

Andrew Wilder: Oh, it was my pleasure. Thank you.

Alexa Peduzzi: Hey there, Alexa here from the Food Bugger Pro team. We hope you enjoyed this episode and thanks so much for tuning in. 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. We just so appreciate you being here and listening.

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. 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 Pro this month.

So on the fourth, 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 11th, we’re talking with our email marketing expert, Allie. You’ve heard of her on the podcast many, many times, and she’s going to be talking about 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 going to be a great one.

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. We’re going to show you some specific tips and also show you how you edit from start to finish using InShot. So excited about that one.

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 at 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.

Leave a Comment

Your email address will not be published.