Panduan Permulaan kepada Laman Mudah Alih Dipercepat (AMP)

Laman Mudah Alih Dipercepat adalah inisiatif Google yang berhasrat untuk menyelesaikan masalah terbesar web mudah alih - kelajuan. Pengalaman pengguna yang hebat yang kami reka dengan sangat berhati-hati, sangat lambat di telefon bimbit.

Slowness bukan semata-mata masalah UX, tetapi juga mengurangkan kadar penukaran, dan merugikan kebolehaksesan dengan tidak termasuk pengguna dengan sambungan internet yang lebih perlahan. AMP adalah usaha pasukan yang dilancarkan dengan matlamat untuk membolehkan penerbit membuat kandungan dioptimumkan mudah sekali, dan mempunyai beban dengan serta-merta di mana-mana.

Sejak pelancaran itu, banyak penerbit seperti BBC, The Economist, Guardian News, dan Financial Times telah melaksanakan inisiatif itu, sehingga sekarang kita dapat dengan aman menganggap AMP adalah inovasi yang patut dipertimbangkan untuk semua orang yang ingin tetap berdaya saing di telefon bimbit web.

AMP dalam Tindakan

Sebelum menyelam ke dalam butiran, inilah yang Demo AMP, jadi anda boleh lihat dalam tindakan. Demo boleh diakses pada pautan ini.

Untuk melihat tindakan AMP, anda perlu melakukan dua perkara:

1. Lihat demo sama ada pada peranti mudah alih, atau pada simulator mudah alih, mis. Simulator Peranti Mudah Alih DevTools 'Chrome.
2. Jalankan pertanyaan carian pada bar carian. Oleh kerana Google AMP kini berfungsi terutamanya dengan laman web berita, pilihan terbaik adalah berita baru.

Pada tangkapan skrin di bawah, anda dapat melihat apa yang saya dapat apabila saya menggunakan istilah carian rio olympics.

Seperti yang dapat anda lihat, halaman AMP muncul sebagai Kad Kaya Google, a karusel imej yang dioptimumkan mudah alih, bahawa Google dikeluarkan pada Mei 2016.

Perhatikan bagaimana Google membeza-bezakan halaman AMP dari laman web yang dioptimumkan mudah alih dengan menggunakan 2 label berlainan: AMP dan Mudah Alih. Ia juga bernilai mengklik pada beberapa hasil untuk melihat bagaimana laman web AMP kelihatan seperti, dan berapa pantas ia berjalan di telefon bimbit.

Latar Belakang Teknikal

AMP adalah a standard web dibina di atas teknologi web sedia ada, dan memberi tumpuan kepada kandungan statik. Ia ada 3 bahagian yang berlainan:

1. AMP HTML: HTML diubah suai dengan (1) pembatasan ciri HTML / CSS biasa biasa dan (2) pengenalan tag baharu yang baru (Komponen)
2. AMP JS: menguatkuasakan amalan terbaik untuk mengurangkan masa beban halaman
3. AMP CDN: cache dengan sistem pengesahan terbina dalam, yang lebih mengoptimumkan tapak anda

Jika anda ingin mengetahui lebih lanjut tentang latar belakang teknikal halaman-halaman AMP, periksa video di bawah di mana Google Paul Bakaus memberikan ceramah pengantar pada AMP.

Jika anda ingin menyelam lebih mendalam, ia juga bernilai memahami teknik pengoptimuman yang digunakan oleh AMP untuk mempercepatkan prestasi di telefon bimbit. Dalam video di bawah, Malte Ubl, ketua AMP Engineering menerangkan anatomi AMP secara terperinci.

AMP HTML

Halaman Mudah Alih Dipercepat adalah halaman HTML biasa yang perlu ikuti satu set peraturan untuk menjadikan halaman memuat lebih cepat dan menghasilkan prestasi yang boleh dipercayai.

Mari kita lihat perkara yang paling penting yang perlu anda ketahui mengenainya. Anda juga boleh melihat spesifikasi AMP HTML penuh.

Memutuskan Jika Anda Mahu Halaman AMP yang berasingan

Untuk laman kandungan statik yang sama, anda boleh mempunyai 2 versi berasingan - satu untuk AMP dan satu untuk versi bukan AMP. Anda juga boleh memilih untuk mempunyai hanya satu versi - halaman AMP, dan menggunakannya di mana-mana sahaja. Mengenai sokongan penyemak imbas, Halaman Github AMP mendakwa:

Jika anda masih bimbang tentang sokongan penyemak imbas, semak siaran Google Paul Irish pada Stackoverflow.

Sekiranya anda ingin mempunyai dua muka surat (AMP dan bukan AMP), anda perlu pautan kepada setiap daripada mereka untuk memaklumkan enjin carian tentang kewujudan dua versi.

Tambah kod berikut kepada bahagian halaman bukan AMP:

Juga tambahkan baris berikut kepada bahagian halaman AMP:

Jika anda hanya mempunyai satu halaman AMP, anda masih perlu hubungkannya dengan sendirinya dengan cara berikut:

Memulakan Boilerplate

Projek AMP menawarkan berbeza mula boilerplates anda boleh gunakan untuk memulakan. Lihatlah boilerplate AMP HTML paling mudah di bawah:

          Hai dunia!  

Anda boleh melihat pautan boilerplate halaman HTML biasa dengan menggunakan tag. The > tag menambahkan Perpustakaan JS AMP.

The

Anda hanya boleh mempunyai satu lembaran gaya tertanam, dan terdapat juga banyak peraturan gaya yang tidak dibenarkan, contohnya anda tidak boleh menggunakannya !penting kelayakan, yang @import peraturan, dan pseudo-kelas.

Jangan lupa untuk memeriksa sekatan gaya skrin sebelum mula menulis CSS untuk halaman AMP anda.

Terdapat satu lagi perkara yang penting untuk mengetahui tentang peraturan gaya AMP: anda tidak boleh menggunakan susun atur yang anda mahukan - kerana ia adalah salah satu prinsip AMP untuk membolehkan penyemak imbas mengira ruang setiap elemen pada halaman terlebih dahulu.

Lihatlah susun atur yang disokong dan tidak disokong.

AMP JS

Dokumen AMP boleh termasuk tidak ada penulis yang ditulis, atau mana-mana JavaScript pihak ketiga, namun ini tidak bermakna bahawa Laman Mudah Alih Dipercepat tidak menggunakan JavaScript sama sekali. Pustaka JavaScript AMP (runtuh AMP) bertanggungjawab untuk memuatkan dan membuat halaman AMP dengan pantas oleh menguatkuasakan amalan prestasi terbaik.

Komponen AMP

Komponen AMP adalah ditakrifkan oleh runtuh AMP. Mereka adalah yang disebutkan di atas Tag HTML spesifik AMP anda perlu menggunakan bukan rakan sejawatan biasa mereka, seperti bukannya tag.

Setiap Komponen AMP mengandungi a sumber luaran tertentu (imej, video, benam, dll). Sumber luaran terdedah untuk melambatkan laman web. Matlamat utama penyelesaian ini adalah untuk menguruskan pemuatan sumber luaran dengan cara yang munasabah dengan menjalankannya di dalam kotak pasir.

AMP menyediakan anda 2 jenis Komponen:

1. Komponen terbina dalam: mereka sentiasa ada dalam setiap dokumen AMP, mereka dibina terus ke runtuh AMP. Pada masa ini terdapat lima daripada mereka:
   1. untuk menunjukkan iklan
   2. untuk imej, ia digunakan bukannya tag
   3. untuk menjejaki piksel (digunakan untuk mengira paparan halaman)
   4. untuk membenamkan fail video HTML5 langsung, menggantikan tag
   5. untuk elemen tertanam (boleh digunakan bukan dalam kes tertentu)
2. Komponen Lanjutan: Komponen tambahan, anda mesti dengan jelas memasukkan mereka ke dalam dokumen AMP anda. Terdapat banyak yang berguna, seperti dan , lihat senarai penuh. Ramai daripada mereka boleh digunakan membenamkan kandungan dari perkhidmatan pihak ketiga, seperti dari Twitter atau Instagram.

Ambil perhatian bahawa semua sumber luaran yang dilancarkan, seperti dan mestilah diketahui dan atribut untuk membolehkan penyemak imbas hitung susun atur terlebih dahulu.

AMP CDN

The AMP CDN pada asasnya ialah cache, yang dipanggil Google AMP Cache. Ia mengambil dokumen AMP yang sah, cache dan memuatkannya. AMP CDN juga mempunyai a sistem pengesahan terbina dalam.

Ia bernilai menguji halaman AMP anda sebelum membiarkan mereka pergi dalam talian untuk selamat lulus validator. Anda boleh melakukannya dengan pelbagai cara.

Adalah baik untuk mengetahui bahawa AMP CDN menggunakan protokol HTTP / 2 untuk mencapai prestasi terbaik.

Alat AMP

Terdapat beberapa alat hebat yang dapat membantu anda melaksanakan Laman Mudah Alih Dipercepat, mari kita lihat beberapa dari mereka.

Google menyediakan webmaster dengan mudah Alat laporan status AMP yang menunjukkan bilangan halaman AMP yang berjaya diindeks dan ralat yang berkaitan dengan AMP juga.

Lullabot's AMP PHP Library membolehkan anda menukar laman HTML anda ke AMP HTML, dan juga melaporkan pematuhan mana-mana dokumen HTML dengan piawaian AMP.

Sekiranya anda ingin menggunakan AMP di laman WordPress anda, baca tutorial Yoast tentang bagaimana untuk menyiapkan WordPress untuk AMP, dan bagaimana AMP berfungsi dengan plugin Yoast SEO.

Anda juga boleh menyemak Automattic's AMP plugin yang membolehkan anda untuk membolehkan Pages Mobile Dipercepat di laman WordPress anda.

Pertimbangan lanjut

Sekiranya anda masih tidak yakin, lihat video tentang a ujian kelajuan pantas di bawah.

Jonathan Abrams, pengasas Nuzzel membuat tuntutan yang lebih baik, kerana beliau menegaskan bahawa walaupun tapak yang dioptimumkan mudah alih seperti New York Times memuat lebih cepat - bukannya mengambil masa tiga saat untuk memuatkan halaman purata, memuatkan halaman kurang daripada setengah saat apabila Laman Mudah Alih Dipercepat Google diaktifkan.

Anda juga boleh membaca artikel menarik di Verge mengenai persaingan Google AMP dan Artikel Instan Facebook. Sekiranya anda masih mencari jawapan untuk "apa yang ditangkap?", Lihat siaran Yoast yang menyebut bahawa ketakutan bahawa AMP pada dasarnya membawa kita kembali ke masa internet sebelum 2000, dan soalan sama ada ia benar-benar satu standard terbuka.

.