Get to know AMP HTML, what is AMP?

Sinan Tektaş
Get to know AMP HTML, what is AMP
Source: jagodesain.com

AMP or Accelerated Mobile Pages is an open source project used to provide web pages that load faster on mobile devices, released in October 2015 with the aim of improving the user experience, especially publishers, in better optimization of mobile pages.

AMP HTML is built with existing web structures but limits CSS, HTML and Javascript so that websites can be accessed faster.

How does AMP HTML work?

AMP HTML works by adding the AMP JavaScript library and not changing the main structure of a web. The web structure as usual, only adds the AMP JS library so that it is sufficient for the AMP HTML spec. Simple code from a web with AMP HTML like this:

<!doctype html>
<html amp='amp' dir='ltr' lang='id'>
<head>
<meta charset='utf-8'/>
<link rel='canonical' href='hello-world.html'/>
<meta name='viewport' content='width=device-width, minimum-scale=1, initial-scale=1'/>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head>
<body>Hello World!</body>
</html>

Adding the AMP JS Library will include:

  1. AMP JS Library, which manages external resource loading to ensure pages render faster.
  2. An AMP validator that provides a way for web developers to easily validate that their code meets the AMP HTML specification.
  3. Several custom elements, called AMP HTML components, which make common patterns easy to implement.

AMP JS library

The AMP JS library includes built-in components (amp-ad, amp-video, amp-img, amp-pixel) so there is no need for additional scripts, to speed up rendering.

AMP Validator

AMP Validator allows web developers to easily identify if a web page does not meet the AMP HTML specification.

Adding the words #depelopment=1" into the URL of the AMP HTML page will make it easier for developers to spot any AMP HTML structural errors.

AMP HTML Components

AMP HTML Components are a set of additional custom elements or replace the functionality of HTML5 elements.

  • Overrides spec disallowed HTML5 elements such as amp-img and amp-video.
  • apply third-party content, such as amp-youtube , amp-ad , and amp-twitter.
  • Added other designs, such as the amp-lightbox and amp-carousel .
  • Simplifies web creation techniques, such as amp-anim , which allows web developers to display animated images, either images (GIF) or video files (WebM or MP4) based on browser compatibility.
Yorumlar
Uyarı:
1.Yorum yaparken saygı çerçevesin'den çıkmayın
2.Küfür Hakaret Siyasi propaganda içerikli yorum yapmak yasaktır.
3. Her ne şekilde olursa olsun, özel iletişim bilgilerinizi paylaşmayın, fark edildiğinde kesinlikte silinecektir.