Lompat ke konten Lompat ke sidebar Lompat ke footer

AMP dan Penjelasannya

Baru-baru ini proyek AMP menjadi semakin populer, terutama mengingat itu didukung oleh Google dan halaman yang dibuat dengan mengikuti persyaratan Halaman Seluler yang Dipercepat akan ditampilkan lebih cepat di perangkat seluler, disukai oleh mesin pencari dan ditempatkan lebih tinggi dalam pencarian hasil. Tapi apa sebenarnya HTML AMP itu? Apa yang ada di balik singkatan dan semua kebisingan? Mari lihat.

HTML AMP sebenarnya adalah bagian dari HTML untuk halaman web materi penulis seperti artikel berita dengan cara yang membuktikan kualitas fungsi dasar khusus.

Menjadi bagian yang diatribusikan ke HTML, itu membuat beberapa batasan pada koleksi lengkap tag dan fungsionalitas yang dapat dicapai dengan HTML, namun itu tidak benar-benar melibatkan pertumbuhan mesin rendering baru: agen pengguna yang ada dapat membuat HTML AMP sama dengan semua berbagai HTML lainnya.

Bertujuan untuk mempercepat halaman web dan memberikan kinerja yang lebih baik, proyek AMP pada dasarnya menghapus kode HTML biasa menjadi apa yang dikenal sebagai HTML AMP. Bersama dengan beberapa tag HTML biasa diganti dengan yang ber-AMP yang secara khusus ditayangkan selama pemuatan halaman oleh satu-satunya skrip di halaman yang dapat diterima - pustaka AMP (Anda sudah bisa menebaknya). Fitur stripping down utama lainnya adalah tidak ada style sheet eksternal yang diperbolehkan - semua style kustom ditempatkan dalam tag style di dalam.

Prinsip dan kontrol

Fitur utama dari proyek HTML AMP adalah bahwa halaman yang menggunakannya harus independen dari proyek itu sendiri, jadi menyediakan versi halaman reguler juga disarankan tetapi tidak wajib. Hal yang baik adalah perusahaan seperti Google, Pinterest dan Twitter kemungkinan besar akan menyimpan halaman amp Anda dan menampilkannya dari cache mereka sendiri.

Data HTML AMP pasti dapat dimuat ke server bersih dan dikirimkan seperti file HTML lainnya; tidak diperlukan komposisi eksklusif untuk server web. Namun, mereka juga dibuat untuk disajikan secara opsional melalui sistem penyediaan AMP khusus yang mem-proxy dokumen AMP. Data khusus ini melayani mereka melalui awal yang unik dan diizinkan untuk menggunakan modifikasi pada dokumen yang memberikan keuntungan kinerja tambahan. Pilihan pengoptimalan yang belum selesai yang mungkin benar-benar ditangani oleh program penyajian adalah:

- Ganti referensi gambar dengan gambar yang diskalakan ke area pandang pelanggan.

- Gambar sebaris yang terlihat di paruh.

- Variabel CSS sebaris.

- Preload item yang ditingkatkan.

- Kurangi HTML dan CSS.

HTML AMP menerapkan paket komponen yang dikontribusikan tetapi dikendalikan secara terpusat serta diatur secara khusus untuk menggabungkan kinerja yang sangat berkembang seperti galeri gambar yang dapat dilihat dalam dokumen HTML AMP . Meskipun mengizinkan gaya dokumen yang menggunakan CSS yang dibuat khusus, ia tidak mengizinkan penerbit menulis JavaScript di luar apa yang disajikan di seluruh materi yang disesuaikan untuk mencapai tujuan aksinya.

Dengan memanfaatkan format AMP , pembuat materi membuat konten web dalam file AMP yang dapat di-crawl (berdasarkan aturan robots.txt), disimpan dalam cache, dan diungkapkan oleh pihak ketiga.

Markup yang diminta

Untuk menjadi AMP, mark-up halaman web harus mengikuti beberapa persyaratan:

Ini harus dimulai dengan <!doctype html>langsung diikuti oleh <html amp>atau alternatif di mana html akan diikuti oleh karakter seperti petir Unicode yang aneh.

Halaman AMP harus berisi <head>dan <body>tag wajib yang secara umum HTML dianggap opsional untuk ditentukan secara eksplisit. Sebagai anak pertama dari <head>tag <meta charset="utf-8">harus didefinisikan.

Juga <link rel="canonical" href=" ~ some kind of URL here including the present one if there isn't a regular (non AMP page) ~ " />, diikuti oleh <meta name="viewport" content="width=device-width,minimum-scale=1">tag di mana mereka juga merekomendasikan untuk menetapkan initial-scale=1atribut tambahan tetapi tidak sebagai suatu keharusan.

Periksa daftar persyaratan praktis di bawah ini:

Kondisi data HTML AMP

Memanfaatkan skrip

Semua skrip yang disertakan dalam halaman AMP harus dimuat secara asinkron - artinya harus menggunakan asyncatribut tersebut. Ada batasan ketat terkait skrip di AMP - termasuk di dalamnya hampir dilarang. Satu-satunya pengecualian adalah skrip AMP itu sendiri - skrip inti:

<script async src="https://cdn.ampproject.org/v0.js"></script>yang harus dilakukan <head>agar runtime AMP dimuat, komponen AMP diperpanjang dan akhirnya - skrip dari jenis application/ld+jsonItu cukup banyak - yang lainnya sangat dilarang. Jadi, jika Anda akan membuat halaman AMP - lupakan skrip favorit Anda - ganti fungsionalitas yang mereka sediakan dengan salah satu dari komponen AMP yang diperluas, atau temukan cara untuk mengatasinya. JavaScript dalam bentuk apapun juga dilarang di target link.

Tips aplikasi stylesheet

Dan karena kita berbicara tentang melupakan - lupakan lembar gaya eksternal. Menautkan mereka di halaman AMP berdasarkan Template eCommerce AMP dilarang - semua gaya terjadi sebaris. Ada juga pembatasan <style>tag diperbolehkan. Harus ada tag gaya khusus yang disebut <style amp-boilerplate>dengan konten tetap (Anda dapat dengan mudah menemukannya di halaman dokumentasi AMP) dan satu <style amp-custom>tag tempat Anda harus menempatkan semua gaya khusus yang pada akhirnya mungkin perlu Anda tambahkan ke halaman yang dibuat dengan AMP One Template Halaman . Itu dia.

Memasukkan tag tindakan, jenis font, dll.

Metadata Grafik Terbuka bukanlah bagian wajib dari halaman AMP tetapi sangat mendorong pengembang untuk menambahkannya - dengan kata lain - tidak ada dalam daftar HARUS DILAKUKAN.

Beberapa tag HTML dilarang di AMP dan beberapa yang paling umum digunakan diganti dengan like <div class="img"><img></div>gotnya sendiri <amp-img>. iframe, videodan audiodapatkan amp-awalan juga. Jika ada tautan dengan targetatribut - nilainya harus_blank

Atribut HTML yang dimulai dengan awalan ontidak diperbolehkan. Hanya murni onyang diperbolehkan (tidak ada sufiks) dan seperti yang telah dikatakan sebelumnya - AMP juga melarang <style>tag. (Anda akan menemukan daftar lengkap Tag HTML yang diganti di bawah ini di artikel ini)

Tidak ada perpustakaan font untuk Anda di halaman AMP Anda kecuali untuk apa yang disebut penyedia font yang masuk daftar putih yang saat ini adalah font Google (tentu saja), Fonts.com dan Font mengagumkan. Jika tidak, Anda dapat menghosting sendiri font Anda dan memasukkannya ke dalam gaya Anda melalui @font-facetetapi tidak dengan @import- ini juga dibatasi.

Kerja

Kerja yang dapat diprediksi tentunya merupakan target tata letak yang penting dalam hal HTML AMP. Pada dasarnya kami memperbaiki untuk mengurangi jangka waktu hingga konten web suatu halaman dapat dikonsumsi / ditangani oleh pelanggan. Secara rinci, hal ini menandakan bahwa:

- Permintaan HTTP penting untuk merender dan menata letak file sepenuhnya harus dikurangi.

- Sumber daya, misalnya, gambar atau iklan hanya perlu diluncurkan dengan asumsi bahwa iklan tersebut paling mungkin dilihat oleh pengunjung.

- Browser web harus benar-benar memiliki kapasitas untuk menghitung area yang dibutuhkan oleh setiap sumber daya pada halaman web tanpa mengirimkan sumber daya itu.

Meta-data

Ini benar-benar disarankan agar data HTML AMP dianotasi memiliki metadata standar: Open Graph Protocol, Twitter Cards, dll.

Sangat disarankan agar halaman HTML AMP diberi label menggunakan schema.org/CreativeWork atau salah satu jenisnya yang lebih spesifik, misalnya, schema.org/NewsArticle atau schema.org/BlogPosting. (Anda pasti dapat menemukan semua situs web di situs internet AMP resmi - https://www.ampproject.org).

Seluruh tabel Tag HTML yang dipertukarkan

Tag HTML dapat diterapkan tanpa perubahan dalam HTML AMP. Beberapa tag dilengkapi dengan tag kustom yang setara (misalnya <div class="img"><img></div>dan <amp-img>) dan tag lainnya langsung dilarang:

Penggunaan validator perlu menjalankan daftar putih yang dibentuk pada spesifikasi HTML5 dengan tag yang disebutkan di atas dihapus. Lihat Adendum Tag AMP.

Komentar

Komentar HTML Relatif HTML Bersyarat tidak diaktifkan.

Properti HTML

Nama atribut yang dimulai dengan on(seperti onclick atau lainnya onmouseover) ditolak dalam HTML AMP. Fitur yang memiliki nama literal on(tanpa akhiran) diizinkan.

The styleatribut harus tidak diterapkan.

Karakteristik yang berhubungan dengan XML, seperti xmlns, xml: lang, xml: base, dan xml: spaceditolak dalam AMP HTML.

Atribut inner AMP yang diawali dengan i-amp-dilarang di HTML AMP .

Kelas

Nama kelas AMP internal diawali dengan -amp-dan i-amp-tidak diizinkan dalam HTML AMP.

Kunjungi informasi AMP untuk mengetahui signifikansi nama kelas yang diawali menggunakan amp-. Pengoperasian jenis kelas ini diizinkan dan ditandai untuk memberikan modifikasi pada sejumlah karakteristik waktu proses dan ekstensi AMP .

Semua nama kelas tertulis lainnya diaktifkan di markup HTML AMP.

ID

Batin AMP ID diawali dengan -amp-dan i-amp-dilarang di AMP HTML.

Lihat informasi AMP untuk ekstensi tertentu sebelum menggunakan amp-dan ID AMP untuk menghindari konflik dengan fitur yang dipastikan oleh jenis tambahan ini, seperti amp-access.

Semua ID resmi alternatif diizinkan di markup HTML AMP.

Hyper-link

The javascript: Skema dikecualikan.

Stylesheet

Tag semantik yang signifikan, serta fitur kustom AMP , memiliki tampilan default untuk menghasilkan pembuatan dokumentasi responsif dengan cukup mudah. Alternatif untuk menyisih dari varietas default dapat disediakan di masa mendatang.

Font yang dibuat khusus

Penulis dapat menggunakan lembar gaya untuk gaya font yang dibuat khusus. 2 pendekatan yang disediakan adalah tag lampirkan yang menunjukkan dealer font yang masuk daftar putih dan @font- face pengenalan.

Contoh yang baik:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

Dealer font dapat dengan mudah masuk daftar putih jika mereka mempertahankan integrasi hanya CSS dan menawarkan melalui HTTPS. Asal berikut ini umumnya didukung untuk penyajian font melalui tag tautan web:

- Fonts.com: https://fast.fonts.net

- Font Google : https://fonts.googleapis.com

- Font Luar Biasa: https://maxcdn.bootstrapcdn.com

CATATAN PELAKSANA: Menempatkan dalam daftar khusus ini memerlukan pengalihan ke aturan AMP Cache CSP. Penulis sebenarnya bebas untuk menyediakan semua font khusus melalui @font-facearahan CSS melalui CSS khusus mereka. Font yang digunakan @font-faceharus diperoleh melalui skema HTTP atau HTTPS.

Waktu proses AMP

AMP runtime hanyalah bagian dari JavaScript yang berfungsi di file AMP apa pun . Ini memberikan implementasi untuk komponen kustom AMP, menangani peluncuran material dan memprioritaskan dan juga menyediakan validator waktu proses untuk HTML AMP untuk operasi sambil meningkatkan.

Waktu proses AMP dipasang oleh <script src="https://cdn.ampproject.org/v0.js"></script>tag wajib di dalam dokumen AMP <head>.

Waktu proses AMP dapat disetel ke status pengembangan untuk semua jenis halaman. Formulir pengembangan akan mengarah ke persetujuan AMP pada halaman web yang ditanam, yang pada gilirannya akan melepaskan status afirmasi dan semua jenis gangguan ke konsol kontrol pengembang JavaScript. Formulir pengembangan sebenarnya dapat dilakukan melalui penambahan #development= 1ke ALAMAT SITUS WEB halaman web.

Data

Sumber daya seperti gambar, rekaman video, file rekaman suara, atau iklan lain harus diunggulkan ke dalam file HTML AMP melalui fitur yang dibuat khusus seperti <amp-img>. Ini berjudul "materi terkontrol" hanya karena apakah dan kapan mereka pasti akan dipasang dan dipromosikan ke pengguna dipilih oleh AMP runtime.

Sama sekali tidak ada jaminan pasti mengenai perilaku pemuatan runtime AMP , namun biasanya harus melakukan segala upaya untuk memuat sumber dengan cukup cepat, untuk memastikan sumber tersebut dipasang pada saat pengguna ingin melihatnya. Waktu proses harus benar-benar membedakan materi yang disajikan di viewport dan upaya untuk memperkirakan modifikasi pada viewport dan sumber pramuat yang sesuai.

AMP runtime kapan saja dapat membuat keputusan untuk membongkar sumber yang umumnya tidak ada di viewport atau menggunakan kembali paket sumber daya yang berguna misalnya, iframe untuk menurunkan seluruh penggunaan RAM.

Komponen AMP

HTML AMP menerapkan elemen yang dibuat khusus yang disebut "elemen AMP" untuk menggantikan tag pemuatan sumber daya tersemat seperti <div class="img"><img>;/div;dan ;video;dan untuk menjalankan elemen dengan komunikasi kompleks seperti lightbox ilustrasi atau carousel lainnya.

Lihat spesifikasi komponen AMP untuk aspek elemen yang didukung.

Hanya ada 2 jenis elemen AMP yang diperkuat:

1. Bawaan

2. Meningkat

Item bawaan biasanya tersedia di dalam file AMP dan memiliki elemen yang dibuat khusus seperti ;amp-img;. Komponen yang diperluas harus disediakan secara eksplisit di dalam dokumen.


Fitur dasar

layout, width, height, media, placeholder,fallback

Fitur ini menentukan tata letak elemen. Tujuan penting di sini hanyalah untuk memastikan bahwa elemen tersebut dapat ditampilkan dan areanya sendiri dapat dipesan dengan tepat sebelum JavaScript atau sumber daya yang jauh dan berguna diunduh.

Lihat Sistem Tata Letak AMP untuk informasi mendetail terkait sistem desain.

on

The on karakteristik digunakan untuk menginstal event handler pada komponen. Situasi yang dipertahankan menurut fiturnya.

Nilai untuk format tersebut sebenarnya adalah bahasa khusus domain biasa dalam bentuk:

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Sebagai contoh: on="tap:fooId.showLightbox"

Dalam kasus yang methodNamedilewatkan solusi default dijalankan jika ditentukan untuk fitur tersebut. Contoh: on = "tap: fooId"

Beberapa praktik, jika dicatat, dapat menerima argumen. Argumen dikarakterisasi di antara tanda kurung dalam key= valuenotasi. Nilai yang disetujui adalah:

- string polos tanpa tanda kutip: simple-value;.

- string yang dikutip: " string value"atau ' string value';.

- nilai boolean: true atau lainnya false;.

- angka: 11atau 1.1.

Anda pasti bisa memberi perhatian pada beberapa kejadian pada sebuah elemen dengan memisahkan dua aktivitas menggunakan titik koma ;.

Contoh yang benar: on=" submit-success: lightbox1; submit-error: lightbox2"

Lihat lebih lanjut tentang Tindakan dan Acara AMP di situs web resmi.

Komponen diperpanjang

Komponen yang diperluas hanyalah komponen yang tidak selalu dikirimkan bersama AMP runtime. Sebenarnya, mereka harus diberikan dengan jelas di file.

Komponen ekstensif dimuat dengan memberikan script;tag di kepala dokumen yang mirip dengan ini:

script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"/script

The script tag pasti harus memiliki asyncatribut dan harus memiliki custom-element karakteristik referensi judul komponen.

Implementasi runtime mungkin menggunakan nama untuk membuat tempat penampung untuk jenis komponen ini.

ALAMAT SITUS WEB skrip harus dimulai dengan "https://cdn.ampproject.org" dan harus mengikuti standar yang cukup tepat / v \ d+/ [a-z-] +-( latest | \ d+ | \ d+. \ d+). js.

Posting Komentar untuk "AMP dan Penjelasannya"