What is AMP?

Basic knowledge of AMP Framework

AMP atau Accelerated Mobile Pages merupakan project open source yang digunakan untuk menyediakan laman web yang dimuat dengan lebih cepat pada perangkat seluler, dirilis pada Oktober 2015 dengan tujuan untuk meningkatkan pengalaman pengguna khusunya publisher dalam mengoptimasi laman mobile yang lebih baik.

AMP HTML dibangun dengan struktur web yang sudah ada tapi membatasi CSS, HTML dan Javascript agar website dapat diakses lebih cepat.

Bagaimana AMP HTML bekerja?

AMP HTML bekerja dengan menambahkan AMP JavaScript library dan tidak merubah struktur utama sebuah web. Struktur web seperti biasa, hanya ditambahkan AMP JS library sehingga mencukupi spek AMP HTML.

Kode sederhana dari sebuah web dengan AMP HTML seperti ini:

<!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>

Dengan menambahkan AMP JS Library, akan mencakup:

  1. AMP JS Library, yang mengelola pemuatan sumber daya eksternal untuk memastikan halaman di render lebih cepat.
  2. Sebuah validator AMP yang menyediakan cara bagi pengembang web untuk dengan mudah memvalidasi bahwa kode mereka agar memenuhi spesifikasi AMP HTML.
  3. Beberapa elemen kustom, yang disebut komponen HTML AMP, yang membuat pola umum mudah diimplementasikan.

AMP JS library sudah menyertakan komponen yang terpasang (amp-video, amp-img) sehingga tidak diperlukan lagi script tambahan, untuk mempercepat render.

AMP Validator

AMP Validator memungkinkan pengembang web untuk dengan mudah mengidentifikasi jika halaman web tidak memenuhi spesifikasi AMP HTML.

Kunjungi laman AMP Validator.

AMP HTML Components

AMP HTML Components adalah serangkaian elemen kustom tambahan atau mengganti fungsi dari elemen HTML5.

  1. Menggantikan elemen HTML5 yang speknya tidak diizinkan seperti amp-img dan amp-video.
  2. Menerapkan konten pihak ketiga seperti amp-youtube, amp-ad, dan amp-twitter.
  3. Menambahkan desain lain seperti amp-lightbox dan amp-carousel.
  4. Mempermudah teknik pembuatan web seperti amp-anim, yang memungkinkan pengembang web untuk menampilkan gambar animasi, baik gambar (GIF) atau file video (WebM atau MP4) berdasarkan kompatibilitas browser.

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 aim of improving 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 AMP JavaScript library and not changing main structure of a web. The web structure as usual, only adds AMP JS library so that it's 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 loading external resources to ensure pages render faster.
  2. 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 includes built-in components (amp-video, amp-img) so no additional scripts are needed, to speed up rendering.

AMP Validator

AMP Validator allows web developers to easily identify if a web page doesn't meet the AMP HTML specification.

Visit AMP Validator page.

AMP HTML Components

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

  1. Overrides spec disallowed HTML5 elements such as amp-img and amp-video.
  2. Implement third-party content such as amp-youtube, amp-ad, dan amp-twitter.
  3. Added other designs, such as amp-lightbox and amp-carousel
  4. 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.