How to Convert website to AMP?

How to Convert website to AMP?

If you want to convert your existing site to AMP, you should first get familiar with the fundamental differences in AMP. It starts with the fact that you’re not allowed to use any JavaScript on the page that isn’t provided by AMP. In addition, you have to trim your CSS to 50KB, possibly remove a few disallowed properties, and inline it into the page, plus substitute HTML media tags such as image and video for their AMP equivalents. I should also note that what I’m going to talk about next assumes that you have full control over how your pages are generated. If you’re using a CMS, either apply these to your template or create or extend a suitable plugin. I also won’t go deeply into how to do many of the following things in practice.

First, inline and simplify your CSS. Chances are you’re including CSS via one or many external stylesheets. AMP only supports a single inline stylesheet at the head of the page. So you’ll have to merge whatever stylesheets you have and inline them into the style AMP custom tag. If you’ve been using a single stylesheet for all of your subpages, and maybe a CSS framework like Bootstrap on top, you’ll probably run into the 50KB size limit AMP enforces.

How to Speed Up Your Website with AMP (Accelerated Mobile Pages)

AMP Speed

The first step, then, is to replace your CSS framework with something tinier, like AMP Start, or get rid of it entirely. Chances are you won’t need a framework in most cases, not even to build complicated grids. Pure CSS grids are now supported in all modern browsers. Secondly, only load the CSS required for the current page, instead of a global file that includes everything. If the validator still complains about your CSS, it’s probably because you have a few important in there, or you’re trying to animate stuff you really shouldn’t basically, anything that isn’t opacity and transforms.

Next, substitute media elements and iframes. When you’re done with the CSS, you want to replace any HTML tags that AMP doesn’t support. The most obvious ones are image, video, audio, and iframe. Luckily, all of these have substitutes for AMP that function almost exactly the same, and you can read all about them in the AMP docs.

Next, find AMP components that replace third-party embeds and include them.

If you have a content-heavy site, most of the JavaScript running on your pages is probably coming from third parties, like that analytics library you included, or that Twitter embed, or maybe even social share buttons. Each of the ones I just mentioned has suitable AMP replacements in the form of components.

Now, in the unlikely event that some embed that requires JavaScript isn’t available as a component, your best bet is to isolate just that part of the page into its own non-AMP page that is then included via AMP iframe. Next, server-side render as much as you can. But how about the things on your pages that are dynamically initialized or generated by JavaScript, like charts, image galleries, or code blocks?

AMP vs Basic WebsiteSome of these also have equivalent AMP components. But another approach is to server-side render whatever’s possible. As an example, I now server-side render the syntax highlighted code blocks on my block, as opposed to doing it on page load via JavaScript. Not only does it play nice with AMP, it actually makes my page faster. Finally, interactions to CSS or AMP equivalents. You probably have quite a few interactions on your page you know, like a sidebar that slides out, or a dropdown menu, or an image carousel. The good news is that most commonly used interactions have equivalents in AMP. There’s an AMP sidebar for a slide-out sidebar, or AMP accordion for accordions of all kinds, and carousel for carousels, and an AMP lightbox for modals. And we’ve just launched amp-bind, a component that allows you to do stuff like, if you click this button, load this data into this part of the accordion. But if none of these fit your use case, think about whether you really need JavaScript in the first place. Dropdown menus can be purely done with CSS using hover pseudoselectors.

And even interactions that need to be toggled by click can be achieved by using the infamous check box hack. The CSS community is incredibly creative and these are the broad strokes to go from HTML to AMP HTML. When in doubt, check out the numerous ways you can validate your pages, and have a look at some of the automatic converters that the community has built for inspiration.