Buat bisnismu menarik dengan menggunakan layanan kami. Klik disini.
Beranda
AMP

Apa itu AMP?

Apa itu AMP?

AMP atau Accelerated Mobile Pages adalah proyek open source yang digunakan untuk menyediakan halaman web yang memuat lebih cepat di perangkat seluler, dirilis pada Oktober 2015 dengan tujuan meningkatkan pengalaman pengguna, terutama penerbit, dalam pengoptimalan halaman seluler yang lebih baik.

AMP HTML dibangun dengan struktur web yang ada tetapi membatasi CSS, HTML, dan Javascript agar situs web dapat diakses lebih cepat.

Bagaimana cara kerja HTML AMP?

AMP HTML bekerja dengan menambahkan library JavaScript AMP dan tidak mengubah struktur utama web. Struktur web seperti biasa, hanya menambahkan library JS AMP sehingga cukup untuk spek HTML AMP. Kode sederhana dari 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>

Menambahkan Library JS AMP akan Mencakup :

  • Library JS AMP, yang mengelola pemuatan resource eksternal untuk memastikan halaman dirender lebih cepat.
  • Validator AMP yang menyediakan cara bagi developer web untuk memvalidasi dengan mudah bahwa kode mereka memenuhi spesifikasi HTML AMP.
  • Beberapa elemen kustom, yang disebut komponen HTML AMP, yang membuat pola umum mudah diterapkan.

AMP JS Library

Library AMP JS menyertakan komponen bawaan ( amp-ad , amp-video , amp-img , amp-pixel ) sehingga tidak perlu skrip tambahan, untuk mempercepat rendering.

AMP Validator

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

Menambahkan kata #depelopment=1 ke dalam URL halaman HTML AMP akan memudahkan pengembang untuk menemukan kesalahan struktural HTML AMP.

Komponen HTML AMP

Komponen HTML AMP adalah kumpulan elemen kustom tambahan atau menggantikan fungsi elemen HTML5.

  • Mengganti elemen HTML5 spesifikasi yang 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.
  • Menyederhanakan teknik pembuatan web, seperti amp-anim , yang memungkinkan pengembang web menampilkan gambar animasi, baik file gambar (GIF) atau video (WebM atau MP4) berdasarkan kompatibilitas browser.
Kira-kira kalian mau dibuatkan artikel tentang apalagi? Tuliskan di kolom komentar