← The Digital Marketing Podcast
The Digital Marketing Podcast
Build Faster Websites
00:31:06
Ciaran interviews Jon Henshaw, SEO expert and co-founder of Raven Tools. In this episode, we discuss AMP and How to make your website faster without needing to make use of AMP. What Is AMP? is a Google-backed project with the aim of speeding up...
Loading summary
Transcript99 lines
- [00:00]
A
Welcome to the Digital Marketing Podcast brought to you by targetinternet.com hello and welcome back to the Digital Marketing Podcast. My name is Kieran Rogers and I'm joined with John Henshaw from Raven Tools. And John, really wanted to talk to you about something that we got chatting about on Saturday, Skype, which is amp or amp. Yeah, Accelerated mobile pages. We'll shorten it to amp though, for the rest of this session. So what is amp?
- [00:39]
B
Well, amp is Google's response to all of us marketers basically ruining the web. Ruining it. And what I mean by that is, you know, we got broadband around 2010 and then we've been ruining it ever since with loading up our sites with JavaScript, using huge images, trashing it with more ads than you know what to do with, giving you every pop up and anything they can do to get your attention to see their ad or click on their ad.
- [01:16]
A
HD images, full screen.
- [01:18]
B
Yeah, just everything. Just making desktop based sites that are made for broadband when at the same time, at least today they're getting more searches and more traffic on mobile devices. And so they started to see, wow, these already horrible sites are even more horrible on a mobile device and a slower connection.
- [01:46]
A
And so, and it is horror, horrible. I mean there are a lot of news sites are particularly bad for this. Like they will shove up megabyte.
- [01:53]
B
Oh no, it's more images. No, it's, it's like, why are you.
- [01:55]
A
Thinking why this is taking forever? Especially being from the Isle of Wight, where to be honest, the Internet sometimes feels like it's donkey powered.
- [02:03]
B
Yeah, that's what it, that's what it feels like.
- [02:05]
A
Even on my desktop it can be quite, quite painful.
- [02:08]
B
So yeah, I think donkey is too good. I think it'd be like Gerald Power. It's gotta be like a smaller animal that can't run quite as fast. Yeah, Y.
- [02:18]
A
So marketers are ruining the web. How does AMP work?
- [02:22]
B
So the way it works is it's a user experience problem. Usually when amp is mentioned, the focus is usually speed. And people say it's all about speed. Speed is actually only part of it. It's a UX issue. And so it has to do with you need to be able to read the content. It needs to be done in a way where it's also fast. And so you kind of couple those together and you get amp. And so AMP was designed, it's sort of a offshoot from HTML, but it's a very controlled version of HTML and it doesn't allow you to use your own JavaScript it doesn't allow you to have really huge files and different things like that. And they forced you into a single column presentation of content, which is what good UX is. So what they've done essentially is they in a good sense have come up with something that is a good user experience on mobile, period. That's the good part. And they've done it through what they call this open source amp HTML. I mean it's technically open source, but I have issues, you know, with how it's actually implemented. Right. And so it is awesome. I mean like it really is a good user experience. And it was also done because nobody was fixing their sites and it was getting to, I think, from their perspective, a critical point. They're trying to move forward and make sure that their search remains dominant, particularly on mobile.
- [04:04]
A
Yeah.
- [04:05]
B
And so their idea of being able to move forward and force people to move forward with them was to push amp.
- [04:11]
A
And they being Google. Google, yes. Other search engine is involved in it as well.
- [04:17]
B
They're starting to be involved. And again, they like to say it's open source, anybody can use this. But for the most part, most of the activity around it is, is mainly Google focused.
- [04:30]
A
So I mean, it makes sense, isn't it? With over 50% of web pages being consumed now being on a mobile device, it makes sense that a technology that accelerates those mobile pages is a good thing. Right. I can see why they're, they're, they're pushing it like guys, businesses, catch up, get over yourselves and stop putting those megabyte images on the front page and make sure it's quickity slick.
- [04:54]
B
Right. And as you would expect, something that is really quick is, is going to be preferred by the end user, by the consumer. And, and so on top of that, they are pushing it so hard that, I mean, they're elevating it in the organic search results.
- [05:11]
A
It gets a boost.
- [05:12]
B
Right, right. So, so then you start to see these, their own studies come out that say, you know, you get more clicks and more views and this and whatever. I mean, but it's a game system. I mean, in other words, like, that's because they're, they're the ones putting it in front of your face and they're making sure it succeeds because they're the people with the finger on the button and they control everything. And so, so it's, so it's sort of a mixed bag. And in that. Well, yeah, that is sort of accurate data, except for the fact that it's being forced into being that, but it is Also fast and slightly better. The problems, there are problems with it though, and the first one is that it is hosted on Google. AMP actually takes your page, your AMP version, pulls it from your site and then they call it caching. It's really hosting. They can call it caching all day. But if you're basically serving my site in a normal form, meaning like the way if I navigated somewhere else, I would get a page, you're hosting my content, they're also doing it in a way that kind of strips a lot of navigation. Other things that you typically would have, at least by default that you would have on your page and the way they present it with the carousel and the whole user experience actually keeps the user on Google. So whereas most publishers and people would want them to click through and they wanted them to be on their site and they want to capture them and keep them on their site, it's much more difficult to do that with an AMP page in a Google result. Because Google, across the board, particularly in search and on mobile, especially on mobile, they are adding user experiences that are almost aol, old school aol, like where you just kind of stay on Google. An example of that would be if you search for a sports team or score or whatever, at least in the US they just take you to almost what looks like a micro site. And it's just tons and tons of data that of course they have scraped off everybody else's site and added this micro site. And, and when you're done with it, you don't ever go out to the site they got the data from. You never leave that experience. If anything, you go back into the search result and now you're back and you're still on Google. You never left Google the entire time. You never got to show your own ads. Amp you get to show ads. But I'm talking about this other experience that they're doing now. There's no ads, it's just all them using your data for free. And so there's that, which is kind of frustrating. But there's also just the idea that you're losing control of your site and, and you're losing control for things. You actually have power over that, that you could do and what sort of things. So the real issue here is that people's sites aren't fast. That's the real issue. Yeah, they, they aren't fast and they're junked up with ads and it ends up that amp is not a solution because marketers and publishers are already ruining it. And I just gave a presentation. Well, it's true, it's true. I wish we could show pictures on this, but we can't. So I'll just have to make the picture for you.
- [08:42]
A
Paint this a picture?
- [08:43]
B
Yes, I'll paint the picture. So if AMP is supposed to make a better user experience and they're supposed to streamline things and you're supposed not to have so many ads and this and that, whatever. Well, it's broken now. And the example I gave at my presentation at Brighton SEO was a Forbes article. And it's funny because when I went to go find this example, I didn't search for minutes or hours or anything. It was my first result. So it was the first result in the carousel of the AMP pages. I tapped on it and it was ads, ads. As I scrolled down, there was a persistent modal ad that popped up which I didn't know was possible in amp and that just stayed there. So that already took up screen space. And as I scrolled through, there must have been six to seven big ads. As I'm trying to read this article, driving me crazy. And it's just more ads. And then the rest of the page had something like 20 or 30 ad images in links at the end of the article. I mean, it was, it was kind of atrocious. Of course, it's what we've gotten used to with the web. But it was like, I can't believe this is an AMP site. And so I came to the conclusion that what AMP is really good for is just serving more ads faster. And I mean, that's what I'm convinced of. It's, it's not, you know, they, they've already lost the UX battle by the fact that that even exists. And I can tell you that everybody else is going to jump on that and that's what they were trying to fix. And it's already broken. And so to me, that says AMP is not the solution. The solution is that publishers need to go back and start making a good user experience and need to make their sites faster. That to me is the long term open web solution as opposed to having everything, you know, hosted on Google. You know, another component is, do you get traffic from other sources in Google? Yes. The answer is yes. Do you share your URL offline in other places through advertisement, whatever it might be? Do you get direct traffic people who would type it in? The answer is yes. And so because of that, again, AMP doesn't solve that problem. You need to solve that problem. You need to solve that problem by making your Site better and faster. So amp to me is more like a knee jerk reaction. It's a way to sort of like force the industry into this way of doing things. And it's very, very Google centric and it really serves Google more than it serves the publisher. And that bothers me.
- [11:18]
A
But is it not a case, I'm going to play a devil's advocate here a little bit. Is it not the case that, you know, like any tool that can be used for good or for bad. So you know, I always like the, the analogy of a knife, which is brilliant. You do really handy things with a knife, but you can also stab people with it. So is it not, is it not down to the publisher's intent?
- [11:40]
B
So the problem here is that we have a solution for something that we, that is that we don't need. In other words, they've taken HTML and made amp HTML and, and we don't.
- [11:52]
A
Need amp HTML, do we need, we.
- [11:56]
B
Need HTML where people do it correctly. Yeah, they, we need, we, in other words. So UX is a conscious decision. It's, it is something you just need to do.
- [12:06]
A
I guess a format doesn't have UX baked into it.
- [12:08]
B
Right, right. And, and, and Google's intention here, I believe was to force good UX onto people. And it's, and it's, and they can't. And the Forbes, the Forbes example is the poster child example of them not being able to enforce UX with this. The only thing they can enforce is speed. And in that case you can do that on your own. You don't have to give up control of your site, you don't have to have everything hosted on Google. You can actually just make it faster. In fact, that's why I made a site called makefastsites.com yeah. And it has five things that I think are the top five things. If you just did these five things, you don't need amp.
- [12:49]
A
Brilliant. So let's go through those five things.
- [12:51]
B
Okay. Yeah, it's like, oh, I gotta remember what I wrote. I'm just kidding. I've talked about this so much, I can't imagine not knowing it. The first one is refactoring your code. And that has to do with the fact that over time what people do is they'll run WordPress, they'll find a theme. The theme requires all these plugins. They also want these other features. So they add these other plugins and before you know it, you have a ton. Yes, it's all JavaScript bloat. And it's just you're serving all of this JavaScript from these different libraries, but your site is actually only using a tiny portion of each library. So you're forcing sometimes many megabytes of downloads for every new user that comes to your site and only so you can have this one slider or you can have this one little thing.
- [13:39]
A
It is. It's like packing 15 rucksacks and only.
- [13:44]
B
Using one little thing.
- [13:45]
A
Your sandwiches to work.
- [13:46]
B
That's exactly what it is. I mean, that's. I'm gonna use that.
- [13:49]
A
Use that.
- [13:49]
B
That is a beautiful gift to you. Thank you. That's a wonderful gift. That is hilarious. All right. I love it. It is just like that. And, and so refactoring your code means identifying those things and cutting out all of it, you know, only keeping what you need. And I usually recommend people go or take that a step further, which is also find out where that JavaScript's being used. And if it's only used on one page, only serve it on that page. So do conditional includes so that it's only used when it needs to be used and that's gonna make your pages faster. So a lot of it is consolidating the code. It's getting rid of the code not being used and then only serving the code that needs to be used for that particular page.
- [14:30]
A
Now for the non technical here of our audience, you might be glazing over, but I would say listen to this because if your developers are really worth their salt, this will be music to their ears when you come to them and say, actually can we streamline things? Because they love clean code, they love beautiful code development teams typically. So you don't need to understand it all, just understand the concepts and then go ask the questions.
- [14:52]
B
Yes.
- [14:52]
A
So stick with us on this. This stuff is important. It could make a big difference to your user experience.
- [14:58]
B
Well, that is a really good point because some of the stuff is technical. Particularly that piece is technical. But what I generally recommend is, and this makefastsites.com is not like a spammy site. It's literally just an educational one page site. So but make I tell people, send your developer to makefastsites.com and just, and say do these and you're gonna be.
- [15:22]
A
Good like a treat, like an outing.
- [15:26]
B
Yes, yes, it's kind of like that. So the second one on there has to do with fonts. So before Google Fonts it was just really awful for designers to try to be able to use the fonts they wanted. And then Google Fonts was this amazing thing that came along and has this huge library of free, really diverse fonts that you can use.
- [15:47]
A
So important, because font licensing online is just a nightmare if you don't have access to open source free fonts.
- [15:55]
B
It is, except for the size of the fonts. And so what I recommend is step two is to not use them at all or use them sparingly and instead use system fonts that are native to the operating system. So for example, a system font that's native to macOS is San Francisco, and it is designed for display and it is a beautiful font. And so there on that site I have the CSS that you would use to call all the system fonts for all the major OSes and browsers. And it just uses the native one. And it looks amazing on each operating system or mobile device if you were to just take one font from Google. And the way the fonts work is they come in different weights and for each weight they have italic and they have bold. So there's like three versions, there's regular italic and bold. Those are three different files. And if you do different weights meaning like thin or, you know, extra bold or whatever, those were all their own files.
- [17:00]
A
Oh my goodness. We've got 15 rucksacks and one packet of sandwiches again.
- [17:02]
B
Yeah, no, we're increasing in rucksacks is what we're doing. And so before you know it, you just take one font and you just have a handful of things. You've got 1.2 megabytes of a font and if you take a font that is not open sans or, you know, not something that's very common, that might be cached on the end user's computer, they have to download it every time. So the more unique the font, they're definitely gonna have to download it, the more fonts they have to download it. And before you know it, you have many megabytes before they, before your page will even render correctly.
- [17:36]
A
Now this is gonna result in big arguments with the creative teams because they do love their fonts, but very often they come from a background of print design and print, print work.
- [17:45]
B
So you have to find a compromise. And to me the compromise is try to use system font somewhere, preferably the body. Yeah, you know, just where you have like the main copy. And then for headers and titles and special things, just, just pick one little thing. Just pick a consistent part of that font and just, and just use that and you're going to be, that's going to be fine. That's, that's, that's what I look at.
- [18:10]
A
Can still have white space. Creative people.
- [18:12]
B
Yeah. Still, the layout can be nice. I mean, everything can be nice. So that's one, the third one. And this is one I've been. I would say I've been preaching for a long time. And that is image optimization. Because most people don't quite do it right. They don't even quite understand what it means to be responsive versus optimized.
- [18:31]
A
And so many people pick PNG when they should be using a jpeg.
- [18:36]
B
Sure, yeah. Or even a standard svg. I mean, even. And so.
- [18:41]
A
Or a tiff. God forbid.
- [18:42]
B
Oh my goodness, that'd be horrible. So usually the first thing I point out is that a responsive image is not an optimized image. So, for example, people will set it up so that, oh, my image is set up for mobile because it resizes.
- [18:56]
A
It's always 80% of the screen width.
- [18:58]
B
Yeah, yeah, exactly. Yeah, yeah. Well, the problem is it's still the same size.
- [19:01]
A
Yeah.
- [19:01]
B
So that image you're using on desktop that's connected to a broadband connection could be 800 kilobytes. Well, guess what? When it resizes that tiny thing, it's still 800 kilobytes. And so there is this HTML attribute. Again, it's gonna get technical. There's an HTML attribute called sourceset that you can specify different sized and completely different images even based on the device size and even whether it's high definition or not.
- [19:31]
A
And that makes an enormous difference to page load times.
- [19:35]
B
It does. It can.
- [19:36]
A
It can be one of the biggest ones, actually, if you've got quite an.
- [19:38]
B
Image intensive, it actually hits it both in speed and user experience because you can actually change an image that's actually better suited for a small screen versus the one you were using before. Like if it's a graphic or something like that, and they can read it better if you just use a different image and it's smaller.
- [19:55]
A
Now. I remember when I first started looking at this running in horror, thinking, oh no, that means I'm going to have to upload multiple images every time I add one. But actually that's not the case. I'm seeing some really great implementations of WordPress where when you add the file up, it'll do several things at once. It'll resize the image, it'll split it into the different sizes and optimize it and serve it up for the right device. And it all happens behind the scenes brilliantly. That's the optimum. That's kind of what you want to. It is the optimum so I might upload a 3,4 megabyte file but the, the image library takes care of that and sorts it for me.
- [20:32]
B
Yes. And one of those plugins that I like is E W W and it's a, that's the image optimizer. It does all that stuff for you. The other one I like is it's like, it's literally called like Source set for WordPress and if you activate that it will automatically do Source Set for all of the images in your post or your pages.
- [20:52]
A
Well, we'll put links to those in the show notes. Good tips.
- [20:56]
B
Yeah. So those images. So the fourth one is actually using a CDN and using in particular HTTP 2.
- [21:07]
A
Okay, so let's just explain to people what CDN is.
- [21:10]
B
Is a content delivery network and it's.
- [21:13]
A
I thought it was an American TV network.
- [21:15]
B
Oh no, no, that's CBN or something. I don't know, that might be Canadian, I have no idea. So content delivery network, what that's going to do is they generally have networks in different countries in different areas and they will cache your files and serve them faster for that region and they just have typically a slightly better connection than a typical hosting provider.
- [21:42]
A
A lot of people don't realize that the further you are physically away from the server server where the website is hosted, the slower it's going to be because you've got to travel through the, through the Internet. Right. So by having all these little nodes close by you're automatically linked up. So I've used CDNs particularly for video delivery because particularly probably got big file sizes there so you want to minimize the impact and they're brilliant. If you're using YouTube or Vimeo, you know they have this set up to help. Help with that.
- [22:11]
B
Right? Yeah, exactly. Well, and it's, it's different. Although I don't fully understand the phone networks and stuff. It is different from traditional phone where you know, there's just the capacity has been figured out and it's kind of point to point type of thing. In this case, anybody who's accessing something from a server somewhere in the other world has to deal with the traffic in between that the bandwidth is always shared and can become heavy and can be very slow if you're on in another continent. Yeah.
- [22:39]
A
So and from my experience, the more you pay, the bigger a CDN you get and the faster the.
- [22:46]
B
Surely. Yeah, yeah, that can help a little bit.
- [22:47]
A
There's a cost associated with it, isn't it? You've got multiple machines copying large numbers of files.
- [22:52]
B
Yeah, it Depends on the amount of traffic. You have that type of thing that you would upgrade and need to do that. What I recommend is I like going to Cloudflare and using their free account, which, which is fine for most people, for most sites. And there's a couple things you get, you get free ssl, which is awesome. And it's just set up automatically and, and you get HTTP 2, which is crazy fast compared to HTTP 1. So to give, to let the audience understand that a little better. HTTP 1, which is on how most hosting providers are set up, serves everything individually. So if you have a hundred things on your site, 100 assets, images and this and JavaScript or whatever, they all kind of send. Yeah. On their own, in their own connection. And what HTTP 2 does is it puts it all into one connection. It does it like a multi channel. Everything's just coming at the same time. And so you're seeing results where if you were on one, it might take four seconds. If you're on HTTP 2, we're talking like 0.2 seconds. So it's phenomenal. Yeah, I mean it's exactly what you want in your life. It's what you want in your life. And so Cloudflare has a free account that you put every, you know, all your stuff on and then as you grow or you need other features that they provide, then you upgrade. So you can like upgrade to 20 bucks a month and you get more bang for the buck type of features.
- [24:21]
A
So I'm still hosting my website on my website hosted space, but I run it through Cloudfare.
- [24:28]
B
Yes.
- [24:29]
A
CDN.
- [24:29]
B
Yes.
- [24:30]
A
And I get free SSL and HTTP 2.
- [24:34]
B
Yes.
- [24:34]
A
This is a new thing in my life I didn't know about.
- [24:36]
B
Oh, it's awesome. It's so good. It's really exciting. I love it.
- [24:39]
A
Where have I been?
- [24:40]
B
I don't know. A lot of people haven't heard of it, but it's. It's amazing. It's amazing.
- [24:45]
A
And that's the future, John.
- [24:47]
B
It is now. Yes, it's the future. Make. Make the future now. You can do it now. So I would say the fifth thing that's on the site and that I really recommend for people is what we've been talking about earlier with amp, which is it's ux. It's make your site easier to use. Don't punish every visitor that comes to your site because you have to please the sales team. You can actually still please the sales team if you create a better user experience and how you show your ads or get your leads or have the call to action. And it's literally putting yourself in that place of the end user and trying to find that happy medium of. I'm able to communicate what I need to communicate from an advertising standpoint or from a call to action standpoint. And this is an enjoyable site to go to. I think I'll come back to it versus the other one. That that was a horrible experience and gave me a bunch of pop ups and I hated using it because I will tell you, as an end user, as a consumer, even though I'm also a marketer, but just as a consumer, I stop visiting the sites that are too aggressive to me, that are too annoying, that give me too many modal popups asking for an email. It gets so frustrating using the Internet because of sites setting things up like that. When I gave my Brighton SEO presentation, I talked about how Forbes is basically completely ruined amp already. I also gave an example of a non amp page to show that you can do this without amp. And a lot of it has to do with ux. And so that example was with Vice Vice News and they didn't have an amp page. I tapped on it. They, they had the title of the article and then they had, just right below it, this kind of had like darker text. Do you want to have updates on this? You know, you know, click here and give us your email. It's very unobtrusive. You know, it wasn't like a modal overlay, it was just sort of like it's just there. It wasn't flashing, it wasn't a different color. But I read it, I saw it because it looked like it's kind of part of the article and it was acceptable to me. And then after the intro there was an ad. It was like one of the square ads. I saw it, I saw it. We're good. But I'm here to read this article and it did not show another ad for the entire article. It was like a miracle on the Internet is what it was. And I was able to actually read the article. I was actually able to do what I came there to do instead of being interrupted every other paragraph, which is insane and is a standard right now. And I could read the article. And guess what? I'm going to start going back to Vice News more often now. I'm probably going to even be more apt to give them my email at that little call to action at the beginning because they're not spamming me in the article. So they probably won't spam me via email. I mean, I mean you're sending certain messages, I mean they are differentiating themselves against all the other publishers by not making the user experience so awful.
- [27:48]
A
Absolutely. And that trust when you see it. You know, I'm a great believer that businesses very often think they can just tell people stuff and they'll believe it. But no, everybody's reading between the lines. Constantly reading between the lines. I hate it. I'm with you on this. It's gotten so bad we turn a blind eye to it. You know, it's like, I don't know, it's like at home when I, when my dust bin's full and I sort of ignore it. And before you know it, that little carrier bag next to the dustbin appears and you sort of ignore that. And actually it's messy and it's, it's rubbish, but you just sort of become blind to it after a while because that's become the norm and that's wrong. You know, everybody needs to clean up, they need to clean up their kitchens.
- [28:29]
B
Right. So that's why I say to Google's credit, yeah. As much as, you know, you've heard me sort of like criticize it today and I don't think it's the long term solution type of thing to the.
- [28:44]
A
Say it's heart's in the right place.
- [28:45]
B
Absolutely. That's, that's kind of where I usually end this type of conversation about it, which is I admire Google for addressing it. They basically created the example of what everybody should be following. And if any good can come out of this, at least in my opinion, it's going to be that hopefully this temporary time of amp was the time that got people to clean their act up. So if they don't want to have to have everything hosted on Google and have Google have control and all become a Google centric experience, then they need to use the standards that already exist, which is just plain old HTML. You don't need amp HTML, just plain old HTML and code it better and make the user experience better. That's all you need to do. And one of the best examples that are already out there, at least for publishers is go to Vice. Vice is, is whoever is in charge of their UX and technical stuff. They are the example that every, I wish every publisher would follow because they prove that you don't need amp. They prove that you just need to make a fast site and you need to make it more user friendly.
- [29:59]
A
Well, we'll definitely put a link in the show notes to Vice and people can go check that out.
- [30:04]
B
Okay.
- [30:05]
A
Well John, it's been fascinating. I've learned a lot, so thank you once again.
- [30:09]
B
Thanks.
- [30:10]
A
And if we want to find out more about this, what was the name of your site that you've oh yeah.
- [30:15]
B
It'S makefast sites.com fantastic.
- [30:26]
A
Thanks for listening to another episode of the Digital Marketing Podcast, brought to you by Target Internet. If you'd like to get more information on the show, get hold of back issues of this podcast, or get details on any of the links we mentioned, please visit our website at www.www.targetinternet.com. if you've enjoyed the show, we would love to read your feedback. Please rate us in itunes or even better, write us a review. Or if you have any questions, please get in touch. We'd love to.