Step by-step procedure to implement amp in website
0 likes163 views
The document outlines the Accelerated Mobile Pages (AMP) initiative, created by Google and Twitter to enhance mobile page loading speed and readability. It provides a step-by-step guide on implementing AMP in a website, detailing the core components such as AMP HTML, AMP JS, and the AMP CDN, along with requirements and restrictions for creating an AMP-compliant page. The document emphasizes the importance of AMP for staying competitive on mobile web and includes practical steps for publishers to adopt this technology.
Step by-step procedure to implement amp in website
- 1. Step-by-Step Procedure to Implement AMP in Website What is AMP ? The AMP plugin was born out of a collaboration between Google and Twitter released in 2015. Accelerated Mobile Pages is an open source initiative project designed to optimize faster mobile pages. Itβs like taking a page thatβs already mobile friendly and making it load quicker, by stripping it down to basics.Accelerated Mobile Pages (AMP) is an open source initiative project/platform aimed at helping publishers improve the speed and readability of their mobile content pages. Faster Mobile Pages + Readable Content = Better User Experience When launched, many publishers such as the The Economist, BBC, the Financial Times and Guardian News have implemented the initiative, so by now we can safely assume AMP is an innovation thatβs worth considering for everyone who wants to stay competitive on the mobile web. AMP pages are built with 3 core components. AMP HTML: A subset of HTML, this markup language has some custom tags and properties and many restrictions. But if you are familiar with regular HTML, you should not have difficulty adapting existing pages to AMP HTML. AMP JS: A JavaScript framework for mobile pages. The AMP JS library ensures the fast rendering of AMP HTML pages. For the most part, it manages resource handling and asynchronous loading. It should be noted that third-party JavaScript is not permitted with AMP. Β© Copyright 2010-2017 webwingtechnologies.com
- 2. AMP CDN: An optional Content Delivery Network, it will take your AMP-enabled pages, cache them and automatically make some performance optimizations. The Google AMP Cache can be used to serve cached AMP HTML pages. amp examples In the above image, after searching βban on currencyβ following AMP pages are displayed with AMP symbol. Steps to Create Your First AMP Page: Below youβll learn step by step that how to create a basic AMP HTML page, how to stage it and validate that itβs AMP compliant, and finally how to get it ready for publication and distribution. Go through the hyperlinks and learn the steps to implement AMP in your website. ο· Create Your AMP HTML Page ο· Include an Image ο· Modify Presentation and Layout ο· Preview and Validate ο· Prepare Your Page for Discovery and Distribution ο· Final Steps Before Publishing How Will You Implement AMP in Your Website? ο· AMP file has its extension(s) called as .amp.html. ο· For starters, you will have to maintain at least two versions of any article page: The original version of your article page that users will typically see, and the AMP version of that page. ο· Certain tags of HTML canβt be used. AMP pages have a normal HTML 5 doctype, <! doctype html>, so they are not distinguished from normal HTML this way. However, the main html element has a special attribute, <html >, featuring the Unicode characterβ‘ U+26A1, βHIGH VOLTAGE SIGNβ. ο· JavaScript is basically not allowed at all. ο· Rewrite your site template to accommodate the restrictions. For example, all CSS in AMP Β© Copyright 2010-2017 webwingtechnologies.com
- 3. must be in-line and be less than 50KB. Due to loading-intensiveness of custom fonts, they must be loaded using a special amp-font extension, in order to better control that loading. ο· Multimedia must be handled specially. For example, images need to utilize the custom amp- img element and must include an explicit width and height. (When converting a legacy website to an AMP template, this can be a major pain if the width and height attributes arenβt already being used). Additionally, if your images are animated GIFs, you need to use the separate amp-anim extended component. <amp-img src=βwelcome.jpgβ alt=βWelcomeβ height=β400β³ width=β800β³></amp-img> ο· Similar to images, there is a custom tag that must be used to embed locally hosted videos via HTML5, called amp-video. For embedding YouTube video, however β which the majority of web videos are β there is a separate extended component, amp-youtube. ο· In order for Google (and other technologies supporting the AMP Project) to detect the AMP version of your article, you will need to modify the original version of the article page. The original article page must include the following tag, essentially a canonical tag for AMP pages: <link rel=βamphtmlβ href=βhttp://www.example.com/blog-post/amp/β> ο· The AMP Discovery page also mentions that some platforms that support AMP will require Schema.org meta data to specify the content type of the page. (Currently, βarticle,β βrecipe,β βreviewβ and βvideoβ are listed as page type examples on GitHub.) This is all about to implement AMP accelerated mobile pages with step by step procedure in your project to work on already mobile friendly webpages and making it load quicker in mobile devices. More blogs are on its way. All the best and stay tuned. Β© Copyright 2010-2017 webwingtechnologies.com