Forget AMP. Make fast sites!

Forget AMP. Make fast sites!

Why you need a fast site, not an AMP site

These days, everyone in the SEO cafeteria is talking AMP, AMP, AMP.

It’s been around for a time, and while some earlier pioneers have tried to make it work (me), many failed (also me) and have given up.

So, when I saw the title of Jon Henshaw’s presentation at the recent Brighton SEO event ‘ FORGET AMP. MAKE FAST SITES’, I thought my prayers had been answered! No need for AMP?

That’s why, today, I have Jon on the show to give us the low down on AMP and speeding up websites.

Tune in to learn:

  • What is AMP?
  • Why AMP might not be great for your website
  • Why we need fast sites
  • What’s the ideal loading time
  • Advanced site speed improvement tips
  • How to improve your site’s images
  • How improving your site’s UX can help speed things up
  • What is prefetch and how does it help
  • What is Gzip and how does it help
  • Jon’s favourite site speed testing tools

About John

Jon Henshaw is a Senior SEO Analyst at CBS Interactive. He is also the co-founder of Raven Tools, an online marketing management and reporting SaaS platform that he sold in early 2017. Before Raven Tools, he worked as an Interaction Designer for Visa, where he helped develop web applications for their consumer and corporate customers. He’s considered an industry veteran and has been involved with website development and internet strategy since 1995.

 

Listen to the podcast 

Or listen on iTunes or Stitcher.

Listen on iTunes

Jon eats a Frazzle

Developer tool on Chrome

Share the meme

Share the love

If you like what you’re hearing on The Recipe for SEO Success Show, support the show by taking a few seconds to leave a rating and/or comment on iTunes or Stitcher. Thanks!

And big thanks to Compelling Copy for their lovely review.

Take the next step

Ready to get started with SEO? Here are a few things you can try…

Connect with John

Useful links from this pod

Transcript

[00:02:30]

 

 

 

 

[00:03:00]

These days, everyone in the SEO cafeteria is talking AMP, AMP, AMP. It’s been around for a little while, and some early pioneers tried to make it work, including me. Many failed, also me, and then gave up.

So, when I saw the title of John Henshaw’s presentation, the recent BrightonSEO event, which was forget AMP, Make Fast Sites, I thought my prayers had been answered. No need for AMP? Hooray! That’s why today, I have John on the show. To give us the lowdown on AMP, and speeding up websites.

 

Be warned, this is gonna be a slightly more technical episode, so, if you’re a newbie, prepare your brain for slight expansion. But, if you already been quietly trying to ignore AMP, this could the show for you.

 

 

MUSIC

 

My name is Kate Toon, and I’m the head chef here at The Recipe for SEO Success, an online teaching hub for all things related to search engine optimization. And I love SEO.

 

 

 

[00:04:30]

Today, I’m talking with John Henshaw. He’s a senior SEO analyst at CBS interactive. He is also the founder, the co-founder of Raven Tools, an online marketing management and reporting SAS platform, that he sold in early 2017. Before Raven Tools, he worked as an interaction designer for Visa, where helped develop web applications for their consumer and corporate customers. He’s considered an industry veteran, and also has been involved with website development and internet strategy since 1995.

 

Hello, and welcome to the show John. Did I miss anything out in your bio there?

 

[00:05:00]

Jon Henshaw:

 

No, I mean, that sounds pretty good to me. That seems like a lot.

 

Kate Toon: It does. You’ve done a lot. And you’re only 21.

 

Jon Henshaw: Yeah. Exactly. Only 21.

 

Kate Toon: Only 21.

 

Jon Henshaw: I’m so young.

 

Kate Toon: So young and yet so, I don’t know.

 

Jon Henshaw: I just happen to look like I’m in my 40’s.

 

Jon Henshaw: And feel like I’m in my 40’s

 

Kate Toon:

[00:05:30]

Yeah, actually. So, we met back in Australia, at the big digital conference, and we had a bit of a moment where I force fed you a Frazzle, which was kind a beautiful moment for me. Do you remember that moment?

 

Jon Henshaw: I do, and it was. It was definitely a beautiful moment.

 

Kate Toon: For those of you who don’t know what Frazzles are, I’m going to include a link to the Frazzle website, in the show notes. And also a picture of John eating his first Frazzle, so be sure to check that out.

 

Jon Henshaw: There’s actual proof.

 

Kate Toon: Actual proof it did happen. I think I’ve actually got a video. I might put the video up.

 

Jon Henshaw: Oh my goodness. I don’t know about that.

 

[00:06:00]

Kate Toon:

 

Very weird that I’ve kept that for all this time. You should worry. I’ve also got a picture of John on a pillow as well.

 

No I haven’t really. I’m being strange.

 

Moving on.

 

So we always start the show by talking about some interesting SEO or marketing related news. So what have you been interested in this week John?

 

Jon Henshaw:

[00:06:30]

 

 

 

[00:07:00]

 

 

 

[00:07:30]

What have I been interested in. Well I’m always interested in all kinds things every week. A good way to keep up with what I’m interested in that particular day is to watch my twitter feed, ’cause it’s all kinds of random stuff. I would say actually to this day, I posted something that I saw on schema.org. Schema, which is actually somewhat relevant to what we’re talking about today maybe, and that has to do with the news article item type.

And if that … you’re listening, you’re wondering what is he talking about? That is a piece of structured data that google likes to read on sites, and they do something with it in the search results. The reason why the news article on this is important is because, there’s been a lot of stuff around fake news. News that is not reliable, and, or hasn’t been fact checked, and a lot of technology companies, including Google are getting a lot of heat of it.

 

 

 

 

[00:08:00]

So there is movement in the journalistic world and the tech world to come up with some different indicators of trust. I noticed that in the source code, the code that you can’t see on their site, that there’s some stuff going on in there, and they’re preparing to add a bunch of stuff. That intrigued me, so I did a little screen shot.

 

Kate Toon: Interesting. We might be able to get rid of fake news. What will Donald Trump talk about if …

 

Jon Henshaw: I don’t know. I mean, now, when I say fake news, without getting too political on the podcast, I think the definition of fake news is different than his definition of fake news.

 

Kate Toon: Yeah.

 

Jon Henshaw: His definition of fake news is, any news that he doesn’t like.

 

[00:08:30]

Kate Toon:

 

Yeah. That’s a very good definition. That’s great. That’s interesting. Another note that you made, I mean, by the time this show goes out, this might be slightly old news, but Google has released an updated SEO style to go out, which, I read yesterday, and it’s actually very well written. Which is, surprising for Google, like it’s, understandable, so, it’s pretty good.

 

Jon Henshaw:

 

[00:09:00]

It is. That is another thing that I saw that interested me, and it’s always fascinating when they publish something like that.

That’s, you know, it’s from Google, and they actually acknowledge SEO and it has some interesting things in there. So definitely, everybody who’s listening should check it out, because, it will give you some pretty good insight into what google is thinking, what they think is important, SEO certainly goes well beyond their starter guide, as far as things that you need to know and what you need to do, but, it’s interesting to have their take on it.

 

Kate Toon:

[00:09:30]

Yeah there’s some good basics in there. I also found the section where it said do you need an SEO consultant. I found that quite interesting. I recommend reading, can you do it yourself or do you need an SEO consultant. I thought that was quite interesting too. Anyway, so you can check that out in the show notes.

 

 

 

 

[00:10:00]

But today, we are going to talking about speeding up websites, and also AMP, but lets, and I just wanna point out by the way, when John was talking about schema, if that all went over your head, do listen to the episode with Tony McCreath about schema and also the more recent episode about with Bill Slawski, All about Knowledge Graph. We talk about schema in both of those episodes, and that will help you wrap your head around that.

 

But anyway. Let’s start with the basics. How would you define AMP?

 

Jon Henshaw:

 

[00:10:30]

 

[00:11:00]

AMP stands for accelerated mobile pages. It’s googles response to us marketers ruining the web. What I mean by ruining the web is, making all our pages just slow and junky, as far as code and with ads everywhere. Google, they knew that we’re just ruining the user experience and they couldn’t figure out a way to force people to do things right. They also saw mobile access to their search engine increasing and increasing In the past three years it’s actually become the majority of searches are made on mobile devices. They’re trying to find a solution to this. Their solution ended up being this very, what I would consider to be extreme, solution to people having slow sites. They’ve created this thing called AMP.

 

[00:11:30]

 

 

 

[00:12:00]

What AMP does is, it forces publishers to basically put their content in a format that is super, super lean and cannot use Java script, which is actually one of the biggest offenders and things that makes many sites so slow. It they also basically force the user experience. Meaning, it’s pretty much comes down to, it’s a one column view, which to some extent is pretty good on the phone. You would kind of want one column. You just can’t throw all the things that you had in there before. You can’t use modals, which are ads and things that pop up over the screen. It really keeps you from adding all the things we have now onto the page and makes it so that it’s just super, super fast.

 

[00:12:30] The other caveat though is that they host it. So, instead of visitors viewing a page on your site, you’re actually viewing it on Google.

 

Kate Toon:

 

 

 

[00:13:00]

That’s a great explanation. And if those of you who haven’t fully got your head around that we have a great episode with Dawn Anderson where you can clue up a bit more. I mean, essentially, for those of us who are at the beginning of our journey, it creates a very strict back version of the page. It’s literally just text. You can add a few things back in. If you’re using a WordPress site, there are little plug ins, WP AMP is one of them and they will create sort of AMP versions of your existing post. It doesn’t yet work for pages, just posts. The idea as you said is to make it load incredibly fast and just be incredibly clean. They’ve obviously been pushing this quite hard and everybody seems to be stressing about whether they need to move their site into AMP or make AMP work on their site.

 

[00:13:30] Do you think it’s a good thing or a bad thing?

 

Jon Henshaw:

 

 

[00:14:00]

 

 

 

[00:14:30]

I’m not crazy about it personally. It’s one of those things where it’s good if you are getting a lot of traffic from it, if you are a news site. If you are a large publisher, then it’s actually pretty good. In fact, my current employer uses it extensively. It’s something that we have to stay on top of, because it benefits us, I really like it. I’m not so sure it’s great for everybody else.

The reason for that is because, it’s very, very, Google-centric in that, as I said earlier, it’s hosted on Google, it’s not on your site. That’s a little disconcerting. Especially the way search results have been kind of functioning lately on mobile, which is, more often than not when you do searches on Google, they kind of keep you on Google.

 

 

 

 

[00:15:00]

AMP kind of does that in the way that it’s being presented. For example, I might search for something, and I might see an AMP result, which usually it displayed in what they called the carousel. I might tap on that and, because it’s just a simple display of this article, I might just click X or go back and I’m still on Google. Or, I might swipe and it goes to a competing publishers article. What happens is that person never actually visits my site and I am potentially losing extra paid views that I could have gotten if I had taken them to my site and given them exactly the experience that I wanted them to have, not the one that Google wanted them to have.

 

[00:15:30]

 

 

 

 

 

[00:16:00]

That’s kind of a big deal. The other reason why it’s not a panacea for this mobile speed problem, is that we still need our regular sites.

 

 

The reason why is because, this only solves the problem if somebody is on a mobile device and searching Google. It doesn’t solve the problem of somebody getting to your site in a different way. It doesn’t solve it if they see your URL on some printed material. It doesn’t solve it if they are reading an article and they click on a link that goes to your site. It doesn’t solve it from referral traffic. It doesn’t solve it from just plain old direct traffic, which is, same example, like if from seeing something printed.

 

 

 

 

[00:16:30]

That to me is the biggest problem, is that you still need your main site and an AMP is not necessarily the solution to that. To me AMP functions well in particular situations, like the large publisher, and news situations, which is why I think that’s where it’s used the most right now. I really don’t see it as being a replacement for most businesses and sites out there.

 

Kate Toon:

 

 

 

[00:17:00]

Yeah. I get that. Say you’re a small business and you got a small blog on there. You’re not a regular publish and, we publish fairly regular, but not in the same way as some kind of news publisher. Would you say therefore that installing AMP plug in is fine, get that going, but it’s really not gonna set your site on fire and it’s not gonna be a solution to if your site is horrendously slow. It’s kind of like an extra, not a replacement.

 

Jon Henshaw:

 

 

 

[00:17:30]

 

 

 

 

[00:18:00]

Right. And the thing is that because people get to your site in other ways other than Google, then the real problem is you actually just need to speed up your site in general. Amp doesn’t need to be the solution, ’cause it isn’t, ’cause it doesn’t fit all those different other scenarios. The real problem that we’re trying to solve here is a UX problem.

That is, your site needs to be quick. The person needs it to have a good user experience when they go to your site as opposed to having it load for many, many seconds. The reason for that is because the slower a site is the more likely that visitor is going to bounce. They’re in other words, they’re going to go back and look for a different site because yours isn’t loading, or it’s taking too long, or there’s too much stuff going on.

 

 

 

 

 

 

[00:18:30]

The other thing is that a slow site is again, through research, connected with making less money. The faster a site you have, whether, and by money, I mean as in whether they’re shopping. If it’s a slow shopping experience, most visitors aren’t gonna put up with that. They’re going to again bounce out. If it takes to long to find a way to take whatever call to action you have on your site, because, again, everything is so slow, then you’re losing money. That’s really why everybody needs to have a fast site regardless of the fact that AMP is out there.

 

Kate Toon: Yeah. I get that. When we talk about fast, in your definition, what is a fast load time?

 

Jon Henshaw:

 

[00:19:00]

 

 

 

 

[00:19:30]

What we’re looking for generally, other than pretty much instantaneous, which is what I go for. By instantaneous, I mean, when I go to a site, I expect something to come up within the first second or two. There really shouldn’t be much of a delay. A really good example of that is a site that I put together to actually show this, to actually teach people how to make fast sites, which is, if you go to make fast sites dot com, that is going to show up within the first second or so. It’s super fast. That can’t, that isn’t super practical always. So, what we’re looking for in general is three to four seconds that’s what you are going for.

 

 

 

 

 

 

[00:20:00]

Now, you may have a lot of content on your page. That content if you go down the page and scroll down the page, might be lots of pictures and different things like that. That’s perfectly fine. What we’re looking for is what we call above the fold. We’re looking for, when you visit your site, within the first few seconds, your site should be what we called rendered. It should, the way it’s supposed to look once it’s done downloading, it should like that way within the first three to four seconds within your browser before you scroll. That’s kinda what we’re going for.

 

Kate Toon:

 

 

 

[00:20:30]

 

 

 

 

 

[00:21:00]

Yeah. We’ve had a previous episode with Vahe Arabian, where we talked about basic tips on speeding up websites and within that we’ve covered things like choosing better hosting companies, maybe there that, in the location where your audience is. Using caching plug-ins, reducing image file size and dimensions, reducing number of calls on the website to other things, those things like Instagram feeds and Facebook feeds.

They’re actually calling data from other places. We also talked about content delivery networks, we talked about eliminating big fat sliders with huge images on your home page, which totally is that above the fold thing. A lot of the sites I look at, they got a giant slider above the fold. It takes about 15 seconds to upload and by that time, you’ve gone. We’re not gonna go through some of those more basic speed up tips today. Instead we’re gonna for a few more advanced tips.

 

John, what are your first couple of advanced tips you can give to our listeners?

 

Jon Henshaw:

 

[00:21:30]

The first one that I recommend is to re-factor the code on your site. What I mean by that is, most of the listeners are probably running WordPress.

With WordPress, the typical set up with it is, you go out and try to find a theme that says it’s SEO friendly, you eventually pick one, then you add that. With that theme, there are plug-ins that it recommends so it can do all the really cool stuff that you saw when you first picked it. When you’re pretty much done setting everything up, you may not realise it, but you, in most cases you will have a bloated site.

 

[00:22:00]

 

 

 

 

 

[00:22:30]

You’ll have a site, because of all the plug-ins, because even though the theme said it was SEO friendly, but it isn’t necessarily, you will end up having all these Java script libraries.

Different versions of Jquery, which is a very typical library. You will have different uses of web fonts, which can really increase in size quickly. I’m talking like megabytes. Where the person that visits your site for the first time would have, just to download the fonts themselves, would take a megabyte or more, let alone everything else on your site.

 

 

 

 

[00:23:00]

 

 

 

 

[00:23:30]

You end up getting all of this code on there and even though everything seemed like you made good choices, and you weren’t trying to add a bunch to it, you now have tonnes and tonnes of code that is being downloaded every time a new visitor comes to your site.

Then on top of that, it ends up that the only reason why you even have some of this code on there is for this one little feature. It’s for this one slide effect, or something cool with the theme, which is the reason why you picked it, but that ends up only representing about 10% or less of what the actual library does. You’re making people download all this code and many times, multiple versions of the library just to use a very small part of it. You could potentially be adding many, many, many seconds to your site for it to even load and render and look correctly for visitors. You could actually shave off many seconds if you just use the code that you actually needed.

 

Kate Toon:

[00:24:00]

You talk here about using … consolidating Java script and CSS, and also trying to use system fonts. Now for your average WordPress user, that just would be super intimidating. How do I go about that?

 

I know there are some plug-ins, like, Wpfastest cache, which does actually do a little bit of consolidation, but how would you recommend that your average Joe should just speak to a com … what am I trying to say, comper … I can’t think of the word!

 

Jon Henshaw: [crosstalk 00:24:13] maybe or …

 

Kate Toon: Like a compler yeah, I could [crosstalk 00:24:13] words

 

Jon Henshaw: We can go with compler.

 

Kate Toon: A compler? Competent!

 

Jon Henshaw: I don’t know what a compler is but …

 

Kate Toon: Competent! Competent! Of for the goodness sake.

 

[00:24:30] A competent … but if I like, you know, I’m, Honest, we know it, most of the sites I look at you can eliminate a few plug-ins.

A classic one that always tell people to eliminate are these testimonial, rotating testimonials. People think that they look great, but, A, people aren’t gonna read them, and B, it’s annoying ’cause they’re moving to fast, so just code the testimonials onto the page. You don’t need everything to be moving. There’s this obsession that everything needs to slide in and animate up. Just code them on the page.

 

[00:25:00]

Kate Toon:

 

You can eliminate the plug ins, but how would one go about looking at your WordPress CSS files and just making them into one CSS file, or replacing these sexy fonts with your system fonts, how would you do that?

 

Jon Henshaw:

 

 

[00:25:30]

I think you hit on it on the two things you can do. You mentioned earlier, I think from an earlier podcast that you did, that you talked about this huge carousel gallery things that take a lot of time. The very first thing that people can do that’s just very practical is to really ask themselves, do I really need these particular features, which are usually connected to these extra plug-ins.

 

 

 

 

 

[00:26:00]

Generally the less plug-ins you’re can use, the less amount of extra code is gonna be running and being downloaded on your site.

 

If you can just take a look and go, you know what, I really don’t need that, I don’t need this other one, all of these things are just kind of superficial things that I thought looked really cool, but aren’t necessary for me to communicate what I need to communicate with the site, and the site would still look good without all these whiz bang type of features. That’s the first thing I would recommend.

 

 

[00:26:30]

 

 

 

 

[00:27:00]

Then the second thing would be you can definitely go the route of finding a competent web developer who can come in and look at this and work on it for you. Really in a perfect world, especially if you’re going to get a web developer, in a perfect world, you would actually try to create a fairly custom theme.

 

 

I know that’s kind of scary and it sounds expensive, maybe to a lot of people out there who are running the WordPress sites for their business. Really what I’m talking about is, it’s actually either you can go the route of truly making a custom theme or you can commit to taking a theme and having this developer kind of break it down, and tweak and optimise for you.

 

 

 

[00:27:30]

The caveat there, or the gotcha, is that if you do that, you are going to forfeit the ability to just easily have that theme updated for you in the future. For example, there’s a lot of themes out there that people will buy or licence and what’s nice about that particular theme is where they bought it from, they get a lifetime update type thing with it, so it’ll just update automatically. You won’t want to do that anymore ’cause if you do that, it’ll most likely overwrite the optimizations and changes that you made.

 

[00:28:00]

 

 

 

 

 

[00:28:30]

That is a very valid realistic way to go about cleaning up your code is if you can be okay with, I’m not gonna be able to get these updates anymore, but I’m gonna get these huge speed increases, then, that’s the route I would go. Personally, I like making custom themes. I like doing things from scratch. Basically taking the design, taking what’s called a bare bones WordPress theme and just building it out myself so it only does exactly what I need it to do. I would say that 100% of the time when I go that route, I get the fastest sites possible.

 

Kate Toon:

 

 

 

[00:29:00]

Yeah. I think a lot of the people who are in my courses and in my groups, they have bought a theme. Divy is very popular. One thing we always recommend is to create a child theme and then work with the developer to make some customizations and personalizations, and then when the theme does get updated, it’s not going to ruin your existing site. If the developers competent that’s the word of today people, I can say it now, they can draw down some of the elements of the updates and put them into your child theme. I think it’s all about, that the easiest methods as you had said are just to be really tough on yourself with the plug ins that you choose, and to look at the plug-ins and the tools, like ping them, site speeds, which will show you how long it’s taking each of the plug-ins to load and the Java script files and CSS.

 

 

[00:29:30]

Another example, and I don’t wanna call out any particular plug-ins, but I had a social media plug in that was the bomb and everyone said it was great. It took like two seconds for it to actually pull all the files onto my site, and I want people to share my content, but not that much. Be picky.

 

Look for the leanest plug-ins or if possible do it with hand coding, don’t necessarily get a plug-in. Plug-ins are not the solution for everything. I think when you first get WordPress, you get a bit overexcited. It’s like Christmas and you’re like Wow! I can get this and this!

 

[00:30:00]

Jon Henshaw:

 

I think that’s great advice and I also think that’s a brilliant suggestion too, as far a picking a good theme that supports child themes. That’s a great way to go because, the point of getting a particular framework is that you can take advantage of customizations. Then of course with a child theme, it means that you can do whatever you want and that won’t be overwritten, and only the most important stuff will, that’s part of the main framework. I think that’s brilliant advice.

 

[00:30:30]

Kate Toon:

 

Thank you. Anybody listening, little sales thing here, if you’re about to set up a WordPress site, we do have a WordPress SEO site that teaches you all how to do this. How to set up a child theme, which plug-ins are fast and fat. Which ones are chubby and that you shouldn’t use.

 

 

 

 

 

 

[00:31:00]

Anyway, getting back to the episode, another thing that I’ve heard you talk about, ’cause I’ve heard you give this presentation at big digital as well, and I thought this was really interesting, was when you talk about images. We all know that images should be uploaded at the correct dimensions.

 

No uploading 2,000 pixel by 2,000 pixel image and rendering it as a thumbnail, and also that they should be smushed, you try and reduced them to the smallest cache size possible, before you upload them, and of course you can use plug-ins like WP smush to further smush them when they’re on your site. You had an even better suggestion, which was that you should actually serve different image sizes for different devices. Can you explain what by that?

 

[00:31:30]

Jon Henshaw:

 

 

 

 

[00:32:00]

 

Yeah absolutely. Before I get that, just because, I’m such a stickler on this stuff, as far as image types go, even before you even smush it, a lot of people don’t always pick even the right image format. I generally recommend in this order, you either, you first try to do an SVG image, and the reason why is because, those scale and look perfectly no matter what the resolution is on a person’s screen or device.

 

Jon Henshaw:

 

 

[00:32:30]

And then the next one I recommend is to go with PNGs but again, those are limited to how complex the image is. I usually us PNGs for screen shots and things like that. Then the last one I typically would use, would be a JPG. Sometimes PNGs and JPGs kind come neck and neck as far as the amount of space they take, and you just kind of have to see, which one makes more sense size wise.

 

 

 

 

[00:33:00]

 

 

[00:33:30]

The part about using a different image, yes, that has been something I’ve been talking about for a few years now. It relates to this new-ish HTML standard called source set. What source set does is, it’s sort of add on code to the normal image code, when you add an image to your page. What it allows you to do is to essentially deliver a different image base on the device and resolution of that device. By device, I mean it could be a tiny phone, or it could be a giant display that you use on your desktop computer. Source set can eventually know if the screen width is say 360 pixels wide or if it’s 2,000 pixels wide, and based on that it can serve a different image. By different image I mean, not just by dimension, meaning it’s just been resized, so it’s smaller, and I can send something smaller, it also means actually serving a different image that’s gonna look better on a small screen in general.

 

[00:34:00]

 

 

 

[00:34:30]

 

 

 

 

 

[00:35:00]

And example of that would be let’s say that my desktop image just has a lot in it. That’s because there’s a lot of real estate on the display to show something that’s say 1,000 pixels wide. It might have a chart. It might have a bunch of different texts, different things in there. Simply resizing that so it’s just responsive so it fits inside a small display like on a phone is not the greatest idea, because, it’s gonna make the text and the different items in there super tiny. What source set can do is it can allow the person setting up that image like your designer to design something completely different. It can be completely different dimensions, it have completely different content, and source set will go, oh this is a, you know, this screen size is actually smaller, so I’m gonna show this one instead because that’s gonna create a better user experience. That’s what’s nice about source set, is not only can you serve smaller images, you can actually serve completely different images that make the user experience better.

 

Kate Toon: Okay. Going back to our example of the average WordPress person, how would they implement source set on a WordPress site?

 

Jon Henshaw:

 

[00:35:30]

 

 

 

 

[00:36:00]

If you’re using the latest version of WordPress, then you’re in luck, because, it’s actually integrated into the, what we call the core. Whenever you add images to your post or your pages now, when it’s actually rendered, when somebody actually views that page in their browser, you might be surprised to know that it’s using source set. It does it automatically for you. What it doesn’t do is, the example I just gave, which is, it really just resizes it and makes it smaller so it can be delivered faster on a slower network, on a mobile device. It doesn’t deliver a completely different image. If you have certain images that has content in there that if it’s made smaller would be difficult to see on a small device it wouldn’t, it can’t do that work for you. You have to have your designer do a different picture. In that case, you’re going to have to write that source set code yourself. You can’t depend on WordPress to do it for you because it can’t.

 

[00:36:30]

Kate Toon:

 

 

 

 

 

 

[00:37:00]

 

Yeah. That’s an amazing tip.

Another little tip that I’d add here, which is, along the lines of keep it simple stupid, is have a look at your site on a mobile device and if the images really don’t make sense, on a mobile, you can turn them off. There is an option in most themes to say display this image on a phone. Do not display this on a tablet. I know that’s definitely something you can do with Divi.

A great example here is someone who had a map of an area on their homepage with all of those little pin points all over it. When it rendered on a mobile, it just looked like a blob. Just maybe turn that image off. Also ensure that with your content, you don’t rely on the images to do all the work. Whatever is in the im … overlaying text on images is not a great idea. If you’re gonna do that, make sure that the text is also in the page as well, so if the image is removed, the page still makes sense. That’s a basic tip, but that’s something that I recommend.

 

Now the next thing that I wanted to talk about was Gzip. You mentioned this in your presentation. What is it, and how do we use it?

 

[00:37:30]

Jon Henshaw:

 

 

 

 

[00:38:00]

 

 

 

[00:38:30]

 

It’s something that a lot of times gets ignored, but it’s actually a pretty good thing to have. Especially if you have pages that have a lot of content on them. Basically Gzip is a way to compress the text on your page. That includes not just a copy that you read, but all of the HTML that make up that page. If in your HTML you’ve just got all your Java script and your CSS, and all this stuff, it can really add up quickly and be slow to transmit. What’s amazing about text and compression is text can be compressed big time. I mean just kind of, it can go, it can be compressed like 80% of it’s size and Gzip is something that’s supported by all major browsers and for the most part, supported by all major web servers. If you can enable Gzip all it really means is you can deliver, basically you can compress it on the server and send it to the browser, and the browser can un-compress it. It just makes sending your webpages a lot faster. If I had a megabyte, I could conceivably make it just 200 kilobytes instead. I can make it a fifth of the size. That obviously is way faster.

 

[00:39:00]

Kate Toon:

 

Super. Again, I’m gonna ask the question again, if I’m an average WordPress person, are there any particular plug-ins that do this or is this a hand coding thing.

 

Jon Henshaw: I think that you might be able to use something like WP rocket. Typically …

 

Kate Toon: I think WP fastest cache does it as well. I’ll have to double check and put it in the show notes, but I think it has some Gzip elements to it. I’ll double check that for everybody and put it in the show notes.

 

Jon Henshaw:

[00:39:30]

 

 

 

 

 

 

[00:40:00]

Yeah. I would say every hosting provider pretty much supports it. So, if you’re running something like PHP, it’s gonna support it. If you’re running Apache, which is a web server that most hosting providers use, it’s gonna support it, and you just have to put in a little piece of code or you find a competent web developer to do it for you. It’s actually quite simple to do, so if somebody says they’re gonna charge you for 10 hours or whatever, then they are definitely ripping you off. It’s literally just putting a little piece of code on a special file that most people who need that maybe wouldn’t have heard of, but it shouldn’t take them more than an hour to get access to your site and add that piece of information. Otherwise, you can use certain plug-ins and things and those will work too.

 

Kate Toon: Fantastic. Okay. We’re down to our last couple of questions. One of them, which is something you talk about a lot, is, improving user experience, and how that also kind of helps improve site speed. What do you mean by that?

 

[00:40:30]

Jon Henshaw:

 

 

 

 

[00:41:00]

 

User experience, a lot of what AMP tried to do was based off of improving the user experience. Nobody likes to go to a slow site. Nobody likes to go to a site that has way too much going on. Nobody likes to go to a site that has ads everywhere. All those things are related to user experience. Sometimes they affect speed, and sometimes they just affect whether you can even use the site. Of course there are plenty of sites that don’t even care if you can use it, they just want the page views.

 

 

 

 

[00:41:30]

Here’s the thing with user experience, that is, if you can make the visit a good experience and you can make it better that the people, than the sites that you’re competing against, that goes a long way for your brand. That is going to increase repeat visits for most people because they like going to your site. Obviously your site has to be good and has to have good content, but if the user experience is also good, then they’re going to return to your site more often.

 

 

 

[00:42:00]

It can also affect how well your site does organically in the search engine results, because, Google does keep, monitor, click throughs, and bounce rates. That can affect where you rank. You need to make your site as good of a user experience as possible and lower the amount of people who keep dropping back out and go to a different site because yours was so slow to load or was an atrocious experience. You need to do it in general because it’s gonna create loyal visitors and users. That’s why it’s important.

 

[00:42:30]

Kate Toon:

 

 

 

 

 

 

 

[00:43:00]

 

Yeah. I think there’s a few things I’d like to touch on there. I think the whole notion of dwell time and how long people spend on your site before they bounce back to the results. I do think that’s a big indicator to Google on whether your site is a good result for that search term. You gotta have a sticky home page that sucks people, and obviously, that loads quickly, but also that’s engaging straight away and very clearly explains what you do, who you do it for and why you do it, better than anybody else. That’s so important, getting that unique selling position that you USP on your home page so that people go yeah, this is the right result and hey, these guys are great. I think a lot of sites fail at that.

 

 

 

 

 

 

[00:43:30]

Another thing though, take at look at my site. It’s like the cobblers shoes. My site is not the fastest site. It’s my Kate Toon Copywriter site. I do get a lot of repreach … repeat, god I can’t speak today, repeat traffic.

I think that’s ’cause of the content. If your content is good, people might be willing to wait a little bit longer. I think although we have down an AMP a little bit, I think that one thing that AMP did teach me when I was trying to implement it was that, what is really necessary? Because with AMP you strip down your page, then you can go back and add a few things, like you can change colours and add your logo back in. It really forces you into the discipline of going, what do I need on this page, to make this page work? Do I really need that wiggly thing, that pop up that comes up, that animated doodad, that whatever? Do I really need it? It forces you to be a bit strict with yourself. Don’t you find it?

 

[00:44:00]

Jon Henshaw:

 

 

 

 

[00:44:30]

 

I do. And as much as, as much grief I’ve given AMP, it’s mainly just been more out of principle. It’s been out of my idea of what I think the open web should be, and the fact that they’re basically taking something that already exist, HTML, and creating their own thing called AMP HTML. It’s the same thing, it’s just a derivative and it’s just very heavy handed the way that you have to use it. The grief I give it comes more from I don’t think it’s the panacea. At the same time, I give them a huge amount of credit for why I think it originally was created. It originally was created because of very bad behaviour of everybody else. That’s why it exists and we can learn from it.

 

[00:45:00] My stance is for the most part, for everybody else, you don’t have to have it. You could actually use existing technologies and existing standards and have plenty of fast site, with a great user experience that I think will also rank well.

 

Kate Toon: Yeah. It’s kind of a hardcore way of forcing people to do the right the thing rather than, and kind of forcing all of us people who are trying to do the right thing to follow the rules just because some people don’t in a way.

 

[00:45:30] Anyway. One final thing, one final techie thing I wanted to talk about, which I really like the notion of, but never manage to implement, was your idea around pre fetch, being able to pre render some of the elements on the page while the page is loading. Can you explain that in a bit more detail?

 

Jon Henshaw:

 

[00:46:00]

I can and this might be, this is definitely gonna fall under technical. This is not going to be for everybody. The idea I think will be of interest to everybody who’s listening and I think they’ll probably get it and might have a use for it. That is, there are sites that have certain things that they want visitors to do. That might be an E commerce site where they want them to check out. In fact, I’ll just run with that example.

 

 

[00:46:30]

 

 

 

 

[00:47:00]

I have an E commerce site, and when a person checks out, I want them to have a particular experience. That experience is powered by Java script. The thing is, that particular Java script, maybe is kind of big, but man when it runs, and when they have it, it just makes the checkout experience the best. One of the things you can do is, you can use this thing called pre fetch, which, essentially after the page, the regular page loads, like, if they’re viewing a product page, in the background while they’re viewing that page, it can, pre fetch will have the browser just go ahead and download that Java script in the background, even though it’s not being used yet. What happens is when the person clicks on add to cart of checkout or whatever it might be to go to that experience that uses that Java script, it’ll already be loaded, so it’ll be instantaneous. It’ll make for a really smooth checkout experience. You can use this for other things too.

 

[00:47:30]

 

 

 

 

[00:48:00]

Another example I’ve given it for has to do with, when you know that there’s like a 95% chance the next page that a user gonna visit, you can basically go ahead and load that page or load the assets for that page. And example would be some sort of tutorial or some type of online course. If you know they’re on step 1.3, and the next thing is when they click next is gonna go to 1.4, you can load those assets and that copy, that information in the background. It just makes it really fast and really enjoyable.

 

Kate Toon:

 

 

 

 

[00:48:30]

Awesome. Okay. I wanna finish up the show with a few final quick questions. Lots of the tips that you recommended here sound amazing and I’m really grateful that many of them are implementable on WordPress sites, but if you’re using platforms such as Squarespace, Wix, Weebly, Shopify, where you’re just not able to get in and fiddle with the code, what options do you have? Do you really have to just rely on the actual platform itself cottoning on to these speed ideas?

 

Jon Henshaw:

 

 

 

[00:49:00]

Yeah. You don’t have a lot of choices with these full service solutions. I know that Wix in particular has got some grief from the SEO community. I know that they have been trying to make things better. Squarespace might have some of the same issues but I’m not totally sure, ’cause I haven’t really investigated that very much. I think Shopify has actually done a lot of things to try to make their sites search engine friendly but, for the most part, I’m not sure how much you can do with them other than the things that you can add to it yourself.

 

 

 

[00:49:30]

 

 

 

 

 

[00:50:00]

For example, I’m guessing here, just because I haven’t really used Wix or Squarespace much, that you can at least try to optimise things that you add to it. For example, for all I know, Wix may not have any image optimization things built into it. And I know that from past solutions like that, you would upload an image that was 2,000 pixels wide and it just keeps it that way. It doesn’t actually do any types of re-sizing or optimization, like, how we’re talking about how WordPress does source set for you. If that ends up being the case, which, I just don’t know, then what you can do is you can actually compare those images yourself to make them a decent size and to compress them or to smush them as you said earlier, then upload them to those platforms.

 

Those are things that you can do. Beyond that, you’re kind of at the mercy of those full service platforms, ’cause they don’t really let you make a bunch off those changes. That’s by design. That’s to keep things really simple and easy to use, so it can’t be easily broken.

 

[00:50:30]

Kate Toon:

 

Yeah. I mean, that’s the price you pay. You don’t have to worry about security, and hosting and all that other stuff, but you do, are slightly limited in the manipulations you can make yourself. If you haven’t listened yet to the episode where we compare Wix with WordPress, have a listen to that because we do go through what you can and can’t do on each of those platforms.

 

Now what I’ll do in the show next is provide some links to some of the speed testing tools. I’m a big fan of Ping Them and GT Metrics, are there any other ones that you like John?

 

[00:51:00]

Jon Henshaw:

 

 

 

 

[00:51:30]

 

Yeah. I’m a big fan of those two, those also, but one of the things that I really I like, is just good old fashioned Chrome. The Chrome browser has developer tools that will mimic different devices and will allow you to throttle the bandwidth. You can actually specify how fast or in this case how slow a connection is, and it will do it virtually and show you how long it takes for that to load when you’re not on a super fast broadband connection. That’s probably one of my favourite tools. Then of course it’ll show you just how long it takes to load. It’ll show you the waterfall, of all the different assets, all the things that has to download that you have on your page and give you a lot of insight into things that you can optimise. But yeah, GT Metrics is really good. Always the Google’s own page speed testing tool, those are excellent.

 

[00:52:00]

Kate Toon:

 

I’ll include links to all of those as well as those Chrome tool bars, and some amazing Chrome tool bars. I’m gonna have to do an episode just about Chrome …

 

Jon Henshaw: It’s not even a tool bar. It’s actually built in. Everybody has it. If you have the latest version of Chrome, there is a menu option called develop. Oh sorry that’s Safari, right now, hold on,

 

Kate Toon: I think it’s pretty relevant and …

 

Jon Henshaw: It’s view developer tools and yeah you did a screen shot of it and it’s … but everybody has it and it’s super powerful.

 

[00:52:30]

Kate Toon:

 

Fantastic. I’ll check that out. John thank you so much for coming on the show. Some really amazing stuff there. I think we ex … you explained it in a way that wasn’t overly technical so I think our listeners will super appreciate that.

 

Jon Henshaw: Right. Thanks for having me. I really appreciate it. I had a great time.

 

Kate Toon:

 

 

[00:53:00]

No worries. Well thanks to listening to the show. As you know, before finishing up I like to give a shout out to one of our lovely listeners.

This weeks review comes from Compelling Copy, and they say “I love this podcast as it gives me the latest tips I can use to help my clients with their SEO strategies. Kate’s interviewing style is friendly and accessible. Normally when people talk about SEO, my eyes glaze over, I just don’t get it. This podcast breaks it down and gives me real usable info from some of the worlds leading SEO gurus. Thanks Kate, looking forward to the next episode”.

 

 

 

 

[00:53:30]

And if you like the show, don’t forget to leave a five star rating all of you, on I tunes, Sticher, or where ever you heard the pod. Your review will help others find the show, and learn more about the lovely world of search engine optimization, and you’ll get a shout out on the show. As usual, don’t forget to check out the show notes for the show. There’ll be a picture of John eating a Frazzle, as well as all those tools and screenshots as well. You’ll also find out ways to follow John on both his Twitter accounts and other media, so check that out.

 

Finally don’t forget to tune in to my other two podcasts, The Hot Copy podcast, for copywriters, and the Confessions of a Misfit Entrepreneur. Until next time, happy SEOing!