Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.7 hours

Next lesson playing in 5 seconds

Cancel

Free Preview: Optimize Your Website Without AMP

Welcome to the Course!

01:00
  • Overview
  • Transcript

AMP is Google’s collection of plug-and-play code that helps optimize sites to load and run faster. It works, but its use is controversial, and there are many good reasons you might consider handling optimization yourself. AMP undoubtedly does a great job in speeding up sites, but you can achieve results just as well, if not better, under your own steam if you know how to go about it.

In this course we’ll be taking an existing AMP-based site and converting it to use non-AMP equivalents, giving you methods to make your sites run blazing fast, but where the optimization techniques are those you decide on for yourself.

So let’s go ahead and “Optimize Your Website Without AMP“!

Up and Running With AMP

If you're interested in learning how to create an AMP-powered page from scratch, you can in our course Up and Running With AMP.

1. Introduction

1.1 Welcome to the Course!

AMP is Google's set of plug and play code that helps optimize sites and make them load and run faster. And it undoubtedly does a great job in speeding up sites, but you can achieve results just as good if not better under your own steam if you know how to go about it. There are actually a lot of excellent perks that you can only take advantage of if you handle optimization yourself. Not least of which, is when you have full control over your optimization methods, you in turn, have full control over your sites, and how they're being developed. In this course, we're gonna be taking an existing AMP based site, one that we made in another course on using AMP and we're gonna convert it into a non-AMP website using non-AMP equivalent optimization techniques. So through this conversion process, you're gonna learn methods that you can use to make your sites run blazing fast, but where those optimization techniques are ultimately those you decide on for yourself. So let's go ahead and optimize your website without AMP. I'll see you in the first lesson.

1.2 Why Optimize Your Website Without AMP?

Hi, I'm Kezz from Tuts+ and welcome to optimize your website without AMP. But before we actually get into going through how to optimize website without AMP, we're just gonna cover why you should consider optimizing your website without AMP. Now AMP definitely has its perks. The purpose of this course is not to tell you that AMP is bad or that you shouldn't use it. It's to help you get across the pros and cons of working with AMP, versus working with your own optimization methods. So you can make a good choice for what's best with your project, and that if you do choose to optimize yourselves, so that you know how to go about it, and achieve results that would be comparable to working with AMP anyway. Now there's one thing that is pretty clear with AMP. And that is that it definitely does have a sort of plugin play ability to make the average site run faster, load faster and run more smoothly while using it. But note, I do say the average site. Because in truth, the average site at the moment tends to not take advantage of all the possible ways that it could be optimized. So what AMP does, is it gives you all of these different, really good quality optimization methods. And it gives them to you in a way that you don't really have to get too hands on with how your optimization is done. You just implement AMP and then it takes care of all that stuff for you. Now one of the things that the makers behind AMP told everybody when AMP first came out is that you don't have to use AMP if you don't want to. You can look at all the optimization methods that they use and treat them as something of a checklist of optimization methods that you should look at implementing in your own sites, whether you use AMP or not. So if you can use these optimization methods with AMP or without AMP, then what are the advantages of using these methods without AMP? First up we have some advantages in the optimization area. And we're talking about the optimization of your sites. But not just that, I'm also talking about the optimization of your development work flows. So first up with the optimization of your sites, because you are in complete control of your code and how your optimization is done, there is actually the potential to get your sites running faster and smoother than they would with AMP. Now the reason for that is AMP has to be a one size fits all project. It has to try to be something that's gonna suit everybody as best it can. So it sort of targets the average site, but your site may not be the average site. Your site may benefit from having optimizations that are specifically designed for its unique configuration. Nobody knows your project better than you do. So you may find that if you get hands on and control optimization totally yourself, you actually get better results than you would using a third party like AMP to handle the optimization for you. Now, another optimization benefit that you get is in the fact that you only need to manage one website if you handle optimization for yourself. If you're working with AMP, you need to manage the regular version of your website, which ideally, ought to be optimized anyway. But then you now have to manage a second version of your website, the AMP version. So you've got two code bases that you have to worry about, and both of those need to be optimized anyhow. If you do optimization yourself, you just have one site to think about. And you just optimize that site alone, and now whether you have visitors coming via mobile or coming via desktop, you're giving them the possible experience either way. So that optimizes your development workflows and it also optimizes the delivery of your sites. You don't need to redirect visitors at any point, so they're sent from your regular site through to your AMP site, everything is just nice and simple, one fully optimized website. And then thirdly, if you handle your optimization yourself, you also have the ability to combine all of your JavaScript files into a single file that's then minified. As opposed to with AMP, where any time you want to use a non-default custom element, say you want to embed something from a particular social media source, for example. Then you would need to load an extra JavaScript file for that extra custom element. And in a typical site, you might end up loading an extra five or six individual JavaScript files. But if you're handling things yourself, instead of loading all the JavaScript that you need individually, you can bring it all together for a more efficient loading process. The next set of perks to optimizing your site without AMP are that you get to control how you code. With AMP, you have to use a set of custom elements. So for example, using AMP Image instead of Image, using AMP I-Frame instead of I-Frame. But if you're handling optimization yourself, you can just use regular old standard web elements. It's not that it's terribly challenging to implement AMP's custom elements, it's just that if you are working with normal standard web elements, then you have a lot more freedom of choice in the future. Say for example if you had a site that was optimized with AMP and you decided that you didn't want to use AMP later, you would have to completely recode everything. To remove the custom elements and replace them with standard elements. But if you're using your own optimization techniques and you wanna change it a little bit later, because you're just using normal HTML text, it's gonna be much easier for you to rework your optimization techniques later if you need to. Now another perk of controlling your own code is there's a little bit more that you can do to create no-script fallbacks. A lot of people will dismiss the notion of needing to cater to users that don't have JavaScript. However, if you just go and look at, say, for example, the number of uses of the no-script extensions for Firefox, there's over a million users. And it's very hard to tell exactly how many people don't use JavaScript at any given time because most of the analytics tools that we use depend on JavaScript. So if a person isn't using JavaScript, then the analytics aren't going to recognize them. Now, how much do you care about whether people with no JavaScript can access your sites or not, that's up to you. But to me, it's fairly straightforward to create JavaScript fallbacks or at least create messages in your sites that let people without JavaScript know why a certain piece of content isn't functioning as they expected to be. To me, it's just good practice to create fallbacks for everything that you have an option to create a fallback for. You can do some no-script fallbacks in AMP, but you have a little bit more wriggle room with how you handle this portion of your development when you control all the code yourself. Now another thing that you may or may not be aware of is that AMP also includes some custom scrolling behavior. And I've heard a number of people complaining that they don't like this custom scrolling behavior because it's different to what they are accustomed to on their mobile device. They don't like encountering a website that then makes them have to interact with their device in a different way. So if you don't like the sound of that being included in your site, then by optimizing without AMP, you get to decide whether you have default scrolling behavior or if you have some type of custom scrolling behavior. And then lastly, and this is, I think, a pretty major deal in terms of deciding whether you wanna optimize your website without AMP. And that is, when you do control all your own code, you can use any JavaScript that you decide that your project needs. If you use AMP, you cannot use any third party JavaScript whatsoever, not even your own JavaScript. The only permissible JavaScript in an AMP site, is the JavaScript that's made available by the AMP project. So if you need something outside of what that JavaScript provides, then you're just not going to be able to use it. Now the last area of perks of optimizing without AMP that I wanna talk about are that when you control your own code, you can use any services that you choose to use and you make sure the traffic always goes to your domain. So because you can use whatever JavaScript you want on your own sites, that in turn means that you can utilize any advertising or analytic services that you choose. Now on the other hand, if you use AMP to optimize your sites, the only way to place advertisements of any kind is to use the AMP ad custom element, and the only way to use analytics is to use the AMP analytics custom element. And each one of those elements has an associated list of providers that can be used with it. In fairness, this is a pretty extensive list. There's a good numbers of advertising and analytics providers to choose from, but if the one that you want to use isn't on that list then you are out of luck. And you're also out of luck if you want to run your own self hosted analytics or if you wanna run your own ad server. Anything that requires JavaScript to be placed into your page, you're not going to be able to use it. So for example, word ads, which is the ad service that's run by Automattic, the people that make WordPress, is not on AMP's list of supported advertisers. And in another example, Piwik which is a really popular self hosted analytics program Is also not on the list of supported analytics providers. So if you do use AMP, you're kind of putting your choice of service providers into Google's hands. It's possible that maybe in the future, they'll allow you to put a custom provider into one of these elements. But for now, Google will decide which ad services and analytic services can be used on a valid AMP page. And the next perk that you get by optimizing your site without AMP is that you're not gonna have a bar running along the top of your site that takes people back to Google. Right now if you optimize with the AMP and somebody searches Google, sees your site listed as an AMP result, and clicks through to it. Then Google is going to put a white bar across the top of the browser that has a little x button on it, and if the user clicks that x button, they're going to go straight back to Google. A lot of people would prefer not to have a link to Google across the top of their website. Whether that's something that bothers you or not, that's up to you. But it's definitely something to consider. And the last perk that I wanna talk about that comes from optimizing your site without amp is that you make sure that all traffic goes to your domain. At the moment, Google will automatically cache a version of every AMP page in its CDN, so the big upside of that is you get free CDN hosting instead of having to pay for a CDN. But the downside to that is that when somebody goes to the CDN hosted version of your site, they don't see your domain right away. What they see is a domain that starts with google.com/amp and then your domain. So there's a whole bunch of traffic that may never even reach your server. It purely goes to effectively a copy of your site that's hosted by Google. And that especially with that little bar that runs across the top, it may just go straight back to Google, and never really visit your website. Now if you optimize your own website, you make sure that all the traffic to your site, goes to your domain and once again, how much of a concern that is is up to you. However, there are a couple of things to think about. One is that I've definitely seen a couple of people here and there online shown that they're a little bit freaked out by seeing this URL that has Google AMP in the front of it. A lot of people don't know what AMP is, your average web user, does not know what AMP, so when they see a URL to a site, and then they see that, for some reason, there's this other URL appended in front of it, that can damage trust. Everybody has practiced being fairly aware of things like phishing scams and what have you. I'm not necessarily saying that people see a Google AMP cache link and think it's a phishing scam, but these days, most people are known to be careful if you see something that looks a little bit peculiar in a URL. There is that possibility that if you have traffic going through to these Google versions of your domain names, that some people are gonna look twice before they click on that link. Interestingly recently, Apple have announced that in iOS 11, if somebody shares a URL, and It's one of these AMP CDN cached URLs, it's automatically gonna have that prefix, the Google prefix, stripped out of the URL. So that the user will be sent to the regular version of the site and not the AMP version of the site. I can't tell you why they have made that decision to do that. If it's because URLs were a little bit confusing to people or if there was some other type of technical issue. I don't know why, but for whatever reason it's of enough concern to Apple that they've decided to strip these links. So this is just another area where if you do decide to handle your own optimization, you have full control over what's happening. Including how a visitor is gonna travel through your website and what kind of domain they're gonna see. All right, so that covers all the perks of optimizing your website without AMP that I wanted to talk about. Hopefully those should give you enough food for thought to help you make a decision on whether you want to optimize with or without AMP. So what we're gonna be doing in this course is we're gonna take an existing AMP site and we're going to rebuild it using regular HTML, using our own selection of code. And the goal is going to be to get it loading as fast or faster than with AMP. We are going to be aiming for feature parity here. What we're going to try to do, is that everything that AMP does, we do the same thing, but we do it in our own way. So in the next video, we're going to have a quick overview of exactly what we're going to be making. So I'll show you the AMP version of the site and I'll show you the rebuilt version of the site. Now I'm just gonna quickly cover each aspect of what we're going to be working through. So that in the early lessons of the course, you know why we're doing a few different things, you know what the end goal is as we move along. So we're gonna step through all of that in the next lesson. I'll see you there.