Spekulationsregeln API: Die Technologie hinter den Weblasten sofort.

Die Website ist für eine Sekunde zu spät ... die Hälfte der Kunden verschwindet? Das eigentliche Problem in einem Zeitalter, in dem niemand gerne wartet.

Warst du jemals? Klicken Sie auf den Link in eine interessante Webseite. Aber stattdessen musste auf den weißen Bildschirm, der sich drehte, sitzen und starre und darauf wartete, dass die Website heruntergeladen wurde ... 1 Sekunde ... 2 Sekunden ... 3 Sekunden ... Die Aufregung wurde allmählich irritiert und schließlich "besser zu schließen". Dies ist der Albtraum aller Website -Mitarbeiter und Geschäftsinhaber. Wir widmen uns sowohl Geld als auch Zeit, um SEO zu machen, zu schießen, gute Inhalte zu erstellen. Menschen hineinzuziehen, sondern musste stattdessen auf das Pferd fallen, um nur wegen "Langsamkeit" für nur wenige Sekunden Kunden zu sterben, die Lead oder Verkäufe werden sollten. Drücken Sie die Rücktaste. Bedauerlicherweise. Obwohl wir versuchen, die Website so schnell wie möglich zu verbessern, oder den Code anpassen, aber während des Klickens und Anzeigens des Codes existiert.

Eingabeaufforderung für Abbildungen: Vergleichsbilder von 2 Benutzern, eine sitze mit Langeweile auf dem Computerbildschirm. Eine andere Person lächelt und verwendet eine Website, die nach dem Klicken schnell geladen wurde.

Warum ist die Website so schnell ... müssen uns immer noch warten lassen? Schalte das Geheimnis hinter der Webladung frei.

Die Quelle dieses Problems ergibt sich aus der Art der Arbeit des Browsers. Grundsätzlich funktioniert der Browser nur wie "reaktiv". Er weiß nicht, welche Seite Sie gehen, bis Sie wirklich "klicken". Klicken. Nach dem Klicken starten diese Prozesse: 1. Senden Sie eine Anfrage an den Server. 2. Senden Sie die HTML -Datei zurück. Verarbeitung und "Zeichnen" der Webseite eins nach dem anderen, was Zeit in Anspruch nimmt, unabhängig davon, wie stark der Server Sie sind oder wie schnell das Internet das Internet ist. Dieser "Standardprozess" ist immer noch ein Engpass, der Verzögerung verursacht. Es ist, als würde man Essen im Laden bestellen. Sie müssen zuerst bestellen, dass der Küchenchef begonnen hat, wäre es besser, wenn der Koch "das Herz raten" und die Rohstoffe im Voraus vor Ihrer Bestellung vorbereiten?

Eingabeaufforderung für Abbildungen: Einfache Infografik Zeigen Sie den normalen Web -Ladevorgang (Benutzerklicks -> Anforderung -> Server -> Ressourcen herunterladen -> Render) mit einem Uhrensymbol, mit dem jeder Schritt die Zeit vermitteln soll.

Lassen Sie die Website weiterhin langsam sein? Ein erschreckender Einfluss, als nur Kunden zu verlieren

Wenn Sie dieses Problem bleiben, wird der Benutzer nicht nur frustriert, sondern wirkt sich auch langfristig langfristig auf Dominos Geschäft aus:

• Conversion -Rate, gesunken: Jede Sekunde, die langsamer ist, ist die Verlorene Vertriebsmöglichkeiten, die Kunden vor dem Erreichen der Zahlungsseite oder der Ausgabe des Formulars verlieren.
• Bookce -Rate stürmte hoch: Der Benutzer kam herein und drückte sofort. Es ist ein schlechtes Signal an Google, dass Ihre Website nicht Qualität ausreicht. Die direkt SEO beeinflusst
• Core Web Vitals ist unglücklich: Laden Sie die nächste Seite langsamer. Ein der wichtigsten Metriken, die die Website für die Verbesserung der INP , ist die Interactive -to Next -Lack (INP) beeinflusst.
• Die Zuverlässigkeit der Marke nimmt ab: das Web, das langsam und schlechte Erfahrung ist. Lässt die Marke in den Augen der Benutzer nicht professionell und unzuverlässig aussehen
• Benachteiligter Rennen: Während Sie die Website immer noch verlangsamen lassen, die Erlebnisse, die schneller als nur eine Sekunde bieten

All dies ist ein unsichtbarer Preis, der Ihr Geschäft jeden Tag beißt und wächst.

Eingabeaufforderung für Abbildungen: Das Diagramm auf einer Seite zeigt die zunehmende "Seitenladezeit". Und die andere Seite zeigt "Conversion -Rate" und "Benutzerzufriedenheit", die in die entgegengesetzte Richtung reduziert werden.

Wäre es besser, wenn die "wissende" Website, auf die wir klicken würden? Treffen Sie Spekulationsregeln API

Was wird passieren, wenn der Browser klug genug ist, um die nächste Aktion des Benutzers zu "erraten"? Anstatt zu warten, klicken Sie auf und laden Sie sie dann herunter. Stattdessen begann es, die nächste Seite "Fortschritt" ruhig hinter den Kulissen zu laden. Dies ist das Konzept der neuesten Technologie von Google, die Speculationsregeln -API namens Speculationsregeln . Es ist die "Magie", die Ihre Website fast unmittelbar nach dem Klicken auf den Weg macht!

Spekulationsregeln API ist eine Möglichkeit für uns, "Regeln" in einen einfachen Code zu schreiben. Um dem Browser mitzuteilen, dass "welche Seite" der Benutzer weiterhin mit den beiden Hauptstrategien entsprechen sollte:

• Vorab-​
• Prender: Das ist das Beste! Bestellt den Browser "lädt und rendering", die nächste Webseite im Hintergrund, wenn der Benutzer wirklich klickt, um dieses Gesicht sofort anzuzeigen, als würde man eine App auf Mobilgeräten öffnen. Dies ist der leistungsstärkste Ausgangspunkt für das Erstellen eines schnellsten Web -Erlebnisses. Und helfen Sie bei der Lösung des Problems mit Rendern-Blockingressourcen für die nächste Seite perfekt.

Der Beginn der Spekulationsregeln -API besteht darin, das Konzept der Erstellung einer "Seting" -Website auf eine "proaktive" Website zu ändern, die den Benutzern vor ihrer Anfrage Geschwindigkeit bereitstellt.

Aufforderung für Abbildungen: Die ersten 2 Arten von Dynamo -Bildern sind "normal", die darauf warten, zu klicken und dann herunterzuladen. Die zweite ist die "Spekulationsregeln", wobei die Webseite B im Hintergrund wartet. Und wenn der Benutzer auf Schalter klickt, um sofort anzuzeigen

"Die Nachrichten -Website ist 30%schneller." Reale Fälle von den Riesen, die Spekulationsregeln API verwenden.

Dies ist nicht nur die Theorie auf dem Papier. Aber das Unternehmen der Welt -Klasse hat die Spekulationsregeln -API angewendet und die erstaunlichen Ergebnisse erzielt. Die berühmte französische Nachrichtenwebsite wie Le Figaro hat diese Technologie ausprobiert. Sie legen die Regeln für den Browser fest, um einen Phother -Link, den Nachrichtenartikel zu erstellen, an dem Benutzer am meisten interessiert sind. Das Ergebnis ist die größte inhaltliche Farbe (LCP) oder die Geschwindigkeit des Ladens des Hauptinhalts der nächsten Seite ** bis zu 30%**! Ermöglicht den Lesern kontinuierliche und reibungslose Erfahrung wie nie zuvor

Ebenso Realtor.com, eine große Immobilien -Website, die den Peppernder mit der Seite mit den Hausdetails verwendet. Das Ergebnis ist die Geschwindigkeit, um ihre wichtigsten Pflichten zu beladen. ** erheblich verbessert ** Dies ist ein Beweis dafür, dass die API von Spekulationsregeln nicht nur ein Spielzeug für Entwickler ist. Aber ein leistungsstarkes Geschäftstool, mit dem Sie eindeutig Wettbewerbsvorteile schaffen können, die Sie mehr über diese Technik vom Chrome for Developers Blog .

Aufforderung für Abbildungen: Bilder mit Erfolg des Unternehmens (können ein fiktives Logo sein) mit einem bemerkenswerten Ergebnis von "+30% schnellerer Seitenlast" oder "Instant Navigation"

Was möchten Sie tun? Unterrichtsnutzung Spekulationsregeln API. Kopierpaste!)!

Die gute Nachricht ist, Spekulationsregeln zu verwenden. API ist viel einfacher als Sie denken. Sie müssen kein Gottheitsprogrammierer sein. Befolgen Sie die folgenden Schritte:

Schritt 1: Geben Sie die Zielverbindung an, die sehr wahrscheinlich ist.
Denken Sie auf Ihrer Website darüber nach. Wo ist die wahrscheinlichste Chance zu klicken? wie zum Beispiel

• Link "den nächsten Artikel lesen" auf der Blog -Seite
• Link "Siehe Produktdetails" aus der Kategorie
• Schaltfläche "zur Zahlungsseite" aus dem Warenkorb

Schritt 2: Erstellen Sie eine Spekulationsregelnregel in Form von JSON.
Wir erstellen einen einfachen Code. Um dem Browser zu sagen, was mit diesen Links zu tun ist

Beispiel 1: Als Link festgelegt (Listenregeln)
. Wenn wir genau wissen, welche Seite Sie möchten


{
"Peptection": [
{
"Source": "List",
"URLs": ["/blog/am nächsten gener-für-Formats", "/über-us"]
}
]
}


Beispiel 2: Definiert nach den Dokumentregeln,
die verwendet werden, um jeden Link zu beeinflussen, der das von uns angegebene Format enthält, z. B. jeden Link im Blog.


{
"Peptection": [
{
"Source": "Dokument",
"Wo": {
"href_matches": "/blog/*"
},
"Eierness": "moderat"
}
]
}


*`Eifer" ist zu bestimmen, wie schnell man funktioniert. Es gibt einen Wert "iMediate", "Eager", "moderat", "konservativ"

Schritt 3: Setzen Sie den Code auf Ihre Website.
Bringen Sie den JSON -Code mit, der im Tag erstellt wurde.

‍