Mengenal AMP HTML, Apa itu AMP?


Mengenal AMP HTML, Apa itu AMP

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 :

Anda mungkin menyukai postingan 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 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 render.

AMP Validator

AMP Validator memungkinkan pengembang web untuk 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.
  • enerapkan 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.

Referensi:
kompidesign.blogspot.com/2015/11/tutorial-mengenal-amp-html.html

Comments

Post a Comment

Subscribe to: Post Comments (Atom)