Kenalan dengan Teknologi Web AMP

Kenalan dengan Teknologi Web AMP - Hai sobat gee kali ini gee mau coba sharing yang mungkin masih ada yang penasaran (seperti Gee Sendiri hehehe), Apa sih itu AMP ? Setelah bersusah payah meningkatkan blog ini sampe 100% di https://developers.google.com/speed/pagespeed/ ternyata Gee yang dah kelamaan ga update jadi ketinggalan informasi mengenai teknologi AMP yang katanya sudah dikeluarkan sejak 2015 lalu, Jadi apa itu AMP hehehe ga sabaran jadinya. AMP adalah Accelerated Mobile Pages (apa itu...), nah ya kamu benar sesuai dengan namanya teknologi ini bertujuan untuk meningkatkan performa website saat dikunjungi Via Mobile atau Smartphone.
Dengan menggunakan teknologi AMP di situs tentunya akan berdampak kepada pengguna (maksudnya positif), hal itu tentu akan membuat pengguna lebih nyaman karena membuka halaman website lebih ringan yang artinya akan mengurangi tingkat bounce rate pada website yang menggunakan teknologi ini.

Halaman AMP dibuat dengan 3 komponen inti yaitu :

AMP HTML pada dasarnya adalah HTML yang diperluas dengan properti AMP khusus
Library AMP JS yang mengimplementasikan semua praktik performa terbaik AMP, mengelola pemuatan konten dan memberi Anda tag khusus seperti yang disebut di atas, yang semuanya memastikan perenderan halaman Anda dilakukan dengan cepat.
Google AMP Cache dapat digunakan untuk menayangkan halaman AMP HTML dalam cache.

Begini contoh dasar membuat Halaman AMP

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello AMP world</title>
    <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>
  </head>
  <body>
    <h1>Hello AMP World!</h1>
  </body>
</html>