AMP stands for “Accelerated Mobile Pages.” Google AMP is an initiative designed by Google to optimize the search experience for mobile users. Often times, mobile users experience a delay in page load time due to advertising and complex functionality of a website. This can include functionalities such as complex javascript, video, sliders, light boxes, animation and more. The Google AMP format will increase rendering speed dramatically by using a limited set of authorized technical functionalities.
This is not to be confused with the standard mobile responsive webpage. Responsive web design (RWD) is specifically aimed at allowing desktop webpages to be viewed in a size that is formatted to the device being used. It does not take into consideration site speed. Google AMP’s main criteria is to develop a format for high speed rendering by simplifying elements on a webpage.
The concept is simple: Strip away all of the elements that slow down a webpage. Generally speaking, sites that use a lot of Javascript will see a delay in the rendering of a site. For those of you catching up, Javascript is a programming language commonly used to create interactive or complex effects. While Javascript has the ability to modify just about anything on a site, it has its downfalls too – including load speed. To avoid this issue, Google AMP allows only asynchronous JavaScript. AMP webpages are written in a language called AMP HTML, which is essentially HTML but with custom AMP components. The goal is not to make all sites uniform in appearance, but to provide a common core in its development to increase speed. Google offers an example of what a basic AMP HTML file might look like:
<!doctype html>
<html ⚡>
<head>
<meta charset=”utf-8″>
<link rel=”canonical” href=”hello-world.html”>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
</head>
<body>Hello World!</body>
</html>
