Tutorial Mengenal AMP HTML

AMP HTML adalah cara untuk membangun halaman web statis dengan kinerja yang handal dan kinerja yang cepat. Ini adalah upaya untuk memperbaiki struktur web, karena banyak web yang lamban diakses, terutama menggunakan mobile/ponsel.

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

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 ?>
<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 src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>

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

AMP JS library


AMP JS library sudah menyertakan komponen yang builtin (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.
  • 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.

Comments

Popular posts from this blog

How to use Google Dork ?

Tutorial Cara Penulisan image pada AMP HTML Blogger

Pasang Google Maps Di Blog Versi AMP