Hello my dear friends. Today we will talk about Accelerated Mobile Pages (AMP) and how it can help to you speedup your website.
What is Accelerated Mobile Pages (AMP)?
Speed of loading your web page is really matters today. Many studies have shown that page load has a direct impact on sales. For instance, every 100ms delay costs 1% of sales for Amazon store. This is especially important on mobile phones and tablets. Facebook’s Instant Articles and Apple News are answering these issues in their own way. Fortunately, the Accelerated Mobile Pages (AMP) Project, while promoted by Google, is an open-source project and you should give it a try. AMP in action consists of three different parts:
- AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML;
- The AMP JS library ensures the fast rendering of AMP HTML pages;
- The Google AMP Cache can be used to serve cached AMP HTML pages;
Your browser doesn’t support HTML5 video
AMP HTML is basically HTML extended with custom AMP properties. Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags. These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way. For example, the amp-img tag provides full srcset support even in browsers that don’t support it yet. Learn how to create your first AMP HTML page.
The AMP JS library implements all of AMP’s best performance practices, manages resource loading and gives you the custom tags mentioned above, all to ensure a fast rendering of your page. Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering. Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded and the disabling of slow CSS selectors.
Google AMP Cache
The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. When using the Google AMP Cache, the document, all JS files and all images load from the same origin that is using HTTP 2.0 for maximum efficiency.
The cache also comes with a built-in validation system which confirms that the page is guaranteed to work, and that it doesn’t depend on external resources. The validation system runs a series of assertions confirming the page’s markup meets the AMP HTML specification. Another version of the validator comes bundled with every AMP page. This version can log validation errors directly to the browser’s console when the page is rendered, allowing you to see how complex changes in your code might impact performance and user experience.
Anatomy of an AMP Page
Here is a minimalist AMP page:
An AMP page is simply a regular HTML, page with a few extra rules and restrictions:
- The top of the page must have the following:
You can also use the:
- Contain a
<link rel="canonical" href="$SOME_URL" />tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists;
- Contain a
<meta name="viewport" content="width=device-width,minimum-scale=1">tag inside their head tag. It’s also recommended to include
- You must inline all your CSS in your HEAD tag (no external stylesheets allowed) using a
- You must include the following code as the last items before your
- Image tags (
<img>) must be replaced with amp-img tags (
- Other items (e.g. forms) must also be removed;
- You must implement Schema.org NewsArticle, Schema.org Article or Schema.org BlogPosting meta detail in your HEAD and also include an image of at least 696 pixels, if you want Google to use your AMP pages in the Top stories carousel;
Next, make sure that your AMP page is actually valid AMP, or it won’t get discovered and distributed by third-party platforms like Google Search. To validate:
- Open your page in your browser;
#development=1to the URL, for example, http://leopard.in.ua/#development=1;
- Open the Chrome DevTools console and check for validation errors;
Migration leopard.in.ua to AMP
I decided to migrate this website to AMP. It is working on top of Jekyll and this is what I change inside it:
- Added all needed html tags/attributes and removed all JS code from pages (except AMP scripts);
<amp-img>and provide width and height attributes for its;
- Inline CSS code in
<style amp-custom>. I used for this new feature of Jekyll, which allow compile scss/sass files on a fly:
but scss/sass files moved in
- Back Google Analytic script by
- Back social buttons by
- Return Disqus was little tricky, because AMP doesn’t contain component for it. I found solution by using
amp-iframecomponent on github:
After all this changes need to check results. Page without AMP:
The results are impressive, even for a simple site like this without much bloat. The Start Render time drops from 2.091 seconds to under a 0.793 seconds and the overall load plummets (from 493kb to 231kb) as does the number of resources loaded (31 versus 11). Very nice!
This article describes what is AMP and how it can help to build web pages for static content that render fast. This technology can be used for news web portals, blogs and similar websites, where static content is a major resource for customers. You can look, who already support AMP (this resource too). I do not cover fully all usage of AMP, aspecially Google AMP Cache, which also can add additional speed for AMP pages, but in this case better create separate AMP pages and provide link to them with AMP Cache by
<link rel="amphtml" href="https://cdn.ampproject.org/c/s/YOUR_AMP_PAGE"> tag inside non-AMP page.
That’s all folks! Thank you for reading till the end.