Clever Geek Handbook

Technologies Yandex Turbo Pages and Google AMP for e-commerce

Introduction



Web development has long moved towards mobile content. The trend of the past few years in favor of traffic from mobile devices instead of the desktop, has led search engines to first demand adaptability and fast download speed from sites, and from July 1, 2019, Google switched to mobile only for new sites instead of mobile first. This means that he is not at all interested in the desktop version.



At the same time, search engines proposed technologies for very fast page loading. At Google it is AMP (Accelerated mobile pages), at Yandex - Turbo pages.



Further in the article I want to talk about the pros, cons and problems that I encountered when implementing AMP and Turbo pages for existing online stores.



The essence of both technologies boils down to the fact that search engines cache the contents of the page with pictures and give them to the visitor from their servers. This takes into account a number of factors of the visitor: device, screen, browser, Internet speed, etc. Depending on, for example, the screen resolution or the speed of the mobile Internet, the search engine may give a lower resolution image than it was on the site, plus all the graphics will be delayed loading and preloaders. I noticed that Yandex makes WebP of Turbo pages from JPG images, and if the browser supports it, it renders in WebP format, which gives a gain of 2-3 times the file size.



In the search results, these pages are marked with lightning (AMP) and rocket (Turbo) and open instantly from the cache of the search engine without going to the site.











Due to the speed of loading, pages using AMP and Turbo technologies are most likely to rank slightly better than the usual ones in the search results of both search engines. Although neither Google nor Yandex talk about it directly, only referring to the fact that the download speed is important for the algorithms and such sites get more points in the results.



As a consumer, I really like these technologies. In addition to the speed of downloading content, these pages are as easy as possible in terms of design and navigation, and I can instantly open the product card, or read some article without unnecessary distractions to the design elements.



Technical features



From a development point of view, these technologies impose many limitations, especially Yandex Turbo pages . They can be considered so far only as a toy, if we talk about e-comm sites. Turbo pages currently do not allow interaction with the backend of the store and are just an intermediate static link between the search engine and the site, because To complete an action to purchase goods, the user needs to go to the store’s website.



At Google with AMP, everything looks much more cheerful. The technology allows you to make dynamic pages that can fully "communicate" with your server. For example, at the time of opening the product card, in the background a request is made to the server to update the price, check the availability of goods. Thus, even if the product has ended, or the price has changed, and the search engine has not yet indexed these changes, the user will see everything correctly and quickly. Goods from the cache will load instantly and then the price and availability will be updated, after receiving data from your server.



Then you can send a full order to your system with this product and show the user information with the order number. Thus, using AMP, you can make a full site with a basket, authorization, callback, etc., albeit in a greatly truncated version.



In my opinion, search engines will try to force everyone to use these technologies so that visitors do not exit the search, but log in directly to the pages of search engines on sites, place orders, pay for them, etc.



For large top-end stores that have their own applications that are already fast, these intermediate AMP and Turbo pages can be harmful, because the user needs to go to the site anyway in order to get the full functionality, according to the choice of delivery, for example.



Small shops without automated warehouses, etc., this format may be interesting. Especially if you recreate the minimum logic of interaction with the back: updating the price, authorization with receiving a personal discount / bonuses, sending an order taking into account bonuses and discounts.



How much these technologies will be effective against high-grade sites will be shown by time, but if search engines actively move in this direction, it will simply be a new reality with which everyone will need to live.



The disadvantages of both technologies at the moment include the fact that sites are opened not under a real address, but with search engine prefixes, which, for example, does not allow you to add a page to your favorites or share:





Part of this problem is being solved by Google in Chrome with the 71 version for AMP pages, the opportunity has appeared to make your address. To do this, you need to configure AMP Packager on the server, and an ssl certificate with support for "CanSignHttpExchange".



Yandex also does not lag behind, and the latest versions of Yandex browser for iOS and Android will also display the site domain without prefixes.



AMP and Turbo pages in terms of development



AMPs are full-fledged HTML pages that support all tags and CSS. There are a number of minor restrictions, and the difference in the design of the head. For example, the img tag is forbidden, instead you need to use amp-img. There are JavaScript components that allow you to establish interaction with your server through JSON. For example, you can send a quick order form from an AMP page to your server, receive a response in the form of JSON and display it. There are components for a carousel of pictures, videos, etc. Native JavaScript was initially banned, but support for its scripts has recently been added.



Turbo pages are highly truncated html to support a number of tags, though with full CSS3 support. No scenarios for interacting with the backend at the moment can be done. There are also components for carousels, videos and more.

I note that Yandex is following in the footsteps of Google and plans to add opportunities for interaction with the backend for e-comm on Turbo pages before the end of 2019:





How to transfer pages to a search engine



There is a fundamental difference between AMP and Turbo pages.



AMPs are available on the site at a specific URL, they can be accessed by the browser, for example:





For each page, an AMP is created, and a link through link rel is registered in the head:





Google crawls both regular and AMP pages while crawling the site. Everything is pretty transparent for development, you can generate different html (regular and AMP) in the same component / script and give it to the browser depending on the URL.



Turbo pages are getting harder. They need to be sent to Yandex via the API in XML, where formatted HTML pages are sent inside CDATA. When transmitting, one must take into account the restrictions on the number of pages in one XML, on the number of images on each page, and the total number of images in each XML.



Here I have a dilemma where to generate this XML. There are two options.



The first is to recreate the entire logic of the site on the back, which is expensive and not convenient. You need to consider all URL options (a modern store is an infinite number of URLs obtained from filters), prices, discounts, promotions and more. In addition to the front, all this needs to be duplicated on the back.



The second option is to generate Turbo pages at the time of contact at the front, write them to some table in the database and transfer to Yandex. This will reduce the cost and simplify the task, because You can generate them along with regular pages.



Both options are viable, depending on the situation and complexity of the site, the first and second can be used. I use both on different sites.



What in the future?



I watched the broadcast of AMP Conf 2019, which took place in Japan in April. The main idea was that AMP would be positioned as “AMP as service”. This means that the created pages will constantly be updated automatically in terms of technology. For example, the lightbox gallery created today on AMP pages, may start working with other effects of image enlargement, image swipe, etc. tomorrow.



I also consider the key points important, which have already appeared or will appear in the near future:





It can be assumed that much of this will be applied in the Turbo pages, but with a lag.



Google also allows you to make a Progressive Web App based on AMP. I did not go deep into this question, but if you make the whole site on AMP and follow the Google instructions for adaptation for the Progressive Web App, you get PWA, which is installed from the browser on the home screen. It will allow you to watch the site without an Internet connection and gain access to Push notifications of the user.



Output



Google and Yandex will incline both regular sites and e-comm projects to make AMP and Turbo pages. That, in turn, will erode the understanding for the user on which site he is located and from whom he orders the goods. It may turn out to be a global marketplace inside search engines.


More articles:


All Articles