Panduan Pemula untuk Halaman Seluler yang Dipercepat (AMP)

Laman Seluler yang Dipercepat adalah inisiatif Google yang bermaksud untuk memecahkan masalah terbesar dari web seluler - kecepatan. Pengalaman pengguna yang luar biasa yang kami rancang dengan sangat hati-hati, sangat lambat di ponsel.

Kelambatan bukan hanya masalah UX, tetapi juga mengurangi tingkat konversi, dan merusak aksesibilitas dengan mengecualikan pengguna dengan koneksi internet yang lebih lambat. AMP adalah upaya tim yang diluncurkan dengan tujuan untuk memungkinkan penerbit buat konten yang dioptimalkan untuk seluler sekali, dan memilikinya memuat langsung di mana-mana.

Sejak diluncurkan, banyak penerbit seperti BBC, The Economist, Guardian News, dan Financial Times telah mengimplementasikan inisiatif ini, jadi sekarang kita dapat dengan aman menganggap AMP adalah sebuah inovasi yang layak dipertimbangkan untuk semua orang yang ingin tetap kompetitif di ponsel. web.

AMP Beraksi

Sebelum menyelam ke detail, ini dia Demo AMP, jadi kamu bisa melihatnya dalam aksi. Demo dapat diakses di tautan ini.

Untuk melihat AMP beraksi, Anda perlu melakukan dua hal:

Melihat demo di perangkat seluler, atau di simulator seluler, mis. Simulator Perangkat Seluler Chrome DevTools.
Jalankan permintaan pencarian di bilah pencarian. Karena Google AMP saat ini bekerja terutama dengan situs berita, pilihan terbaik adalah berita baru.

Pada tangkapan layar di bawah, Anda dapat melihat apa yang saya dapatkan ketika saya menggunakan istilah pencarian Olimpiade Rio.

Demo Halaman Seluler yang Dipercepat pada iPad

Seperti yang Anda lihat, halaman AMP muncul sebagai Google Rich Cards, Sebuah carousel gambar yang dioptimalkan untuk seluler, bahwa Google dirilis pada Mei 2016.

Perhatikan bagaimana Google membedakan halaman AMP dari halaman lain yang dioptimalkan untuk seluler dengan menggunakan 2 label berbeda: AMP dan Mobile-friendly. Sebaiknya klik beberapa hasil untuk melihat bagaimana tampilan halaman web AMP, dan seberapa cepatnya berjalan di seluler.

Latar belakang teknis

AMP adalah a standar web dibangun di atas teknologi web yang ada, dan fokus pada konten statis. Memiliki 3 bagian berbeda:

AMP HTML: HTML yang dimodifikasi dengan (1) pembatasan fitur HTML / CSS reguler tertentu dan (2) pengenalan tag khusus baru (Komponen)
AMP JS: memberlakukan praktik terbaik untuk mengurangi waktu pemuatan halaman
AMP CDN: cache dengan sistem validasi bawaan, yang selanjutnya mengoptimalkan situs Anda

Jika Anda ingin tahu lebih banyak tentang latar belakang teknis halaman AMP, lihat video di bawah ini di mana Google Bakrie memberikan bicara pengantar di AMP.

Jika Anda ingin menyelam lebih dalam, perlu juga dipahami teknik pengoptimalan apa yang digunakan AMP untuk mempercepat kinerja di seluler. Dalam video di bawah ini, Malte Ubl, pimpinan AMP Engineering menjelaskan anatomi AMP secara terperinci.

AMP HTML

Laman Seluler yang Dipercepat adalah halaman HTML biasa kebutuhan itu ikuti seperangkat aturan untuk membuat halaman memuat lebih cepat dan menyajikan dengan kinerja yang andal.

Mari kita lihat hal-hal paling penting yang perlu Anda ketahui tentang hal itu. Anda juga dapat melihat spesifikasi HTML AMP lengkap.

Putuskan Jika Anda Ingin Halaman AMP Terpisah

Untuk halaman konten statis yang sama, Anda dapat memilikinya 2 versi terpisah - satu untuk AMP dan satu untuk versi non-AMP. Anda juga dapat memilih untuk memiliki hanya satu versi - halaman AMP, dan gunakan di mana-mana. Tentang dukungan browser, Klaim laman Github AMP:

Jika Anda masih khawatir tentang dukungan peramban, lihat pos Google Paul Paul di Stackoverflow.

Jika Anda ingin memiliki dua halaman (AMP dan non-AMP), Anda harus melakukannya tautan ke masing-masing untuk menginformasikan mesin pencari tentang keberadaan dua versi.

Tambahkan kode berikut ke bagian dari halaman non-AMP:

Tambahkan juga baris berikut ke bagian dari halaman AMP:

Jika Anda hanya memiliki satu halaman AMP, Anda masih perlu melakukannya menghubungkannya dari dirinya sendiri dengan cara berikut:

Mulai Boilerplate

Penawaran AMP Project berbeda mulai boilerplate Anda dapat menggunakannya untuk memulai. Lihatlah boilerplate AMP HTML paling sederhana di bawah ini:

          Halo Dunia!

Anda dapat melihat bahwa boilerplate menautkan halaman HTML biasa dengan menggunakan menandai. Itu > tag menambahkan Perpustakaan AMP JS.

 Itu   
Anda hanya dapat memilikinya satu stylesheet tertanam, dan ada juga banyak aturan gaya yang tidak diizinkan, misalnya Anda tidak dapat menggunakan !penting kualifikasi, yang @impor aturan, dan pseudo-class.
 Jangan lupa untuk memeriksa pembatasan stylesheet sebelum mulai menulis CSS untuk halaman AMP Anda.
 Ada hal lain yang penting untuk diketahui tentang aturan gaya AMP: Anda tidak dapat menggunakan tata letak yang Anda inginkan - karena itu adalah salah satu prinsip AMP untuk memungkinkan browser menghitung ruang setiap elemen di halaman terlebih dahulu.
 Lihatlah tata letak yang didukung dan tidak didukung.
 AMP JS
 Dokumen AMP dapat termasuk tidak ada yang ditulis penulis, atau JavaScripts pihak ketiga, namun ini tidak berarti bahwa Halaman Seluler yang Dipercepat tidak menggunakan JavaScript sama sekali. Pustaka JavaScript AMP (runtime AMP) bertanggung jawab untuk memuat dan merender halaman AMP dengan cepat menegakkan praktik kinerja terbaik.
 Komponen AMP
 Komponen AMP adalah didefinisikan oleh runtime AMP. Mereka yang disebutkan di atas Tag HTML khusus AMP Anda perlu menggunakan sebagai pengganti rekan regulernya, seperti  bukannya  menandai.
 Setiap Komponen AMP berisi a sumber daya eksternal tertentu (gambar, video, embed, dll.). Sumber daya eksternal cenderung memperlambat situs web. Tujuan utama dari solusi ini adalah untuk mengelola pemuatan sumber daya eksternal dengan cara yang masuk akal dengan menjalankannya di dalam kotak pasir.
 AMP memberi Anda 2 jenis Komponen:
 Komponen Bawaan: mereka selalu tersedia di setiap dokumen AMP dibangun langsung ke runtime AMP. Saat ini ada lima di antaranya:  untuk menampilkan iklan
  untuk gambar, ini digunakan sebagai ganti  menandai
  untuk melacak piksel (digunakan untuk menghitung tampilan halaman)
  untuk embed file video HTML5 langsung, ganti  menandai
  untuk elemen yang disematkan (bisa digunakan sebagai ganti  dalam kasus-kasus tertentu)
 
 Komponen diperpanjang: Komponen tambahan, Anda harus secara eksplisit memasukkan mereka ke dalam dokumen AMP Anda. Ada banyak yang bermanfaat, seperti  dan , lihat daftar lengkap. Banyak dari mereka dapat digunakan untuk itu sematkan konten dari layanan pihak ketiga, seperti dari Twitter atau Instagram.
 
Perhatikan bahwa semua sumber daya yang dimuat secara eksternal, seperti  dan  pasti sudah tahu  dan  atribut untuk mengaktifkan browser hitung tata letak sebelumnya.
 AMP CDN
 Itu AMP CDN pada dasarnya adalah cache, disebut Google AMP Cache. Itu mengambil dokumen AMP yang valid, cache dan memuatnya. AMP CDN juga memiliki sistem validasi bawaan.
 Itu layak menguji halaman AMP Anda sebelum membiarkan mereka online agar aman lulus validator. Anda dapat melakukannya dengan berbagai cara.
  GAMBAR: Proyek AMP
Baik untuk mengetahui bahwa AMP CDN menggunakan protokol HTTP / 2 untuk mencapai kinerja terbaik.
 Alat AMP
 Ada beberapa alat hebat yang dapat membantu Anda menerapkan Halaman Seluler yang Dipercepat, mari kita lihat beberapa di antaranya.
 Google menyediakan webmaster dengan praktis Alat laporan status AMP yang menunjukkan jumlah halaman AMP yang berhasil diindeks, dan juga kesalahan terkait AMP.
 Lullabot Perpustakaan PHP AMP memungkinkan Anda untuk mengonversi halaman HTML Anda ke AMP HTML, dan juga melaporkan kepatuhan dokumen HTML apa pun dengan standar AMP.
 Jika Anda ingin menggunakan AMP di situs WordPress Anda, baca tutorial Yoast tentang cara mengatur WordPress untuk AMP, dan bagaimana AMP bekerja dengan plugin Yoast SEO.
 Anda juga dapat melihat Automattic Plugin AMP yang memungkinkan Anda untuk mengaktifkan Halaman Seluler yang Dipercepat di situs WordPress Anda.
  IMAGE: WordPress.org
Pertimbangan Lebih Lanjut
 Jika Anda masih tidak yakin, lihat video tentang a tes kecepatan cepat di bawah.
 
 Jonathan Abrams, pendiri Nuzzel membuat klaim yang lebih baik, karena ia menegaskan bahwa bahkan situs yang dioptimalkan untuk seluler seperti New York Times memuat lebih cepat secara signifikan - alih-alih mengambil tiga detik untuk memuat halaman rata-rata, sebuah halaman memuat kurang dari setengah detik ketika Google Mobile Accelerated Pages diaktifkan.
 Anda juga dapat membaca artikel yang menarik di Verge tentang persaingan Google AMP dan Artikel Instan Facebook. Jika Anda masih mencari jawaban untuk "apa sasarannya?", Lihat posting Yoast yang menyebutkan kekhawatiran bahwa AMP pada dasarnya membawa kita kembali ke waktu internet sebelum tahun 2000, dan mempertanyakan apakah itu benar-benar standar terbuka.
 .