Tutorial Mengenal AMP HTML

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.


Demikianlah Artikel Tutorial Mengenal AMP HTML

Sekian Tutorial Mengenal AMP HTML, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian Tutorial AMP HTML kali ini.

Anda sedang membaca artikel Tutorial Mengenal AMP HTML dan artikel ini url permalinknya adalah https://kompidesign.blogspot.com/2015/11/tutorial-mengenal-amp-html.html Semoga artikel ini bisa bermanfaat.

Share this:

Related Posts
Disqus Comments
×

Recent Comments: