BLOG

Pengertian AMP (Accelerated Mobile Pages)

シックス , BLOG
0
2423

AMP singkatan dari Accelerated Ponsel Pages, Adalah sebuah fitur yang dikembangkan oleh Google  yang bertujuan untuk membuat halaman web dimuat dengan cepat pada perangkat mobile & platform lainnya. AMP Proyek secara resmi diumumkan pada 7 Oktober, 2015, dengan dukungan dari Google, Twitter, WordPress dan beberapa dan perusahaan penerbit lain. Halaman AMP dibangun dengan 3 komponen inti.

AMP HTML

AMP HTML atau Accelerated Mobile Pages HTML adalah struktur web yang meminimalisir penggunaan JavaScript, CSS dan HTML. Tujuan dari AMP HTML adalah agar web developer bisa merancang halaman web dengan loading cepat, tanpa banyak pengaruh JS atau lainnya. AMPHTML memprioritaskan pengguna Web Mobile. File AMP HTML yang paling sederhana kurang lebih 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 amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

 

Meskipun sebagian besar tag di halaman AMP HTML adalah tag HTML biasa, beberapa tag HTML diganti dengan AMP-spesifik tag. Element ini, biasa disebut AMP komponen HTML, membuat pola-pola umum yang mudah diimplementasikan dengan cara performant. Sebagai contoh, tag amp-img mendukung srcset penuh meskipun di browser yang tidak mendukung AMP HTML sebelumnya. 

AMP JS

AMP JS adalah framework atau library JavaScript untuk halaman mobile dimana script ini akan memuat semua file yang dibutuhkan untuk menampilkan web secara asynchronously dari seluruh sumber baik internal maupun eksternal.

AMP Cache

AMP Cache merupakan proxy CDN untuk mengirimkan halaman-halaman web yang mensupport AMP.

 

0 Comments

×