%20HTML.webp "Mengenal Accelerated Mobile Pages (AMP) HTML")
Assalamu’alaikum Warahmatullahi Wabarakaatuh,
Halo Sobat Mas Rizky, berjumpa lagi ya di Website yang sama, dalam kesempatan kali ini admin Masrizky.web.id akan berbagi Terkait Mengenal Accelerated Mobile Pages (AMP) HTML.
Accelerated Mobile Pages (AMP) HTML adalah kerangka kerja open-source yang dikembangkan oleh Google untuk membantu memuat halaman web dengan lebih cepat pada perangkat mobile.
AMP dirancang untuk meningkatkan kecepatan dan kinerja halaman web dengan menyederhanakan HTML dan menggunakan format yang dioptimalkan untuk kecepatan.
Dengan menggunakan AMP, pengembang web dapat memastikan bahwa konten mereka ditampilkan dengan cepat dan efisien, memberikan pengalaman pengguna yang lebih baik pada perangkat mobile.
Salah satu cara AMP mempercepat pemuatan halaman adalah dengan membatasi penggunaan JavaScript pihak ketiga dan hanya mengizinkan penggunaan JavaScript yang sudah dioptimalkan oleh AMP itu sendiri.
Selain itu, AMP juga menggunakan teknik lazy loading untuk menunda pemuatan elemen-elemen tertentu sampai elemen tersebut benar-benar diperlukan. Ini berarti bahwa elemen seperti gambar dan video tidak akan dimuat sampai pengguna menggulir ke bagian halaman di mana elemen tersebut berada, sehingga mengurangi waktu pemuatan awal halaman.
Implementasi AMP
Implementasi AMP juga mencakup penggunaan cache AMP yang disediakan oleh Google.
Ketika halaman AMP diindeks oleh mesin pencari, halaman tersebut akan disimpan dalam cache AMP dan dapat diakses langsung dari server cache Google.
Ini berarti bahwa pengguna dapat mengakses halaman dengan lebih cepat karena mereka mengambilnya dari server yang lebih dekat secara geografis dan telah dioptimalkan untuk kecepatan.
Secara keseluruhan, penggunaan AMP HTML dapat membantu situs web untuk mencapai waktu muat yang lebih singkat, meningkatkan pengalaman pengguna, dan mungkin juga berdampak positif pada peringkat SEO karena kecepatan situs adalah salah satu faktor yang dipertimbangkan oleh mesin pencari.
Untuk CSS tidak ada perubahan apapun, untuk HTML ada sedikit struktur berbeda dalam penulisan, diantaranya seperti tag img atau video menjadi amp-img dan amp-video.
AMP Javascript Library
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.ampprojectid.org/v0.js"></script>pada tag head. - Menyertakan
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>pada tag head.
Maka contoh HTML dasar dari AMP HTML kurang lebih seperti ini :
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2024-08-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampprojectid.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>Beberapa hal yang harus diperhatikan
Dalam membuat web berbasis AMP HTML, selain hal di atas ada beberapa hal yang harus diperhatikan diantaranya :
- Tidak boleh ada dua tag
<style>, apabila ada penambahan maka gunakan<style amp-custom>, itupun hanya satu saja yang diizinkan. - Tidak boleh membuat inline CSS seperti
<aside class='sidebar' style='margin-top:0;padding:10px'>. - Script harus external dan menggunakan
async. - Script tidak diperbolehkan menggunakan attribute
type='text/javascript' - Seperti di atas, tidak boleh menggunakan tag
imgtapi harusamp-img
Itu yang saya ingat, nanti saya tambahkan apabila ada aturan-aturan lain yang belum tertulis.
Bisakah Blogspot menggunakan AMP HTML?
Bisa. Dengan susah payah saya sendiri mencoba membuat blogspot berbasis AMP HTML dan akhirnya berhasil. Untuk tutorial lebih jauh penggunaan AMP HTML ini, saya akan coba jelaskan di blog yang sudah saya buat dengan basis AMP HTML.
Masih bingung dengan AMP HTML? Kita sama-sama belajar yu sob…
Demikian informasi tentang Mengenal Accelerated Mobile Pages (AMP) HTML yang dapat kami sampaikan, semoga bermanfaat.
Jika informasi ini bermanfaat, Jangan lupa Share ya sobat mas rizky, Terima Kasih.
Wassalamu’alaikum Warahmatullahi Wabarakaatuh.
