Vifablog. Penjelasan mengenai AMP, kita akan membahas mengenai pengertian dari Accelerated Mobile Pages / AMP HTML , 2 tahun lalu pihak Google meliris projek baru yaitu Accelerated Mobile Pages atau biasa di sebut AMP HTML , AMP HTML sendiri adalah struktur web yang meminimalisir penggunaan JavaScript, CSS dan HTML. AMP HTML mempunyai tujuan agar tampilan halaman website kalian menjadi cepat , tanpa banyak pengaruh JS atau lainnya , anda juga dapat mengetahui kecepatan website anda
AMP HTML sendiri lebih terfokus kepada pengguna Web Mobile dari pada Dekstop , Accelerated Mobile Pages sama seperti laman HTML lainnya, tetapi dengan fungsi yang terbatas yang ditetapkan dan diatur oleh source AMP spec . Sama seperti semua laman web, Accelerated Mobile Pages akan akan dimuat di browser modern maupun aplikasi browsing lainya .
Untuk CSS mungkin scriptnya masih sama , namun yang sedikit berbeda terdapat pada script HTML tersebut semisal tag img ,menjadi amp-img
Untuk render cepat, kita harus menggunakan AMP Javascript Library yang akan merender halaman dan menampilkan video, gambar, iframe dan lainnya dengan asynchronous. Hal yang wajib adanya dalam AMP HTML adalah :
Dimulai dengan <!doctype html>
Menyertakan <html ⚡> atau <html amp>.
Menyertakan <link rel="canonical" href="$SOME_URL" />, pada tag head untuk mengetahui versi AMP HTML.
Menyertakan <meta charset="utf-8">.
Menyertakan <meta name="viewport" content="width=device-width,minimum-scale=1">pada tag head.
Menyertakan AMP Javascript Library <script async src="https://cdn.ampproject.org/v0.js"></script> pada tag head.
Menyertakan <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> pada tag head.
- <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
- <script async costom-element="amp-img" ----------------------------
- <amp-img
alt="Curabitur placerat est sem"
height="350"
layout="responsive"
on="tap:lightbox1"
role="button"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqzo84WFkeqC9Bqg6CYJeOe8UJtiHfT3ffk544NCTTfZTltwycznyhE_CAqkHwWEcPuiOEqB68o-hUltrSoh3Uyk_cpG6slxzEpR2CX-1YoeGT7t8sF66fV9vcybkIVHYEapi93HHbLkrL/s1600/Logo-Terbaru-Premier-League-Musim-2016-2017.jpg"
tabindex="0"
width="650"></amp-img>
- atau yang paling sederhana 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>
Beberapa hal yang harus diperhatikan
Dalam membuat web atau blog berbasis AMP HTML , ada beberapa aturan yang perlu di perhatikan semisal :
- Tidak boleh ada dua tag <style>, apabila ada penambahan maka gunakan <style amp-custom>, dan itu juga tidak boleh lebih dari satu.
- Tidak boleh membuat inline CSS seperti sejenis sidebar , padding , etc .
- Script harus external dan menggunakan script asinkron (asyn)
- Script tidak diperbolehkan menggunakan attribute type='text/javascript'
- etc
Masih banyak aturan-aturanya , dan AMP HTML ini sulit diterapkan pada Template Blogspot , meskipun bisa itu cukup sulit bagi kita yang belum mahir dengan AMP ,karena AMP dikenalkan belum sampai 2 tahun , butuh proses untuk mempelajarinya lebih dalam .
Untuk teman-teman yang ingin lebih tau mengenai AMP HTML kalian bisa kunjungi Official Site nya di www.ampproject.org .
Thanks to Ampproject.org , Google
NOTE : STOP PEMABAJAKAN , SERTAKAN SUMBER SEBELUM COPAS , TERIMA KASIH ATAS KUNJUNGANYA , SEMOGA DAPAT MENAMBAH WAWASAN KITA :)