Apasih Google AMP itu ?
Accelerated Mobile Pages adalah sebuah proyek open source. AMP merupakan proyek yang dikembangkan oleh Google dan bertujuan untuk mempercepat akses ke suatu halaman situs mobile. AMP pertama kali diluncurkan pada bulan Oktober 2015, sejak kemunculannya AMP mendapat respon positif. Dalam kurun waktu empat bulan saja, sudah ada ratusan penerbit, perusahaan teknologi, dan iklan yang menggunakannya.Pada dasarnya AMP berusaha untuk meminimalisir penggunaan JavaScript, CSS dan HTML. Sehingga suatu halaman web dapat diakses 4 kali lebih cepat dibandingkan yang tidak menggunakan AMP. AMP memprioritaskan pada pengguna web mobile, dengan demikian Anda bisa menghemat penggunaan data hingga 10 kali. Beberapa contoh situs besar yang menggunakan AMP antara lain, Kaskus, Kompas, Bola, Kapanlagi, Liputan6 dan situs lainnya. Untuk mengakses situs yang menggunakan AMP sangat mudah, Anda tinggal menuliskan kata kunci pada pencarian Google, kemudian Google akan menampilkan beberapa hasil pencarian yang ditandai dengan tanda petir.
 |
| src www.google.com/images |
Bagaimana cara kerja Google AMP ?
Google Accelerated Mobile Pages (AMP) atau dalam bahasa indonesia Laman Ponsel Dipercepat pada dasarnya dalam sebuah template blog nya terdapat 3 macam kerangka seperti berikut :
1.AMP HTML
Subset dari HTML, bahasa markup ini memiliki beberapa kustom tag. Jika Anda sudah familiar dengan HTML biasa, anda seharusnya tidak memiliki kesulitan beradaptasi laman yang ada ke AMP HTML.Pada dasarnya HTML dimodifikasi dengan beberapa properti tambahan. Brikut adalah contoh yang paling sederhana dari sebuah file AMP HTML :
<!doctype html>Meskipun sebagian besar tag di halaman AMP HTML adalah tag HTML biasa, teapi beberapa tag HTML diganti dengan tag AMP yang lebih spesifik. Sebagai contoh, tag amp-img memberikan dukungan srcset penuh pada browser yang sebelumnya tidak mendukung tag tersebut.
<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>
2.AMP JS
Adalah merupakan kerangka kerja JavaScript (AMP Javascript Library) untuk halaman mobile. Fungsinya adalah web dapat dirender dengan cepat. Secara khusus merender sumber daya seperti laman, video, gambar, iframe bersifat asynchronous. Perlu dicatat bahwa JavaScript eksternal tidak diperbolehkan dengan AMP. penggunaan tag AMP ditempat pada elemen terakhir padakode </head>.
Contoh penerapannya: <script async src="https://cdn.ampproject.org/v0.js"></script>
AMP JS Library mengimplementasikan semua performa terbaik dari AMP dan mengelola pemuatan sumber daya serta memberi tag kustom untuk membuat render halaman lebih cepat.
3.Google AMP Cache
Google AMP Cache adalah jaringan pengiriman konten berbasis proxy untuk memastikan semua dokumen AMP valid dan meningkatkan kinerja halaman secara otomatis. Bila menggunakan Google AMP Cache, dokumen, semua file Java Script dan semua gambar dapat dimuat dengan lebih efisien.
Jadi apakah Ada sudah siap menggunanakan AMP pada situs web Anda? Dengan berbagai kelebihan dan kecepatan yang ditawarkan, saya rasa Anda wajib untuk menggunakan AMP. Dengan akses suatu halaman web yang cepat tentu pengunjung akan lebih merasa nyaman
Bagaiaman Cara Mengetahui website/blog sudah support Google AMP ?
Jika kita telah menggunakan Google Webmaster Tool maka disana akan terlihat/mendeteksi laman blog versi AMP, Dan pada dasarnya sebuah tag canonical sebuah halaman AMP akan terlihat seperti dibawah ini :
<link rel="amphtml" href="http://www.example.com/blog-post/amp/">
atau kalian juga bisa mengunjungi google AMP testing tool yang sudah disediakan oleh google anda hanya cukup mensubmit URL blog sobat disini
Untuk penerapan dasar pada HTML bisa anda seperti dibawah 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>
Pada penulisan di struktur HTML akan mengalami perubahan, seperti tag ad, embed, img, pixel, audio dan video akan berubah menjadi amp-ad, amp-embed, amp-img, amp-pixel, amp-audio dan amp-video. Sementara untuk CSS sepertinya tidak ada perubahan.
Sebagai contoh penggunaan salah satu markup tambahan diatas terlihat seperti dibawah ini, kode dibawah ini adalah penggunaan gambar untuk halaman:
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
Sehingga jika menanamkan didalam CSS selector akan terlihat kode seperti dibawah :
amp-img {
background-color: grey;
}
Untuk memasukan sumber audio pada laman anda, maka menggunakan element amp-audio. Kode ini harus ditempatkan di bawah kode :
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"><script>
Kelebihan dan kekurangan menggunakan Google AMP
Seperti yang sudah kita bahas sebelumnya bahwa fokus dari Amp ini adalah pada kecepatan loading suatu blog atau website ketika pertama kali di kunjungi oleh visitor.Kecepatan loading suatu blog akan sangat berpengaruh terhadap tingkat bouncing dari blog tersebut, jika dalam proses loading suatu blog memakan waktu yang cukup lama, maka tingkat bouncing blog tersebut dapat menjadi sangat tinggi atau di atas 50%, hal ini disebabkan pembatalan visitor dalam membuka blog tersebut karena memakan waktu yang cukup lama.
Bagi sebagian besar pengiklan tingkat bouncing yang tinggi akan sangat buruk dampaknya pada iklan yang mereka buat dan ingin ditampilkan. Logikanya boro-boro orang dapat melihat iklan yang ingin ditampilkan sementara loading blognya saja sangat lambat!.
Dengan melihat dan memperhatikan sebagian kecil masalah diatas, disinilah kita dapat dengan sangat jelas melihat keuntungan jika menggunakan AMP Template atau AMP Themes, dengan kecepatan loading yang tidak diragukan lagi maka design suatu template Amp dapat dengan mudah menampilkan konten-konten iklan yang ada pada blog tersebut, tanpa harus menunggu loading yang begitu lama.
Jadi tunggu apalagi, kembangkan blog atau website anda kedepannya dengan menggunakan Amp template.
Sekian dari saya semoga ada manfaatnya
Jadi pengen coba amp juga ane gan
ReplyDeletehaha template yang free masih jarang gan dan agak susah jugak
Deletewah jadi pengen buat blog baru trs pake template amp biar kekinian heheh
ReplyDeleteHaha tapi agak ribet gan kalo mau posting harus ngatur manual
DeleteWah mantab sekali gan
ReplyDeleteThanks om
DeleteWah masih bingung ane gan gmn cara makai amp karena blogger blm support sepenuhnya
ReplyDeleteIya gan berdoa aja agar google secepatnya membenahi biar blogspot support amp sepenuhnya
Deletewah baru dengar ane amp itu apa
ReplyDeleteAmp itu sebuah template yang didesain khusus untuk mobile gan sehingga lebih cepat diakses
Deletebaru tau ane gan tentang aplikasi ini
ReplyDelete#terimakasihinfonya
Sama sama gan
Deletesaya masih tidak paham dengan perbedaan AMP HTML, AMP JS, dan AMP Chace.,
ReplyDeletebisa dikasih gambaran nggak tentang perbedaan ketiganya?
halo amel liya terimakasih sudah berkunjung di blog saya
DeleteAMP HTML adalah bahasa markup atau sebuah kerangka dasar untuk template AMP
AMP JS adalah sebuah javascript yang terdapat dlm sebuah template amp yang digunakan untuk menambah fitur atau memperindah tampilan sebuah blog.
AMP Cache adalah jaringan pengiriman konten berbasis proxy untuk memastikan semua dokumen AMP valid dan meningkatkan kinerja halaman secara otomatis. Bila menggunakan Google AMP Cache, dokumen, semua file Java Script dan semua gambar dapat dimuat dengan lebih efisien.
terima kasih mas,
Deletesaya menggunakan template AMP dan ingin tahu lebih banyak tentang AMP,
sekali lagi terimakasih atas penjelasannya ya :)
Sama sama mbak bila anda ingin mengenal amp lebih jauh anda bisa mengunjungi web resmi amp yaitu amphtml.com.
Delete