Over 10 years we help companies reach their financial and branding goals. Engitech is a values-driven technology agency dedicated.

Gallery

Contacts

C-257, Hall no. 1, 2nd floor, Peeragarhi, New Delhi - 110063

info@webartvision.com

+91-9654001606

Twitter Facebook-f Linkedin Instagram

AMP Development

 

What is AMP?

AMP stands for Accelerated Mobile Pages. It is an open source framework co-sponsored by Google and several other technology and publishing companies. With AMP, it is possible to create simple mobile sites that load almost instantly. Notable features of AMP are the reduction of JavaScript and CSS elements and the use of Content Delivery Networks.

Accelerated Mobile Pages (AMP) is an open source project aimed at improving the performance of web pages on mobile devices.
The project is led by Google and Twitter.

Why AMP?

The technology behind AMP allows smartphone and tablet users to load lightweight pages faster. This ability is becoming increasingly important as more and more people use mobile devices as their primary computers.

To improve the speed and functionality of mobile pages, AMP uses a lightweight version of HTML. Some tags that work with standard web page code do not work with AMP.
Requires a lightweight version of CSS; images are only loaded when the user scrolls to their position and forms are not supported. AMP offers a limited JavaScript library.

Google caches most AMP pages, but they can also be managed by publishers and third parties. According to Google, AMP pages served on Google Search use one-tenth the data of a standard page and typically load in less than a second.

How the AMP project developed

The Accelerated Mobile Pages project was started in 2015 by several companies including Google, WordPress and software giant Adobe. From the beginning, several international news portals were also involved in the AMP project, some of the first AMP implementations were The Guardian (UK), Washington Post and Buzzfeed (USA), Frankfurter Allgemeine Zeitung and Die Zeit (Germany) . . ) and El País (Spain). Twitter and LinkedIn have been involved with AMP as technology partners from the start.

Almost all major online media today use AMP technology. They recognized the tremendous value they can derive from a fast-loading mobile site.
With the right plugin, WordPress users can also publish content through AMP, although there is currently no e-commerce solution for AMP.

Why AMP is a good idea

Over the past decade, smartphones have overtaken PCs in many industries and countries as the primary device people use to connect. We use our phones to find nearby restaurants, shop there, or read the news on the train to work. A fast website loading speed is especially important for mobile users. The critical time limit is said to be three seconds. If a site takes longer to load, most mobile internet users will bounce and leave the page.
AMP is a great idea because it is specifically designed to create sites that load as fast as possible on mobile devices.

AMP Source Code

In general, all servers can read AMP source code because it is based on a known script. The following three elements are characteristic of AMP:

AMP HTML: The HTML code of the accelerated mobile pages is limited to the essentials. When loading a page, a single http request is sent.
AMP JavaScript: AMP uses asynchronous JS code. This allows the site to start building before all the JS elements are loaded.
AMP CDN: The cache of every AMP website is stored on multiple servers around the world. A content delivery network can be used to bring this content to users via the shortest possible path. Another benefit of a CDN is the constant verification of page functionality. This helps to avoid errors.

Which changes have to be made to HTML code to implement AMP?

There are a number of specific features a website’s HTML has to have in order for it to run over AMP. Any audiovisual media content has to be marked with special AMP tags, for example amp-img, amp-video, amp-audio or amp-iframe. An example of how an image can be inserted into the source code of a page using AMP is:

<amp-img src=”myimage.jpg” alt=”what you can see on the image” height=”200″ width=”300″></amp-img>

Additionally, the following tags have to be included on every page so that it can be correctly displayed using AMP:

  • Document type: <!doctype html>
  • Top level tag: <html>tag oder <html amp>
  • <head> and <body> tags
  • Canonical Tag in Header: <link rel=”canonical” href=”http://www.mynormalURL.com” />
  • Coding: <pre><meta charset=”utf-8″></pre> in Header
  • Viewport: <meta name=”viewport” content=”width=device-width, minimum-scale=1″>
  • Reference to AMP CDN: <script async src=”https://cdn.ampproject.org/v0.js”></script>
  • Note on Opacity: <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

The advantages of AMP for different stakeholder groups

As mentioned above, the big goal of deploying AMP is to benefit everyone: advertisers, publishers, and users. a

Advertisers: Advertisers can use AMP for different ad formats. Ad content is loaded asynchronously, which means the user experience is not interrupted by ads blocking the page load.
Publishers: Publishers benefit from the prominence of AMP sites in the news environment. The high usability of a mobile-optimized website also contributes to positive user signals.
Users: Websites using AMP are great for users. They don’t have to wait long for pages to load and can count on high performance even when browsing on slow internet connections.