Transcript of Why Page Speed Matters on Your Website written by John Jantsch read more at Duct Tape Marketing

Back to Podcast

Transcript

John Jantsch: This episode is a Duct Tape Marketing Podcast, and is brought to you by pixelz.com. You’ve got to make those images look great. If you want them to pop, if you want them to represent your products, this is a retouching service to make your images look great.

Hello and welcome to another episode of the Duct Tape Marketing Podcast. This is John Jantsch. My guest today is Lukas Haensch. He is a former Google UX manager and founder of Pathmonk at pathmonk.com.

John Jantsch: And we’re going to talk about page speed, website load speed, all UX factors. If people have go to your website and it loads very slowly, that’s a bad experience and that’s why it’s such an important factor. In fact, it’s such an important factor that Google is, outwardly calling it a ranking factor for SEO purposes. So Lukas, thanks for joining me.

Lukas Haensch: Thank you John. Thanks for having me.

John Jantsch: So how does a person, I mean, again, a lot of times people talk about page speed and there’s so many factors that come into play. Somebody could have a great website that loads fast, but somebody is on a slow, like I used to say dial up. We don’t say dial up anymore, do we? But slow connection. And so they’re having a bad experience. I mean, how do we know where we stand? I mean, how do we measure, what our page speed is?

Lukas Haensch: Very, very glad you asked. So I think maybe first and foremost, I think one key concept to have in mind is, why do we even care about page speed? Just very, very briefly, why do we even care about this? If you compare this to your retail store, maybe it’s very, very nice analogies to compare it to your sliding door in your retail store. If this is opening super, super, super slow, how many people would wait to actually go through?

Lukas Haensch: Just keeping that sort of analogy in the back of your mind, once you’re going through all of this, today. So page feed is basically your door opener to your user. There was tons of metrics there and I know there’s a lot of marketeers listening. So I will basically give you one metric, that we used within Google while we were working with Google’s biggest clients, and that is the speed index. So there’s tons of metrics that you could have, load time, first bites being loaded, when does it start to render?

Lukas Haensch: But if you look at the speed index, and I will tell you in a second how you get it, but if you look at the speed index, what you will actually measure is how long does it take until that first screen, the above the fold content, how long does it take until this is fully painted, which means in turn, a user has a meaningful experience of your website? So, that’s what we really, really focused on within Google in our team to optimize for that first above the fold rendering.

Lukas Haensch: And, all the other actions will go from there, because the call to action is there already, a hero image will be there already, and then, everything else unfolds from there. So speed index is something that you can, very easily get. There is a tool called webpagetest.org. It’s actually built from in Google. It’s not an official Google tool in that sense, but it’s built from the team within Google, to look at page speeds websites.

Lukas Haensch: And if you put in your URL in there and you will get a metric called page speed index and it will tell you something like 3000 or 4,000, and that’s basically milliseconds. So if you have a page speed index of 3000, you’re above the fold. Content will fully be loaded after three seconds. So that is one really good thing to sort of, put the attention on.

John Jantsch: So repeat that again, webpagetest.org?

Lukas Haensch: Correct. Webpagetest.org is like a dark blue website where you can put a couple of parameters, you can pick the network, which is really important to pick. You have to pick something that makes a lot of sense for your user base. Not everybody is on 5G and not even everybody is on 4G. It might be funny to hear, but when we were doing this about like two years ago, one and a half years ago within Google, we were actually, we were testing on 3G fast still because such a large user base actually is on slower and lower end devices. So testing in your offices’ wifi, is probably not the best thing to do.

John Jantsch: Where do you find or what did you find were some of the biggest culprits, I mean, that slow sites down?

Lukas Haensch: And this ties exactly into this concept that we just said before. We’re looking at the above the fold content rendering and there’s just one very high level. There’s one key concept out there that’s called the critical rendering path, which means the browser has to go through a lot of resources before it even can start showing anything on the screen. So if you have a lot of white space before your website is showing anything, then you’re usually blocking the critical rendering path.

Lukas Haensch: You will see that actually visually if you go to webpagetest.org, you will be able to see exactly because it’s basically a slowed down version of how your page is loading. You will see in second one, we have a white screen, in second 1.5 we have a white screen and so on and so forth and until you actually show the first content. So the biggest things that affect, these are, is everything that is blocking the rendering because if you’re blocking the rendering, you have a wide page and that usually is a couple of things.

Lukas Haensch: By default, this is going to be always going to be because it’s simply just render blocking. It’s your CSS and your JavaScript in your page. Without going into too detail. But, whenever you have something that has a lot of Java script in it and that can be a video player, it can be a carousel that where you have some flipping marketing messages on the top of your website, that’s very often driven by Java script.

Lukas Haensch: You will have, the techs, an old AB testing tool that you might not be using anymore. That will be Java script. So even if it’s not really needed at the top of the screen there, it will be blocking, what went once you start actually seeing something on the screen. So one of the key exercises is to always to check, is all the Java script files that we’re using, is all the CSS files that we’re using actually required or can you, and it’s called, delaying them or deferring them in technical terms, you can delay to load a couple of those items, which then unblocks the critical rendering path, which then shows the same content earlier without changing anything on the server sites, without changing your anything dramatic.

Lukas Haensch: So the key thing that we learned and communicated within Google all the time is, you don’t have to do those big changes. There is basically every file that you loading has potential to be improved. Is it a CSS file? It might be, not needed at this point in time. It can be loaded later. Is it a JavaScript file? It can be deferred. Is it a font file? Maybe it’s an old font format. And so on and so forth. You can go through all the facts and obviously pictures, there’s one big key trick I think that it’s really helpful for images.

Lukas Haensch: I can go into that, but ultimately it’s about going through those individual items and you as a marketer, if that, it’s maybe something you haven’t been working with all the time, just go to webpagetest.org through in URL and you can step by step see, okay, what is actually loading and what can I see on my screen? And that will give you a good feel of what’s going on your page. If there’s tons of Java script, if there’s tons of images, if there is long loading fond files in there, all of that.

John Jantsch: What role, I mean, I know ultimately it plays a role, but what role does hosting play in maybe slowing sites down or delivering a faster load?

Lukas Haensch: I mean, it basically, it affects sort of the first part of the overall equation on how quickly you’re sending, your first bite, basically, how quickly you’re sending information is basically down the pipe. What we though found is again and again, obviously that has plays its role, but a much, much larger role, the much quicker wins are in optimizing the individual files because there is, like we just discussed before, blocking the critical rendering cluster. There’s so many small things that you can do before having to touch that hosting at all. So, I would look at the critical rendering path and how you’re loading the files a couple of times before switching any major setups.

John Jantsch: Do you find that, some of the content management systems that are out there today, obviously WordPress being by far and away the most popular. Are those part of the problem particularly when people start adding themes and plugins and those kinds of things?

Lukas Haensch: 100%. I think you have to think about what is a plugin. A plugin is basically a bunch of JavaScript in many, many cases. Obviously it depends on what it does, but if it comes with a lot of functionality, yes. So for example, and it’s the same logic being applied, let’s take the plugin logic from WordPress. So you’re loading a couple of plugins. Some of them you will actually not even need on this page. Some of them you will only need on one particular page. Or some of them you will only need at the bottom of your page.

Lukas Haensch: So what you can be doing is, you can be, and there’s even a plugin for that sort of a meta plugin. But you can also run this through code. You can conditionally load your plugins. So if my first move, my screen is loading, if my page is loading, what you can be doing is just using that conditioner loader for the plugins and then pick and choose when which plugin should actually be loading.

Lukas Haensch: If you’re doing this through code, you will have even more flexibility to say, okay, which one should be loading right now? And again, and you mentioned themes there because teams comes with a lot of Java script and all of it is loading at the beginning. That in turn is then blocking the rendering. And you could again go file by file through check, okay, which ones can be deferred and loaded later.

Lukas Haensch: So this is where marketing would have to sort of sit together with the developer and check, okay, [inaudible] actually Java script files, let me give you a quick example. You having, Java script that you need on your checkout page. That JavaScript is not being required at all in the first couple of seconds. The user even has to get there. So it’s a combination. It’s really, you look at the plugins, [inaudible 00:10:52], you look at the Java script, you try to defer some, and this is how you chop down second by second basically.

John Jantsch: So I’ve done testing on using the page tests that you shared as well as Google’s page speed insights. And there seems to be a significant difference in the mobile load versus desktop. In fact, I’ve tested lots of sites and rarely do I find sites that get a glowing review from Google on mobile. Are there things we should be doing? I mean, should we have [inaudible] almost separate sites or separate experiences for mobile?

Lukas Haensch: So, it’s very good question. I mean, I think mobile load… I mean, load time on mobile becomes particularly apparent because the devices, and we are on a connection. So there’s much more breaking points, let’s say, or much more points that are, sort of being in danger to be, decreasing the performance. Which means, if I’m looking at my mobile page, I do think, and I think even with WordPress, you can condition your load certain items to just say no, don’t show this on mobile or show it on mobile.

Lukas Haensch: There’s certain elements to it. Let’s take, I think maybe give you the example of a carousel. If the pink carousel with different image at the very top. So you have this maybe on desktop and it doesn’t really impact your performance, but then you look at mobile and out of a sudden it heavily affects performance because you’re loading five or six images, which is quite a lot of stuff to load.

Lukas Haensch: You’re loading the Java script, which is random blocking as I mentioned. As well, which means now you had the situation where basically you have to have, a performance budget where you say, okay, I have this and that budget to play out. And if you’re looking at your mobile page and you’re already spending quite a budget on your six images plus your Java script, you’re already taking quite some seconds that it will take to load while then you would have to even look at your metrics and analytics to people even interact, with the fifth or sixth image.

Lukas Haensch: Or is it just because marketing or somebody else wanted to have the several messages out there? So, I would definitely consider, looking at especially heavy, heavy, items such as, videos. I’m not saying to not use videos, but there’s smarter ways to how to display videos as well. Carousels, these types of items to be really strict on not to use them on mobile because they don’t usually don’t have a strong UX value and definitely they take a lot from the speed budget.

John Jantsch: If you’ve got a website, if you’re selling products online today, you know that the images are crucial to how people make opinions about your products and services. pixelz.com that’s pixel with a z.com is an image retouching service that can take all of your images. They can retouch them, add shape and symmetry, smooth out bumps, aligned shoulders, things like that, that can reduce wrinkles, that can reduce and remove lint tags, everything that just doesn’t really seem to fit. Get somebody to do it for you. Accelerate your time to market because they’ll give you your images retouched the next morning. Go to pixels.com that’s P-I-X-E-L-Z.com and find out about their re touching image services.

John Jantsch: Can you, without making people glaze over here, talk a little bit about, AMP in this equation, the accelerated mobile pages. Is that something people should be using, for a better load, better experience, but then you have less graphics, you have less control? So how do you feel about that?

Lukas Haensch: So personally, I mean, how I look at this is it’s basically it is a normal website with all the rules already pre given. It’s already giving you a lot of restrictions on your Java script. It’s already giving you, and then obviously there’s further optimizations in the HTML. So in a way it’s taking this types of rules that we were just discussing and pushing them on you in a way. So, that’s why that’s one piece and one reason why these pages load really fast.

Lukas Haensch: I wouldn’t consider myself an AMP expert, but I definitely think just by the pure what it actually is, it’s basically just a website, a normal website with a lot of rules in there, and to which basically prevent you from overusing your speed budget and hence they’re being fast pages. So I think it’s a great way for somebody if it fits your type of content, If you can get your message across with that, I think is a great way.

John Jantsch: So I know anecdotally, I will give a site three or four seconds if nothing’s happening, I might click away, especially on my mobile device. Are there statistics that definitively say, yes, X amount of people will wait X amount of time, but if your site doesn’t load in that amount of time, not only is it a bad experience but they’ll just leave?

Lukas Haensch: Yeah. There’s just tons of metrics. The couple of metrics that we were using within our team and there probably have been just if not have getting worst, at least their state or we’re getting worse it’s like, 53% of consumers will leave a site if it takes longer than three seconds to load. So that’s half of your traffic already gone on mobile, according to those metrics, if you’re not loading a quicker or within that three seconds.

Lukas Haensch: And when I’m saying three seconds speed index of 3000 being able to paint it for screen within three seconds because then a person has no reason to leave. Because I think maybe also one key element there is when we’re talking about speed index or page speed, we’re also talking about, a person seeing something meaningful. It’s maybe not a good idea to detach that from the human experience by looking at like tons of different metrics.

Lukas Haensch: Like can you show something meaningful to a person, which means they will not leave because they don’t see something. They will leave maybe for other reasons. So 53%, there’s tons of other metrics on how there’s a metrics on that, if you load one seconds faster that a conversion rate would increase by around 20% or more. It’s hard for me to release, it really depends on the use case and the traffic that you’re getting. But I think this 53% if you’re not lower learning quicker than three seconds is a really good one to have in the back of your mind. On whether it’s 100% to in your case, that’s another story about that.

John Jantsch: I think it illustrates those the reason, a lot of times when some businesses, marketers only have so much a budget attention span, time to work on stuff. And I think that, I think it’s important for them to realize, why this should be a priority. And I think that’s a good metric for that.

Lukas Haensch: 100%. Like if you’re running a retail store, if your door wouldn’t open, like you would jump on it immediately.

John Jantsch: Exactly. I think part of the problem is a lot of marketers don’t actually visit their own website. They don’t actually have the same experience that their customers or prospects have unfortunately.

Lukas Haensch: Yup. And if they do, it’s very often a cached version. A cached version or a on wifi. So really do that effort. Go on a tool like, or you can even go do it with Chrome, but to go on webpagetest.org and test it out just to see it yourself, what the experiences that most of the people actually have with your website.

John Jantsch: I know that Google doesn’t necessarily, give a list of all the factors they use for ranking. But I think it’s pretty widely accepted that page speed or lack of page speed is a variable in whether or not your pages are ranking. Can you speak to that?

Lukas Haensch: I mean, obviously I do not have all the insights about all the things that are impacting ranking. If so I would be probably, be having not to work anymore. But I think one thing is important maybe to just keep in mind. All of this there is a certain reason for this. So more and more traffic is being on mobile. So mobile traffic has surpassed obviously desktop traffic. So hence, more traffic is coming through the Google search on mobile more and more than on desktop, hence the visitor, hence more market. There’s more opportunity for marketing, in those channels.

Lukas Haensch: But what do we see in general is lower conversion rates on mobile than on desktop. So hence there is quite a significant interest obviously to improve the page speed because it’s one aspect that is affects an experience of a user. So, in a way like the reason why it’s important for ranking is also the reason why it’s good for users, which is the reason why it’s good for conversions, which in turn is good for somebody who’s running advertising on that channel. So, I can’t really, I don’t have any further insights on the ranking factors. I can just say it all comes from a very good reason.

John Jantsch: And what I tell people all the time is just what you said. A page that loads slowly is a bad experience. And so Google doesn’t want people to have a bad experience. So they’re not going to show that page. And I think that that’s the way to look at it. I think that’s always been their intent. And so consequently, things change with the algorithm and whatnot only because they get better at understanding what, all the factors of page are on the site.

John Jantsch: And so I think that there’s no question that, in fact, one of the easiest ways to test this is that when we have clients who have a really bad mobile experience, whether it’s the design or the load speed, I mean, we can’t get them to show up for mobile searches. They just won’t. And so I think that’s as clear indication as somebody would need to suggest that, no matter how, where you put it in the ranking, it is a factor.

Lukas Haensch: I think I would say the biggest thing that I would have taken away from all of this time in Google working on this is, that a lot of teams overestimate the effort that is required to do even small fixes. So page speed optimization on mobile page is to be sort of, titled as a big project. But as I was trying to stress before is, there isn’t a lot of things, a lot of small things that can be done in order to improve.

Lukas Haensch: Like just give me one or two examples that maybe highlight this very drastically. A lot of people try to optimize their hero image. What you can do just very simply as you can do, you take your hero image, you can transfer it into let’s say a string of code. It’s called base 64 in coding and all of a sudden you can send your hero image with the first request in your HTML file. What I’m just trying to say you is, no big changes to be done.

Lukas Haensch: You’d take one image, you transfer it into another format, you send it now with your first file and a big chunk of your first above the fold content can already be painted. So, I think that is probably my biggest takeaway, that there is a lot of small things that can be done rather than making it, to blowing it up unnecessarily as a big project.

John Jantsch: So where would somebody, let’s say a listener is out there thinking, he said a couple of things that make a lot of sense, but I don’t know how to do any of that. Where do you find somebody who, because again, if you just Google page speed consultant, you’re going to get people who are very technical, you’re going to get people who just say they can do that know, but they’re really, all they want to do is move you to new hosting or something. I mean, how do you find the right resource to help you fix some of these little things?

Lukas Haensch: I think that is a really good question. The thing that I can say is, if your team goes reasonably one by one through the files, a lot of this can already be uncovered. Is your font file maybe just in the old font file format? There’s font file format which is TTF. If you transfer it to [inaudible] it’s 30% smaller. Fonts show bigger, faster. So the only thing I can’t really say like one place, what I can say is to go with your team through the waterfall of your website. I think that’s the best source to be honest.

John Jantsch: So we, in the introduction I mentioned that you have recently founded a company called Pathmonk. You want to tell us a little bit about what Pathmonk does.

Lukas Haensch: Sure. So, definitely within Pathmonk, we were looking much closer at conversions on mobile and at desktop. And what we realized is that it’s actually very difficult for marketeers to answer questions such as, how many visits does it take for user to actually convert? Or how many seconds do you have on the page to actually convince them? And I’m not talking about bounce rate, I’m talking about, what is the average amount of seconds that somebody takes until they sign up? Or which user actions show that a visitor is ready to convert?

Lukas Haensch: So we’ve seen that there’s a big gap of being able to understand sort of, anonymous information retrospectively such as, Google analytics data or looking at, heat maps videos like how do somebody behave. But we found that there is a gap that in real time, it’s difficult for people to react to this immediately. What if user X has been on the page and has been doing actions that look like they would be somebody that is converting, can you react to the market? And we found most market is current.

Lukas Haensch: So we build, basically technologies called smart cards that is basically helping, to automatically based on artificial intelligence, learning what a user is doing on the page, what is likely patterns for conversion. So which intents do users have when they’re on the page. And then we show them content about your products, such as, frequently asked questions, testimonials, case studies on what we called smart cards that are sliding and from the bottom or the top. And this is basically how we let a website to react in real time to what is happening on the page with each given visitor down to the level into which type of product or feature they’re interested in.

John Jantsch: And I think if, in the very simplest terms, if somebody is visiting a certain page, they’re probably interested in that topic. And so it really is, instead of just giving them the generic slide in, it really is a way to personalize their experience on pretty much every page or every visit or as you said, their whole path. Because a lot of times on sites, people will do five or six things that certainly indicate that they are exploring a certain topic or have a certain intent. And so then to be able to react to that, as you said in real time, is I think what is becoming a behavior that people are starting to expect unfortunately. And I say, unfortunately, because it certainly ups the bar for marketers.

Lukas Haensch: And it’s funny though, what we see is, there is elements, there’s expected elements, obviously somebody is downloading a certain white paper. But there’s other things, such as somebody deep focusing your page. We saw a strong correlation between somebody going deep with focusing on your page, and then, a submission on one of those refocuses again. And that’s something that the data is sort of reveals and then smart cards can automatically react to.

John Jantsch: And I think that again, because I visited the tool and watched it in action, I think that the smart cards are pretty elegant in terms of how they are delivered. They’re don’t just take over the screen or really, get in somebody’s face. But because they’re kind of personalized, I think they will be seen, I suspect as much more welcomed.

Lukas Haensch: It’s an interesting one. We worked on a lot of UX testing and a lot of UX works because there is a lot of preconceived notions that smart guys had to overcome. It doesn’t shoot and feel a look and feel like a chat bot because there’s a lot of preconceived notions with the chat bot. A lot of people don’t even start a conversation with a chat bot because they think it’s about right, it’s a robot and they don’t want to talk to it.

Lukas Haensch: So the metrics clearly show a lot of people wouldn’t start the conversation. Or if it looks like a cookie banner, we’ve clicked 100 million times on cookie banners. So basically, we work the smart cards to look and feel as a part of your website, so they completely are customizable into what your style and theme of your website is. And then basically just become a part of the website by sliding up and down versus, popping up from nowhere.

John Jantsch: Well, Lukas, thanks so much for joining us and talking about page speed and hopefully we will run into you soon out there on the road.

Lukas Haensch: Thanks a lot. Thanks for having me.