Mengenal Accelerated Mobile Pages (AMP)

0
70

Tidak dipungkiri saat ini Smarphone dan Tablet merevolusi bagaimana cara kita mengakses internet. Saat ini sejumlah besar orang membaca berita melalui ponsel mereka. Publisher atau situs media di seluruh dunia menggunakan mobile web untuk menjangkau semua pembaca ini, Tapi sayangnya untuk memuat sebuah halaman web pada mobile terlalu lama, hal ini menyebabkan publisher atau media kehilangan banyak pembaca dan berkurangnya penghasilan publisher. Dikarenakan karena waktu muat halaman web lebih lama sehingga pembaca meninggalkan web tersebut.

Google telah berdiskusi dengan publisher dan perusahaan teknologi dunia mengumumkan sebuah inisyatif proyek open source baru yang disebut Accelerated Mobile Pages yang bertujuan untuk meningkatkan kinerja web mobile secara drastis. Dengan adanya AMP ini halaman web yang kaya akan konten video, animasi dan grafis dapat dimuat pada halaman web dalam seketika. Diharapkan dengan kode yang sama dapat bekerja di beberapa platform dan perangkat sehingga dapat muncul diperangkat manapun tidak peduali jenis ponsel, tablet atau perangkat mobile yang digunakan. Proyek ini bergantuk dengan HTML AMP, framework open source terbaru yang dibangun dari teknologi web yang ada, memungkinkan website untuk membangun halaman web yang ringan.

Apa itu Accelerated Mobile Pages (AMP) ?

AMP adalah cara untuk membangun halaman web dengan konten statis yang dapat dimuat dalam seketika. AMP terdiri dari tiga bagian yang berbeda:

AMP HTML

AMP HTML pada dasarnya adalah HTML yang diperluas dengan properti AMP khusus. File AMP HTML paling sederhana tampak 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>

Meski sebagian besar tag dalam halaman AMP HTML adalah tag HTML reguler, sebagian tag HTML digantikan dengan tag spesifik AMP (lihat juga Tag HTML dalam spesifikasi AMP). Elemen khusus ini disebut sebagai komponen AMP HTML, membuat pola-pola umum menjadi mudah diimplementasikan berdasarkan kinerja.

Misalnya, tag amp-img menyediakan dukungan srcset lengkap meski dalam browser yang belum mendukungnya. Pelajari cara membuat halaman AMP HTML pertama Anda.

AMP JS

Pustaka AMP JS mengimplementasikan semua praktik kinerja terbaik AMP, mengelola pemuatan sumber daya dan memberi Anda tag khusus seperti yang disebut di atas, yang semuanya memastikan perenderan halaman Anda dengan cepat.

Di antara optimalisasi terbesar adalah fakta bahwa hal tersebut memastikan semua yang berasal dari sumber daya eksternal menjadi asinkron, sehingga tidak ada satu pun yang bisa menghalangi perenderan di halaman.

Teknik kinerja lainnya meliputi dilakukannya sandbox semua iframe, perhitungan awal layout setiap elemen pada halaman sebelum sumber daya dimuat dan menonaktifkan pemilih CSS yang lambat.

Untuk mengetahui selengkapnya tentang tidak hanya optimalisasi namun juga pembatasannya, baca spesifikasi AMP HTML.

Google AMP Cache

Google AMP Cache adalah jaringan penyajian materi berbasis proxy untuk menyajikan semua dokumen AMP yang valid. Jaringan ini mengambil halaman AMP HTML, menempatkannya dalam cache, dan memperbaiki halaman kinerja secara otomatis. Ketika menggunakan Google AMP Cache, semua file JS dan semua gambar yang dimuat dari asal yang sama yang menggunakan HTTP 2.0 untuk efisiensi maksimum.

Cache ini juga disertai dengan sistem validasi bawaan yang memastikan bahwa halaman dijamin bekerja, dan halaman tidak bergantung pada sumber daya eksternal. Sistem validasi ini menjalankan serangkaian pernyataan yang mengonfirmasi terpenuhinya markup halaman sesuai dengan spesifikasi AMP HTML.

Versi validator lainnya hadir dalam bentuk dibundel dengan setiap halaman AMP. Versi ini bisa mencatat kesalahan validasi secara langsung ke konsol browser ketika halaman dirender, sehingga Anda bisa melihat bagaimana perubahan kompleks dalam kode Anda mungkin berdampak pada kinerja dan pengalaman pengguna.

Jika tertarik untuk belajar AMP bisa langsung ke https://ampbyexample.com/, terdapat banyak contoh-contoh menggunakan AMP.

Sumber : https://www.ampproject.orghttps://chromplex.com/google-memperkenalkan-proyek-amp-accelerated-mobile-pages-apa-itu-proyek-amp/

NO COMMENTS

LEAVE A REPLY