Google Accelerated Mobile Pages (Google-AMP) is Google’s new open source project specially designed to build light-weight web pages using amp html. The main aim of this project is to make sure the amp code works fine and loads fast on all possible devices such as smartphones, tablets etc.
Accerated Mobile Pages (AMP) is Google's open source project specially designed to make th web pages mobile friendly by making it render contents faster, smoother and responsive in any browser.
The official site of Google amp is − https://www.ampproject.org/
Any user expects that websites would load the contents very fast. However, this may not be the case when the pages are almost flooded with images, videos, animations, social widgets, which makes page very heavy and thus increases its loading time. Such scenario may cause loss of users to the website in a long term.
This section tells you why you have to opt for AMP for your site −
Today when you search something on the Google, you will find a Google carousel displayed at the top with pages, followed by the list of pages as a response to your search. The news carousel displayed are all valid AMP sites. It means Google gives priority to amp pages and displays them as per ranking in the news carousel.
An example for a search made in Google with the keyword “latest indian news” is given here −
All the high ranked pages which are AMP pages are displayed at the start in the Google carousel as shown in the image above.
A Google AMP page looks as shown below when user searches something in Google search. Note that there is a Google AMP logo on the AMP pages.
When your page is AMP converted the load time will be much better in comparison to a non-amp page. Faster load time is also an important factor in page ranking in Google search.
Using Google AMP gives a pleasant web browsing experience as the user will not see any unwanted pop-ups for pages designed with Google AMP.
When loading rate of pages is fast, it automatically increases number of viewers and thus traffic to the page increases.
It is mandatory to give size for the image, iframe, video tags so that amp page can locate the space on the page without having to load the resource. The resources to be loaded are prioritized by the amp page. The content is given more priority over the resources to be loaded.
Amp provides special components namely amp-facebook, amp-twitter, amp-ad, amp-sticky to take care of social widgets to be shown on the page. AMP-ad component is used to serve ads on the page. AMP takes special care in handling the components and loads the contents on a priority based on the requirements.
External CSS is not allowed in AMP pages. Custom CSS if any can be added inside style tag using amp-custom attribute. Inline CSS is also allowed. AMP reduces http requests in all possible ways.
Fonts are allowed in amp pages and the priority of loading the fonts are decided by AMP.
AMP supports amp-animation components and allows transition as supported by modern browsers.
Considering all the points listed above, AMP takes very special care for HTTP request made for fonts, images, iframes , ads to be served etc. The resources available above the page fold are rendered first and later preference are given for resources available below the fold.
Google AMP Cache is another important factor which helps in rendering the contents faster as the contents are fetched from the cache.
Publisher has to maintain two sites amp and non-amp page. For example, consider that the site has the address − https://www.mypage.com. Then, the pages internally for non-amp to be served on desktop will be https://www.mypage.com/news. For devices or AMP, it will be: https://www.mypage/com/news/amp/
Now, let us understand how Google identifies AMP and non-AMP page.
When Google search crawls the page, if it happens to get amp in html or <html amp> or <html ⚡>, it knows that it is an AMP page.
Also incase Google comes across a non-amp page, first to know about the amp page it is mandatory to add following link tags in head section of html page for both amp and non-amp pages.
<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">
Here rel = ”amphtml” is specified for a non-amp page to point to the amp version, so that Google shows the right one based on the platform.
<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">
Here rel = ”canonical” is specified in amp page to point to the standard version of html, so that Google shows the right one based on the platform.
Incase your site has only one amp page, still you should not forget to add the rel = ”canonical” which will point to itself −
<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">
The following diagram shows reference to rel=”amphtml” pointing to amp page and rel = ”canonical” pointing to standard html page.
In this section, let us discuss the important features available with Google AMP −
Google Amp caching is one of the core feature added to amp. It provides a proxy based content delivery network to serve pure amp pages.Amp cache is available by default to all the valid amp pages.It helps in rendering the pages faster in comparison to non amp pages.At present there are 2 amp cache providers Google AMP Cache and Cloudflare AMP Cache. When the user clicks and gets redirected to the amp page, the content is served from the google cache.
Amp has a big list of components designed for various purposes. Some of them are listed below −
amp-img − Used to show images on amp pages.
amp-iframe − Used to show iframe with external content to be shown on the pages. Please note the iframe used are sandboxed which means it needs permission to show data on the amp page. So the cross origin details has to be specified for sandbox attribute.
amp-video − To show video on the page.
amp-audio − To show audio on the page.
amp-datepicker − Used to show date widgets on the page. You don’t have to go for any third party datepickers as the same is directly available is amp.
amp-story − A medium to display your stories on the page.
amp-selector − Is an amp component which displays menu of options and the user can select between the options. The options displayed can be text,images or any other amp-component.
amp-list − Is an amp-component which calls a CORS json endpoint and the data from the json file is displayed inside a template.
The adnetwork the publisher wants to serve on their page needs to be amp-ad supported. For example, to serve double click ads on the page, double click needs to support ads to be served using amp-ad component. The following code shows an amp-ad tag of doubleclick.
<amp-ad width = "300" height = "200" type = "doubleclick" data-slot = "/4119129/ad-layout"> <div placeholder> <b>Placeholder here!!!</b> </div> </amp-ad>
Amp also supports amphtmlads which are pure ampads developed from AMP components and html. Amp also supports amp-sticky-ads, a footer ad displayed at the bottom of the page. The details of ads in amp is discussed in amp ads chapter.
Social widgets like Facebook, Twitter, Instagram have become very important to be displayed on the publisher page , so that the pages are shared across social media. AMP has extended its supports to all the important social media widgets to be used on the page by developing AMP components like amp-facebook, amp-twitter, amp-instagram, amp-pinterest etc.
Another important component on pages is media to shows videos and also serve ads in between the video as midroll ads. AMP provides a medium to do that using amp-jwplayer, amp-youtube etc. You don’t have to load any extra third party files to have jwplayer, youtube to be shown on your page.
Amp analytics is an AMP component used to track data on a given page. All the user interaction on the page can be recorded and saved to analyze the data for further improvements or business purpose.
Amp-animation is an amp component which defines animations to be used on other amp components. IT supports the animation, transition which works well with modern browser. You don’t have to use any external CSS library to perform the animation and can make use of amp-animation component.
AMP-Layout is one of the important feature available in google-amp. Amp Layout makes sure the amp components are rendered properly when the page is loaded without causing any flicker or scrolling issue.
Google AMP makes sure that layout rendering is done on the page before any other remote resources like http request for images, data calls are done. The attributes available for layout are width/height to all amp components, layout attribute with values like responsive, fill, fixed etc., placeholder attribute to be shown when the resource takes time to load or has any error, fallback attribute to be shown when the resource has any error.
Amp supports a lot of components used to display content on the page without a need for any third party library or without having to make any heavy CSS on the page. The list includes
Accordion − Amp-accordion is an amp component used to display the content in the expand-collapse format. It becomes easy for users to view it on mobile devices where they can select the section as per their choice from the accordion.
Carousel − Amp-carousel is an amp-component to show a set of similar contents on the screen and using the arrows to shift between the content.
Lightbox − Amp-lightbox is an amp component that will take up the full viewport and display like an overlay.
Slider − Amp-image-slider is an amp component used to compare 2 images by adding slider on moving it vertically over the image.
Sidebar − Amp sidebar is an amp component used to display content which slides from the sides of the window on tap of a button.
AMP pages are lightweight and loads faster
Google gives for priority to AMP pages on google search. AMP pages are listed in the carousel format at the top of the page. To get a higher ranking, it is a good advantage to have your pages in AMP.
AMP pages are mobile friendly as the content is responsive and adjusts well in all browsers without the need of any additional styling.
Users satisfaction increases for AMP pages as the page load rate is faster in comparison to non-amp pages, thus saving their bandwidth and mobile battery.
Amp possesses the following disadvantages −
Publisher has to maintain two version for their pages amp and non-amp.