Today, the use of mobile phones is growing drastically. Mobile devices have reformed our way of accessing information. Nowadays we consume a vast amount of data through our mobile phones. So mobile web becomes an indivisible part of our daily life. Publishers utilized this mobile web to reach the targeted mobile users. But the experience of mobile browsing is often not appeasing and needs to wait a long time for the pages to be loaded. So the requirement of better AMP optimization techniques is highly recommended.
Due to the bad website experience, publishers lost their customers and business to a great extend. In order to avoid this situation, Google introduced a new open-source initiative called Accelerated Mobile Pages(AMP), which aims to improve the performance of the mobile web. We can perform AMP optimization techniques to improve the performance of websites on mobile.
How to make fast web pages?
Simplify web pages by using less Javascript files.
Optimize bandwidth
Use best content for device (image resolution etc.)
Parallelize the loading (asynchronous load)
Store local copies of web pages on Content Delivery Servers
Content Delivery Networks (CDN)
Content delivery networks are a collection of web servers that are distributed geographically across the earth. Its goal is to serve the content to end-users with high availability and performance. CDNs virtually reduce the physical distance between the source server and end-user. When we distribute our content through CDNs, it routes the user requests to the closest CDN server according to the position of the end-user on the internet. Usually, each CDNs will store a cached version of its content in multiple geographical locations.
Commonly CDNs are used to host static contents like images, videos, CSS, JavaScript, etc. But the use of the single domain will cause limitations for simultaneous connections to the server. For CDN files, they are hosted on different servers. So, there is no limit for connections to a CND server. Through CDNs, we can achieve better mobile performance optimization such as smaller bandwidth, load distribution, and shorter load time.
Accelerated Mobile Pages(AMP)
AMP Project is an initiative from Google to provide a solution for faster mobile websites. It is an open-source coding standard for publishers. The main goal of the technology is to help the publishers to create mobile-friendly content and load it faster as possible. AMP optimization of web pages will provide content to the user much faster and brings a better user experience. It does not try to unify the appearance of web pages on mobile. But helps to create a common core and structure to speed up load times.
AMP pages are none other than HTML pages with a limited set of HTML tags. The use of limited HTML tags will reduce the load time of web pages. AMP HTML can be rendered on any modern browser. To optimize delivery times for pages, Google maintains a Google AMP Cache. AMP can improve server performance too. It can be an SEO activity focusing on mobile users.
Google AMP Cache
AMP cache will cache all AMP optimized pages and it serves everyone at no cost. It means that the content provider does not have any additional work for caching AMP pages. The combination of caching distribution system and limited HTML structure will increase the speed of delivering content to the user.
AMP framework Components
This framework consists of three components:
It is a standard HTML markup with web components.
It will manage the resource loading.
It helps to serve and validate AMP pages.
AMP Optimization of Web pages
This optimization technique makes the AMP pages really fast. The main idea is to restrict everything on the page, what could be extremely slow and provide another solution for the particular issue. It includes:
Allows asynchronous scripts only
Static sizes of all resources
Don’t let extension mechanisms block rendering
CSS style sheet limitation
Allows asynchronous scripts only
AMP Pages does not allow any JavaScript that is synchronous. JavaScript files are usually synchronous. So it can modify basically all aspects of the page and cause delays during the page rendering. In AMP, JavaScript must be declared as async. It informs the browser that, the execution of JavaScript is not crucial to building the web page.
Static sizes of all resources
The size of all external resources on the page like videos, images, advertisements, etc must be known in advance before downloading them. So that AMP can pre-determine the size and position of each element before the resources are downloaded. Hence AMP loads the layout of the page without waiting for any resources to download.
Don't let extension mechanisms block rendering
Usually, AMP doesn’t let extension mechanisms block page rendering. If we want to use some social media embeds like tweets, Instagram, etc on our page. All these embeds always require some additional HTTP requests to load. So we need to inform the AMP system that we will use some custom script that requires a custom tag. During this situation, the custom tag is mentioned at the head of the page. AMP will create a box for our custom tag before it knows what will be its content.
CSS style sheet limitation
Cascade style sheet(CSS) files are usually large and contain styles for the whole site. It can also delay the loading time of a web page to an extend. The size limit for custom AMP CSS is 50 kilobytes. So we must reduce the size of our external CSS to 50 KB. In order to avoid other HTTP requests during page rendering, all the CSS must be written as inline.
AMP Optimization Steps
Include AMP symbol within the HTML tag
Add canonical tag.
Include AMP library file
Specify a viewport
AMP CSS validation
AMP boiler plate
Replace with
Link AMP content
AMP page validation
HTML page before AMP optimization
article.html file :
<!doctype html>
<html lang="en">
<head>
<title>News Article</title>
<link href="base.css" rel="stylesheet" />
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
</article>
<img src="mountains.jpg">
</body>
</html>
Include AMP symbol within the HTML tag
- Copy entire code from the HTML file( eg:
article.html) and paste it into a new file. - Save the new file as
article.amp.html. - Add the attribute to the tag in the head section.
Example: <html lang="en">
- Every AMP document must possess a link referencing its canonical version of that document.
- We must provide the absolute URL of the original HTML page.
- Then the tag must be included in the head section.
Example: <link rel="canonical" href="/article.html">
- To begin AMP optimization we should add an AMP library file.
- It can help us to figure out, what we need to fix.
- The tag must be included in the head section.
Example: <script async src="https://cdn.ampproject.org/v0.js"></script>
- AMP requires definitons for
width and minimum-scale for the viewport. - Its values must be
device-width and 1, respectively. - Viewport is a common tag used in head section.
Example: <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
- On the AMP page, we cannot include an external stylesheet.
- Reduce the size of base.css the file to 50 KB.
- Embed the style sheet within
tag as inline styles.
Example: <style amp-custom>
/* The content from base.css */
</style> - Add the AMP boilerplate code to the bottom of the?
- The boilerplate helps to hide the content of the body section until the AMP JavaScript library is loaded.
- It will help to prevent unstyled content from rendering, also known as Flash Of Unstyled Content (FOUC).
- FOUC: It means a situation where a web page appears briefly with the browser’s default styles prior to loading an external CSS.
- The next step is to link the canonical version to the AMP page.
- This is achieved by including a tag to the section of the original non-AMP HTML page.
- While generating AMP versions of traditional non-AMP HTML pages.
- Both versions have generally the same content but have different presentations.
- So we should treat the traditional HTML pages as the “canonical” pages.
- Pair the AMP pages with canonical pages.
Example: <link rel="amphtml" href="/article.amp.html">
- This is the last step in AMP optimization.
- To validate our AMP page created in the AMP validator to check whether it is optimized or not.
AMP Page After Optimization
article.amp.html :
<!doctype html>
<html ? lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="/article.html">
<link rel="shortcut icon" href="amp_favicon.png">
<title>News Article</title>
<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>
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
header {
background: Tomato;
color: white;
font-size: 2em;
text-align: center;
}
h1 {
margin: 0;
padding: 0.5em;
background: white;
box-shadow: 0px 3px 5px grey;
}
p {
padding: 0.5em;
margin: 0.5em;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
</article>
</body>
</html> 