122: Site Speed in a Mobile-First World with Lauren Gray

Alexa @ FBP
by Alexa @ FBP on Oct 31, 2017 in ,

Welcome to episode 122 of the Food Blogger Pro podcast! This week on the podcast, Bjork talks with Lauren Gray from Once Coupled about mobile-first considerations, site speed recommendations, and theme frameworks.

Last week on the podcast, Bjork interviewed Emma Chapman from A Beautiful Mess about starting new ventures, solidifying your brand, and finding your path. To go back and listen to that episode, click here.

Site Speed in a Mobile-First World

Mobile-first, frameworks, photo size, https…you’ve probably heard these terms in the blogging space before. And the words alone are enough to make your head spin.

Developer and Food Blogger Pro Expert Lauren Gray is a pro at helping you make these tech decisions for your blog. And while they might seem like small decisions, they really will have a big impact on your site’s usability, search engine ranking, and workflow. This episode focuses on why you should start thinking about making these decisions for your business.

In this episode, Lauren shares:

  • How she started her company
  • The difference between developers and designers
  • Why she likes using a framework
  • What “mobile-first” means and why it’s different than “mobile friendliness”
  • How site speed is measured
  • How you should size your blog photos
  • How to think about automating certain tasks
  • Why it’s important to start thinking about switching to https

Listen to the Food Blogger Pro Podcast below or check it out on iTunes or Google Play Music:

Resources:

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

Be sure to review us on iTunes!

If you’d like to jump to the comments section, click here.

Transcript:

Bjork Ostrom: In this episode, we’re going to be talking to Lauren Gray. She’s a Food Blogger Pro expert. She’s going to be talking about her favorite framework and why she likes it. She’s also going to be sharing about a concept called mobile-first, and it’s a really important concept for bloggers, especially food bloggers, and she’s going to be sharing some tips for making your website speedy fast.

Hey, everybody. It is Bjork Ostrom, and you are listening the Food Blogger Pro podcast. I am coming to you today from a beautiful city named St. Paul, Minnesota. If you’ve never been here, you should really come by. It does not make it on the top travel list often, but we love it here, and as I look out the window, there’s a beautiful fall day. I hope wherever you are, it is a beautiful day as well. I know one thing for certain, that we’re going to have a beautiful interview today because we’re chatting with Lauren Gray from Once Coupled. She’s a developer that works on WordPress sites specializing in the food blog space, so obviously a perfect fit for this podcast and is also the reason why we asked her to be a Food Blogger Pro expert. For those that are Food Blogger Pro members, you probably know Lauren, but for those that aren’t, I thought it’d be important to quickly explain who the Food Blogger Pro experts are.

We have this awesome, incredible group of Food Blogger Pro experts, and it’s actually people that have been on the Food Blogger Pro podcast that have a really specific expertise in a certain area, a lot of times focusing on work with food bloggers. We have Casey Markee who’s an SEO expert from Media Wyse, Andrew Wilder from blogtutor.com, Alana who is the Pinch of Yum video expert. She’s the video specialist for Pinch of Yum on Food Blogger Pro. She’s the video expert, so she shares all of her inside information and how we do videos for Pinch of Yum. Tony Rulli who really understands Facebook advertising, Kate Ahl from Simple Pin Media, and she talks about Pinterest, and we have Danielle Liss, who many of you know from a recent podcast interview. She’s our legal expert, and she talks about all things legal from hashtag-legal.com, and today, we are chatting with Lauren.

Lauren has a site called Once Coupled, and she’s going to talk about where that name comes from, but she wanted to finish out our Food Blogger Pro expert interviews, and have Lauren on to talk about the behind-the-scenes things that she’s learned as she’s worked on WordPress sites. We’re going to dig into some really important topics that you should make sure to implement on your site, everything from site speed, which as you know is so important, to focusing on mobile, and the difference between a mobile site and a mobile-first site, and that, in and of itself, could be one of the biggest takeaways from this interview. Let’s go ahead and jump in. Lauren, welcome to the podcast.

Lauren Gray: Great, thanks for having me.

Bjork Ostrom: Yeah, it’d be really fun to chat here. We’ve been connected for a while. Obviously, Food Blogger Pro, you’re a Food Blogger Pro expert, and so you’re active in the forums, volunteering there and giving advice and insight, which we really appreciate, but fun to officially have you on the podcast now. We’re going to make it official, so it’s fun to have you here.

Lauren Gray: Thanks.

Bjork Ostrom: One of the things I want to, or I like to do on the podcast is to kick off the interview with a story or a little bit of a background, and I would love to hear your story in terms of Once Coupled, not only how you started that, what your intent was from the beginning, but also a little bit about the name. It’s a curious name. I think people would like that story.

Lauren Gray: Sure. Once Coupled started somewhere towards the end of 2013 probably, maybe a little earlier depending on where we count beginning of the origin story, but technically, I just consider it the beginning of 2014. We’ve been around for a few years, and we’ve kind of got our feet wet in a bunch of different areas.

Originally, I started out doing pre-made themes, and then I just felt that those were not what my audience needed, like they needed more support, and shortly after that, I actually came up with the name Once Coupled and launched my business underneath that name, and really, what I was going for with that name is the idea that once someone works with me or with my company in general that they don’t have to go look for another developer, that if they need something, they can come to me. If I can’t help them, I try and refer them to someone who can if it’s just not the kind of work I do, but just when I work with someone, I really want them to trust me, I really want them to, I don’t know, just feel like they had a really good experience and that they could come back and go through that again without feeling stressed. I want everything to be low-stress.

Bjork Ostrom: Yeah, for sure, and people can relate to that because so often, the technical side of things, a lot of the stuff that you do, is so stressful for people, and I’ve had multiple people email me, like go out of their way to email, and they’ve said, “Thank you so much for connecting me with Lauren because she’s awesome and has helped so much with my site,” so a little props out to you.

One of the things that you had mentioned there was you talked about the things that you do, and then you also said, “Hey, if we don’t do it, we want to connect people with those people that do do that,” and that was one of the things you had mentioned before the podcast was like, “Hey, it’s important for people to understand the different between developers and strictly designers.” That was one thing for me as I got into brand-building and business-building online creating websites that I didn’t really realize was two different things. Could you talk about how that’s different and how a designer and a developer work together to create a site and some of the things that you do within that and some of the things that you don’t do.

Lauren Gray: Yeah, absolutely. I still get called a web designer a lot. Honestly, sometimes I say that I’m a web designer because it’s just an easier explanation. Really, when I think of a web designer, I’m thinking more of someone who does graphic design, so they’re going to do a lot of branding. They’re going to come in and give you the visuals that you’re looking for, they’re going to lay out your content, they’re going to put the colors, the fonts, everything into the visuals of your site, and then when you’re done working with the designer … Sometimes, you’ll work with a pair, so it’s not handing off to someone, but in general, it’s one person who’s designing, and then the second person is the developer, and that’s really where Once Coupled is moving all of our focus into. We’re going to build out that design that you guys have created together.

You’ll get, potentially, a mock-up where everything has been created, and your developer is going to make that live on your website, and it’s going to be pixel-perfect, hopefully, of course, that you’re working with the developer, and they’re going to put that together for you.

Bjork Ostrom: Right so-

Lauren Gray: So-

Bjork Ostrom: Go ahead.

Lauren Gray: Yeah, there’s some people that will do both, but I just find that, usually, someone has a talent in one area or the other, and so you really want to play on your talents and make sure that you’re getting someone who focuses on design for that first component, and then having someone who is going to think about speed, functionality, longevity, those type of things, and they’re going to come in, and they’re going to build it so that you have the best of both worlds.

Bjork Ostrom: Yeah, and that’s one of the things, when I’ve done interviews with people that have built this, and this is one of the things they all talk about is really getting specialized, and I hear you saying that, and it makes so much sense that you’re not trying to do everything. As a matter of fact, on the homepage of your site says, for, it talks about what you specialize in, and developing customer themes, user experience, page speed insights, migrating from HTTP to HTTPS, which we’re going to talk about why that’s important, and then you say-

Lauren Gray: That is a new one we put on there.

Bjork Ostrom: Yeah, for sure, because a lot of people are doing that. It’s becoming important, but then there’s a section where you say, “These are the thing we don’t do: graphic design, hosting or databases, backups or security,” and then I appreciate this little props out, and you said, “Instead, we love to collaborate with Food Blogger Pro, Mediavine, Melissa Rose Design,” some of these other people that you partner with. As you are building your sites, you plug in these other components, which are really important.

We’re going to dive in. We’re going to talk about some development stuff, which I think at first, some people would be like, “Ah, the technical. Kind of scary,” but it’s also really important, and so that’s why I’m excited to talk to you today. One of the things you talked about as we were trading emails back and forth was the significance of the Genesis Framework for when you design and how to go about choosing a theme and the different parts that are important for that. Related to that, we did a interview with Brian Gardner talking about Genesis, but from your perspective, could you talk about why a framework like Genesis is really important and why specifically you like that?

Lauren Gray: I think, really, if you’ve heard the terms like parent theme and child theme, that’s what the Genesis Framework is. It’s really just a parent theme. I like Genesis because it’s been around for so long, it’s gotten updates for so long, it’s got such a built-out community, and when I build my themes on them, I’m creating a child theme for you, so it’s customized on Genesis, but you can then get updates regularly. Even though I’ve built your theme in January of 2014, you can still be using that theme in January of 2017 because you’ve been continually getting updates. Will you eventually need a new theme? Yes, you’ll want one anyway, but instead of having to worry about security and those type of things, you’re going to be getting those constant improvements to your site, even without having to work with the developer continually.

Bjork Ostrom: Yeah-

Lauren Gray: It’s just important to be able to get that without having to work with someone constantly and pay them constantly for something that you paid for in the beginning. I mean, there are always circumstances where you’ll be in other situations, but I want to make sure that I’m not putting anyone in that situation unnecessarily.

Bjork Ostrom: Right, right, so the idea being that Genesis is kind of behind the scenes. It’s an actively-managed theme or framework, has a really big community around it, it has momentum, it has a lot of credibility, so that’s continually being updated, but the design aspect is unique to your site, so you have this custom-looking feel that nobody would know the difference if they saw that it’s running on Genesis, you’d have to look the code to see that, but the idea being that that is continually updated. WordPress, it works well with WordPress, and you don’t have to have this truly custom theme that always has to be maintained on an individual level.

Lauren Gray: Mm-hmm (affirmative).

Bjork Ostrom: Great. Is that a theme that, for Genesis, are you working exclusively across the board? Like when you implement a new theme for a site, will you be using Genesis for that?

Lauren Gray: Yes. I do all new themes on Genesis, so if I’m working with another client, I can work in another framework, but if I’m going to create it, then I’m usually choosing Genesis for them. So many bloggers are using it that I feel like it gives them a sense of community too because they can go ask their friend, and their friend is probably going to be on Genesis as well.

Bjork Ostrom: Yeah, absolutely. Related to the design and development of a theme, this is a little bit of both, but one of the things that you have talked about that’s really important is this idea of mobile-first and what that truly means. I think we hear that word a lot, and we’re like, “Yeah, everybody uses their phone, everybody uses a mobile phone.” We get it, but what does, in your mind as you look at sites that you’re working with and understand the intricacies of food blogs and blogs in general, what does mobile-first mean when you think of that?

Lauren Gray: I feel like we should start with some definitions, some additional definitions.

Bjork Ostrom: Great.

Lauren Gray: A term I use a lot is mobile-friendly. Google’s got their mobile-friendly test, and that really just means that your site, while it, of course, works on a computer that you’re also are going to be very easy to browse on a mobile site. Mobile-friendly is just the idea, in general, that your site works well on mobile.

For the most part, most themes are created with media queries, and so basically, it’s just additional styles that only apply on certain screen sizes. If your theme is mobile-friendly and it’s using media queries, then essentially, your design is kind of collapsing, it’s rewriting itself to an extent on smaller screens. If you’re using a separate plug-in like WPtouch of Padsquad or something like that, then they’re serving almost like a separate site. It’s a whole different design, so you have your desktop design, and then you have your mobile design, and they’re completely separate things. For the most part, we want a theme that is going to be mobile-friendly all in one that it’s going to use those media queries because then you get that more cohesive experience across desktop and mobile in terms of visuals and branding.

Bjork Ostrom: Got it, so-

Lauren Gray: But in terms of code-

Bjork Ostrom: Yep, go ahead, and I’ll ask a following question after that. In terms of code, go ahead.

Lauren Gray: Yeah, in terms of code, and really, I guess what I mean is in terms of usability, having the two separate sites is sometimes preferred because your desktop site, even when you collapse it down to mobile, it doesn’t work exactly the way you want it, so sometimes we choose to go with a separate application because that mobile version works more intuitively for our users.

Bjork Ostrom: Got it, so-

Lauren Gray: So there are pros and cons to both.

Bjork Ostrom: Yeah, and I think it would be worth digging into that a little bit. There was a couple of things that you mentioned that I want to dig into. One of those was you had mentioned Google’s mobile-friendly test. Can you talk about what that is and why people would maybe want to use that?

Lauren Gray: Yeah, their mobile-friendly test is basically just a check, yes or no, is your site mobile-friendly, and you could Google it, it should be the first result. It’ll show you the length of the page, you can go there and insert one of your URLS. Hopefully, your entire site is or is not mobile-friendly, but you can test individual URLs, and it’ll just essentially tell you yes or no. If it says no, it’s got some recommendations on why it says you’re not mobile-friendly, but for most people, at this point, you’re probably going to be in that yes zone because Google previously released an update where they were going to give preferential treatment to sites that do have mobile designs. At this point, almost everyone has some kind of mobile site that’s specialized versus just a teeny tiny-

Bjork Ostrom: Right, version.

Lauren Gray: I don’t know, if anyone knows what it looks like anymore. Hopefully, not so much, but-

Bjork Ostrom: It’s interesting, I pulled it up, and it literally is just a page that says, and we can link to this in the show notes, but it’s search.google.com/test/mobile-friendly. Kudos to anybody that actually listens to that and pastes it in or fills it out, but you could, like you said, Google “mobile-friendly test.” It’s just this really basic page. It says, “Is your web page mobile-friendly?” I ran it, and for Pinch of Yum, we have this little green little box that it shows, “This page is easy to use on a mobile device,” so point being, it’s mobile-friendly for us, for Pinch of Yum. We were that first version that you’re talking about where we have what’s called media queries, so if somebody wants to see what this looks like, you pull up pinchofyum.com and you grab the corner of the page and you shrink it down, and it changes how it looks and how it interacts on the site.

An example of a maybe more of a custom media query for Pinch of Yum is that when you go to mobile, the latest blog post show up at the top, but when you are on desktop, like when it’s all the way wide, it’s the, we have three images at the top as opposed to the latest blog post, so all of that’s done with media queries, but one of the things you mentioned was these other applications like WPtouch or was is that, what was the other one called, pad, pad?

Lauren Gray: Padsquad.

Bjork Ostrom: Okay, can you talk about how that works in terms of creating a different site? Is that creating like a mobile version, like m.pinchofyum.com. Is that what that would happen with those applications or plug-ins?

Lauren Gray: Basically. It doesn’t necessarily have to be at a different URL, so it’ll still just show up at pinchofyum.com, but it’ll show, it basically strips out your current theme, and then serves, holds it like completely different content. You have a customized home page, and it’s got basically curated content on it. Well, if you were using this plug-in, it would not use that customized content. It would, depending on your settings within the plug-ins, just pull your latest post, and it would be a listing of your latest post, and it might be an image and the title and nothing else-

Bjork Ostrom: Got it.

Lauren Gray: … and maybe they sort of look like a bulleted list. I mean, they look nicer than that, but it just simplifizes the website to try and make it really easy to browse on mobile.

Bjork Ostrom: Got it. Do you have an example of a time when it would make sense to use a plug-in like that versus doing it custom?

Lauren Gray: I think the only real … Hmm, I don’t know.

Bjork Ostrom: There, in-

Lauren Gray: For the most part, I don’t care for it. I think some people have sites that it’s easier. If you don’t have a developer, it can be difficult to manipulate your site, even if you have mobile styles to work the way you want. For example, let’s use Brunch Pro. By default, they have three featured posts across the top, and then underneath, most people have some kind of sequential listing of posts. On mobile, that will collapse. You do have mobile styles on there, but you’ll see that those first three featured posts show up at the top, and then underneath that are the sequential post. Well, some people really don’t want those featured posts at the top on mobile. On mobile, they just want their readers to be able to see the latest post, and it’s difficult to manipulate that without having some kind of custom site, and those plug-ins just make it really easy for you to just show a very simple mobile site to your readers.

Bjork Ostrom: Got it. An example would be somebody that is just starting out. Maybe the theme they’re using isn’t mobile-friendly. They test it. They want to get something implemented right away, and they don’t want to change to another theme or pay somebody to do it. One way you could potentially do that is using one of these plug-ins to automatically create that mobile-friendly version, downside being suddenly it’s not as custom in terms colors, the look, and the feel, and it kind of diverts from the branding that you had. Super, super easy, but there’s some definite downside to those.

Great, so mobile-friendly, we’ve defined that, we have an idea of what mobile-friendly is, we have an idea of how to implement that. I think people are pretty familiar with that, but mobile-friendly is different than mobile-first, is that right?

Lauren Gray: Yes, so mobile-first is going to be basically just the concept of just considering your mobile users before you consider your desktop users. We have so many more mobile devices, so many more people that are coming to our sites for mobile devices that it makes sense, really, to build out your mobile site first, and then change that site so that it looks good on desktop.

From a mental perspective, current-post sites are created on desktop, and then we just take that content and we rearrange it so that it all is top to bottom on mobile, but in this case, the idea of mobile-first is to think, “How do I want this to look on mobile? How do I want it to interact on mobile?” and then after that, consider, “Okay, now how can I use this content and present it in a useful way to my desktop users?”

Bjork Ostrom: Yeah, which is kind of weird for people like myself or maybe for you who, we work at our desktop almost the entire day, eight hours, nine hours, whatever it would be, but then to have to think the vast majority of people that are coming here, for Pinch of Yum, it’s three out of every four people that are coming to the site are experiencing it on a mobile device whether that be an iPhone or tablet included. If you include tablets, which is 10% of our traffic, not big, it ends up being 75% of the traffic to Pinch of Yum, so 65% in mobile, 10% tablet, and then 25% desktop.

What you’re saying is, “Hey, you should match where your users are coming from,” and with food blogs and food-related sites, a lot of that is, the chances are, and you should check your analytics, it’s probably not true for everybody, but vast majority would be from mobile. Is that the idea?

Lauren Gray: Yes.

Bjork Ostrom: Got it. Do you have any advice for people that are looking to experience their site in a mobile-first way? Do you say, “Hey, use your site on your phone a lot,” or what would that look like? How do you be intentional about being mobile-first?

Lauren Gray: Definitely. I mean, mobile-first is, I guess I can’t say definitively, but I assume that people who are writing mobile-first code and designing mobile-first visuals and mock-ups are going to be advertising that they’re doing it in a mobile-first way, so it’s probably something that you can look out when you’re looking for themes if they say, “This is a mobile-first theme.”

Definitely if you’re trying to get into that mobile-first mindset, visiting your site on your phone more often, browsing around, trying all of those different interactions on your phone, and then seeing does this really work? A common thing would be forums. Forums are generally not fun on mobile devices, so go through your forums and give that a try. Anything that’s kind of, you want someone to interact with your site, is there any barrier on the mobile site that’s making it difficult for them to do so? Did you put in some kind of fancy functionality that works really well on desktop, but just for your mobile users, it’s not adding any value to their experience?

Bjork Ostrom: Great. That makes sense, the idea being we really want to be focusing on mobile, especially for people in this niche, but I would guess, across the board, there’s this shift happening to experiencing things from a mobile perspective. Hard to do when you’re used to desktop, but really important, so I think that’s a good takeaway.

Another really important thing is your page speed. Could you talk about why the speed of your website is important and maybe some ways that people can start to test that and improvements that they could make?

Lauren Gray: Absolutely. There’s really … This is how I start everything that I go over with my clients or page speed is it’s just defining our terms. There’s really two types of page speed or load time or whatever we want to call it with these vague words where they all kind of mean the same thing and they all mean something a little different as well. Different tests that exist will run different metrics. They will measure your load time differently, so if you’re running something like GTmetrix, they are going to give you an actual load time, and it’s going to display a number. If you’re running a test like Google PageSpeed Insights, they’re going to give you a score out of 100, and it’s going to be either red, yellow, or green, and they won’t give you any timings on your page, just that score instead of the timings, so.

Bjork Ostrom: With a site like GTmetrix, they’re giving you a load time. Google PageSpeed Insights is giving you a score. For the load time, is that, load time means literally how long it takes a site to load? Like if you were to go to that site, pinchofyum.com, let’s say, hit go, from the site that it starts to the time that it’s completely loaded, that would be the load time from a site like GTmetrix?

Lauren Gray: It depends on the site. They’ll measure different things depending on which site you’re going to. In general, that’s basically the concept, but different components on your site can cause those numbers to be higher than they would otherwise.

For instance, I have a lot of clients that are running ads. Those ads, because they’re continually loading can cause that score to just skyrocket, even though your page speed to what your user is perceive is much lower. Your users aren’t actually bothered, but your page, not your page speed score, but your load time shows that it’s like 40 seconds. Nobody’s actually going to wait for your page to load over 40 seconds, but your page-

Bjork Ostrom: Right, before they can see content, for instance.

Lauren Gray: Yeah, exactly. Your page is probably usable within a few seconds, and then as they were going down and reading your content, other things are continually loading.

Bjork Ostrom: Got it. Can you explain how that works at a high level, so why certain content loads and then what’s loading in the background, and why people may or may not notice that?

Lauren Gray: Initially, when someone visits your site, they’re going to get an HTML response. It’s just going to be code, and then that code tells them, “Go pull some more code,” so your website is continually grabbing information, and depending on how your site is set up, it basically has to grab all the information before it can work, so someone’s gotta sit on your site for four seconds, let’s say, and wait for all of the styles, all of the functionality, all of the images to load before they can really interact with it, before anything is shown to them.

We can kind of change that and rearrange some things so that they can see your page almost immediately, but then over the next four seconds, that functionality is still loading so they were able to see your site. It looks exactly the way it’s supposed to. As they scroll down, things are continually loading, so the images are now coming in, the ads are now loading. Any functionality like social widgets, things like that, they’re going to come in after so that instead of blocking your images from loading, basically your styles, all of your visuals, that’s going to happen first. Then that functionality that’s not really necessary upfront is going to come later.

Bjork Ostrom: I’ve seen that too, and we’ve actually implemented this in some small ways on Pinch of Yum where people will load in, or sites will load in a holding image, holding image mean like a really low-quality image, and then load in the full image on scroll, so if people wanted to see that, you could go to Pinch of Yum and then pull up a post. We actually have that for the comments because that was one of the areas where we saw a lot of different images having to be pulled in, and the reality was not a lot of people get to the comment section, so what we did is we changed it over where we said, “Hey, let’s wait until people get to the comment section and load those in as people are coming in as opposed to loading it in right at the beginning.”

I see that too with sites like Bleacher Report, which is kind of like bubblegum sports news. It’s not like real sports news. They would probably disagree, but if you go to that site and load it in, there’ll be a distorted image, and then if you stay on the page long enough, it’ll load in the full image. In a scenario like that, is that doing the same thing where it’s trying to get the usable information there as soon as possible, and then delaying some of the other stuff?

Lauren Gray: Absolutely.

Bjork Ostrom: Got it. Got it. It’s something to keep in mind as, for you, the listeners, as you look around, what are the ways that sites are being intentional about delivering information as quickly as possible without delaying the, while still sending high-quality images or ads, things like that. It’s a small user-experience thing, but it’s important to know.

What are some other things that you can keep in mind or pay attention to related to page speed, maybe some of the common issues that you see with some of the sites that you work with?

Lauren Gray: Yeah, absolutely, because I think what we talked about just now is maybe on the more complex-

Bjork Ostrom: Yeah, for sure, for sure.

Lauren Gray: … side. There’s definitely more complex to understand. There’s certainly some plug-ins that can implement parts of it, but other components of it are definitely, need to be custom-tailored to your site.

Bjork Ostrom: Yeah, and there’s probably some low-hanging fruit that you can pick.

Lauren Gray: Yeah, absolutely. Some of those things would be like social widgets, which I had mentioned earlier, that those are lazy loading in certain cases. Well, just in general. Social widgets, a lot of social sharing, social counts, those type of things, those are all going to be calling out to additional files, they’re going to have to get additional information. If we don’t have those, if we remove that information from the site, it’s definitely going to make a difference.

Certainly one that I see pretty often is the Pinterest widget. The Pinterest widget is loading a ton of images onto your site, and yes, they’re a little bit smaller, but it’s just a lot of resources that have to be grabbed for fairly low interaction for a lot of people. Something I recommend doing there is just if you’ve got some top pins and you really want to promote Pinterest, put those images directly into your sidebar rather than putting in the Pinterest widget itself, or put in some image that says to follow you, but not the widget, something like that.

Bjork Ostrom: Got it, so idea being-

Lauren Gray: Really a lot of removal, like if you’re not using it, don’t have it.

Bjork Ostrom: Yeah, so idea with that being, with a social widget, you gave the example of Pinterest, and people would put this in their sidebar thinking, “Hey, this is going to be great. People will follow along with me, and they’ll learn that I have Pinterest,” but the downside of that maybe two-fold.

Number one, in reality, a lot of people aren’t engaging with that. They’ll maybe look at it but they won’t necessarily follow you because of it. Then the other downside being the extreme drag, like how much downloading has to happen because of that widget, so I think that’s a great recommendation, like you said. Hey, you can still fulfill that same, you can still try to solve that problem of getting people to follow you on Pinterest, but instead of the widget, the thing from Pinterest, instead, why don’t you put an image that says, “Follow me on Pinterest,” or three of the popular images that you have on your sidebar and say, “Pin to Pinterest,” or something like that. Is that the idea?

Lauren Gray: Absolutely, just getting creative about you still have something you want your users to do, but how can you be more intentional about getting them to carry out that task without impacting your page speed or adding an excessive number of resources on to every single page load.

Bjork Ostrom: Got it. For something like that, two questions. One, is there an easy way to see if people are interacting with something. You talked about the Pinterest widget. How do people know if that is effective or not? It’s kind of a user-experience question.

Lauren Gray: It is pretty difficult to tell, especially for something like that. I mean, if you had some Google Analytics knowledge, you could track certain outbound clicks. That one’s probably going to be harder because I think they load everything in an iframe, so you really don’t have a lot of control over it. I probably would recommend an external service like Hotjar, which I think you talked about before.

Bjork Ostrom: Yeah

Lauren Gray: Something like that where you embed something on your site so that you can track your users and see what they’re doing, you don’t know necessarily who they are, you can’t look at specifically what I’m doing on your website, but you’ll get that good information from them of, are they even stopping and looking at this widget?

Bjork Ostrom: Yup. That was actually, that was way back episode four of Food Blogger Pro. That was a fun interview that we did with one of the co-founders of Hotjar, and that was before Hotjar was Hotjar, which it’s a really popular tool now, but Dr. David Darmanin talked about using Hotjar and some of the ways that you can implement it, one of those being a heat map where you can see how people are interacting with a widget. You can even see, you were talking about this, but the interactions that people have with the video, not necessarily the actual person doing it, but you can see in general what that looks like. That would be a great way to test and see, hey, how many people are actually going over here, clicking, mousing over it, and making decisions based on that information and that insight.

Removing some of those social widgets, that’s a really good idea to speed things up. What are some other things that you see as common issues with some of the sites that you work with?

Lauren Gray: Well, I wanted to go back real quick to Hotjar and add a disclaimer that Hotjar does call other resources as well. It’s the only way they can track your site-

Bjork Ostrom: Yeah, good.

Lauren Gray: … so make sure you don’t just put Hotjar on your site and then leave it there and not look at the data. If you are actively tracking something, good tool. If you think you want to track something in the future, don’t put it on yet.

Bjork Ostrom: Yeah, that’s good.

Lauren Gray: Wait until you’ve got a question because otherwise, now you’ve got Pinterest and you’ve got Hotjar, so just thought I’d throw that one out there-

Bjork Ostrom: No, that’s great, and I think-

Lauren Gray: … but from other things-

Bjork Ostrom: … really important, a note to say, and we’ve been thinking about this with what we do, don’t do something just because you think that you’ll need it, but implement something at the point that you actually need it. I think that’s another great point. Anyways, continue what you were saying.

Lauren Gray: Absolutely. Some other smaller things we can do is, I mean, it’ll really depend on your audience, but depending on your audience, use less images in your posts. I know some people, your strategy is to show the process you’re going through. If that’s your strategy, I don’t think you should use less images necessarily, but if you’ve got six images, and they’re all almost the same shot of a finished product, that’s a really good case where you want to go down to just one there. Images are typically very large and intensive to download, and you can pull some of those out. That could be good for your page speed. Just in general, even if you keep those images, compress them and insert them at exactly the size of your content, which I’m not sure that you do.

Bjork Ostrom: We don’t, no. We … This would be good, I would love to hear the back and forth of this. This is something that we do for retina-size screens, and it’s the positive and negative. A retina screen is essentially, I don’t know, how would you describe it, is essentially like a super pixel-dense screen, so the images will look different if they’re not retina images, meaning if they’re not images that are bigger, this is going to be a little bit hard to explain, but bigger than the actual post size that are like double the size, so it’s a huge resource to download, and it takes a lot of time. What you’re saying is if you are interested in optimizing for speed, insert the images not at an increase size, but at the actual size that they’re going to display at. Is that correct?

Lauren Gray: Yes.

Bjork Ostrom: Got it.

Lauren Gray: Yes.

Bjork Ostrom: My follow-up question with that, and this would be good for me to fully understand because at this point, I understand it 60%, is the user of source set within WordPress in order to understand the screen size of the computer or mobile device, and then serving the appropriate image based on that size. Does that make sense?

Lauren Gray: Mm-hmm (affirmative).

Bjork Ostrom: Do you have thoughts on that.

Lauren Gray: Basically, it is not … Unless you have it custom set up for your site, it’s really just not smart enough to do that automatically. In some places, it will, like in your thumbnails, it probably is going to have a better change of showing the right image size automatically, but within your post content, you’re not likely to see a smaller size if you insert double the size.

Theoretically, it’s good. It’s definitely helping anywhere that there’s thumbnails, which are basically anywhere you’re going to be using your featured image, but if someone actually goes into your post and they’re reading your post, and you’ve got, I don’t know, let’s say, six images again where they are all inserted at double the width of your content, then they’re just so much larger. There’s so much more to download, and at large sizes like that, there is a noticeable decrease in quality, but I, and this is such unpopular opinion that I feel nervous saying it-

Bjork Ostrom: No, it’s good.

Lauren Gray: But I just don’t think it’s necessary. I am not a food blogger. I am not a photographer. I don’t notice the difference. Like if I see them side by side, of course, one looks way better, but if I go to your site, I’m not like, “Oh. You didn’t use retina images,” so I think for the average user, you’re really, you’re not doing them a service by having the double the size in there even though, obviously, they make your images look so much better. If you’re on a retina screen and your friends are on a retina screen, and you want everyone else to see your beautiful photos, I definitely understand that, but I think you did some kind of interview with Andrew before, and I’m pretty sure I learned this from him, but essentially, even if your image is only twice as big in physical dimension, the file size is exponentially larger, and I’ll have a file size that’s four times as big.

Bjork Ostrom: Yeah, and that being because like, it’s double the size, but then you think of the square footage of that image. It’s so much more. That was Andrew from blogtutor.com, another Food Blogger Pro expert who’s incredible and a great resource.

Yeah, so that’s something actually that it’s a good thing for me, a good reminder to revisit that, to think about that. I got, like I said, 60% of the way through it, and it was like, “Okay, I feel like I have kind of an idea of how this is working.” I tested, one of the big things for me was testing on mobile because so many people come from mobile, and then confirming that, for Pinch of Yum, I don’t know if this is across the board for all sites, but it is serving appropriately-sized source set, this is getting into super nitty-gritty details for people, but I think it’s interesting, nonetheless, and important, appropriately-sized source set images for mobile.

When we upload an image, there’s multiple, and this is true across the board for WordPress as far as I understand, it creates multiple different sizes for that. If you upload one image, there might be three or four different images that are created in WordPress’ backend, and then what source set does is this little piece of code, and you could look at the, view the code source, and then search for srcset, source set, and then you’ll see, there’s a bunch of links to different size images, and you can do that on Pinch of Yum. In the show notes, we can link to the source code for Pinch of Yum post if people want to see that.

Anyways, point being, it’s something that’s important to know that images are really, really heavy, and if you do decide to use retina images, make sure that you have source set implemented on your site and that you test it by making sure that if you are going from loading the device from a mobile site, or from a mobile device like an iPhone, that it’s not serving this massive image that’s going to this tiny little phone because if it is, it’s a huge drag on resources, especially if somebody’s using a mobile connection as opposed to WiFi, so I think that’s a really good takeaway and something for people, if they’re interested, if they’re nerdy, they’re geeky, then they can dive into that and learn a little bit more about it.

Images is another really big thing to be aware of that. Is there anything else that would be important to point out when it comes to page load or load time for a site that we should be aware of?

Lauren Gray: I think really just the major key takeaway, which is be to remove anything you’re not using, and even maybe some things you think you’re using but you’re not using often enough for them to really be essential to your site. I think that would definitely be the biggest-

Bjork Ostrom: Yeah, and-

Lauren Gray: … thing. A lot of the rest of it is nitty-gritty details, but are … Too much.

Bjork Ostrom: Yes, for sure, and source set might’ve been that, might’ve been a little bit too much, but I went for it.

Lauren Gray: That’s true.

Bjork Ostrom: But I think that point that you made at the end is important as well to do some type of audit. We’ve done that every once in a while where we go through and say, “Okay, when it comes to plug-ins, are there things that we’re not using, or if we are using that aren’t super important? Is there old ad code?” Sometimes that was true for us where we looked, and we’re like, “Oh, there’s some ad code we need to clean up and get rid of here.” Maybe it’s certain images on a really popular post, like if you go and look and see, “Hey this is one of my most popular posts, and I have some duplicate images that aren’t really adding any value,” you could remove some of those, so all different things that you can intentionally do and be strategic about, and I think that’s really great.

We’ve covered a lot stuff. We’ve talked about Genesis, the importance of that, and mobile-first and mobile-friendly, talked about page load speed, how we can really be aware of that and improve that. One of the things that you had mentioned that you said that you’d be interested in talking about, and I think this would be worth diving into is talking about, from a development perspective, anything that you’re doing that’s kind of repetitive for a post or a page can probably be automated. Could you talk about what that is and where you’ve seen that play out and how that’s helped bloggers when you fix this, when you automate it?

Lauren Gray: Yeah, this is like one of my favorite things. It’s just to tell someone that they don’t have to do that anymore. They’re like, “I can just do it once, and it will always happen.” Basically, and this is, the most common place I really see this is inside of your post content, so if there’s something that you’re adding to every single post or even to groups of posts, that can probably be automated. If it’s always the same or if it’s just slightly different, and it could always be the same, that could be done for you, and instead of having to copy and paste that into every post, insert whatever it is, then your theme or a plug-in can do it automatically.

I was working with a client recently, and she was inserting related posts at the bottom of every one of her articles, and while sometimes, that’s actually a good strategy for certain people to do that manually, the way she was doing it and the way she wanted to do it would have just worked better if we automated it. We used a related-post plug-in, and we picked one that would let her manually choose which post were going to be associated because she didn’t want that to be automatically chosen. There are specific posts she wanted to choose which is why she was always doing it manually, but there is an option to insert those posts automatically, and all she has to do now, instead of grabbing the image, grabbing the title, linking them, attempting to style them in that post content, is search for post theme, and click add to content.

Bjork Ostrom: It’s great, and so-

Lauren Gray: Instead of-

Bjork Ostrom: … before she was manually copying and pasting over images, links, things like that. Point that you made was-

Lauren Gray: She’s having to edit the HTML.

Bjork Ostrom: Yeah, not ideal.

Lauren Gray: Nobody wants to do that.

Bjork Ostrom: So you said, “Hey, we can do this, we can customize this, use a plug-in.” What was the plug-in that you used?

Lauren Gray: For that one, we used Related Posts for WordPress. There’s a premium version of it that we used for that.

Bjork Ostrom: Got it, and then taking that, obviously probably doing a little bit of customization to it so it fits into her site, it looks right, and then saying, “Here’s how you can automate this so you’re not copying and posting HTML, you’re simply clicking the link and saying this is the one that I want to be included.” Huge time-saver for each post. Who knows what it is, maybe 15 minutes, half an hour, but over hundreds of posts, thousands of posts, that really adds up, and those little wins are what really make a big different, so I love that.

Think about that, for you, the listener, are there things that you’re doing repeatedly for a post, and how can those be automated in some way, shape or form. I think that’s a great point. Do you have any other-

Lauren Gray: And-

Bjork Ostrom: Yeah, go ahead.

Lauren Gray: Another thing I wanted to say about that is that applies to a lot of different examples of almost anything you’re doing in your content. I want to give one more and then state why, a second piece.

Another example, I would say, is if you want to insert something only on certain posts, you can still do that, so it doesn’t have to go into every single post, it doesn’t have to always happen. There can essentially be triggers, so I can say, “If it’s in a certain category, I want to show certain information. This is a recipe, I want to show an opt-in for my recipe eBook, but if this is travel, I want to show an opt-in for my travel eBook.” It doesn’t have to go on every single post. I just need some way to identify the content you want it on, and then I can do that automatically.

Another really good thing about that is, later on, if you had, let’s say in that example, you had a recipe eBook. You promoted it in one of your articles, you did a whole call-out for it, and then later on, you’re doing a new recipe book, and you want to switch out your old one and all of your content. Well, you might’ve added that to like 60 recipes because it was relevant, and you just copy and pasted the same code, so it really wasn’t difficult at the time, but now you want to go back and update it, you’ve got to update it in 60 places versus once, or you get a new theme, and you had manually added color to all of that. Your color scheme doesn’t match anymore. That’s the kind of thing that would drive me crazy.

Bjork Ostrom: For sure.

Lauren Gray: I could not take it if my design looked old, when really, I had gotten a brand-new gorgeous one.

Bjork Ostrom: Right, and point being-

Lauren Gray: If it’s being inserted dynamically, we can update it.

Bjork Ostrom: That’s a great point too, design or features or recommended posts, anything like that, as much as possible, don’t do that manually not only because it’s more work, like we said before, but also because of the extra requirement or the extra work that it will then take update all of those single points, when before, or if you do it right, you could just have this one area in WordPress where you go in and say, “Okay, I want to change all these things over to this,” and across the board, it will make that update as opposed to going to each individual post, which would, just sounds terrible, like you said.

Lauren Gray: Yeah.

Bjork Ostrom: We’re coming to the end here. We’ve covered a lot of ground, but one of the things I wanted to make sure to hit is something that’s been on a lot of people’s mind lately, and that is this switch to a secure site. HTTP, the beginning of a site, HTTP versus HTTPS. Why is that important, and what are some considerations people should make if they’re thinking about making this switch?

Lauren Gray: Well, the … Basically, and HTTPS is a way of securing your site, so if you’re adding that in, then you’re giving your users more privacy. You’re protecting their data for them, so really, you’re just trying to put them first and to make sure that you’re giving them the best experience possible. Google is starting to promote secure sites, and by promote, I should define that.

Google search engine is not necessarily doing anything with that yet. If they are, that’s something to talk to Casey about. I do now know the answer to that. They are definitely, Google Chrome, the browser, is definitely going to give weight to sites that have SSL certificates that are using HTTPS by marking those sites as secure, and they’re going to mark sites that do not have that as insecure, so that’s really why it’s been a big push. That’s why we added it to our website is because so many people have been asking about it. We want to make it clear that we help out with that… that they’re doing that in October, so everyone’s like, “I need this now.”

Bjork Ostrom: The change being that Google sent out an email. They said, “Hey, just as a heads up,” Pinch of Yum was one of these sites. We’re not HTTPS yet. They said, “Hey, if you don’t make this switch, we are going to start to put some warnings on your site for people that are visiting that say it’s not secure,” so suddenly, people are like, “Ah, this has to get done. We don’t want it warning to be displayed on our site.”

What do … It’s that the … Making that switch probably isn’t as easy as just flipping switch. What are the things that people need to be aware of at a high level, we don’t have to get super technical, at a high level, what are the things that people need to be aware of when they’re making this change?

Lauren Gray: Social counts will reset unless you have a plug-in that can recapture those for you. That’s been something that a couple of clients have been upset about initially is that loss of social count, so you want to make sure that you’re either, A, not showing social counts, then you won’t be sad about it or that you’re using some kind of plug-in that allows you to do social share recovery, and basically, it means they’re just grabbing the counts from the old URL. Technically, you’re not changing the slug, after your domain, whatever that URL is, but because you’re adding the S the HTTPS and the way social networks count shares, that’s going to change. They’re going to consider it a whole new web page, and they’re going to start from zero again.

Bjork Ostrom: Which websites? So that’d be Facebook and Pinterest, primarily?

Lauren Gray: Facebook, Pinterest, almost all social sharing sites that have counts are going to do them by URL, and it’s going to differ between secure and non-secure. That’ll be one thing to think about. Some hosts will install and almost completely set up your certificate. Basically, you get an SSL certificate, and that says, “Hey, I can be secure,” but then you actually have to make changes to your site so that everything is being sent through the secure channels, which I know is getting a little more technical. Hopefully, your host will do everything for that for you or your web developer will handle all of that. Depending on who’s helping you out, they probably won’t update your Google Analytics profiles for you or your webmaster. Oh, it’s renamed, Search Console.

Bjork Ostrom: Yeah, Google Search Console.

Lauren Gray: Your Search Console properties.

Bjork Ostrom: I still do that too, yeah.

Lauren Gray: Yeah, yeah. Those are things that you want to make sure that you’re getting updated. Especially if your host is just doing your website, then you’re going to want to go do Google Analytics, make sure that your property is changed to HTTPS, and your view, both of those have just a drop down that you’ll select and save, and then inside of Google Search Console, if you don’t already have it registered, you want to go and verify your HTTPS property-

Bjork Ostrom: Got it.

Lauren Gray: … so that you can continue getting Search Console updates and information on this new URL that your visitors are going to be sent to. At that point, I usually submit a new site map as well just so I can give Google a heads up that, “Hey, our URLs are changing.”

Bjork Ostrom: Yup, that’s great. These are all things, for some people, well, they’ll hear those, and they’ll say, “Yes, this makes sense. I know the general path forward, or I know how to communicate this,” but to other people, it won’t make sense, and so as we’re coming to the end of the interview here, this would be a perfect time for you, Lauren, to talk about how people, if they’re interested, can get ahold of you.

I know that, like you said, whether it’s some of these more technical things like HTTP to HTTPS transitions or some of the ongoing things like being somebody’s go-to developer, kind of the idea of Once Coupled as it is a business, people don’t have to search for a developer anymore, they’ve found you, that’s one of the ways that you work with clients as well, but you could talk about how people could get in touch with you and work with you?

Lauren Gray: Yeah, absolutely. If you go to oncecoupled.com, we’ve got a contact form on there. You can reach out, you can send an email directly to us at [email protected]. It’s either going to be me or Megan who will respond to you and help you discover what you need.

If you’re not really sure what you need, you can just let us know what problems you’re having, and we’ll try and help you out. If it’s not something that we do, we have … I mean, most of them are on our home page, so you can see who we’re generally going to recommend, but sometimes, it’s the case where you don’t really know what you’re looking for. You’re like, “I need this to happen, but I’m not really sure what I’m doing,” feel free to reach out to us. We do that all the time. We’ll get an idea of what you’re trying to express to us, and then give you a next step forward.

I mean, we’re not always the answer for what you’re looking for, but we definitely want to point you there because I feel like sometimes half the battle is trying to come up with the terms you need to ask the question, like you’re not quite sure what the question is yet, and then without the question, you don’t even know where to go. You can’t ask for recommendations because you don’t know if you’re asking for a web designer or web developer or a host. We’ll try and help point you in those directions, or if it’s something that we can help you out, absolutely, we’d be happy to do that, and that’s just [email protected].

Bjork Ostrom: Awesome. Lauren, thanks so much for coming on the podcast, and thanks for being an expert at Food Blogger Pro. I know a lot of people-

Lauren Gray: Absolutely.

Bjork Ostrom: … really value in your insight and your advice there as well, so really great to chat, and looking forward to staying connected.

Lauren Gray: Okay, thank you.

Bjork Ostrom: Thanks.

One more big thank you to Lauren for coming on and sharing her advice and insight and all the things that she’s learned over the last few years as she’s built Once Coupled, and a big thank you not only for the podcast interview but also for all of the expertise and all of the information that you’ve shared on the Food Blogger Pro forums.

If you’re not a Food Blogger Pro member and you’re interested in joining, you can sign up for the Food Blogger Pro waiting list, and the easiest way to do that is just to go to foodbloggerpro.com. We work like a university or a college where we do enrollment seasons, so we’re not open all the time. It’s not like you can just join a class at a college, and we work the same way where we have enrollment periods. We do those in the fall and spring, and we also do one in between. It’s a private enrollment period just for people on the waiting list. We end up doing it four times a year, two really big enrollments and then two small enrollments interspersed throughout. If you’re not on the list yet, you can do that by going to foodbloggerpro.com, and then you can be part of the community and interact with people like Lauren and the other incredible experts that are a part of the Food Blogger Pro forum.

Thanks so much for tuning in, and we will be back here same time, same place in seven days. Until then, make it a great week.

Leave a Comment

Your email address will not be published.

1 Comment