AMP (Accelerated Mobile Pages)

AMP (Accelerated Mobile Pages)

AMP is a way to build web pages for static content that render fast. AMP in action consists of three different parts:

AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages. The Google AMP Cache (optionally) delivers the AMP HTML pages.

AMP HTML

AMP HTML is basically HTML extended with custom AMP properties. The simplest AMP HTML file looks like this:

1
2
3
4
5
6
7
8
9
10
11
<!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>

Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags (see also HTML Tags in the AMP spec). These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way.

For example, the amp-img tag provides full srcset support even in browsers that don’t support it yet.

Sumber : amp

Menarik untuk dipelajari mengenai konsep baru ini, bagaimana membuat sebuah konten menjadi raja dan user experience menjadi ratunya. Hal ini tentu akan berdampak semakin cepat konten tersebut diakses, mempermudah dalam membaca konten karena tidak ada loding data yang menyebalkan dan ujung-ujungnya meningkatkan jumlah pembaca (user experience) karena mereka merasa nyaman.

AMP (Accelerated Mobile Pages)
AMP (Accelerated Mobile Pages)

Lalu bagaimana sih dampaknya terhadap sebuah website, disini akan saya berikan contoh

1. Website sebelum menggunakan AMP (Accelerated Mobile Pages)

AMP (Accelerated Mobile Page

2. Website setelah menggunakan AMP (Accelerated Mobile Pages)

AMP (Accelerated Mobile Pages)

Sangat menarik menerapkan teknologi AMP (Accelerated Mobile Pages) ini apalagi di indonesia akses internet tidak terlalu cepat. tentunya dengan menerapkan teknologi AMP (Accelerated Mobile Pages) ini akan meningkatkan kualitas konten anda. selamat mencoba :)

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.