pengertian accelerated mobile pages atau AMP HTML

10:22:00 am

Vifablog. Penjelasan mengenai AMPkita 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://1.bp.blogspot.com/-F5jd8_VIpZ4/WHJY6Hxd-YI/AAAAAAAAAN8/YVkM2fd_gGIti2AOHrXTCz60slcVjCD1QCPcB/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 :
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 :)

Artikel Terkait

Previous
Next Post »
Blogger
Disqus
Silahkan Klik salah satu , ingin Berkomentar menggunakan Disqus / Blogger

No comments