How to Optimize Your Website for Page Speed, User Experience, Pop-ups, and More | EP. #66

On this 66th episode of The E-Comm Show, our host and BlueTuskr CEO Andrew Maff is up for another round of tech tips and tricks for e-commerce brands. From how to optimize your page for fast load times to pop-ups and user experience testing, Andrew here will share all the secrets on how to run a well-optimized e-comm site.

If you enjoyed the show, please rate, review, and SUBSCRIBE!

Have an e-commerce marketing question you'd like Andrew to cover in an upcoming episode? Email: hello@theecommshow.com

• Listen on:
  
• Listen on:
  
• Listen on:
  
• Listen on:
  
• Listen on:
  
• Listen on:
  

How to Optimize Your Website for Page Speed, User Experience, Pop-ups, and More

SPEAKER

Andrew Maff 

CONNECT WITH OUR HOST: AndrewMaff.com  |  Twitter: @AndrewMaff | LinkedIn: @AndrewMaff 

Andrew Maff

As a marketing expert with over 15 years of experience in e-commerce, Andrew Maffettone (Maff) has not only owned and managed multiple marketing companies in the e-commerce space but has also worked in-house at multiple online selling companies, driving brands to new heights.

With his knowledge of marketing and business strategy, love for staying ahead of the curve, and ability to execute effective marketing solutions, he created BlueTuskr, a team of specialized experts dedicated to the growth and success of e-commerce sellers.

Transcript: 

00:03

If you constantly are sending promotional emails, I'm never going to pay full price because I know that you have a deal. Hey everyone this is Nezar Akeel from Max program, Hi I'm Linda

00:16

and I'm Paul and we're Love & Pebble. Hi this is Lopa Vander Mers from RASA you're listening to, and

00:21

you're listening, and you are listening to The E-Comm Show. Welcome to The E-Comm Show, presented by BlueTuskr, the number one place to hear the inside scoop from other ecommerce experts. They share their secrets on how they scaled their business and are now living the dream. Now, here's your host, Andrew Maff, Andrew

00:50

Maffettone. And today I'm gonna talk to you about the truth behind PageSpeed optimization. And the truth is that it doesn't matter. Could you imagine if I actually started this podcast like that, that would be bullshit? Clearly, it matters. And if by now, it's not obvious why it matters, it gets much, much worse, where you really should understand it now, because Google is even starting to say thanks. So let me dive in here. So Google came out over the summer, saying that they're catering more towards user engagement, right? So Page Speed is obviously one thing, which is why we're doing this. But time spent on page engagement, maybe that someone took on the page, they're starting to really leverage that and they are 100%. Indexing mobile first. And they obviously are looking at PageSpeed, which is why I'm talking about this now. So PageSpeed, the reason it's so important is that the hard thing that is difficult to grasp, and I have this conversation a lot with people when I go, Oh, great. Your page reads like an average of six seconds is not good. Because they go well when I loaded it loaded in like two seconds. You are an E-commerce seller, you're a marketer, you're a founder of a business, chances are you make decent money, and you have great Wi-Fi. Not everyone has that not everyone has incredibly fast Wi-Fi, and not everyone has the newest phone that came out. Not everyone is in an area that has great Wi-Fi all the time. So if your site is loading in an average of six seconds, that's not good. Because the average person has an attention span of like, I think it's four and a half seconds right now or something that's basically like that of a goldfish. And it's getting worse, it's slowing down, thanks to all this beautiful digital marketing we're doing. But so the thing I wanted to touch on Oh, how to actually do this PageSpeed optimization. So I'm a fan of GT metrics. That's what I use to test my website. So all you really do is take the URL thrown in GT metrics, and we'll give you a rate that gives you three different grades of how your website is doing desktop mobile, and I think overall, or something like that. And then it will list all the issues that you have, and it will give you a grade on those things, too. So reducing the PageSpeed No, usually, here's what happened, I lose my train of thought about what the hell I'm talking about. Because I have my notes here, and its method Shut up. So Google, obviously, Google is caring more about time, blah, blah, okay, the jump in the things I do to reduce PageSpeed, most of this crap I give to my developers because I don't know how to do the real like technical stuff, like the structural changes and all the code in the backend. So I had them helped me with this one. So the first thing you want to do is enable compression. So this is compressing images, allowing like images to shrink down, or compressing all the code so that the code will run faster. You also want to minify these CSS jobs, JavaScript and HTML. And I had to ask that mean, a lot of times, I just give them a website and I go, please make this faster. And I go, we're on it. And then I'll send them like, Hey, here's a cool article on PageSpeed stuff. And they'll go great. Some of this is good. And then like, they'll just do it. So I'm sorry to get these notes from them. So minifying, the CSS is basically taking out the unnecessary code. Sometimes there's code in your website, you just don't need. And it's kind of redundant, or it's slowing stuff down. Or maybe something is loading before something else is loading. And it should be the other way around. There's a lot of stuff there. So minifying, it basically means reducing the amount of code you have. Reducing redirects, redirects happen. Sometimes you change the site, sometimes you change the URL, you're doing SEO stuff, you're going to shorten URLs or anything like that. So you change all that stuff around. So use something like Moz or SEMrush, or SEMrush, or Ahrefs, or anything like that. It will tell you, you have some redirects, a one-time redirect. So someone clicks somewhere, and it takes them somewhere. Turns out that place isn't there anymore. You fix that already. It takes them they're not the end of the world, but it's when it happens again that you have an issue and have too many redirects. But that still slows stuff down the computer or the, your server still has to think that oh, wait, I need to send them here. If you can keep it from having a think it will actually reduce that time. Remove render-blocking JavaScript, Google it, I'm not really sure what that means. But he told me, it's a good one. And then leverage browser caching. So caching is basically allowing the browser that you're using to remember the way that the website looks for X period of time. And it will just continue to show someone that so instead of constantly trying to get an updated version of the website, so if your site isn't changing too, too often, I absolutely suggest doing that because it will load faster. Next time someone comes to your website. Improve or improve server response time, if you work with GoDaddy, Bluehost, or something like that, talk to them, and have them help you out where they can actually reduce the amount of time that it takes for the server to talk to wherever your website is, then optimizing your images. So make sure that those images are high quality, responsive, and look great, but are small. So basically figure out the size, and baby size that you need to have, and make sure you only have it at that height, you don't need a two or 3000-pixel image, and then upload it onto a blog post that's only about 600 pixels wide. So figure out a way to make sure it will if it's on a phone, but never mind. So make sure you're reducing those images or get an app that can actually connect to it, that will actually just reduce the file size of those images. Because images are probably one of the heavier things that have to load that or video. And then the last thing I had was to turn your blog post into ANP. So it's accelerated mobile pages. So basically, what that is, is you're taking all of the content that you've written in your blog post, and you're, there's an app for all this kind of crap. So you basically just connect it and say, Here's my title, here's my description, here's the author, here's this, just like you would do with a product catalog for Merchant Center, and then puts it into a template that Google has created. So when you use an a&p page on Google, it's not going to be as pretty, it's not going to have all the cool bells and whistles that your website may have, you can obviously still read redirect, and it'll still be pixeled and things like that. But it's going to load in like a second flat like it's ridiculously flat fast. If you've ever done Instant Articles on Facebook, it's the same concept. So it's basically native to Google. Instant Articles are native to Facebook, so they will load much, much quicker. I suggested to us for blog posts, I don't like doing them from products, because all the extra bells and whistles that I do have I want to keep. But for a blog post, when they're just there to get some information, I want that to load as fast as it can. And then always just keep an eye on what your average speed is on Google Analytics. So go check it out, and make sure you watch it, I check it probably every week or two. When we do an audit, which is usually on like a monthly basis that will obviously get checked in and we'll document where it's been at. But sometimes you will see that it will spike or something and you need to figure out what did you do on that day that caused the spike. Or maybe it's slowly trending up, like going into trend start, I need to figure out what happened there. Because site speed is becoming big, it's becoming a real thing, or you need to get that down to as low as you possibly can. Everyone always asked me what's a good PageSpeed. And it kind of depends on the page, my personal preference, I like to get it down to an average of three seconds or less. Two and a half is usually better for me.

08:29

But again, kind of depends on how much stuff you have on your site. Talk to you a little bit about how I do my user interface user experience testing for free, basically. So a lot of companies don't want to spend the money to get you to know, 3040 people into a room and feed them lunch and pay them for their time and have them use their website and do a ton of market research just on a new website. What I prefer to do is leverage the people that are around me. So here's the first thing we do. So if we create a website in-house, I'm actually going to leverage people who have worked on the project. So if you've never seen this website before, you're in our office and you're not even really sure what so and so is working on your perfect so I want you to come in, and I'm gonna go here is what this website offers. So I'm gonna pretend that you saw an ad and you kind of know already what it offers. Here's what I want you to find. Here's what I want you to add to your cart, and here's where I want you to check out. And then I'll set up a screen recording. So I'll typically do like loom or something like that. I'll step back, and someone else will watch the music. And we'll take notes on what they're doing if there's something that stood out to us. So this is someone who has some experience obviously in marketing or obviously in E-commerce. So they're going to be a little bit quicker but they're going to find the obvious stuff like the stuff or go crap, why didn't we think of that? So they're going to kind of help you hammer out the garbage in the beginning, back to the drawing board and clean the site up, then take it out of the office. So if you're salaried, you're doing your own site at home, or you're doing your own in the office or something like that, take it out of the office, take it to friends, to get the family, someone who doesn't have knowledge in the industry, and ask them the same thing. Maybe change up the product that they're looking for something like that, but then have them go and do it. And you're gonna want to take notes, you're gonna wanna know what they're doing. But you're this is free market research, this is friends and family, maybe the most money you'll spend is enough to buy them lunch, or give them a gift card or something like that. There's a seller, I know who pulled someone out of his warehouse, once a month to do this, who is aware even after he's not changing anything on his website, he's still just trying to get extra information into what is someone doing. There are paid ways you can do heat maps, you can do things like today's feature tool, which is Optimizely. And you can obviously set up a heat map where you can actually record and see how some people are actually using your website, or what the average person is, or how many, like clicks a certain button is getting or anything like that, and you're gonna be tested, it's a whole other story, that's a paid side, the free side is leveraging the people around you, you have to think of the things that you have available to you and how you can leverage it. And if you have anyone around you that you can even just offer to just buy them lunch, if they can sit there and go and use the website and then take notes on what it is they're doing. Then you always want to make sure that you are recording what they're doing because you might not be able to capture everything that they're doing, you're also gonna want someone else to look at it and take notes on what might be happening. And then you can go back and look at it. And usually what I prefer to do is to keep all that new in a file, and I can actually go through the different phases of so and so did this, and then when here, but so and so did this, and then when here, and I can kind of compare and contrast. So I always suggest recording and keeping as much information as you can. My favorite thing to do is after I've done it in the office, I leveraged my spouse, I have my wife come in and I'll offer her a glass of wine and go, Hey, here's sit down and buy some stuff on this site. And then I will watch how she does it. And I'm gonna make sure that she's going where I intended her to go, or maybe she's struggling or maybe there's a button she thought was a button that's not a button or, you know, there's a ton of different issues that can go on there. These work best for new site launches, if you just clean up one page, it can be a little bit difficult to get someone to do this, this might that type of thing might be better with a heat map or something through Optimizely or however you want to do that. But if you're doing a new site, or even a new brand new rebranding or just kind of an overall revamp of things. This is when I would suggest leveraging the people that are around you to actually test everything out for you.

12:48

I'm going to be giving pretty so much love. Recently, they just announced that they are going to be releasing a book, I think it's an October if you don't know who pretty is pretty came out years ago. And right when they came out. I was like, oh, you know what, this is the easiest pop-up I've ever created. A lot of them were really limiting. I couldn't make them as branded as I wanted them to like there's great. And they were doing really well. I loved it there, I had no issues with them, and they were super nice. The customer service was amazing. The price was like nothing in comparison to some of these other companies that are doing pop-ups. And the integrations with all the different email marketing platforms were amazing. And then all of a sudden, they just blew up, they have been everywhere their content is nuts, and they have their own podcast, which when this one's over, and you've listened to all of mine, then you can go over to their site, which is also ecommerce related. But today I'm in now, by the way, they're doing like SMS and they're doing email marketing, they're doing all this extra stuff. But I'm going to focus on pop-ups today. So obviously, I wanted to touch on all the main pop-ups that you should definitely be setting up, or at least be testing. So your first one is obviously the most common one that you're welcome series. This is when someone first comes to your website. Hopefully, it's the first time they've been to your website, you really don't want to show it too often. But this is kind of your standard where it's like sign up, get 10% off and join our newsletter and stuff like that. an abandoned cart is another one where someone adds to the cart, and then they go to leave. So they may be leaving typically it's almost like a browser abandonment. So are kind of like an exit intent, which I'll touch on but they're in the cart, and they go to leave. And you can actually have an immediate pop-up show up right before they leave that can maybe offer them a discount, or maybe just ask them to reconsider or something along those lines. You could even just show them a list of questions that they may be thinking about. exit intent, which is the one I previously just mentioned, but decided to go into abandoned cart is the same concept. But for someone who's not in the cart, so someone who's on your website who goes to exit out of the browser, this will trigger and essentially ask them to stay on the site. A lot of times we'll use a really small discount here to try to keep them going but it kind of depends on your branding discounts aren't great for everyone. Then you have content specific so if you're doing a lot of blogs, blogs, or posting anything like that, which I hope you are, you can do a lot of different popups that are related to the content they're on. So the nice thing that I like about printing, and again, they're not paying me to do it. But the nice thing I like about previously, is you can really harness the targeting by saying, only show on pages with this in the URL, or only show to people coming from Instagram or if the source is this or anything along those lines. And so if you're making a lot of content that's relevant to a certain category, and you have some kind of offer that you want to give to them, or you have some kind of ebook or white paper or anything like that, this is a great way to kind of hone in that segment that audience, user-specific, so if someone is coming specifically from Instagram like I just mentioned, or if they're coming specifically from, let's say, you did an ad campaign on Forbes, and you had them click over well, if the source is from Forbes, you can have a certain pop-up show up for them. And you can say, well, you just saw some Forbes. So that means you're interested in this loud click here or something like that. So think about where they're coming from. And you can actually change your copy and your creative based on that. And then last but not least, is for campaigns. So obviously, if you're doing a holiday campaign with Black Friday coming up, and you're doing something very similar, you can change all the branding and change all your pop-up pop up so that every pop-up that does show up is similar to your campaign. And that will keep your branding going. Those are all the ones I want to mention. A quick little bonus there is I would tweak them all to be one for mobile and one for desktop and duplicate them because mobile doesn't like it when it shows up. And it takes up the entire screen. Common sense, but hey, what are you gonna do? I'm going to talk to you about Google's new file format, web p. Now, here's the thing. When you heal when you hear file format, you must think, Wow, this episode's gonna be great. And it's super fun. Hear me out. It's not as boring as it sounds. So I subscribe to software called exploding topics. It's really cool. So it basically shows you trends of basic keywords that are just getting used anywhere. So it could be on Twitter, it could be on Google, it could be just anywhere in general. And they basically scrape the entire internet to see like, what are people talking about? And a few weeks ago, web P came up. And I was like, what I don't know what that is. So I looked it up. And now I'm part of that trend. So essentially, web p is a new image file format that Google has released. And the statistics behind it are crazy. So it is 26% Smaller than PNGs. And it is anywhere from 25 to 34% smaller than a JPEG. So essentially, it's a new image format that is much much smaller, but the resolution is the exact same. So think of Silicon Valley where they kind of like did that whole data compression thing. I don't know what the hell any of that means. But it sounds cool. And it means that stuff is faster. And what is Google like faster stuff? So it may be tied to the fact that Google just released that new algorithm update over the summer that involved PageSpeed and the way that people use a website. But here's the thing, I highly suggest that there are a ton of different covert converters on Google Now that you can use, where you can upload an image and change it to a web P, I don't think there's a Shopify app yet. I'm not going to be the one to create it. But if someone out there can create it, that will just Bulk Change all your imagery. But if you can speed up your site to that extent, by reducing the file size of your images, you're going to see a big increase in PageSpeed. So we've started to do this with bigger images that we're uploading on websites and we're currently doing it for new images that go on to a website. We haven't gotten into going back and starting to do past images. But I highly suggest going forward changing all of your imagery from a JPEG or from a PNG if you're going to upload it onto a website, make it a web page, it will upload and it will load significantly faster and you'll start to see that PageSpeed dropping real fast.

19:17

Thank you for tuning in to The E-Comm Show head over to ecommshow.com to subscribe on your favorite podcast platform or the BlueTuskr YouTube channel. The E-Comm Show is brought to you by BlueTuskr, a full-service digital marketing company specifically for E-commerce sellers looking to accelerate their growth. Go to BlueTuskr.com Now for more information. Make sure to tune in next week for another amazing episode of The E-Comm Show