Cara Menjamin Halaman Arahan Anda Sesuai dengan AMP

Saat project Accelerated Mobile Pages (AMP) dimulai, project tersebut sebagian besar dibatasi untuk konten statis. Kerangka dasar membantu sebagian besar penerbit, memberi mereka cara untuk membangun pengalaman penemuan dan konsumsi yang lebih cepat dan lancar bagi pembaca.

Namun, bertahun-tahun kemudian, banyak yang telah berubah. Permulaan satu dimensi AMP digantikan oleh kumpulan alat yang berevolusi yang mampu membangun seluruh situs web. Dalam hal meluncurkan pengalaman pemuatan cepat yang serba guna ini, tujuan utama AMP tetap sama: Membuat web seluler lebih cepat.

Tapi, cara yang dicapai berbeda. Dengan solusi dan teknik lanjutan, desainer telah menemukan cara untuk memenuhi batasan AMP sekaligus membuat halaman yang, bagi pengguna biasa, tidak terlihat atau terasa dibatasi sama sekali.

Dengan pembaruan dan taktik desain yang selalu berubah, apa yang harus diharapkan seorang desainer saat ini saat mencoba memenuhi standar kepatuhan AMP?

7 Prinsip desain halaman yang sesuai dengan AMP

Meskipun banyak hal yang dapat dilakukan AMP telah berubah, prinsip desain yang memandu developernya belum berubah. Menurut situs web AMP, untuk membuat halaman yang sesuai dengan AMP, Anda harus mengikuti tujuh pilar ini saat mendesain dalam kerangka kerja:

1. Pengalaman Pengguna > Pengalaman Pengembang > Kemudahan Implementasi

Sementara AMP adalah proyek sumber terbuka, ini diprakarsai oleh Google. Dan, seperti semua hal tentang Google, pengalaman pengguna adalah prioritasnya. “Jika ragu,” kata pembuat AMP, “lakukan yang terbaik untuk pengalaman pengguna akhir, meskipun itu berarti akan lebih sulit bagi pembuat halaman untuk membuat atau untuk mengimplementasikan pengembang perpustakaan.”

2. Hanya lakukan sesuatu jika dapat dilakukan dengan cepat

Sebagai proyek sumber terbuka, desainer dapat membuat AMP sendiri. Namun, tujuan akhir dari halaman seluler yang dipercepat adalah akselerasi. Kustomisasi adalah permainan yang adil, dan diharapkan, tetapi hanya atas nama kecepatan. Pembuat AMP memperingatkan: “Jangan memasukkan komponen atau fitur ke AMP yang tidak dapat berjalan dengan baik pada 60fps atau menghambat pengalaman pemuatan instan pada perangkat seluler paling umum saat ini.”

3. Jangan mendesain untuk hipotetis browser masa depan yang lebih cepat

Pembuat AMP menyukai framework mereka seperti pengguna web menyukai halaman mereka: sekarang. Platform dibuat untuk tampil di web seluler hari ini, bukan besok. Jadi desainer harus membangun dengan mempertimbangkan hal itu, bukan browser hipotetis yang bekerja dengan kecepatan mach.

Pada saat yang sama, developer masa kini membentuk masa depan AMP. Jadi, hanya karena Anda tidak dapat membuat sesuatu berfungsi sekarang, bukan berarti Anda tidak menginginkannya suatu hari nanti. Itulah mengapa penting, kata pembuat AMP, bagi developer AMP untuk "berpartisipasi dalam pengembangan standar" agar pengoptimalan tersedia untuk AMP di masa mendatang.

4. Jangan merusak jaring

Memastikan pengalaman pengguna yang luar biasa setiap saat berarti mempersiapkan skenario terburuk. Dalam kasus AMP, itu bisa dalam bentuk Cache AMP turun, atau API gagal. Jika semua itu terjadi, konsumsi konten Anda seharusnya hanya "menurun dengan anggun". Jika konten Anda berfungsi dengan cache AMP, konten juga akan berfungsi tanpanya.

5. Prioritaskan hal-hal yang meningkatkan pengalaman pengguna – tetapi berkompromi bila diperlukan

Meskipun, dalam kebanyakan kasus, pemuatan halaman yang lebih cepat berarti pengalaman pengguna yang lebih baik, tidak selalu demikian. Dan, AMP-ing sesuatu seharusnya tidak menghambat pengguna. Ada keseimbangan, dan pengalaman pengguna selalu menang. Menurut situs web AMP: "Hanya berkompromi ketika kurangnya dukungan untuk sesuatu akan menghentikan AMP untuk digunakan dan diterapkan secara luas."

6. Selesaikan masalah pada layer yang tepat

Memecahkan masalah dengan AMP bukanlah tentang apa yang paling mudah diterapkan oleh pengembang, tetapi apa yang terbaik untuk pengguna akhir. Sayangnya, keduanya tidak selalu bersamaan. Misalnya, jika ada sesuatu yang lebih mudah diintegrasikan di sisi klien, jangan hanya mengimplementasikan jika pengguna akan mendapat manfaat dari integrasi sisi server. Dengan penekanan pada UX, masalah harus diselesaikan di lapisan yang tepat.

7. Tidak ada daftar putih

Framework tidak mendukung daftar putih. Jadi, jika Anda mencari perlakuan khusus, Anda tidak akan menemukannya di AMP untuk situs, domain, atau asal mana pun, dengan satu pengecualian, katakanlah kreator:
ketika itu "diperlukan untuk alasan keamanan atau kinerja."

Cara memeriksa kepatuhan AMP

Anda mungkin mengira kekuatan terbesar halaman AMP adalah kecepatannya. Tidak demikian, kata penciptanya. Bukan hanya kecepatannya yang membuat AMP begitu menarik, tetapi kemampuannya untuk divalidasi. Dengan begitu, pihak ketiga, seperti jejaring sosial, dapat merasa nyaman mengirim pengguna ke sana dengan pengetahuan bahwa mereka akan mendapatkan halaman arahan pasca-klik yang cepat dan lancar.

Untuk menjawab pertanyaan, “Apakah halaman saya sesuai dengan AMP?”, ada empat metode. Tiga ditawarkan oleh Google berdasarkan lulus / gagal menggunakan validatornya. Validator AMP akan membantu Anda menemukan masalah apa pun dengan halaman Anda sebelum diluncurkan. Pada akhirnya, meneruskan adalah hal yang memberi mereka kepatuhan AMP, memberi sinyal kepada pihak ketiga bahwa mereka dapat mengharapkan pengalaman pengguna yang cepat dari halaman Anda.

Konsol Pengembang Peramban

Untuk mengungkap masalah pada halaman AMP Anda menggunakan Browser Developer Console, ikuti tiga langkah berikut:

1. Buka halaman AMP Anda di browser web Anda
2. Tambahkan “#development=1” di akhir URL
3. Buka konsol pengembang browser Anda untuk memeriksa kesalahan validasi

Error apa pun yang mencegah halaman Anda dari kepatuhan AMP akan terlihat seperti ini:

Antarmuka web

Menggunakan antarmuka web untuk menentukan kepatuhan AMP itu mudah. Pertama arahkan ke antarmuka. Kemudian, cukup masukkan kode sumber Anda ke dalam bidang "URL", dan terakhir, klik tombol validasi.

Kesalahan yang ditemukan dengan metode ini akan terlihat sedikit berbeda. Seperti yang ditunjukkan di bawah ini, mereka akan muncul di sebelah sumber HTML laman:

Ekstensi peramban

Yang paling mudah dari ketiganya, validator ini berada tepat di bilah alat Anda dalam bentuk ekstensi Chrome yang bagus. Tanpa usaha dari Anda, ekstensi memvalidasi halaman AMP apa pun yang kebetulan Anda buka. Dan statusnya akan ditunjukkan dengan salah satu dari tiga ikon berwarna.

• Ikon biru berarti halaman yang Anda buka bukan AMP, tetapi ada versi AMP-nya. Jika Anda mengklik ikon tersebut, browser akan membawa Anda ke versi seluler yang dipercepat.
• Ikon merah berarti ada kesalahan pada laman ini, dan nomor akan ditampilkan di samping ikon tersebut, menunjukkan dengan tepat berapa banyak kesalahan yang ada.
• Ikon hijau berarti tidak ada kesalahan pada halaman AMP saat ini. Namun, mungkin ada peringatan. Jika ada, nomor akan muncul di sebelah ikon yang merinci berapa banyak.

Ketiganya mempermudah penangkapan kesalahan di halaman AMP sebelum dipublikasikan. Opsi keempat tidak ditawarkan oleh Google, tetapi oleh Instapage, untuk pembuat yang mencoba membuat halaman arahan pasca-klik yang cepat. Berikut cara menggunakannya saat membuat halaman landing pasca-klik AMP:

Cara membuat halaman arahan pasca-klik AMP dengan Instapage

Membaca standar kepatuhan itu, Anda mungkin bergidik kebingungan. Untungnya, dengan Instapage, membuat halaman arahan pasca-klik AMP itu sederhana. Pengguna cukup mengikuti langkah-langkah berikut:

1: Buat halaman baru

Saat Anda mulai membuat halaman baru, klik “Halaman AMP” saat diminta:

Bagi pengguna, langkah selanjutnya mungkin tampak asing, karena biasanya pembuat menanyakan template mana yang ingin Anda gunakan. Sementara Instapage menawarkan ratusan template yang terbukti konversi untuk halaman non-AMP, halaman AMP dibuat dari awal. Dengan demikian, opsi template saat ini tidak ada untuk halaman AMP.

Langkah 2: Tambahkan elemen ke halaman

Jika Anda adalah pengguna Instapage biasa, Anda juga akan melihat bahwa widget Timer dan HTML tidak ada di bilah alat. Semua ikon lain dan kemampuannya akan tersedia bagi Anda untuk membangun halaman Anda, meskipun:

Selain itu, karena AMP membatasi CSS dan JavaScript, opsi biasa ini ditahan dari pembuat. Yang akan Anda lihat adalah sebagai berikut:

Sesuaikan latar belakang, font, SEO, dan semua yang Anda lihat di atas. Lakukan sendiri, atau berkolaborasi dengan tim Anda menggunakan Solusi Kolaborasi Instapage. Kemudian, bahkan simpan komponen halaman Anda sebagai Instablocks™ untuk disisipkan ke halaman lain. (Catatan: Meskipun Instablock dan Solusi Kolaborasi berfungsi dengan pembuat AMP, Blok Global dan peta panas saat ini tidak.)

Saat Anda menambahkan widget, Anda akan melihat bobot halaman bertambah. Setiap halaman arahan pasca-klik AMP memiliki batas berat 75 KB, dan validator AMP Instapage memastikan Anda tidak melampauinya. Ketika Anda telah mencapai 80% dari batas desain Anda, sebuah peringatan akan muncul, seperti ini, di bagian bawah layar:

Langkah 3: Validasi halaman

Jika Anda terus membangun melebihi batas berat AMP, jendela peringatan akan muncul lagi untuk memberi tahu Anda. Ini akan meminta Anda untuk memvalidasi halaman untuk mengonfirmasi:

Jika halaman Anda masuk di bawah batas berat, melewati validasi, pemberitahuan ini akan muncul di layar Anda:

Langkah 4: Publikasikan

Setelah halaman Anda dirancang dan siap untuk diterbitkan, cukup klik "Publikasikan". Jika Anda masih melebihi batas berat, peringatan ini akan muncul:

Kembali ke halaman Anda dan coba rampingkan dengan menghapus konten. Ingat bahwa kontributor terbesar untuk berat badan, penelitian telah menunjukkan, biasanya adalah gambar. Saat Anda siap, tekan terbitkan lagi. Jelas, jika Anda melihat pesan itu lagi, Anda harus memotong halaman Anda lebih jauh.

Jika Anda tidak melihat pesan itu, Anda siap untuk menerbitkan halaman Anda, dan Anda akan diminta untuk memasukkan subdomain dan domain Anda setelah Anda menekan tombol "terbitkan".

Halaman langsung akan terlihat seperti ini di dasbor Anda, dengan logo petir AMP di samping namanya:

Klik kapan saja untuk kembali ke sana, tempat Anda dapat mengedit, menjalankan pengujian A/B, mengumpulkan laporan, dan lainnya.

Mulai buat halaman landing pasca-klik yang sesuai dengan AMP

Lebih dari sekadar kecepatan, kepatuhanlah yang membuat halaman landing pasca-klik AMP begitu canggih. Dengan mematuhi prinsip desain kerangka kerja, Anda memastikan bahwa pihak ketiga dapat mengandalkan pengalaman seluler yang dioptimalkan untuk mengarahkan lalu lintas.

Siap membuat halaman landing pasca-klik AMP yang cepat dan sesuai? Dapatkan demo AMP yang disesuaikan di sini.