Pendahuluan
Pengembangan web telah lama bergerak menuju konten seluler. Tren beberapa tahun terakhir yang mendukung lalu lintas dari perangkat seluler alih-alih desktop, telah mendorong mesin pencari untuk pertama kali menuntut kemampuan beradaptasi dan kecepatan unduh yang cepat dari situs, dan mulai 1 Juli 2019, Google beralih ke seluler hanya alih-alih seluler lebih dulu untuk situs baru. Ini berarti bahwa dia sama sekali tidak tertarik dengan versi desktop.
Pada saat yang sama, mesin pencari mengusulkan teknologi untuk pemuatan halaman yang sangat cepat. Di Google, ini adalah AMP (halaman seluler Dipercepat), di halaman Yandex - Turbo.
Lebih lanjut dalam artikel saya ingin berbicara tentang pro, kontra dan masalah yang saya temui ketika menerapkan halaman AMP dan Turbo untuk toko online yang ada.
Esensi dari kedua teknologi ini bermuara pada kenyataan bahwa mesin pencari men-cache konten halaman dengan gambar dan memberikannya kepada pengunjung dari server mereka. Ini memperhitungkan sejumlah faktor pengunjung: perangkat, layar, browser, kecepatan internet, dll. Bergantung pada, misalnya, resolusi layar atau kecepatan Internet seluler, mesin pencari mungkin memberikan gambar resolusi lebih rendah daripada di situs, ditambah semua grafik akan tertunda memuat dan pramuat. Saya perhatikan bahwa Yandex membuat WebP dari halaman Turbo dari gambar JPG, dan jika browser mendukungnya, itu merender dalam format WebP, yang memberi keuntungan 2-3 kali ukuran file.
Dalam hasil pencarian, halaman-halaman ini ditandai dengan petir (AMP) dan roket (Turbo) dan terbuka langsung dari cache mesin pencari tanpa pergi ke situs.
Karena kecepatan pemuatan, halaman yang menggunakan teknologi AMP dan Turbo kemungkinan besar peringkatnya sedikit lebih baik daripada yang biasa dalam hasil pencarian kedua mesin pencari. Meskipun Google maupun Yandex tidak membicarakannya secara langsung, hanya merujuk pada fakta bahwa kecepatan pengunduhan penting untuk algoritme dan situs-situs tersebut mendapatkan lebih banyak poin dalam hasil.
Sebagai konsumen, saya sangat suka teknologi ini. Selain kecepatan mengunduh konten, halaman ini semudah mungkin dalam hal desain dan navigasi, dan saya dapat langsung membuka kartu produk, atau membaca beberapa artikel tanpa gangguan yang tidak perlu ke elemen desain.
Fitur teknis
Dari sudut pandang pengembangan, teknologi ini memberlakukan banyak batasan, terutama
halaman Yandex Turbo . Sejauh ini mereka dapat dianggap hanya sebagai mainan, jika kita berbicara tentang situs e-comm. Halaman Turbo saat ini tidak memungkinkan berinteraksi dengan backend toko dan hanya merupakan tautan statis antara antara mesin pencari dan situs, karena Untuk menyelesaikan tindakan untuk membeli barang, pengguna harus mengunjungi situs web toko.
Di
Google dengan AMP, semuanya terlihat jauh lebih ceria. Teknologi ini memungkinkan Anda untuk membuat halaman dinamis yang sepenuhnya dapat "berkomunikasi" dengan server Anda. Misalnya, pada saat membuka kartu produk, di latar belakang permintaan dibuat ke server untuk memperbarui harga, periksa ketersediaan barang. Jadi, bahkan jika produk telah berakhir, atau harga telah berubah, dan mesin pencari belum mengindeks perubahan ini, pengguna akan melihat semuanya dengan benar dan cepat. Barang dari cache akan dimuat secara instan dan kemudian harga dan ketersediaan akan diperbarui, setelah menerima data dari server Anda.
Kemudian Anda dapat mengirim pesanan lengkap ke sistem Anda dengan produk ini dan menunjukkan informasi pengguna dengan nomor pesanan. Dengan demikian, menggunakan AMP, Anda dapat membuat situs lengkap dengan keranjang, otorisasi, panggilan balik, dll., Meskipun dalam versi yang sangat terpotong.
Menurut pendapat saya, mesin pencari akan mencoba memaksa semua orang untuk menggunakan teknologi ini sehingga pengunjung tidak keluar dari pencarian, tetapi masuk langsung ke halaman mesin pencari di situs, memesan, membayarnya, dll.
Untuk toko-toko top-end besar yang memiliki aplikasi sendiri yang sudah cepat, halaman-halaman menengah AMP dan Turbo ini bisa berbahaya, karena pengguna harus tetap pergi ke situs untuk mendapatkan fungsionalitas penuh, sesuai dengan pilihan pengiriman, misalnya.
Toko-toko kecil tanpa gudang otomatis, dll., Format ini mungkin menarik. Terutama jika Anda membuat ulang logika minimum interaksi dengan bagian belakang: memperbarui harga, otorisasi dengan menerima diskon / bonus pribadi, mengirimkan pesanan dengan mempertimbangkan bonus dan diskon akun.
Seberapa banyak teknologi ini akan efektif terhadap situs penuh akan ditunjukkan oleh waktu, tetapi jika mesin pencari aktif bergerak ke arah ini, itu hanya akan menjadi kenyataan baru yang semua orang perlu hidup.
Kekurangan kedua teknologi saat ini termasuk fakta bahwa situs dibuka bukan di bawah alamat asli, tetapi dengan awalan mesin pencari, yang, misalnya, tidak memungkinkan Anda untuk menambahkan halaman ke favorit Anda atau berbagi:
- Google: google.com/amp/s/[URL situs Anda]
- Yandex: yandex.ru/turbo?text=[URL situs Anda]
Sebagian dari masalah ini sedang diselesaikan oleh Google di Chrome, dengan versi 71 untuk halaman AMP, sekarang memungkinkan untuk membuat alamat Anda. Untuk melakukan ini, Anda perlu mengkonfigurasi AMP Packager di server, dan sertifikat ssl dengan dukungan untuk "CanSignHttpExchange".
Yandex juga tidak ketinggalan, dan dalam versi browser Yandex terbaru untuk iOS dan Android, domain situs juga akan ditampilkan tanpa awalan.
Halaman AMP dan Turbo dalam hal pengembangan
AMP adalah halaman HTML lengkap yang mendukung semua tag dan CSS. Ada sejumlah batasan kecil, dan perbedaan dalam desain kepala. Misalnya, tag img dilarang, alih-alih Anda harus menggunakan amp-img. Ada komponen JavaScript yang memungkinkan Anda menjalin interaksi dengan server Anda melalui JSON. Misalnya, Anda dapat mengirim formulir pemesanan cepat dari halaman AMP ke server Anda, menerima respons dalam bentuk JSON dan menampilkannya. Ada komponen untuk korsel gambar, video, dll. Awalnya JavaScript asli dilarang, tetapi dukungan untuk skripnya baru-baru ini ditambahkan.
Halaman Turbo adalah html yang sangat terpotong untuk mendukung sejumlah tag, meskipun dengan dukungan penuh CSS3. Tidak ada skenario untuk berinteraksi dengan backend saat ini yang dapat dilakukan. Ada juga komponen untuk komidi putar, video, dan lainnya.
Saya perhatikan bahwa Yandex mengikuti jejak Google dan berencana untuk menambahkan peluang untuk berinteraksi dengan backend untuk e-comm di halaman Turbo pada akhir 2019:
- pesanan cepat
- otorisasi
- pembayaran.
Cara mentransfer halaman ke mesin pencari
Ada perbedaan mendasar antara halaman AMP dan Turbo.
AMP tersedia di situs pada URL tertentu, mereka dapat diakses oleh browser, misalnya:
- /catalog/category/tovar.html - halaman reguler
- /amp/catalog/category/tovar.html - AMP
Untuk setiap halaman, AMP dibuat, dan tautan melalui tautan rel terdaftar di kepala:
- Dari halaman normal ke tautan AMP rel = "amphtml" href = ""
- Dengan tautan balik AMP, rel = "canonical" href = ""
Google merayapi halaman biasa dan AMP saat merayapi situs. Semuanya cukup transparan untuk pengembangan, Anda dapat menghasilkan html yang berbeda (reguler dan AMP) dalam komponen / skrip yang sama dan memberikannya ke browser tergantung pada URL.
Halaman Turbo semakin sulit. Mereka perlu dikirim ke Yandex melalui API dalam XML, di mana halaman HTML yang diterbitkan dikirim dalam CDATA. Saat mentransmisikan, seseorang harus memperhitungkan batasan jumlah halaman dalam satu XML, jumlah gambar pada setiap halaman, dan jumlah total gambar dalam setiap XML.
Di sini saya punya dilema tempat menghasilkan XML ini. Ada dua opsi.
Yang pertama adalah membuat ulang seluruh logika situs di bagian belakang, yang mahal dan tidak nyaman. Anda perlu mempertimbangkan semua opsi URL (toko modern adalah jumlah tak terbatas dari URL yang diterima dari filter), harga, diskon, promosi, dan lainnya. Selain bagian depan, semua ini perlu digandakan di bagian belakang.
Opsi
kedua adalah membuat halaman Turbo pada saat kontak di depan, menuliskannya ke beberapa tabel dalam database dan mentransfer ke Yandex. Ini akan mengurangi biaya dan menyederhanakan tugas, karena Anda dapat membuatnya bersama dengan halaman biasa.
Kedua opsi tersebut layak, tergantung pada situasi dan kompleksitas situs, yang pertama dan kedua dapat digunakan. Saya menggunakan keduanya di situs yang berbeda.
Apa di masa depan?
Saya menonton siaran AMP Conf 2019, yang berlangsung di Jepang pada bulan April. Gagasan utamanya adalah bahwa AMP akan diposisikan sebagai "AMP sebagai layanan". Ini berarti bahwa halaman yang dibuat akan terus diperbarui secara otomatis dalam hal teknologi. Misalnya, galeri lightbox yang dibuat hari ini di halaman AMP, besok mungkin mulai bekerja dengan efek lain dari pembesaran gambar, gesekan gambar, dll.
Saya juga menganggap poin-poin penting penting, yang telah muncul atau akan muncul dalam waktu dekat:
- Menggunakan JavaScript asli dengan batasan
- Kemampuan membuat Cerita, yang secara eksperimental Google mulai dukung di blok terpisah dalam masalah ini (sejauh ini hanya di AS)
- AMP untuk E-mail (mendukung gmail, peluncuran mail.ru, prospek di musim panas)
- Dukungan bahasa Rusia
- Eksperimen amp komponen untuk pengujian A / B
- Dukungan Recaptcha 3
Dapat diasumsikan bahwa banyak dari ini akan diterapkan di halaman Turbo, tetapi dengan lag.
Google juga memungkinkan Anda membuat Aplikasi Web Progresif berdasarkan AMP. Saya tidak masuk jauh ke pertanyaan ini, tetapi jika Anda membuat seluruh situs di AMP dan mengikuti instruksi Google untuk adaptasi untuk Aplikasi Web Progresif, Anda mendapatkan PWA, yang diinstal dari browser di layar beranda. Ini akan memungkinkan Anda untuk menonton situs tanpa koneksi internet dan mendapatkan akses ke pemberitahuan Push dari pengguna.
Kesimpulan
Google dan Yandex akan cenderung situs biasa dan proyek e-comm untuk membuat halaman AMP dan Turbo. Itu, pada gilirannya, akan mengikis pemahaman bagi pengguna di situs mana ia berada dan dari siapa ia memesan barang. Mungkin berubah menjadi pasar global di dalam mesin pencari.