Cara Menjamin Halaman Arahan Anda Sesuai dengan AMP

Ketika proyek Accelerated Mobile Pages (AMP) dimulai, sebagian besar dibatasi untuk konten statis. Kerangka kerja tanpa tulang membantu sebagian besar penerbit, memungkinkan mereka membangun pengalaman penemuan dan konsumsi yang lebih cepat dan mulus bagi pembaca.

Namun, bertahun-tahun kemudian, banyak yang berubah. Awal satu dimensi AMP digantikan oleh perangkat yang berevolusi yang mampu membangun seluruh situs web. Saat meluncurkan pengalaman serbaguna dan cepat dimuat 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 diharapkan oleh seorang desainer saat ini ketika 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 pengembangnya tidak 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

Meskipun AMP adalah proyek sumber terbuka, ini diprakarsai oleh Google. Dan, seperti semua hal Google, pengalaman pengguna adalah prioritas. “Jika ragu,” kata pembuat AMP, “lakukan yang terbaik untuk pengalaman pengguna akhir, meskipun itu berarti lebih sulit bagi pembuat halaman untuk membangun atau bagi pengembang perpustakaan untuk menerapkannya.”

2. Lakukan sesuatu hanya jika bisa 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 memperkenalkan komponen atau fitur ke AMP yang tidak dapat berjalan dengan andal pada 60fps atau menghalangi pengalaman pemuatan instan di perangkat seluler paling umum saat ini.”

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

Pembuat AMP menyukai kerangka kerja mereka seperti halnya pengguna web menyukai halaman mereka: sekarang. Platform ini dibuat untuk tampil di web seluler saat ini, bukan di masa depan. Jadi desainer harus membangun dengan pemikiran itu, bukan browser hipotetis yang bekerja pada kecepatan mach.

Pada saat yang sama, pengembang saat ini membentuk masa depan AMP. Jadi, hanya karena Anda tidak dapat membuat sesuatu bekerja sekarang tidak berarti Anda tidak akan menginginkannya suatu hari nanti. Itulah mengapa penting, menurut pembuat AMP, bagi pengembang AMP untuk “berpartisipasi dalam pengembangan standar” agar pengoptimalan tersedia untuk AMP di masa mendatang.

4. Jangan merusak web

Memastikan pengalaman pengguna yang luar biasa setiap saat berarti mempersiapkan skenario terburuk. Dalam kasus AMP, itu bisa berupa AMP Cache turun, atau API gagal. Jika salah satu dari itu terjadi, konsumsi konten Anda seharusnya hanya "menurun dengan baik." Jika konten Anda berfungsi dengan cache AMP, itu juga akan berfungsi tanpa cache.

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

Meskipun, dalam banyak kasus, pemuatan halaman yang lebih cepat berarti pengalaman pengguna yang lebih baik, itu tidak selalu. Dan, AMP-ing sesuatu tidak boleh 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. Memecahkan masalah pada lapisan yang tepat

Memecahkan masalah dengan AMP bukan tentang apa yang paling mudah diterapkan oleh pengembang, tetapi apa yang terbaik untuk pengguna akhir. Sayangnya, keduanya tidak selalu bertepatan. Misalnya, jika ada sesuatu yang lebih mudah diintegrasikan di sisi klien, jangan hanya menerapkan 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

Kerangka kerja 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 pembuat konten:
ketika itu "diperlukan untuk alasan keamanan atau kinerja."

Cara memeriksa kepatuhan AMP

Anda mungkin berpikir bahwa 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 mulus.

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

Konsol Pengembang Peramban

Untuk mengungkap masalah dengan 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

Setiap error 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 halaman:

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 Anda kunjungi. 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 halaman ini, dan angka akan muncul di samping ikon itu, menunjukkan dengan tepat berapa banyak 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 dengan tepat berapa banyak.

Ketiganya memudahkan penangkapan kesalahan di halaman AMP sebelum dipublikasikan. Opsi keempat tidak ditawarkan oleh Google, tetapi oleh Instapage, untuk pembuat konten yang mencoba membangun 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 ini:

1: Buat halaman baru

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

Bagi pengguna, langkah berikutnya 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 pembuatnya. Apa yang akan Anda lihat sebagai gantinya 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: Sementara Instablocks dan Solusi Kolaborasi bekerja dengan pembuat AMP, Blok Global dan peta panas saat ini tidak.)

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

Langkah 3: Validasi halaman

Jika Anda terus membangun di luar batas bobot 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 “Terbitkan.” Jika Anda masih melebihi batas berat, peringatan ini akan muncul:

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

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

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

Klik setiap saat untuk kembali ke sana, tempat Anda dapat mengedit, menjalankan pengujian A/B, mengumpulkan laporan, dan banyak lagi.

Mulai buat halaman landing pasca-klik yang sesuai dengan AMP

Lebih dari sekadar kecepatan, kepatuhanlah yang membuat halaman arahan pasca-klik AMP begitu kuat. Dengan mematuhi prinsip-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.