9 Pembaruan Amp Terbaru Yang Meningkatkan Pengalaman Pengguna

Sejak Google mengumumkan AMP pada tahun 2015 untuk meningkatkan kecepatan pemuatan halaman dan meningkatkan pengalaman pengguna seluler secara keseluruhan — kerangka kerja sumber terbuka terus meningkat popularitasnya.

Tidak hanya itu, kerangka kerja telah diperbarui secara signifikan untuk mendukung beragam elemen di halaman, fitur dan opsi yang lebih baik, serta antarmuka yang lebih baik — semuanya untuk terus meningkatkan pengalaman pengguna.

Berikut adalah beberapa pembaruan AMP baru terbaru.

9 Pembaruan AMP yang mungkin belum Anda ketahui

1. Pertukaran yang ditandatangani

Ketika AMP berasal, Google melakukan trade-off untuk memberikan konten web pemuatan instan yang melindungi privasi. Salah satunya adalah URL yang ditampilkan di bilah alamat dimulai dengan "google.com/amp", bukan domain penerbit:

Ini adalah salah satu kritik AMP yang paling menonjol. Bisnis tidak ingin Google menampilkan URL AMP sebagai pengganti domain asal konten karena nama domain sangat penting untuk branding dan publikasi konten.

Pada April 2019, Google mengumumkan sebuah solusi — cara untuk menampilkan URL asli konten sambil tetap mempertahankan kemampuan pemuatan instan. Solusi itu adalah pertukaran yang ditandatangani.

Google menyatakan:

Pertukaran bertanda tangan adalah format file, yang ditentukan dalam spesifikasi pengemasan web, yang memungkinkan browser mempercayai dokumen seolah-olah itu milik Anda. Ini memungkinkan Anda menggunakan cookie dan penyimpanan pihak pertama untuk menyesuaikan konten dan menyederhanakan integrasi analitik.

Namun yang paling penting, pertukaran bertanda tangan menampilkan URL asli penayang saat orang menggunakan Google Penelusuran dan mengeklik tautan AMP, bukan tautan “http//google.com/amp”:

Ini masalah besar karena dua alasan:

1. Nama domain adalah bagian inti dari identitas merek
2. Lebih mudah mendapatkan analitik AMP dengan URL Anda sendiri

(Perhatikan: Google hanya menautkan ke pertukaran bertanda tangan jika penayang, browser, dan konteks penelusuran semuanya mendukungnya. Artinya, Anda harus memublikasikan versi pertukaran bertanda tangan dan versi pertukaran tidak bertanda tangan dari konten Anda.)

2. Render sisi server (SSR)

Rendering sisi server (SSR) adalah teknik yang dapat Anda terapkan ke halaman AMP untuk membuatnya memuat lebih cepat — faktanya hingga 50% lebih cepat.

SSR bekerja dengan meningkatkan first-contentful-paint times (FCP) untuk kerangka kerja yang merender halaman di sisi klien. Kelemahan dari rendering sisi klien adalah bahwa semua JavaScript yang diperlukan untuk merender halaman harus diunduh terlebih dahulu, yang menunda waktu pemuatan konten halaman dan berpotensi meningkatkan rasio pentalan.

Sebagai solusinya, AMP SSR menghapus kode boilerplate AMP dan merender tata letak halaman di server.

(Catatan: Kode boilerplate AMP ada untuk mencegah konten melompat selama pemuatan halaman, menyembunyikan konten hingga kerangka kerja AMP diunduh dan tata letak halaman dibuat. Itulah mengapa halaman AMP mengalami masalah yang sama dengan kerangka kerja sisi klien lainnya — rendering adalah diblokir hingga JavaScript diunduh.)

Dengan menghapus kode boilerplate, SSR AMP menghasilkan waktu FCP 50% lebih cepat.

Optimalisasi AMP SSR melanggar aturan spesifikasi AMP, yang membuat dokumen tidak valid. Namun, selama ditandai dengan tanda selama penyiapan, validator AMP akan tetap memperlakukan AMP dengan SSR sebagai AMP yang valid.

Saat ini, ada dua fitur yang tersedia untuk AMP SSR:

1. Pengoptimal AMP — Pustaka NodeJs untuk menghasilkan AMP yang dioptimalkan
2. AMP Packager — Alat baris perintah yang lalu, dapat digunakan untuk melayani pertukaran bertanda tangan

3. Penyamaran masukan

Mengisi formulir online bisa sangat rumit sehingga mencegah pengguna melakukannya. Ini lebih benar pada perangkat seluler yang layarnya lebih kecil dan navigasi lebih sulit. Namun seperti yang Anda ketahui, formulir sangat penting untuk mengumpulkan prospek dan menyelesaikan penjualan.

Untuk membantu membuat proses penyelesaian formulir lebih mudah dan lebih efisien waktu, masking input diaktifkan AMP. Fitur ini memungkinkan pengembang untuk menambahkan pemformatan seperti spasi dan karakter pengantara, yang sangat nyaman saat pengguna mengisi tanggal, detail pembayaran, nomor telepon, dll.:

Dengan semakin banyak orang mengirimkan informasi mereka secara online di dunia digital saat ini, memiliki sistem yang lebih mudah dan lebih cepat dapat membuat semua perbedaan.

4. Pengoptimalan video

Beberapa peningkatan video telah diperkenalkan untuk meningkatkan banyak manfaat AMP.

Perkaitan
Video di laman web seluler sering menghalangi pandangan pengguna jika pengoptimalan tidak diterapkan dengan benar. Ini dapat dengan mudah menyebabkan pengalaman pengguna yang buruk dan menghalangi mereka untuk melihat konten apa pun di masa mendatang.

Atribut dok baru ini meminimalkan video yang sedang ditonton saat pengguna menggulir ke bawah halaman, memungkinkan mereka untuk melihat konten dan video secara bersamaan, tanpa halangan apa pun:

Anda juga dapat menyesuaikan di mana dan bagaimana video berlabuh untuk menemukan cara terbaik untuk mempresentasikan video Anda kepada pengguna.

Pemutar video
Pembaruan baru lainnya adalah <amp-video-iframe> yang memungkinkan Anda menginstal pemutar video yang dibuat khusus yang menyertakan semua fitur Antarmuka Video AMP yang mungkin Anda inginkan (putar otomatis, dok, dll.)

Iklan video
Iklan video juga dapat diintegrasikan dan dioptimalkan ke dalam AMP — dari jaringan iklan video apa pun yang mendukung IMA SDK sehingga Anda dapat melacak iklan dan pendapatan.

5. Daftar yang dioptimalkan

AMP baru-baru ini menambahkan dua komponen baru untuk mengoptimalkan daftar di halaman web:

Mengubah ukuran
<amp-list> memungkinkan Anda menentukan kapan Anda ingin mengubah ukuran penampung daftar pada interaksi pengguna, agar lebih cocok dengan berbagai jenis konten (misalnya, ketika <amp-list> berisi <amp-accordion> yang diketuk pengguna ).

Pengguliran tanpa batas
Pengguliran tanpa batas sekarang tersedia, jadi ketika pengguna mencapai akhir daftar item (hasil pencarian, kartu produk, dll), daftar tersebut secara otomatis diisi dengan lebih banyak item:

Ini memberi pengguna akses tanpa batas ke lebih banyak konten dari satu halaman daripada harus mengklik tombol "berikutnya" dan mengunjungi halaman daftar lain.

6. Integrasi pihak ketiga

Pengumpulan cookie dan data sangat penting bagi merek untuk mencatat informasi pengguna. Namun, dengan GDPR, aturan tentang persetujuan data dan privasi menjadi lebih ketat dan diatur di semua situs. Hal ini menyebabkan banyak penayang mengandalkan Platform Pengelolaan Izin (CMP) pihak ketiga untuk mengumpulkan data per GDPR.

Dengan pemikiran ini, AMP meluncurkan <amp-consent>, sehingga CMP dapat dengan mudah diintegrasikan dengan AMP. Artinya, situs web dengan AMP kini dapat terus menggunakan CMP untuk mengumpulkan dan mengelola data pengguna tanpa masalah kompatibilitas. Mereka juga dapat mengintegrasikan UI persetujuan data dan meminta pengguna sebelum mereka memberikan informasi mereka.

7. Mode kotak lampu

Melihat gambar melalui lightbox — memperluas elemen untuk memenuhi layar hingga ditutup kembali oleh pengguna semakin umum. Namun, mungkin sulit bagi developer untuk memberikan transisi yang mulus ke mode lightbox, karena melibatkan interpolasi antara dua gambar dengan posisi dan ukuran berbeda.

Hal ini menyebabkan Kelompok Kerja UI AMP mengoptimalkan transisi lightbox dan meningkatkan keterlihatan gambar:

Kini, <amp-lightbox-gallery> memberikan kesempatan kepada pengiklan untuk bereksperimen dengan berbagai ukuran untuk situs web mereka dan mengoptimalkan tampilan gambar yang diinginkan pengguna.

8. Ketersediaan JavaScript kustom

Salah satu pembaruan Google AMP terbaru adalah ketersediaan <amp-script> — memberikan opsi untuk menjalankan JavaScript di thread pekerja terpisah sehingga pengiklan dapat menambahkan JavaScript khusus ke halaman AMP mereka sambil tetap mempertahankan kecepatan pemuatannya yang cepat.

<amp-script> baru memungkinkan Anda membahas kasus penggunaan yang tidak mungkin dilakukan dengan komponen AMP yang sudah ada sebelumnya. Ini juga memungkinkan Anda berbagi kode di seluruh halaman AMP dan non-AMP, serta menggunakan framework JavaScript.

Beberapa contoh yang telah dibuat oleh tim AMP untuk <amp-script> antara lain:

• Todo MVC menggunakan Vue
• Pemeriksa kata sandi
• Visualisasi data dalam artikel menggunakan D3.js
• Formulir multi-halaman di mana setiap bagian memerlukan validasi sebelum melanjutkan ke bagian berikutnya:

Namun, untuk mempertahankan jaminan performa AMP, ada beberapa kendala:

• Lompatan konten — Untuk menghindari lompatan konten yang tidak terduga, <amp-script> memerlukan interaksi pengguna untuk mengubah konten halaman.
• Pemuatan halaman — Karena <amp-script> tidak mengubah konten halaman tanpa interaksi pengguna, itu juga tidak mengubah konten pada pemuatan halaman.
• Ukuran skrip — Skrip yang digunakan dalam satu <amp-script> harus lebih kecil dari 150 kB.
• Dukungan API — Tidak semua API didukung di dalam Web Worker, dan beberapa metode dan properti DOM belum diterapkan

(Catatan: <amp-script> kompatibel dengan framework yang mungkin sudah Anda gunakan seperti React, Preact, Angular, Vue.js, jQuery, dan D3.js.)

9. Kotak Alat AMP

AMP Toolbox adalah kumpulan alat baris perintah dan JS API untuk menyederhanakan publikasi halaman AMP. Setiap alat di dalam kotak alat dapat diunduh dan digunakan satu per satu:

KLI AMP
Antarmuka baris perintah tersedia untuk sebagian besar fitur yang disertakan dalam AMP Toolbox, yang dapat diinstal secara global melalui NPM.

Linter AMP
Toolbox-linter baru memeriksa dokumen AMP Anda untuk menemukan kesalahan umum dan praktik terbaik.

Pengoptimal AMP
Sisi server Pengoptimal AMP meningkatkan performa rendering halaman AMP dengan menerapkan praktik terbaik performa AMP.

URL Cache AMP
Sebaiknya periksa apakah halaman AMP berfungsi di semua cache AMP, dan Anda dapat menggunakan komponen toolbox-cache-url untuk melakukannya, karena ini menerjemahkan URL asal ke format URL Cache AMP.

Daftar Cache AMP
Ini memberikan daftar semua Cache AMP resmi, yang dapat berguna saat memperbarui atau menghapus dokumen AMP dengan cepat dari Cache AMP.

KOR AMP
Banyak komponen AMP (seperti amp-list atau amp-state) memanfaatkan endpoint jarak jauh dengan menggunakan permintaan CORS. AMP CORS adalah middleware connect/express yang secara otomatis akan menambahkan semua header CORS yang diperlukan oleh halaman AMP Anda.

Aturan Validasi AMP
Ini hanyalah pustaka JavaScript untuk menanyakan aturan validator AMP.

Dapatkan demo halaman arahan pasca-klik AMP Instapage

Karena AMP telah menjadi hal biasa dalam pengoptimalan seluler, pembaruan yang konsisten seperti ini sangat penting dan bermanfaat bagi developer, penayang, dan pengiklan. Pembaruan terbaru di atas semuanya sempurna untuk meningkatkan pengalaman pengguna dan memberi merek lebih banyak opsi untuk bereksperimen dan menguji untuk meningkatkan fitur situs web mereka dan keterlibatan di halaman.

Untuk pengalaman pasca-klik iklan AMP, dapatkan demo AMP Instapage yang disesuaikan untuk melihat bagaimana Anda dapat membuat halaman yang memuat cepat dalam hitungan menit, menggunakan pembuat yang ramah desainer, validator bawaan, analitik lanjutan, dan banyak lagi.