Mengenal Accelerated Mobile Pages (AMP) atau AMP HTML?

Mengenal Accelerated Mobile Pages (AMP) atau AMP HTML? - Accelerated Mobile Pages atau sering disingkat AMP adalah project open source yang digunakan untuk menyediakan laman web pada perangkat seluler agar kinerja pemuatan lebih cepat dari lainnya, yang dirilis pada oktober 2015 dengan tujuan meningkatkan pengalaman pengguna khususnya untuk publisher dalam mengoptimasi laman mobile yang lebih baik.

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

Bagaimana AMP HTML bekerja?

AMP HTML ini, bekerja dengan cara menambahkan AMP JavaScript library dan tidak merubah struktur utama dari sebuah website. Struktur web seperti pada umumnya, hanya saja ditambahkan AMP JS library sehingga mencukupi spek AMP HTML. Kode sederhana dari sebuah web dengan AMP HTML seperti berikut :

<!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 menambahkannya AMP JS Library, akan mencakup sebagai berikut :

  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 memenuhi spesifikasi AMP HTML.
  3. Beberapa elemen kustom, yang disebut komponen HTML AMP, yang membuat pola umum mudah diimplementasikan.

AMP JS library

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

AMP Validator

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

Menambahkan kata "#depelopment=1" kedalam URL halaman AMP HTML akan memudahkan pengembang untuk mengetahui kesalahan struktur AMP HTML.

AMP HTML Components

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

Menggantikan elemen HTML5 yang speknya tidak diizinkan seperti amp-img dan amp-video.

Menerapkan konten pihak ketiga , seperti amp-youtube, amp-ad, dan amp-twitter.

Menambahkan desain lain, seperti amp-lightbox dan amp-carousel.

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.

Itulah pengenalan tentang Accelerated Mobile Pages (AMP) atau AMP HTML yang dapat Admin bagikan, apabila Sobat kurang memahaminya untuk lebih jelasnya silahkan cek Google agar lebih spesifik. Semoga bermanfaat, sekian dan terimakasih.

Sumber:
https://median-amp.blogspot.com/2020/04/mengenal-amp-html-apa-itu-amp.html