Mengubah kesan pertama sangat sulit. Dan saya tidak hanya berbicara tentang orang. Teknologi juga sering menjadi sandera dari kesan pertama - versi pertama mereka. Dan kemudian, meskipun telah bertahun-tahun dikembangkan, peluang baru dan penghapusan kekurangan lama, dalam kesadaran massa, teknologi tetap sangat tidak sempurna, versi pertamanya. Mereka yang tidak berusaha menghadapi bias kognitif semacam ini hanya dapat melihat keberhasilan pesaing menggunakan teknologi yang sudah dikenal dalam skenario baru, dengan pertanyaan bodoh: "Apa yang bisa terjadi!?".

Contoh paling mencolok dari teknologi yang telah melangkah jauh di depan dibandingkan dengan apa yang awalnya, menurut saya, adalah AMP - Accelerated Mobile Pages. Banyak pengembang menganggap AMP sebagai cara untuk memasukkan konten statis situs mereka (artikel, berita, catatan, dll.) Ke dalam cache Google sehingga ketika mereka membuka dari pencarian, konten ini dimuat secara instan (ikon kilat dalam hasil pencarian menunjukkan kecepatan pemuatan tinggi halaman AMP: )). Tentu, jika Anda perlu mencapai hasil seperti itu, maka dengan AMP akan sangat mudah dilakukan. Tetapi AMP lebih dari sekadar teknologi untuk bekerja dengan konten statis atau cache Google. AMP telah lama digunakan sebagai pustaka serba guna berdasarkan komponen web untuk membuat halaman dinamis cepat dan bahkan seluruh situs web yang diperoleh pengguna dari pencarian dan sumber lain, termasuk kunjungan langsung. Dari sudut pandang ini, AMP dapat disetarakan dengan Polymer, React atau Angular. Tentu, dengan memperhatikan fakta bahwa AMP dirancang untuk situs sederhana (apa pun artinya) di mana penekanan utama adalah pada konten dan komponen dinamis terbatas.

Saya juga ingin mencatat bahwa terlepas dari nama Laman Seluler yang Dipercepat, AMP dapat digunakan untuk membuat situs apa pun, baik desktop maupun seluler. Situs web proyek - ampproject.org adalah contoh yang bagus tentang apa yang dapat dilakukan AMP untuk desktop.

Dalam artikel ini, kami akan mempertimbangkan teknologi AMP itu sendiri, berbicara tentang kemampuan dan keterbatasannya, dan juga membuat pendaratan AMP untuk toko online dengan dukungan untuk memuat, menampilkan, memfilter, dan mencari produk. Contoh ini tidak dipilih secara kebetulan, karena e-commerce adalah area terpopuler kedua setelah situs berita di mana AMP paling aktif digunakan.

Anda dapat melihat halaman arahan yang selesai di GIF di atas.

AMP dikhususkan untuk banyak artikel, di antaranya Anda dapat menemukan sangat kritis. Sebagian besar artikel ini fokus pada satu sisi teknologi AMP, yaitu cache. Lagi pula, jika halaman situs di-cache, dan kemudian, ketika diklik dari pencarian, mereka tidak dibuka secara langsung, maka ini pasti akan memberlakukan batasan. Pengguna tampaknya berkeliling situs Anda. Sebuah pertanyaan sakramental muncul: siapa yang diuntungkan dari ini? Mungkin lebih menguntungkan untuk selalu memberikan konten secara langsung? Dilihat oleh fakta bahwa AMP aktif digunakan oleh penerbit konten, kebanyakan dari mereka pasti menguntungkan untuk menggunakan cache - situs pencarian mereka langsung terbuka. Masalah utama dengan cache adalah bahwa di bilah alamat browser pengguna tidak melihat alamat situs itu sendiri, yang menampung halaman AMP, misalnya www.vedomosti.ru , tetapi alamat dalam cache, dalam hal ini akan seperti ini: www.google.com/ amp / s / www.vedomosti.ru .

Perilaku ini bukan cara jahat untuk mengeluarkan pengguna dari situs Anda. Ini lebih merupakan masalah teknis yang tidak bisa diselesaikan dengan cara lain. Pengembang AMP secara aktif mengerjakan solusi untuk masalah ini. Standar Kemasan Web baru akan membantu. Berkat itu, ketika memuat ke cache, data ditandatangani oleh sertifikat domain sumber, dan sebagai hasilnya, saat menampilkan halaman AMP dari cache, domain asli, dan bukan alamat dalam cache, akan ditampilkan di bilah alamat.

Di sisi lain, masalah cache, jika relevan, terutama untuk penerbit konten. Jika aset utama adalah artikel atau berita, maka bagi penerbit mana pun, adalah penting bagaimana dan kepada siapa ditampilkan. Dan fakta bahwa para penerbit pada awalnya waspada terhadap AMP dapat dimengerti. Makanya banyak kontroversi pada topik ini. Di sisi lain, e-commerce adalah skenario yang sama sekali berbeda. Untuk pemilik toko online, situs untuk menjual tiket konser, bank yang menerima aplikasi kartu kredit, atau salon kecantikan yang merekam klien, penting bagi pelanggan untuk datang dan membeli. Konversi itu penting. Dan jika ada teknologi yang akan membantu membuat situs lebih cepat, sehingga meningkatkan konversi, maka menggunakan teknologi ini tentu saja akan bermanfaat.

Amp

Apa yang membuat situs web cepat? Anda membuatnya cepat, pengembang! Tidak ada keajaiban, situs cepat cepat karena pengembang mereka peduli dengan kinerja dan bekerja untuk membuat situs lebih baik. Ada serangkaian praktik dan trik terbaik untuk membuat situs yang memuat dengan cepat dan bekerja dengan cepat. Misalnya, lebih baik memuat gambar berat hanya pada saat pengguna menggulirnya, dan tidak segera saat membuka halaman. Anda juga perlu membatasi jumlah total sumber daya yang diunduh, menggunakan skrip asinkron, dll. Satu-satunya masalah adalah bahwa semua praktik ini perlu diingat, diingat, serta untuk terus memantau aplikasi mereka. Ini rumit. Selalu ada godaan untuk melakukan sesuatu yang tidak akan sejalan dengan praktik terbaik, tetapi akan lebih mudah diterapkan.

AMP adalah teknologi yang memudahkan untuk melakukan hal yang benar (dan akhirnya mendapatkan situs cepat). Dan membuat situs menggunakan AMP lambat itu sulit. Ini dicapai melalui serangkaian kendala, serta validator yang memeriksa kendala ini. Jika halaman divalidasi, itu bisa di-cache. Artinya, AMP sengaja membatasi Anda - dan ini adalah ide utama teknologi ini, tetapi sebagai imbalannya Anda mendapatkan kepercayaan bahwa Anda menggunakan praktik terbaik. Anda tidak perlu menjadi ahli dalam optimasi untuk mendapatkan hasil yang baik menggunakan AMP. Praktik terbaik digunakan secara default, dan potensi kesalahan diminimalkan.

Pada saat yang sama, AMP bukan semacam HTML, itu adalah perpustakaan biasa di mana tidak ada yang tidak dapat diakses oleh pencipta perpustakaan lain. Dengan AMP, Anda menggunakan markup HTML biasa serta gaya CSS. Anda dapat membuat seluruh situs di AMP jika cukup sederhana (contoh tipikal adalah semua jenis halaman arahan), dan jika kemampuan AMP menjadi tidak mencukupi, Anda selalu dapat menambahkan halaman non-AMP.

Di sisi lain, optimasi yang digunakan dalam AMP dapat dilakukan tanpa AMP, tetapi ini akan membutuhkan banyak usaha dan waktu. Bagaimanapun, bahkan jika karena alasan tertentu Anda memutuskan untuk tidak menggunakan AMP, masuk akal untuk setidaknya mempelajari bagaimana perpustakaan ini bekerja dan apa yang dilakukannya untuk menerapkan pendekatan ini ke situs Anda. Tampaknya promosi AMP adalah promosi perpustakaan tertentu, dan bukan kinerja situs seperti itu. Namun tidak demikian: memiliki situs web yang produktif jauh lebih penting daripada menggunakan satu atau beberapa perpustakaan atau kerangka kerja lainnya.

Sekali lagi, saya ingin mencatat bahwa semua pembatasan yang diberlakukan oleh AMP bukan bersifat ideologis, tetapi disebabkan oleh pertimbangan utilitarian - mereka memungkinkan Anda untuk membuat situs yang cepat. Intinya. Jika di masa depan ada cara, tanpa mengorbankan kinerja, untuk menghilangkan satu atau lain batasan, maka tentu saja akan dicabut.

Apa batasan AMP? Keterbatasan yang paling penting adalah bahwa halaman tidak dapat berisi kode JavaScript sewenang-wenang. Satu-satunya hal yang dapat Anda gunakan untuk JavaScript terbatas adalah pengikatan data. Selain itu, Anda tidak dapat menghubungkan file JavaScript dan CSS eksternal. Ada pengecualian: ini adalah perpustakaan AMP itu sendiri, serta daftar komponen yang disetujui (Anda dapat mengambil bagian dalam pengembangan AMP dan membuat komponen Anda sendiri). Semua CSS harus ada di halaman itu sendiri, dan volumenya dibatasi hingga 50 kilobyte. Selain itu, Anda tidak dapat menggunakan bagian dari tag HTML, seperti <img />; sebagai gantinya, mereka menggunakan komponen web yang termasuk dalam paket AMP. Sebagai contoh, komponen <amp-img /> digunakan sebagai ganti <img />. Ini diperlukan agar AMP dapat mengontrol pemuatan sumber daya. Ada juga sedikit pembatasan CSS yang disebabkan oleh pertimbangan kinerja (Anda tidak dapat menggunakan pengubah! Penting dan animasi yang tidak dipercepat GPU). Sebenarnya itu saja. AMP menyediakan serangkaian komponen yang kaya, yang sebagian menghilangkan ketidakmampuan untuk menulis kode JavaScript yang berubah-ubah. Set komponen termasuk, misalnya, amp-date-picker , amp-sidebar , amp-user-notification , amp-facebook-like , amp-akses , yang dengannya Anda dapat mengimplementasikan dukungan otentikasi, dan banyak lagi lainnya. Dan dalam kasus yang sangat ekstrem, ketika tidak ada jalan keluar lain, Anda dapat menggunakan iframe dengan konten non-AMP.

Sebelum mulai bekerja dengan AMP, saya sarankan Anda mempelajari dokumentasi di situs web proyek - ampproject.org . Selain itu, penting untuk melihat ampbyexample.com , yang berisi contoh luar biasa, yang sebagian besar dapat digunakan secara praktis tanpa perubahan dalam proyek nyata. Jika Anda membutuhkan templat yang sudah jadi, templat tersebut tersedia di ampstart.com .

Membuat Pendaratan AMP

Mari kita buat halaman pendaratan untuk toko sepeda online dengan daftar produk, penyaringan dan pencarian. Produk kami akan dimuat secara dinamis. Untuk tujuan pelatihan, kami tidak akan menggunakan templat yang sudah jadi, tetapi kami akan melakukan semuanya dari awal. Kode proyek dapat ditemukan di GitHub: https://github.com/spugachev/amp-article

Repositori berisi backend di Node.js, serta halaman AMP yang terletak di folder publik. Untuk memulai proyek, Anda perlu mengkloning repositori dan menjalankan perintah berikut di folder proyek (Node.js harus diinstal).

>> npm install >> npm start

Templat Halaman

Buat halaman AMP minimum. Kodenya disajikan di bawah ini. Dalam proyek yang Anda unduh dari GitHub, halaman utama publik / index.html sengaja dikosongkan, dan kami akan menggunakannya untuk menulis kode.

 <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title> </title> <link rel="canonical" href="http://amp-bike-shop.com/index.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <style amp-custom> /*     */ </style> </head> <body> <h2>   AMP  !</h2> </body> </html>

Hal pertama yang menarik perhatian Anda dalam contoh di atas - markup HTML berisi indikasi eksplisit bahwa ini adalah halaman AMP. Ini dicapai baik dengan menambahkan simbol kilat ke tag html (sayangnya simbol Habr memotong simbol kilat), atau dengan menambahkan kata "amp" di sana juga. Tanpa indikasi seperti itu, halaman tidak akan divalidasi dan tidak akan ditambahkan ke cache Google selama pengindeksan.

Selanjutnya, Anda perlu menghubungkan perpustakaan JavaScript AMP:

 <script async src="https://cdn.ampproject.org/v0.js"></script>

Anda juga harus menentukan alamat kanonik halaman. Jika ada versi halaman non-AMP, maka alamatnya ditunjukkan. Jika tidak, alamat halaman AMP itu sendiri ditunjukkan.

 <link rel="canonical" href="http://amp-bike-shop.com/index.html">

Selain itu, Anda perlu menambahkan tag meta untuk penskalaan, serta gaya template CSS. Gaya-gaya ini tidak dapat diubah. Mereka diperlukan agar saat memuat halaman, tetapi sebelum memuat perpustakaan JavaScript AMP, konten yang tidak bergaya tidak berkedip di layar. Jika karena alasan tertentu perpustakaan tidak memuat, konten dalam hal apa pun akan ditampilkan setelah delapan detik.

Tempatkan gambar menggunakan komponen amp-gambar di bagian atas halaman. Dengan mengatur tata letak = "responsif", gambar akan direntangkan ke lebar penuh wadah.

 <amp-img class="hero-img" src="img/hero.jpg" width="320" height="213" layout="responsive"> </amp-img>

Selanjutnya, saya tidak akan memberikan gaya CSS, dan mereka dapat ditemukan di repositori proyek di GitHub. Jadi ...

Jalankan proyek dan buka halaman utama di browser. Jika parameter # development = 1 ditambahkan ke alamat halaman, halaman tersebut akan secara otomatis divalidasi, dan informasi tentang ini akan ditampilkan pada konsol browser. Untuk tujuan yang sama, Anda dapat menggunakan ekstensi Chrome yang disebut AMP Validator .

Sebagai contoh, jika alih-alih <amp-img /> tag <img /> biasa digunakan, maka halaman seperti itu tidak akan lulus validasi, yang akan ditunjukkan oleh pesan yang sesuai.

Memuat dan menampilkan data

Sekarang kami memiliki halaman AMP dasar dengan gambar untuk menarik perhatian dan nama toko. Sekarang saatnya untuk mengunduh daftar produk dari server dan menampilkannya di halaman. Proyek yang didukung sudah termasuk layanan yang mengembalikan daftar barang (dalam hal ini, sepeda) dalam format JSON.

 GET /api/bikes [ { "id":1, "img":"img/01.jpg", "title":" ", "price":"28500", "available":false }, { "id":2, "img":"img/02.jpg", "title":" ", "price":"14750", "available":true }, { "id":3, "img":"img/03.jpg", "title":" ", "price":"31200", "available":true }, … ]

Karena AMP tidak memungkinkan Anda untuk menulis kode JavaScript sewenang-wenang, semua tindakan, termasuk memuat data, diatur dalam gaya deklaratif. Kita perlu menghubungkan beberapa komponen ke halaman yang akan memuat dan menampilkan data, dan juga memungkinkan kita untuk menggunakan template. Karena ini akan menjadi komponen AMP standar, kami diizinkan untuk menghubungkannya. Kami membutuhkan komponen:

amp-bind untuk mendukung pengikatan data,
amp-kumis untuk bekerja dengan template dalam format kumis
serta daftar amp untuk bekerja dengan daftar yang akan memuat dan menampilkan data.
Hubungkan file yang diperlukan di header halaman:

 <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

Tambahkan komponen daftar ke halaman:

 <amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" items="."> <div placeholder>...</div> <div fallback>  .</div> <template type="amp-mustache"> <div class="card" style="height: 340px;"> <amp-img height="200" layout="fixed-height" src="{{img}}" alt="{{title}}-{{price}}"> </amp-img> <hr/> <h2>{{title}}</h2> {{#available}}<p> </p>{{/available}} {{^available}}<p>  </p>{{/available}} <p>{{price}} </p> </div> </template> </amp-list>

Properti src diatur untuk komponen, yang menentukan dari mana data akan diambil (dalam kasus kami, permintaan GET akan dieksekusi di "// localhost: 3000 / api / bikes"), serta properti item, yang memungkinkan Anda untuk mencari array elemen untuk daftar di dalam respons JSON. dari server. Karena jawaban itu sendiri adalah sebuah array, nilai properti item menunjukkan akar dari jawabannya.

Selanjutnya, kami mendefinisikan sebuah rintisan yang akan ditampilkan selama pemuatan data, serta rintisan jika terjadi kesalahan. Tetapi yang paling menarik adalah, tentu saja, daftar templat item. Format templat ini sangat sederhana, saya pikir sintaks tempe kumis tidak memerlukan penjelasan tambahan.

Tambahkan kode di atas, segarkan halaman dan lihat daftar produk yang ditampilkan pada halaman. Dengan markup sederhana dan tanpa menulis kode JavaScript, kami memuat data dan menampilkan data pada halaman (menggunakan daftar dan templat).

Pemfilteran data

Setiap halaman AMP memiliki status. Itu dapat dianggap sebagai objek dengan hierarki properti. Keadaan halaman bisa diubah di event handler menggunakan fungsi AMP.setState.

Tambahkan filter yang memungkinkan Anda untuk hanya menampilkan sepeda yang tersedia. Untuk melakukan ini, kita akan menempatkan kotak centang pada halaman, dengan mengklik di mana kita akan mengubah keadaan halaman, menetapkan nilai onlyAvailable variabel (sesuai dengan apakah kotak centang dipilih atau tidak). Nama variabelnya arbitrer, bisa disebut apa saja. Harap dicatat bahwa AMP mengimplementasikan caranya sendiri dalam menangani acara. Anda dapat menangani beberapa acara sekaligus, dan untuk setiap acara Anda dapat melakukan beberapa tindakan.

 <label> <input type="checkbox" on="change:AMP.setState({ onlyAvailable: event.checked })"/>    </label>

Mekanisme pengikatan data memungkinkan Anda untuk mengikat variabel status halaman dengan nilai properti di markup HTML. Agar perpustakaan AMP membuat ikatan seperti itu, nama properti yang harus menerima nilai harus diambil dalam tanda kurung siku - []. Sebagai contoh, kami akan menambah atau menghapus kelas CSS 'aktif' (ini adalah kelas non-standar dan diatur oleh kami) tergantung pada nilai variabel onlyAvailable.

 <label [class]="onlyAvailable? 'active' : ''" >

Dalam mode pengembangan (# development = 1), keadaan halaman dapat ditampilkan pada konsol browser menggunakan fungsi AMP.printState ();

Sekarang tambahkan daftar produk ke status halaman. Untuk melakukan ini, kami menggunakan komponen amp-state terpisah. Komponen akan mengunduh data dari sumber yang sama dengan daftar amp , tetapi tidak akan dimuat ulang, karena AMP mengontrol pemuatan data dan menghindari permintaan yang tidak perlu. Selain itu, kami menambahkan makro bahwa, ketika mengubah nilai variabel onlyAvailable, akan memfilter daftar produk.

 <amp-state id="bikes" src="//localhost:3000/api/bikes"> </amp-state> <amp-bind-macro id="filteredBikes" expression="bikes.filter(bike => onlyAvailable ? bike.available : true)"> </amp-bind-macro>

Sekarang kita akan menggunakan daftar yang difilter sebagai sumber data untuk komponen amp-list . Untuk melakukan ini, kami mengaitkan properti src komponen dengan makroBed filtered. Dan juga menghubungkan properti dari ketinggian komponen dengan jumlah elemen. Ini diperlukan, karena ketinggian komponen amp-list tidak akan secara otomatis disesuaikan dengan jumlah elemen. Dalam contoh ini, angka 340 adalah ketinggian kartu produk, dan 16 adalah lekukan di atas dan di bawah.

 <amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" [src]="filteredBikes()" [height]="(340 + (16*2)) * filteredBikes().length" items=".">

Harap perhatikan bahwa pemuatan data eksplisit dengan menyetel properti src = "// localhost: 3000 / api / bikes" tetap ada. Anda tidak bisa menghapusnya. Saat memuat halaman AMP karena alasan kinerja, pengikatan data tidak dilakukan secara otomatis. Ini akan dieksekusi hanya setelah tindakan pengguna, seperti mengklik pada kotak centang.

Buka halaman yang dihasilkan dan verifikasi bahwa penyaringan bekerja dengan benar.

Cari

Implementasi pencarian mirip dengan implementasi filtering. Tambahkan bidang teks, dan saat memasuki tes, kami akan menetapkan status kueri variabel dari halaman nilai yang dimasukkan di bidang.

 <input type="text" placeholder="" id="query" autocomplete="off" on="input-debounced: AMP.setState({ query: event.value })" />

Backend di proyek kami mendukung pencarian. Untuk mencari produk, Anda perlu menambahkan parameter "q" ke permintaan GET yang sudah kita ketahui. Kami tidak akan membahas implementasi sisi server, tetapi melihat bagaimana melakukan permintaan baru ke server ketika kondisi halaman berubah.

Kami melakukan pengikatan data untuk parameter src komponen amp-state , yang sudah kami gunakan untuk mendapatkan data awal untuk pemfilteran. Saat Anda mengubah status halaman variabel kueri, kueri pencarian baru akan dieksekusi.

 <amp-state id="bikes" src="//localhost:3000/api/bikes" [src]="query ? '//localhost:3000/api/bikes?q=' + query : '//localhost:3000/api/bikes'"> </amp-state>

Itu dia, sekarang pencariannya bekerja di halaman. Selain itu, permintaan pencarian baru akan menjadi sumber data untuk pemfilteran, yang juga akan terus berfungsi dengan benar. Kode seluruh halaman disajikan di bawah ini.

 <body> <amp-img class="hero-img" src="img/hero.jpg" width="320" height="213" layout="responsive"> </amp-img> <div class="content"> <h2>   AMP  !</h2> <amp-state id="bikes" src="//localhost:3000/api/bikes" [src]= "query ? '//localhost:3000/api/bikes?q=' + query : '//localhost:3000/api/bikes'"> </amp-state> <amp-bind-macro id="filteredBikes" expression="bikes.filter(bike => onlyAvailable ? bike.available : true)"> </amp-bind-macro> <input type="text" placeholder="" id="query" autocomplete="off" on="input-debounced: AMP.setState({ query: event.value })" /> <label [class]="onlyAvailable? 'active' : ''" > <input type="checkbox" on="change:AMP.setState({ onlyAvailable: event.checked })" />    </label> <amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" [src]="filteredBikes()" [height]="(340 + (16*2)) * filteredBikes().length" items="."> <div placeholder>...</div> <div fallback>  .</div> <template type="amp-mustache"> <div class="card"> <amp-img height="200" layout="fixed-height" src="{{img}}" alt="{{title}}-{{price}}"> </amp-img> <hr/> <h2>{{title}}</h2> {{#available}} <p> </p>{{/available}} {{^available}} <p>  </p>{{/available}} <p>{{price}} </p> </div> </template> </amp-list> </div> </body>

Intinya: kami membuat halaman AMP interaktif dengan dukungan untuk memuat dan menautkan data. Kami menyelesaikan pemasangan dan mengubah status laman, mempelajari cara bekerja dengan templat, dan juga menanggapi input pengguna. Seperti yang Anda lihat, AMP membuatnya mudah untuk mengembangkan halaman dinamis yang interaktif, meskipun ada keterbatasan serius dalam penggunaan JavaScript. Coba sekarang untuk mengatakan bahwa AMP adalah untuk statika;). Kita tahu bahwa AMP dapat melakukan lebih banyak lagi!

AMP Toolbox

Saat memuat halaman AMP ke dalam cache dan mengirimkannya dari cache, Google melakukan banyak optimasi. Ketika Anda memberikan halaman AMP dari situs Anda secara langsung, maka, tentu saja, tidak ada optimasi tambahan yang dilakukan. Jika Anda ingin mempercepat pengembalian langsung halaman AMP, gunakan pustaka AMP Toolbox . Ini menyediakan termasuk middleware untuk Express, jadi biasanya menggunakan AMP Toolbox dengan Node.js adalah masalah menambahkan beberapa baris kode. Pada saat yang sama, kecepatan pemuatan halaman meningkat!

Langkah selanjutnya

Analisis

Jika Anda tidak mengumpulkan statistik tentang penggunaan situs Anda, maka tidak masuk akal untuk melakukan perubahan - Anda tidak akan memiliki gambaran yang jelas apakah perubahan itu positif, negatif atau netral. Bagaimana Anda bisa tahu jika pengalaman pengguna telah meningkat dengan penerapan AMP, jika Anda tidak memiliki informasi tentang pengalaman pengguna? Karena itu, pengenalan analitik sangat penting.

AMP mendukung dua komponen utama untuk mengumpulkan data: amp-pixel untuk pengaturan piksel sederhana dan amp-analitik untuk solusi analitik yang lebih kompleks. Komponen percobaan-amp juga memungkinkan Anda untuk melakukan tes A / B pada halaman AMP.

Dengan menggunakan amp-analytics, Anda dapat menghubungkan Google Analytics, Metrik Yandex dan penyedia lainnya (misalnya, Baidu Analytics).

Menambahkan analitik ke halaman sangat sederhana. Pertama, Anda perlu menghubungkan perpustakaan yang sesuai dengan komponen amp-analytics .

 <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Dan kemudian tempatkan komponen pada halaman dan konfigurasikan pengaturan. Untuk Google Analytics, akan terlihat seperti ini.

 <amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>

Untuk Metrik Yandex, kodenya sangat mirip.

 <amp-analytics type="metrika"> <script type="application/json"> { "vars": { "counterId": "XXXXXX" } } </script> </amp-analytics>

Secara alami, ini adalah pengaturan yang paling minim. Untuk solusi analitis apa pun, Anda perlu menentukan dalam pengaturan data mana yang ingin Anda kumpulkan.

Saat menggunakan komponen amp-analytics , ada masalah dengan melacak pengguna di halaman AMP dan non-AMP. Saya ingin id pengguna di mana pun sama. Untuk pengguna yang mengunduh halaman Anda dari cache Google dan kemudian mengklik tautan ke situs Anda secara langsung, dari sudut pandang analitik, untuk dianggap sebagai pengguna yang sama. Untuk melakukan ini, gunakan API ID Klien. Pelajari lebih lanjut tentang pengaturan apa yang perlu Anda buat dalam Bantuan Google Analytics .

Pekerja Layanan dan Odha (Aplikasi Web Progresif)

Dalam hal situs yang cukup kompleks, serta situs yang ada, akan sulit untuk menulis atau bahkan menulis ulang semuanya di AMP. Oleh karena itu, biasanya halaman yang diperoleh pengguna dari sumber eksternal (halaman login) membuat halaman AMP. Mereka akan terbuka dengan cepat baik dari cache dan langsung. Tetapi kemudian, ketika pengguna mengklik tautan di halaman AMP, dia akan dibawa ke situs utama Anda. Dan di sini penting bahwa situs utama saat memuat dari halaman AMP dimuat secara instan. Ini dicapai oleh mekanisme Pekerja Layanan. Ketika Anda membuka halaman AMP, itu harus menginstal layanan pekerja untuk situs utama, dan layanan pekerja, pada gilirannya, akan mengunduh dan men-cache file yang diperlukan. Berkat ini, tautan ke halaman AMP akan terbuka secara instan, karena semua atau hampir semua yang diperlukan untuk membuka halaman-halaman berikut sudah ada dalam cache.

Untuk menginstal pekerja layanan, gunakan komponen pekerja-pasang - serviceworker. Terhubung dengan cara yang sama seperti semua komponen AMP lainnya.

 <script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

Contoh penggunaannya disajikan di bawah ini.

 <amp-install-serviceworker src="/sw.js" data-iframe-src="https://mydomain.com/sw.html" layout="nodisplay"> </amp-install-serviceworker>

Jika pengguna mengunjungi situs Anda secara langsung, komponen akan menginstal pekerja layanan yang ditentukan oleh parameter src. Tetapi dalam hal memuat halaman AMP dari cache, ia tidak akan dapat melakukan ini, karena memasang pekerja layanan untuk domain lain dilarang. Oleh karena itu, Anda perlu membuat halaman di situs tempat kode instalasi pekerja layanan akan ditemukan. Saat memuat dari cache, pekerja -inst-install-servicework akan membuka halaman dalam iframe, dan pekerja layanan akan diinstal.

PWA (Progressive Web Apps) adalah pendekatan bagaimana membangun aplikasi web modern yang mendekati yang asli berdasarkan pengalaman pengguna. Jantung PWA adalah pekerja layanan. Seseorang mungkin menemukan pendapat bahwa AMP dan PWA sampai batas tertentu adalah pesaing. Bahkan, mereka saling melengkapi. PWA berfokus pada interaksi jangka panjang dan kapan pun memungkinkan dengan pengguna. Pada saat yang sama, AMP berkonsentrasi pada interaksi pertama ketika pengguna datang dari luar. PWA tidak memperbaiki persis aspek ini - interaksi pertama. Oleh karena itu, banyak proyek menggunakan AMP sebagai titik masuk yang mentransfer pengguna ke PWA. Dan itu sangat masuk akal. Jika Anda tidak seharusnya memiliki interaksi pengguna biasa, panjang atau kompleks, maka Anda bisa bertahan dengan satu AMP.

Kesimpulan

Pada artikel ini, kami melihat satu aplikasi AMP, meskipun sebenarnya ada banyak skenario yang lebih menarik. Misalnya, iklan AMPHTML adalah cara terbaik untuk membuat iklan yang memuat dengan cepat. Lagi pula, jika perlahan-lahan memuat spanduk ditempatkan pada halaman AMP yang terbuka langsung, pengguna kemungkinan besar tidak akan melihat iklan tersebut. Ya, dan di halaman biasa - iklan yang memuat lambat mengganggu pengguna. Karena itu, logis untuk melakukan periklanan itu sendiri (iklan kreatif) menggunakan AMP.

Pengguna menggunakan konten secara berbeda di desktop dan perangkat seluler. Misalnya, saat membaca dari ponsel, pengguna berhenti membaca artikel panjang jauh lebih awal daripada saat membaca dari desktop (dan sudahkah Anda membaca sampai titik ini? :)). Format cerita (cerita) baru-baru ini menjadi lebih dan lebih populer di perangkat seluler, dan cerita AMP adalah cara untuk membuat cerita seperti itu dengan cepat dan tanpa usaha ekstra.

Selain itu, versi AMP untuk email (AMPHTML untuk email) sedang dikembangkan, yang akan memungkinkan Anda untuk membuat email interaktif yang indah menggunakan AMP.

Jangan lupa juga bahwa AMP dapat digunakan hanya sebagai format untuk memasukkan konten di situs web Anda. Misalnya, jika Anda perlu menampilkan berita, artikel, atau kartu produk dalam aplikasi Bereaksi atau Bersudut, Anda dapat menyimpannya dalam format AMP, memuat sebelumnya dan kemudian langsung menampilkannya dalam aplikasi web (atau bahkan dalam aplikasi asli). Anda tidak harus menggunakan AMP untuk seluruh halaman - Konten AMP juga bisa berupa konten kecil.

Dengan menggunakan AMP, Anda dapat membuat seluruh situs serta halaman individual, spanduk, cerita, dan menggunakan AMP sebagai format cepat dan ringkas untuk memasukkan konten.

Sergey Pugachev, Pakar Pengembang Google
PS. Artikel ini adalah pandangan pribadi di AMP dan mungkin tidak bertepatan dengan pendapat Google atau majikan penulis;)

Kami menggunakan AMP sebagai pustaka serba guna untuk membuat situs dinamis cepat

Amp