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

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. Then she's going to be sharing some tips for making your website speedy fast. Hey everybody, it is Bjork Ostrom and you are listening to 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, it's a beautiful fall day. So I hope wherever you are, it is a beautiful day as well. And 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 it's also the reason why we asked her to be a Food Blogger Pro expert. So 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. And 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. So we have Casey Marquis, who's an SEO expert from Mediawise, 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 Ruley, who really understands Facebook advertising, Kate all from simplepin 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 hashtag-legal.com and today we are chatting with Lauren. And Lauren has a site called One's Coupled and she's going to talk about where that name comes from, but she is the she. We 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. So let's go ahead and jump in. Lauren, welcome to the podcast.

Great, thanks for having me.

Yeah, it'll 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.

Thanks.

Yeah. 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 and I think people would like that story.

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. So 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, you know, 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 like, 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, 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, and go through that again without feeling stressed. Um, I want everything to Be low stress.

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 mentioned there was you talked about the things that you do and then you also said, hey there, 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 difference between developers and strictly designers. And that was one thing for me as I got into brand building and business building online creating websites that it didn't really realize was two different things. So can 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, some of the things you don't do?

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. Like 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, and 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 and we're going to build out like that design that you guys have created together. So 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 a good developer and they're going to put that together for you.

Right, Go ahead.

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.

Yeah and that's one of the things when I've done interviews with people that have build businesses, one of the things they always 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 the homepage of your site says for it talks about what you specialize in and developing custom themes, user experience page speed, insights, migrating from HTTP to HTTPs which we're going to talk about why that's important.

That is the new one we put on there.

Yeah, for sure. Because a lot of people are doing that, it's becoming important. And then but then there's a section where you say these are the things we don 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. So 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 that 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. And related to that. We did a interview with Brian Gardner talking about Genesis. But from your perspective, can you talk about why a framework like Genesis is really important and why specifically you like that?

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. And so 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. So 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. It's just important to be able to get that with. Without having to work with someone constantly and pay them constantly for something that you. 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.

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 look and feel. That is, nobody would know the difference if they saw it, that it's running on Genesis. You'd have to look at 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. Great. So is that a theme that for Genesis? Are you working exclusively across the board? Like when you implement new theme for a site, will you be using Genesis for that?

Yes, I do all new themes on Genesis. 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. And so many bloggers are using it that I feel like it. 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.

Yeah, absolutely. So 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 kind of the intricacies of food blogs and blogs in general, what does mobile first mean when you think of that?

Yeah. So I feel like we should start with some definitions, some Additional definitions. So, like a term I use a lot is mobile friendly. And 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 also are going to be very easy to browse on a mobile site. So mobile friendly is just the idea in general that your site works well on mobile. And then 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. So 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 plugin like wptouch or Pad Squad 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. So 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.

Got it.

But in terms of code.

Yep, go ahead. I'll ask a follow up question after that. So in terms of code. Go ahead.

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, doesn't work exactly the way you want it. Sometimes we choose to go with a separate application because that mobile version works more intuitively for our users.

Got it.

There are pros and cons to both.

Yeah, I think it'd be worth digging into that a little bit. There's a couple 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?

Yeah. So their mobile friendly test is basically just a check. Yes or no, is your site mobile friendly? You can Google it. It should be the first result. Right. And it'll show you the link, 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. 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 version of it. I don't know if anyone knows what it looks like anymore. Hopefully not so much.

Yeah, so it's interesting. I pull 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.comtest mobile-friendly. Kudos to anybody that actually listens to that and paste it in or fills it out. But you could just like you said, Google mobile friendly test. And then it's just this really basic page. It says, is your webpage mobile friendly? So 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. And that like an example of a, maybe more of a custom media query for Pinch of Yam is that when you go to mobile, the latest blog posts 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 it. What was the other one called?

Pad Pad Squad.

Okay, can you talk about how that works in terms of creating a different site? So is that creating like a mobile version like M. Pinchofyum.com Is that what that would happen with those applications or plugins?

Basically, it doesn't necessarily have to be at a different URL. So it'll still just show up@pinchofyom.com, but it basically strips out your current theme and then serves holds completely different content. So you have a customized homepage and it's got basically curated content on it. Well, if you were using this plugin, it would not use that customized content. It would Depending on your settings within the plugins, just pull your latest posts and it would be a listing of your latest posts and it might be an image in the title and nothing else. And maybe they sort of look like a bulleted list. I mean, they look nicer than that. But it just simplifies this, the website, to try and make it really easy to browse on mobile.

Got it. Do you have an example of a time when it would make sense to use a plugin like that versus doing it custom?

I think the only real. I don't know, 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. So 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 like 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 posts. 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 plugins just make it really easy for you to just show a very simple mobile site to your readers.

Got it. So 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 plugins to automatically create that mobile friendly version. Downside being suddenly it's not as custom in terms of 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 defined that. We have an idea of what Mobile Friendly is. We have an idea of how to implement that. I think people are probably pretty familiar with that. But Mobile Friendly is different than Mobile first, is that right?

Yes. Mobile first is going to be basically just the concept of considering your mobile users before you consider your desktop users. We have so many more mobile devices. How many more people that are coming to our sites from mobile devices? Then it makes sense, really. To build out your mobile site first and then change that site so that it looks good on desktop. So from a like mental perspective, current most sites are created on desktop and then we just take that content and we kind of like rearrange it so that it all is, you know, 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 it to interact on mobile? And then after that, consider, okay, now how can I use this content and present it in a like, useful way to my desktop users?

Yeah. Which is kind of weird for people like myself or maybe for you who we work at our desktop almost, you know, the entire day, eight hours, nine hours, whatever it would be. But then to have to think, okay, 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. So 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% to mobile, 10% tablet and then 25% desktop. So 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 chances are you should check your analytics. It's probably not true for everybody, but vast majority would be from mobile. Is that the idea? Yes, got it. So 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?

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 at 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? Like a common thing would be forms. Forms are generally not fun on mobile devices. So go through your forms 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.

Great. So 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. Can you talk about why the speed of your website is important and maybe some ways that people can start to test that and improvements they could make?

Absolutely. There's really. This is how I start. Everything that I go over with my clients for page speed is 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.

Sure. So with a site like GT Metrics, they're giving you a load time. Google PageSpeed Insights is giving you a score for the load time is that load time means like, literally how long it takes a site to load. Like if, if you were to go to that site, pinchvm.com let's say hit go from the time that it starts to the time that it's completely loaded. That would be the load time from a site like GTMetrix, it depends on the site.

So 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. So 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 like skyrocket. Even though your page speed to what your users perceive is much lower. So 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 before.

They can see content, for instance.

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.

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?

Yeah, so 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 got to 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, rearrange something 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 and then that functionality that's not really necessary upfront is going to come later.

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 like 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. And 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. And 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, they would probably disagree. But if you go to that site and load it in, there'll be like a distorted image and then if you stay on the page long enough, it'll load in the full image. So in a scenario like that, is that kind of 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?

Absolutely.

Got it. So something to keep in mind for you, the listener, 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, but it's important to know. So 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.

Yeah, absolutely. Because I think what we kind of talked about just now is maybe on the more complex side, more complex to understand, there's certainly some plugins that can implement parts of it, but other components of it are definitely need to be kind of custom tailored to some low.

Hanging fruit that you can pick.

Yeah, absolutely. So 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 like 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. So something I recommend doing there is just like 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.

Got it?

Something like that.

So idea being really a lot of removal.

Like if you're not using it. Yeah, don't have it.

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 is maybe twofold. 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. And 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 and 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 in an image that says follow me on Pinterest or three of the popular images that you have in your sidebar and say pin to Pinterest or something like that? Is that the idea?

Absolutely. Just kind of 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 onto every single page load?

Got it. So for something like that, two questions. One, is there an easy way to see if people are interacting with something? So you talked about the Pinterest widget. How do people know if that is effective or not? It's kind of a user experience question.

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, something like that, where you embed something on your site so that you can kind of track your users and see what they're doing, you 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, you know, are they even stopping and looking at this widget?

Yep. And 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 like Hotjar, which it's a really popular tool now. But Dr. David Darmanin talked about using Hotjar and some of the ways 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 know, you're talking kind of about this, but like the interactions that people have with a video, not necessarily the actual person doing it, but you can see in general what that looks like. So 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. So 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?

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.

Yeah, good.

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

No, that's great. And I think it's 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. So anyways, continue. You were saying.

Some other, some other 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 the kind of 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 like very large and intensive to download. And so if 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 we don't know.

And this will be good. I would love to hear kind of the back and forth of this. So this is something that we do for retina size screens and it's the positive and negative. So a retina screen is essentially, I don't know, how would you describe it? It's 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, they're like double the size. So it's a huge resource to download and it takes a lot of time. And what you're saying is if you are interested in optimizing for speed, insert the images not at an increased size but at the actual size that they're going to display at. Is that correct? Yes, got it.

Yes.

So 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 use of source set within WordPress in order to understand the screen size of the image, screen size of the desktop of the computer or mobile device and then serving the appropriate image based on that size. Does that make sense and do you have thoughts on that?

Basically, 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 chance 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. So 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 an unpopular opinion that I feel nervous saying it. No, it's good, but I just don't think it's necessary. Like 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.

Right.

I think for the average user you're really, you're not doing them a service by having the double image, you know, 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 like your beautiful photos, I definitely understand that. But I think, I think you did some kind of interview with Andrew before and I'm pretty sure I learned this from him. But essentially like even if your image is only twice as big in like physical dimension, the file size is exponentially larger. Going to have file size that's four times as big.

Yeah. And that, that being because like the, it's double the size but then you think of the like square footage of that image. It's so much more so. And that was andrew from blog tutor.com another food blogger, pro expert who's incredible and a great resource. So yeah, so that's something actually that it's a good thing for me. A good reminder to revisit that to think about that. And I got like, 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.

4.

Pinch of Yam 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. So 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. So if you upload one image there might be three or four different images that are created in WordPress's backend. And then what source set does is it's this little piece of code and you could look at the view the source or 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 VM and in the show notes we can link to the source code for a 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 Wi fi. 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. So 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?

I think really just like the major key takeaway would just 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 thing. A lot of the rest of it is nitty gritty details that are too much.

Yes, for sure. And source that might have been. That might have been a little bit too much. But I went for it.

That's true.

Yeah. But I think it's. 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 plugins, 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 kind of 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. So we've covered a lot of stuff. We've talked about Genesis, the importance of that, Mobile first and Mobile Friendly, talked about page load speed, how we can really be aware of that and improve that. And 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. Can 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?

Yeah. This is like one of my favorite things. It's just like to tell someone that they don't have to do that anymore, that 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. 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 plugin can do it automatically. So 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. So we used a related post plugin and we picked one that would let her manually choose which posts were going to be associated with, 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 within that post content, is search for the post theme and click add to content.

It's great. So before she was manually copying and pasting over images, links, things like that, point that you made was she's having.

To edit the HTML.

Yeah. Not ideal.

Nobody wants to do that.

Yeah. So you said, hey, we can do this. We can customize this, use a plugin. What was the plugin that you used for that one?

We used related posts for WordPress. There's a premium version of it that we used for that.

Got it. And then taking that, obviously probably doing a little bit of customer 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 50 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 difference. So I love that. So 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. Yeah, go ahead.

Yeah, so another thing I wanted to say about that is, you know, 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. So another example I would say is like, 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. So 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. Like, 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. And another really good thing about that is, 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 like 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 have 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. Like that's the kind of thing that would drive me crazy. I could not take it if my design, like looked old when really I had gotten a brand new gorgeous one.

Right.

And point being, if it's being inserted dynamically, like, we can update it.

Yeah, and that's the, 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 to update all of those single points when before or if you're, 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.

Said. Yeah.

So 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 was something that's been on a lot of people's mind lately and that is this switch to a secure site. So HTTP at beginning of the site, HTTP versus HTTPs. Why is that important and what are some considerations people should make if they're thinking about making this switch?

Well, basically 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 make sure that you're giving them the best experience possible. So 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.

Sure.

I do not 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. 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 wanted to make it clear that we help out with that. Said they're doing that in October. So everyone's like, I need this now.

Yeah. So the change being that Google sent out an email, they said, hey, just as a heads up, Pinch of Yam 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, this has to get done. We don't want a warning to be displayed on our site. So why do it's that the making that switch probably isn't as easy as just flipping a switch. So 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?

Social counts will reset unless you have a plugin that can recapture those for you. That's been something that a couple clients have been upset about initially is that loss of social counts. So you want to know, 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 plugin that allows you to do social share recovery. And basically it means they're just grabbing the counts from the old URL. So technically you're not changing the slug after your domain, whatever that URL is, but because you're adding the S to the HTTPs and the way social networks count shares, that's going to change. They're going to consider it a whole new webpage and they're going to start from zero again.

Which websites? So that would be Facebook and Pinterest, primarily 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. So that'll be one thing to think about. Some hosts will install and almost completely set up your certificate. So 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 these 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. Nope, it's renamed Search Console.

Yeah, Google Search Console. I still do that too.

Yeah, yeah, yeah. So those are things that you want to make sure that you're getting updated. Especially if like 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.

Got it.

So that you can continue getting Search Console updates and information on this new URL that your visitors are going to be sent to. And at that point I usually submit a new sitemap as well, just so I can kind of give Google a heads up that, hey, our URLs are changing.

Yep, that's great. And these are all things for some people. 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 a hold of you. And 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 found you. That's one of the ways that you work with clients as well. But can you talk about how people could get in touch with you and work with you?

Yeah, absolutely. If you go to once coupled.com, we've got a contact form on there. You can reach out, you can send an email directly to us@helloancecoupled.com it's either going to be me or Megan who will respond to you and help you kind of just discover what you need. So 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 homepage, 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. Like, 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. So we'll kind of 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, you're not quite sure what the question is yet, 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 a web developer or a host, we'll try and help point you in those directions. Or if it's something we can help you out with, absolutely, we'd be happy to do that. That's just helloonesacoupples thanks so much for.

Coming the podcast and thanks for being an expert at Food Blogger Pro. I know a lot of people really value your insight and your advice there as well, so really great to chat and looking forward to staying connected.

Okay, thank you.

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 one's coupled. And a big thank you not only only for the podcast interview, but also for all of the expertise and all the information that you've shared on the Food Blogger Pro forums. If you're not a Foodblogger 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 kind of the same way where we have enrollment periods and we do those in the fall and spring and then we also do an in between. It's a private enrollment period just for people on the waiting list. So we end up doing it four times a year, two really big enrollments and then two small enrollments interspersed throughout. And 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.

Sam.