How Do I Create An AMP Version Of My Existing Website
Wanna convert your existing site to AMP?
Get familiar with the fundamental differences in AMP.
Some of them:
- No use of any JavaScript on the page
- Trim your CSS to 50 Kb
- Remove a few disallowed properties and inline it into a page
- Substitute HTML media tags such as image and video
Make sure you have full access and control over how your site pages are generated.
If you’re using a CMS like WordPress, either apply these to your template, or create or extend a suitable plugin.
Lets get started.
Step 1: Inline and simplify your CSS.
Most of the cases and websites you include CSS via one or many external stylesheets.
AMP does support only a single inline stylesheet and that too in the head of the page.
So theres no other option than 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 50-kilobyte size limit AMP enforces.
If you’re the victim here first and foremost is to replace your CSS framework with something minified, like AMP Start, or get rid of it entirely.
Chances are you won’t even need a framework in most of the cases.
Pure CSS grids are now supported in all modern browsers.
Step 2: Required CSS only
Ideally instead of a global file just load the CSS required for the current page.
Step 3: Substitute media elements and iframes.
Replace any and all HTML tags that AMP doesn’t support.
The most obvious ones are image, video, audio, and iframe.
Step 4: Find AMP components that replaces third-party embeds and includes.
Like Analytics Library, Social Network embed or even Social Share buttons.
You can place them with the form of the components.
Post a Comment
Comment (1)
Katherin
says March 28, 2022 at 7:47 amGreat info this (tinyurl.com).
Lucky me I ran across your website by chance (stumbleupon).
I have saved it for later!