how does amp html work
AMP is a set of new techniques that has to seriously increase speed of mobile web browsing. AMP isn’t intended to be a full replacement for all the rich, interactive and dynamic content you may have published.
Today we are so spoiled by all strong WiFi, cable and fiber internet connections available that we expect the same browsing experience on a mobile when outside. AMP is a technique which is able to increase the speed of mobile browsing. Mainly by leaving out things that you do not necessarily need, so called delaying elements. These delay elements can be images, videos and things like forms but also trackers and external calls in the source code of mobile websites which are not even visible to an user. This part is what called “code subsetting“. Standard HTML contains a lot of elements that actually load slowly, these elements and components are restricted in an AMP HTML valid page template and automatically replaced. Many of the performance problems on the mobile web are also caused by the integration of external hosted third-party scripts. This type of code is also being excluded. But AMP is more than only optimized HTML it comes packed with AMP JS and also caching via Google’s AMP CDN.

amp-html-code-example-amp-img

Less is More. AMP HTML is a stripped turbo charged version of standard HTML.

AMP is build specifically for accelerating static content sites like news, blog posts and articles, some characteristics:
  • The code is quite similar to standard HTML, but has some other tags and elements.
  • AMP does not allow external stylesheets and only one CSS style tag (sheet) in the head
  • AMP is not supporting any inline CSS styling
  • AMP enforces that your CSS style sheet remains under 50kb
  • The learning curve for AMP HTML should be limited if you are a novice HTML developer
  • AMP is not supporting (third party) javascript code
  • AMP is not supporting any input elements, so no conversion forms or reviews on an AMP valid page

AMP in the simplest term; is an HTML extended codes with custom AMP properties embedded within the source codes. Here is Hello World example code of how AMP is implemented in embedded within HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="hello-world.html" rel="canonical">
        <meta content="width=device-width,minimum-scale=1,initial- scale=1" name="viewport">
        <style>
            body {opacity: 0}
        </style><noscript>
        <style>
         body {opacity: 1}
        </style></noscript>
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <title></title>
    </head>
    <body>
        Hello World! Greetings from AMP Templates
    </body>
</html>

 

That’s basically an implementation of HelloWorld in AMP and HTML, coupled with JavaScript library which helps in loading external resources faster for better page rendering. Custom elements can as well be embedded within the HTML to give developers diversified code execution.

Furthermore, HTML elements like ‘iframe‘, ‘object‘ and ‘script‘ are also available in custom AMP HTML templates. HTML5 multimedia elements like ‘img‘, ‘video‘ and ‘audio‘ are replaced by custom amp elements. Because of this, images and videos become better controllable sources; AMP determines which sources are given priority during pre-loading, loading and rendering, but also manages whether to delay a process or even to be loaded in advance.

More detailed information for interested developers can be easily found on here on the AMP project Github repository.

Published by AMP Coder

Support engineer and developer at AMPtemplates.com. From HTML Code to Template to Customer.

Leave a Reply

Your email address will not be published. Required fields are marked *