Einführung
Die Webentwicklung hat sich seit langem in Richtung mobiler Inhalte bewegt. Der Trend der letzten Jahre zugunsten des Datenverkehrs von Mobilgeräten anstelle des Desktops hat dazu geführt, dass Suchmaschinen zunächst Anpassungsfähigkeit und schnelle Download-Geschwindigkeit von Websites forderten. Ab dem 1. Juli 2019 wechselte Google nur für neue Websites anstelle von Mobilgeräten zuerst auf Mobilgeräte. Dies bedeutet, dass er überhaupt nicht an der Desktop-Version interessiert ist.
Gleichzeitig schlugen Suchmaschinen Technologien für ein sehr schnelles Laden von Seiten vor. Bei Google ist es AMP (Accelerated Mobile Pages), bei Yandex - Turbo Pages.
Weiter im Artikel möchte ich über die Vor- und Nachteile und Probleme sprechen, die bei der Implementierung von AMP- und Turbo-Seiten für vorhandene Online-Shops aufgetreten sind.
Die Essenz beider Technologien beruht auf der Tatsache, dass Suchmaschinen den Inhalt der Seite mit Bildern zwischenspeichern und sie dem Besucher von ihren Servern geben. Dies berücksichtigt eine Reihe von Faktoren des Besuchers: Gerät, Bildschirm, Browser, Internetgeschwindigkeit usw. Abhängig von beispielsweise der Bildschirmauflösung oder der Geschwindigkeit des mobilen Internets liefert die Suchmaschine möglicherweise ein Bild mit niedrigerer Auflösung als auf der Website, und alle Grafiken werden verzögert geladen und vorgeladen. Ich habe festgestellt, dass Yandex WebP von Turbo-Seiten aus JPG-Bildern erstellt. Wenn der Browser dies unterstützt, wird es im WebP-Format gerendert, was einen Gewinn von 2-3 mal der Dateigröße ergibt.
In den Suchergebnissen sind diese Seiten mit Blitz (AMP) und Rakete (Turbo) markiert und werden sofort aus dem Suchmaschinen-Cache geöffnet, ohne die Website aufzurufen.
Aufgrund der Geschwindigkeit des Ladens werden Seiten mit AMP- und Turbo-Technologien in den Suchergebnissen beider Suchmaschinen höchstwahrscheinlich etwas besser eingestuft als die üblichen. Obwohl weder Google noch Yandex direkt darüber sprechen, bezieht sich die Tatsache, dass die Download-Geschwindigkeit für die Algorithmen wichtig ist und solche Websites mehr Punkte in den Ergebnissen erzielen.
Als Verbraucher mag ich diese Technologien sehr. Neben der Geschwindigkeit des Herunterladens von Inhalten sind diese Seiten in Bezug auf Design und Navigation so einfach wie möglich. Ich kann die Produktkarte sofort öffnen oder einen Artikel lesen, ohne die Designelemente unnötig abzulenken.
Technische Merkmale
Aus entwicklungspolitischer Sicht unterliegen diese Technologien vielen Einschränkungen, insbesondere
Yandex Turbo-Seiten . Bisher können sie nur als Spielzeug betrachtet werden, wenn wir über E-Comm-Sites sprechen. Turbo-Seiten erlauben derzeit keine Interaktion mit dem Backend des Shops und sind nur eine statische Zwischenverbindung zwischen der Suchmaschine und der Site, weil Um eine Aktion zum Kauf von Waren abzuschließen, muss der Benutzer die Website des Geschäfts aufrufen.
Bei
Google mit AMP sieht alles viel fröhlicher aus. Mit dieser Technologie können Sie dynamische Seiten erstellen, die vollständig mit Ihrem Server "kommunizieren" können. Zum Beispiel wird zum Zeitpunkt des Öffnens der Produktkarte im Hintergrund eine Aufforderung an den Server gesendet, den Preis zu aktualisieren und die Verfügbarkeit von Waren zu überprüfen. Selbst wenn das Produkt beendet wurde oder sich der Preis geändert hat und die Suchmaschine diese Änderungen noch nicht indiziert hat, sieht der Benutzer alles korrekt und schnell. Waren aus dem Cache werden sofort geladen und der Preis und die Verfügbarkeit werden aktualisiert, nachdem Daten von Ihrem Server empfangen wurden.
Anschließend können Sie mit diesem Produkt eine vollständige Bestellung an Ihr System senden und die Benutzerinformationen mit der Bestellnummer anzeigen. Mit AMP können Sie also eine vollständige Site mit einem Warenkorb, einer Autorisierung, einem Rückruf usw. erstellen, wenn auch in einer stark verkürzten Version.
Meiner Meinung nach werden Suchmaschinen versuchen, alle dazu zu zwingen, diese Technologien zu verwenden, damit Besucher die Suche nicht beenden, sondern sich direkt auf den Seiten von Suchmaschinen auf Websites anmelden, Bestellungen aufgeben, dafür bezahlen usw.
Für große Top-End-Stores mit eigenen Anwendungen, die bereits schnell sind, können diese AMP- und Turbo-Zwischenseiten schädlich sein, weil Der Benutzer muss ohnehin auf die Website gehen, um die volle Funktionalität zu erhalten, beispielsweise je nach Wahl der Lieferung.
In kleinen Läden ohne automatisierte Lager usw. kann dieses Format interessant sein. Vor allem, wenn Sie die minimale Logik der Interaktion mit dem Rücken neu erstellen: Aktualisieren des Preises, Autorisierung mit Erhalt eines persönlichen Rabattes / Boni, Senden einer Bestellung unter Berücksichtigung von Boni und Rabatten.
Wie viel diese Technologien gegen hochwertige Websites wirksam sein werden, wird sich mit der Zeit zeigen. Wenn sich Suchmaschinen jedoch aktiv in diese Richtung bewegen, wird dies einfach eine neue Realität sein, mit der jeder leben muss.
Zu den Minuspunkten beider Technologien gehört derzeit die Tatsache, dass Websites nicht unter einer realen Adresse geöffnet werden, sondern mit Suchmaschinenpräfixen, mit denen Sie beispielsweise keine Seite zu Ihren Favoriten hinzufügen oder freigeben können:
- Google: google.com/amp/s/[URL Ihrer Website]
- Yandex: yandex.ru/turbo?text=[URL Ihrer Site]
Ein Teil dieses Problems wird von Google in Chrome gelöst. Mit der 71-Version für AMP-Seiten ist es jetzt möglich, Ihre Adresse anzugeben. Dazu müssen Sie AMP Packager auf dem Server und ein SSL-Zertifikat mit Unterstützung für "CanSignHttpExchange" konfigurieren.
Yandex bleibt auch nicht zurück, und in den neuesten Versionen des Yandex-Browsers für iOS und Android wird die Site-Domain auch ohne Präfixe angezeigt.
AMP- und Turbo-Seiten in Bezug auf die Entwicklung
AMPs sind vollständige HTML-Seiten, die alle Tags und CSS unterstützen. Es gibt eine Reihe kleinerer Einschränkungen und den Unterschied im Design des Kopfes. Zum Beispiel ist das img-Tag verboten, stattdessen müssen Sie amp-img verwenden. Es gibt JavaScript-Komponenten, mit denen Sie über JSON eine Interaktion mit Ihrem Server herstellen können. Sie können beispielsweise ein schnelles Bestellformular von einer AMP-Seite an Ihren Server senden, eine Antwort in Form von JSON erhalten und anzeigen. Es gibt Komponenten für ein Karussell mit Bildern, Videos usw. Natives JavaScript wurde ursprünglich gesperrt, aber die Unterstützung für seine Skripte wurde kürzlich hinzugefügt.
Turbo-Seiten sind stark abgeschnittene HTML-Dateien, um eine Reihe von Tags zu unterstützen, jedoch mit vollständiger CSS3-Unterstützung. Derzeit können keine Szenarien für die Interaktion mit dem Backend erstellt werden. Es gibt auch Komponenten für Karussells, Videos und mehr.
Ich stelle fest, dass Yandex in die Fußstapfen von Google tritt und plant, bis Ende 2019 Möglichkeiten zur Interaktion mit dem Backend für E-Comm auf Turbo-Seiten hinzuzufügen:
- schnelle Bestellung
- Autorisierung
- Zahlung.
So übertragen Sie Seiten an eine Suchmaschine
Es gibt einen grundlegenden Unterschied zwischen AMP- und Turbo-Seiten.
AMPs sind auf der Website unter einer bestimmten URL verfügbar. Auf sie kann der Browser
zugreifen , zum Beispiel:
- /catalog/category/tovar.html - reguläre Seite
- /amp/catalog/category/tovar.html - AMP
Für jede Seite wird ein AMP erstellt und ein Link über Link rel im Kopf registriert:
- Von einer normalen Seite zum AMP-Link rel = "amphtml" href = ""
- Mit AMP Backlink rel = "canonical" href = ""
Google crawlt sowohl normale als auch AMP-Seiten, während die Website gecrawlt wird. Alles ist für die Entwicklung ziemlich transparent. Sie können verschiedene HTML-Dateien (regulär und AMP) in derselben Komponente / demselben Skript generieren und je nach URL an den Browser weitergeben.
Turbo-Seiten werden schwieriger. Sie müssen über die API in XML an Yandex gesendet werden, wo die ausgegebenen HTML-Seiten in CDATA gesendet werden. Bei der Übertragung müssen die Einschränkungen hinsichtlich der Anzahl der Seiten in einem XML, der Anzahl der Bilder auf jeder Seite und der Gesamtzahl der Bilder in jedem XML berücksichtigt werden.
Hier hatte ich ein Dilemma, wo ich dieses XML generieren sollte. Es gibt zwei Möglichkeiten.
Die erste besteht darin, die gesamte Logik der Site auf der Rückseite neu zu erstellen, was teuer und unpraktisch ist. Sie müssen alle URL-Optionen (ein moderner Shop ist eine unendliche Anzahl von URLs, die von Filtern empfangen werden), Preise, Rabatte, Werbeaktionen und mehr berücksichtigen. Zusätzlich zur Vorderseite muss all dies auf der Rückseite dupliziert werden.
Die zweite Möglichkeit besteht darin, Turbo-Seiten zum Zeitpunkt des Kontakts an der Vorderseite zu generieren, sie in eine Tabelle in der Datenbank zu schreiben und an Yandex zu übertragen. Dies reduziert die Kosten und vereinfacht die Aufgabe, weil Sie können sie zusammen mit regulären Seiten generieren.
Beide Optionen sind je nach Situation und Komplexität des Standorts realisierbar. Die erste und die zweite Option können verwendet werden. Ich benutze beide auf verschiedenen Seiten.
Was in der Zukunft?
Ich habe die Sendung AMP Conf 2019 gesehen, die im April in Japan stattfand. Die Hauptidee war, dass AMP als „AMP as Service“ positioniert wird. Dies bedeutet, dass die erstellten Seiten in Bezug auf die Technologie ständig automatisch aktualisiert werden. Beispielsweise kann die Lightbox-Galerie, die heute auf AMP-Seiten erstellt wurde, morgen mit anderen Effekten der Bildvergrößerung, des Bildwischens usw. arbeiten.
Ich halte auch die wichtigsten Punkte für wichtig, die bereits erschienen sind oder in naher Zukunft erscheinen werden:
- Verwenden von nativem JavaScript mit Einschränkungen
- Die Möglichkeit, Geschichten zu erstellen, die Google experimentell in einem separaten Block in der Ausgabe zu unterstützen begann (bisher nur in den USA)
- AMP für E-Mail (unterstützt Google Mail, den Start von mail.ru, Outlook im Sommer)
- Unterstützung der russischen Sprache
- Komponenten-Amp-Experiment für A / B-Tests
- Recaptcha 3-Unterstützung
Es kann davon ausgegangen werden, dass ein Großteil davon auf den Turbo-Seiten angewendet wird, jedoch mit einer Verzögerung.
Mit Google können Sie auch eine Progressive Web App erstellen, die auf AMP basiert. Ich habe mich nicht eingehend mit dieser Frage befasst. Wenn Sie jedoch die gesamte Website auf AMP erstellen und die Google-Anweisungen zur Anpassung für die Progressive Web App befolgen, erhalten Sie PWA, das vom Browser auf dem Startbildschirm installiert wird. Damit können Sie die Site ohne Internetverbindung ansehen und auf Push-Benachrichtigungen des Benutzers zugreifen.
Fazit
Google und Yandex werden sowohl reguläre Websites als auch E-Comm-Projekte dazu neigen, AMP- und Turbo-Seiten zu erstellen. Dies wiederum untergräbt das Verständnis für den Benutzer, auf welcher Website er sich befindet und bei wem er die Waren bestellt. Es könnte sich als globaler Marktplatz innerhalb von Suchmaschinen herausstellen.