Podcast: Play in new window | Download
When it comes to building our websites, we sometimes tend to believe that the more info we have on there, the better. But that’s not exactly true. Bogging down your website with images and content and code that is unnecessary and slows down your site is a big negative in Google’s eyes. If your website doesn’t provide an optimal user experience, you will be negatively impacted and rank much lower.
Learning how to keep your site running fast – even if that means tweaking your content and photos slightly to accommodate things like different screen sizes and resolutions depending on the type of device it is being viewed on – will go a long way in providing both user satisfaction as well as appeal more favorable to Google.
Rich: Jon Henshaw is the Director of Digital Marketing at TapClicks, a world class reporting platform for agencies and marketers. He’s also the co-founder of Raven Tools which was acquired by TapClicks in 2017.
Before Raven Tools he worked at Visa developing web apps for their corporate and consumer customers. He is an industry veteran, speaker, and subject matter expert who has been building, optimizing, and marketing sites since 1995. Jon, welcome to the show.
Jon: Thank you. That’s a long time. When you said it I did the math and I was like, “that’s 22 years”.
Rich: Well it’s funny because we’re celebrating flyte new media’s 20th anniversary this month.
Jon: Oh, wow. That’s a long time, that’s a really long time.
Rich: Yeah, I was optimizing so I think I said this on a previous show, so I apologize if anybody is listening to the show. I was optimizing for AOC browsers when I first started the company.
Jon: What’s an AOC browser?
Rich: Oh I’m sorry, AOL browser.
Jon: Oh, ok. I was like, “Man, I’ve never even heard of that.”
Rich: We were thinking about Lycos and all that. So speaking of which, what drew you to search engine optimization in the first place?
Jon: I kind of stumbled into it and it had to do with accessibility. So I had different sites that I had to work on where they had some accessibility requirements. And it ends up that some of the fundamentals of technical SEO get their roots from accessibility and really from HTML standards.
So the most common one that everybody knows about is the ALT attribute on an image element, some people call that the “ALT tag”. And that’s really about accessibility. It ends up that search engines now use it to better understand what an image might be when it can’t see it or can’t analyze it.
But that’s what got me into it. And then of course as soon as I found out – at least back in the day – about how easy it was to rank, and when you rank you get traffic and depending on the purpose of the site you get a lot of money, I was hooked. I’ve always been somebody who even to this day has kind of refused to become a paid advertising expert just because I can’t get away from the idea of getting the free traffic versus having to pay for it. But I do pay for it and all the businesses that I’m in, I do depend on social advertising and advertising in general, so it’s not that I shun it, I just have never personally become an expert at it.
Rich: It’s interesting that you talk about some of the things that came out of early search and those were things that we all did and still do, but it think it was really important along with Meta tags and meta descriptions back in the beginning are still important. But definitely things have evolved and search engines are looking for more nuances content and other things.
One of the things that seems to be a hot topic right now is site speed and SEO. Why is site speed being discussed in the same topics and conversations as search engine optimization?
Jon: Well from Google’s standpoint they don’t want to present some sites that essentially give you a really bad user experience. So for example in order for Google to stay popular and get people to use it the results that they provide on the first page – while a lot of them can remain relevant – it’s if that user experience when you visit that page is good. So that’s where that’s coming from.
What’s happened is with having broadband everywhere marketers and webmasters have taken license to essentially keep adding crap to their pages, and what they’ve done is they essentially ruined user experiences. One of the ways they’ve ruined that – aside from all the popups and things – is all of the things they’ve added have slowed down the ability for the pages to even render in a decent amount of time. So it is less perceptible on a broadband connection on your desktop but it is more perceptible on a mobile device, especially when different cellular networks have different speeds and so you really have no idea how fast you’re going to be able to download something, depending on what network you’re on and what type of device you have.
So there’s that and then there is the fact that mobile has surpassed desktop in searches. So once that happened it grabbed Google’s attention and they realized this is the future, the future is actually mobile search not desktop search. So they set their sights over there and right now almost everything that Google is talking about and every place they’re innovating for search is around mobile.
So they are in this position where they fear losing the audience that would essentially use Google to search for things if they continue with their search results to provide sites that have very poor experience on a mobile device. So that’s where that’s coming from and they have been making a bunch of headway and strides and trying to get webmasters in particular to change the speed and the user experience of their sites so that it is a better experience for mobile users.
And of course they’re doing this in the way they typically do things to get things done, and that is they are threatening your ranking. Even if you’re relevant they may not show your page on the first page of the results because it’s too slow.
Rich: I’m sure they would frame it as, “We are rewarding sites that obey us.”
Jon: I don’t think they’d use “obey”, but we would frame it that way for sure.
Rich: So I think not to put too fine a head on it, mobile search leads to mobile websites, and obviously so your experience is going to be the same which makes sense. So again getting back to a lot of what Google was driving in terms of search engine optimization is just your experience same as it was back in the day. So some things haven’t changed quite a bit.
Jon: And it’s interesting what you just said as far as mobile websites because that can be loaded in regards to what does that mean to be a “mobile website”. So for a certain amount of time people started to create separate sites, one for mobile and one for desktop. That’s not the greatest solution and so then we started to get responsive sites and this idea of the desktop site looks the same on mobile and is responsive, what happens is my image is resized and you can still see all the things. The problem is that’s not a mobile friendly site, that’s just a site that can transform to be viewable on a phone.
What I mean by that is that at least from a SEO perspective it’s not optimized for mobile, it just resizes. That means that if you’re serving the same type of site I was describing or the ones that are really slow and bandwidth heavy, then that’s going to be really slow on an old device regardless of the fact that eventually with downloads you can view it.
Rich: So it might look gorgeous on my iPhone, is what you’re saying, but it still might not be mobile friendly because – especially in Maine where we have spotty coverage in much of the state – it’s still going to take forever to load and that is not a mobile friendly experience even if it looks pretty.
Jon: Correct.
Rich: Ok. So how do we know that our site is slow? Is it literally just a matter of watching it load or are their tools that you would recommend we use?
Jon: So there’s a bunch of ways. One is simply just to go somewhere and actually test it on your phone, you’re going to know pretty quick. Unless you just have incredible service, then you’re going to tell when you’re not connected to the Wi-Fi connection if it’s slow or not.
The real way to tell is to use certain tools. Some of the defacto tools that are out there have been one from GTmetrix called YSlow, they also plug into Google’s paid speed tool so a lot of people just go straight to Google paid speed testing tool. But the one I like to use the most is actually Chrome. Chrome has developer tools built in and it does a couple things. One is it can show you everything that downloaded but you can also throttle it, you can say to access this on this type of connection and then you can reload your page and it will load at that particular speed and you’ll get a really good idea of just how fast or slow your pages are.
Rich: Interesting, I’m more of a Safari guy so I’ll have to check this out on Chrome for sure.
Jon: I’m more of a Safari person too, but when it comes to Java tools in general and things that are kind of built in, I would say that Chrome wins it for me. Google has actually spent a great deal of time creating tools to help web designers and web masters and developers and they work quite well. And I also like the ability in Chrome to be able to have it displayed based on a particular device. So they have a ton of mobile devices that it will mimic, and when you layer on the speed limitation then you really get a feel for what it would be like if you were actually holding that device in your hand.
Rich: Interesting, I’ll check that out for sure. Now I’m hearing a lot about AMP sites, can you just briefly tell us what is “AMP” and what are some of the pros and cons of building your website on the AMP framework?
Jon: AMP is what I call Google’s kneejerk reaction to what’s ruining the web. Essentially we have slowed things down, we have made the user experience awful, so Google essentially said they’ve had enough and in their perfect world this is how pages should be. So Google put together this AMP HTML that’s a type of markup that people can use that is very strict and stringent in how you put it together.
Essentially AMP is best used for an article like a blog post or some type of news article, and it is very controlling. It’s a one column, very simple view that don’t let you run any java script at all. You can have advertising but you have to use their structure, and the big kicker is that they host it. So essentially what the webmaster does is they convert their pages into AMP pages and Google comes along and finds it, and when they find it they then validate it. And if something doesn’t validate they will not use it, it is very, very strict. But if it does validate and it is considered content that Google thinks is relevant in showing in the results, then they’ll show it in their results.
But the kicker part is that they host it. So even though you make it on your site when the user goes to Google to use that particular article, they are not going to your site, they are actually staying on Google. So I don’t particularly think that’s a great thing.
Rich: So far I hate everything about it.
Jon: So the problem is there is a lot to hate about it, and I’ll get into that in a second, but one of the problems is that it’s a really amazing carrot right now for publishers because what we’re seeing is sites that are new sites – in particular The Guardian, a UK paper – they are having a great time, they’re one of the people that jumped on it quickly and optimized accordingly and they are getting tons and tons of traffic. And I have also talked to several other people that I know in the industry who manage the SEO for very large enterprise publishing sites and it’s at the point now where they have to use it because it is surpassing their regular traffic, their non AMP traffic. So Google has been very strategic in how they’ve implemented this and who would benefit the most at first.
So here’s the problem I have with it and that is that it’s very Google-centric, in other words it’s for Google, by Google, and Google controls everything. Moving forward I don’t think it’s a great idea to have your content hosted on Google, particularly a search engine. I’ve written something about something I call, “The Google App”, which is like the inception of Google search where you do a search and you click on a little box.
For example, if you were to pick your favorite team right now – I’m in Nashville and the Predators are in the playoffs for the Stanley Cup – and so if I type in “Predators score”, then I get one of those little boxes and if I click on it and I’m on my phone, it takes me to this whole experience. I’m never going to get to a site off of Google’s search, I’m stuck in there. And essentially Google has scraped tons of other sites and they’ve created some higher type of “search portal” in a sense. I can keep clicking and clicking and clicking and moving around and looking at their schedule and scores and team stats, and I never ever even visit a site where they took that data from.
So a company that is actively pushing in that direction that is also at the same time pushing AMP and trying to get me to give them all my content and then to host it and for that data to live on their site is not appealing to me. So that’s one part.
The other part is that Google is not the only show in town in regards to traffic. In other words, AMP is not the panacea to make it a good user experience or speeding up your sites. You’re going to be getting traffic from Facebook, you’re going to be getting direct traffic, you’re going to get traffic from people who blog about you and link to you. You’re going to get traffic offline as you do advertising offline and you give people links, people are going to type that in and it becomes direct traffic to your site.
So the idea that you do everything in this AMP and Google method is not the answer to the problem. To me the answer to the problem is to simply make fast sites, to simply go rethink what you’ve done to your site and make it fast and improve the user experience. Because when you do that it then negates what Google was trying to do in the first place with AMP, and there’s less of an argument that everybody should switch to it or that they should have to use it.
Rich: Alright, I have a question, because I am so against AMP it doesn’t even begin to describe it and you’ve only hardened my belief here. But I do have a question because you’ve brought up a good point. So if somebody reads my blog post – which happens to be an AMP page – are they linking to at least my URL or are they linking to a Google URL?
Jon: So you’re saying if on your blog – let’s say you’re running WordPress and the AMP plugin – and Google picks it up and somebody does a search on Google and your blog post is the result and it’s in AMP format.
Rich: And it’s so brilliant they decide to link to it.
Jon: Exactly. So are you talking about just staying inside the search or somebody linking to it from a blog?
Rich: Maybe I haven’t found any AMP pages myself, but if they find the search and hey click on a link, do they click on a link or is the entire AMP thing within that search result?
Jon: So everything’s within the search result. So what happens is that they will see either just the stand alone search result and it will have a little AMP icon, or your article will be placed into a carousel of other related articles. So they will tap on that and it will kind of instantly display your blog article. But it won’t be on your site, it will be on Google and it will be on Google’s very simple AMP display. You do have some control over how it’s displayed but not a whole lot. It will be based on the AMP structure and they will kind of read it and see it. If you had the time and ability to put in AMP ads HTML, then you might have some ads that appear so you might get some sort of impressions or make some money off that. But for the most part they’re just going to be on Google’s site.
One of the things they’ve done recently is they have started to show and give access to the original link to it at the request of many, many people. But for the most part – from a user standpoint and how they’re doing it – they’re basically just tapping and reading and then they’re just going back. Or they’re reading some of the other articles on some of the other sites, which is great for Google but it’s not great for the site owner.
For the site owner what you want to do in a perfect scenario is you want somebody to search on Google, you want them to see your post, and you want them to come to your site, and then you want to keep them there. You want to do whatever you can so that you control your site and control that experience to offer up some additional articles that they might be interested in, or to pitch them to sign up for your newsletter, or whatever your call to action is. With AMP you’re very limited in what you can do and they technically aren’t even visiting your site.
Rich: I’m seeing that now and I guess I never noticed this before. So I pulled out my cellphone mobile device because I don’t know if AMP shows up on a desktop or not, so I did a search on “Comey” and the top result was from Fox News and I clicked on it but I’m still seeing that I’m at Google, but then underneath that is that little link that says “FoxNews.com” so I can get the link, and then there’s the article down below. And yes there are links to the author and to Fox News with a video I can watch and some ads as well. But yes, it’s very stripped down and again, Google is getting all that traffic.
I think this is terrible for small business. You know I wasn’t going to go into AMP all that much, I’m glad we did. But I do want to talk about if you’re listening at home and you’re like “AMP is not for me”, I do want to talk a little bit about what are some of the tactics that speed up our site if we don’t want to go the AMP route?
Jon: So I made a site for this purpose, and I think it’s even how you found me. I made a site called, makefastsites.com, and the reason why I did that was because there’s a bunch of articles and a bunch of things people set out there as far as how to set up your site and stuff, but I’ve been doing this for a long time and I wasn’t seeing the things that I felt like were the most doable and would give me the most bang for the buck. And so that’s why I put the site together.
I put together 5 areas where if people just did these 5 things, then in my opinion AMP would not be necessary. So the first one has to do with…and people are going to have to go to the site because we’re not going to have enough time.
Rich: We’ll have a link in the show notes, of course.
Jon: Because I do a whole presentation on this. The first one is to refactor your code, which essentially has to do with we have bloated our sites with just unnecessary code that isn’t even used on half the pages, and that slows down our sites.
The second one is encouraging people to use system fonts.
Rich: Can you explain that a little to the people that might not understand what system fonts are.
Jon: Sure. So modern websites today takes advantage of what are called “web fonts” and Google in particular is one of the reasons why we have this. They have made hundreds if not thousands of web fonts available that people can use. It’s been great for designers because now they can really do some nice typography and that type of thing.
The problem is that for each font – weight, boldness, thinness, italicized – tht all takes up space. So you can easily pick just 2 or 3 fonts that are unique and interesting but it takes megabytes of space to download and even render and a lot of people don’t’ recognize that.
So if somebody is coming to your site for the first time on a mobile device and they don’t have those fonts cached on their system because you picked some really unique ones, before they even think about clicking on anything, they also now have to download 5 megabytes of fonts in order to even view your copy correctly.
Rich: This is from Google? It’s almost like they’re selling us the cigarettes and the smoking cessation tool all at the same time.
Jon: Yes. And like many things it’s all good and bad mixed together, but in regards to speed it’s not good. So if they’re telling us we need to have fast sites, then we need to rethink what we’re doing in regards to fonts.
So I encourage people to use system fonts because system fonts are basically the fonts that come with your computer and they look really good with a modern operating system. So for example, Apple uses one called “San Francisco” and it’s a beautiful font that is ideal for display, and there are ways you can call that with your CSS and nothing has to be downloaded it just uses the operating system’s main font and it looks good.
The third one – and this is one I’ve been talking about for years and people still don’t grasp that you can do this – but that has to do with optimizing your images. A lot of people think that optimizing your image is making it responsive, like we talked about earlier, where it just resizes. Well it’s not. Optimizing your images is actually serving a completely different image, not just a different size image, but even possibly a different image that would look better in dimension or content on a mobile device or on a smaller screen.
The fourth one is using a content delivery network and using something called HTTP/2 which is a much faster protocol but it’s not widely adopted yet. But it’s stupid fast if you switch to it. So I have a link on that site that goes to a blog post that I wrote that is step by step on how to get all of that for free. It’s a service through Cloudflare, it’s backed by Google and Microsoft, and it’s all free and I have it running on every single site that I have.
And the last one is simply improving the user experience. And what I mean by that is there are things to learn from what AMP is doing. Like I said, AMP is a kneejerk reaction, it’s too extreme. Some of the things that they’re doing are good in what they’re trying to achieve – which is single column – which is making it so you don’t have everything vying for your attention on the page and everything blinking and popping up. It basically just comes down to if you focus on the actual user experience, is it doing what it’s supposed to do, is it easy to read, does it show quickly, can you get to that particular content quickly.
I even have some more advanced things where you can actually talk about HTML things where you can load certain resources or pages where you think they’re going to go next so that’s really fast and it’s a really good user experience.
So those are the 5 things: refactor code, use system fonts, optimize your images, use a CDN and HTTP/2 and improve your UX.
Rich: Those are 5 awesome things. And like you said, the article that we link to will go into more detail on those things. But I do what to just talk a little bit again about the images because I know that it’s a big part of it, I think we all got lazy as broadband became more universal. And when I say “we” I mean developers.
You talk about something called SRCSET, or “source set”, and I believe what this is is that you are creating multiple versions of the same image based on whether somebody is on a mobile device, or tablet, or laptop. Is that kind of what’s going on there?
Jon: Yes, that’s exactly what’s going on. So source set (SRCSET) is really nice because before if you wanted to display a different image based on a device, size, or even the resolution on the screen, you’d have to use something like java script and do all this special code to make it work. There is now SRCSET which is a code in HTML, it is a HTML standard, it doesn’t require any special code other than just the HTML. What it does is it allows you to say if a screen is a certain width and a certain resolution, to display this image instead. The reason why it’s important is because from a screen width standpoint you can actually serve a significantly smaller picture than the original one that was made for desktop, which will make everything load really fast.
The other part in regards to resolution that’s really nice is if anybody who has one of those high definition screens they know that when they surf the web a lot of the images they see are fuzzy. And they’re fuzzy because they’re not made for high res, they were made for the regular resolution. So that’s not a great user experience either. So what SRCSET does is it allows you to say “for any device this size, show this image instead” if it’s a high resolution screen.
So what you’re doing is you’re making that user experience awesome for everybody. You’re making it fast and you’re making it good, it’s not fuzzy it looks good.
The third component that’s really nice about SRCSET is that you can show a completely different image. So for example we did research and looking at like 4 billion pages, and we had these big graphs that we made that were just kind of cool infographics, but one of them would look good on desktop but not look good on mobile. So for that particular one we actually had our designer remove some things and reorder how the content is displayed if the page was accessed via mobile device. So you’re basically again pushing for that better user experience so that they’re seeing still for the most part the same data but done in a way that it’s not too small or too tiny but they can actually still read it.
Rich: And like you said, that is a lot more work, but for certain pages – and all this stuff is a tradeoff – but I can certainly see opportunity there where once you’ve got your website up and running, if you’ve got some pages that might be slower that you can go back and add this code. Or if it’s something like a header that’s going to appear on multiple pages, that’s something you could do as well.
Jon: Yup, absolutely. SRCSET does not have to be used for everything, it’s just some images that are typically bigger or have more content in them, you should consider it, but you certainly don’t have to use SRCSET for every single image on the page.
Rich: Jon, this has been incredibly helpful, I can’t wait to share it with my developer. Although he may want to kill me after making him redo all this work. But I do want to give you an opportunity to tell everybody at home where we can find you online.
Jon: I am on Twitter at @ravenjon, and of course I’m on LinkedIn, and then as far a websites, raventools.com is a pretty good place to go. We have reporting software for marketing agencies and we also have that site auditor that I also mentioned which analyzes sites and tells you what you can fix so you’ll rank better.
Rich: Awesome. Jon, thank you so much for sharing your knowledge and your time with us today.
Jon: Yeah, thanks for having me.
Show Notes:
Jon Henshaw knows how to build and optimize fast websites that work for your business, your users, and rank well with Google. Check out the website he created aimed at just that! Be sure to follow Jon on Twitter and connect with him on LinkedIn.
Jon recommended some tools to help analyze and optimize websites to make them faster and more user friendly:
- An article Jon wrote that offers step by step assistance
- Cloudflare – a WordPress plugin
- YSlow – analyzes websites based on Yahoo’s rules and tell you why it’s running slow
- GTmetrix – analyzes your website and provides actionable items to improve its performance.
Rich Brooks is the President of flyte new media, a web design & digital marketing agency in Portland, Maine. He knows a thing or two about helping businesses grow by reaching their ideal customers, and he puts on a yearly conference aimed at that as well. Head on over to Twitter to connect with him, and grab a copy of his brand new book geared towards helping businesses generate more leads.
