Ladeleistung der nächsten Seite verbessern

Webfunktionen: Spekulationsregeln

Eine der effektivsten Möglichkeiten, die Leistung beim Seitenaufbau für Nutzer zu verbessern, die eine Website besuchen, besteht darin, das Laden der nächsten Seite, die sie besuchen werden, vor dem Besuch zu initiieren. Dies ist mit einer Technik namens „spekulatives Laden“ über die Speculation Rules API möglich.

Funktionsweise

Beim spekulativen Laden werden JSON-basierte Spekulationsregeln verwendet, um dem Browser mitzuteilen, welche Links vorab abgerufen oder vorab gerendert werden können. Dadurch wird die Leistung beim Seitenaufbau verbessert, wenn der Nutzer auf diese Links klickt.

Die Regeln können entweder eine hartcodierte Liste von URLs mit einem urls-Schlüssel (als Listenregel bezeichnet) oder ein where-Schlüssel mit einer Reihe von href- und CSS-Selektoren sein, die zum Suchen von Links auf der Seite verwendet werden (als document-Regel bezeichnet).

Regeln können auch ein optionales eagerness-Attribut enthalten, das angibt, wann die Seite vorab abgerufen oder gerendert werden soll. Das Attribut eagerness kann auf immediate, eager, moderate oder conservative festgelegt werden. immediate spekuliert so schnell wie möglich, während die anderen auf Nutzersignale warten, z. B. kurzes oder längeres Bewegen des Mauszeigers über die Seite oder Klicken auf die Seite.

Regeln können mit verschiedenen Einstellungen für die Eifrigkeit kombiniert werden, um zuerst eifrig vorab abzurufen und dann vorab zu rendern, wenn der Nutzer mehr interagiert.

Anwendungsbereich

Spekulatives Laden ist besonders nützlich für statische Seiten, deren Inhalt sich wahrscheinlich nicht oft ändert und die günstiger zu erstellen sind – insbesondere, wenn sie im Edge-Cache gespeichert werden. Es kann auch für dynamische Seiten verwendet werden, aber es ist wichtig, auf die Möglichkeit veralteter Inhalte zu achten.

Spekulatives Laden wird in der Regel für Links mit demselben Ursprung verwendet. Erweiterte Optionen ermöglichen jedoch auch spekulatives Laden für ursprungsübergreifende Links. In diesem Leitfaden geht es um den häufigeren Anwendungsfall mit derselben Quelle.

Ein aggressiveres spekulatives Laden ist eine gute Wahl für Seiten, die wahrscheinlich als Nächstes besucht werden, z. B. ein Artikel mit einer Schlagzeile oder die nächste Seite in einem schrittweisen Prozess wie einem Lernkurs.

Weniger spekulatives Laden ist eine gute Wahl, wenn nicht klar ist, was der Nutzer als Nächstes tun wird, oder wenn es viele Links auf der Seite gibt, die alle mit gleicher Wahrscheinlichkeit besucht werden. Wenn Sie auf weitere Signale warten, z. B. wenn der Nutzer den Mauszeiger auf die Seite bewegt oder auf die Seite klickt, können Sie die nächste Seite schneller laden und die Nutzerfreundlichkeit verbessern, auch wenn sie nicht vollständig vorab abgerufen oder gerendert wird.

Prefetch ist eine konservativere Wahl als Prerender. Es werden weniger Ressourcen (sowohl auf Client- als auch auf Serverseite) verwendet, aber der Nutzen für den Nutzer ist geringer. Sie ist eine gute Wahl für die erste Implementierung und kann später auf Prerendering erweitert werden, wenn der Entwickler dies ausdrücklich anfordert.

Verwendung

Spekulationsregeln haben ein JSON-basiertes Format und können in ein <script type="speculationrules">-Tag eingefügt werden. Die Regeln können im <head> oder <body> des Dokuments enthalten sein oder dynamisch mit JavaScript hinzugefügt werden.

Ein tag kann auch verwendet werden, entweder auf globaler Ebene oder pro Regel. Wenn dieses Tag festgelegt ist, wird es in den Sec-Speculation-Tags-Header aufgenommen. So können Sie serverseitig feststellen, welche Spekulationen vorgenommen wurden.

Beispiel für eine einfache URL-Listenregel zum Prefetching vordefinierter URLs

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

Beispiel für eine einfache Dokumentregel zum Prerendering aller Same-Origin-Links auf einer Seite

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

Beispiel für einen gemischten Regelsatz

In diesem Beispiel wird ein Regelsatz gezeigt, der alle Links vorab abruft und dann noch einen Schritt weiter geht, um dieselben Links vorab zu rendern, wenn mehr Signale mit moderate-Eagerness empfangen werden.

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Best Practices

  • DO: Verwenden Sie Spekulationsregeln, um Seiten, die der Nutzer wahrscheinlich als Nächstes besucht, vorab abzurufen und zu rendern.
  • DO use speculation rules for static sites, where the content is not likely to change often, and where pages are cheaper to produce—especially if cached at the edge.
  • Seien Sie vorsichtiger, wenn Sie Spekulationsregeln für dynamische Seiten verwenden, auf denen sich der Inhalt häufiger ändert, veraltet sein kann und die Erstellung von Seiten teurer ist.
  • EMPFOHLEN: Dokumentregeln sind Listenregeln vorzuziehen, da sie flexibler sind, die Verwendung derselben Regel auf mehreren Seiten ermöglichen und zum Prefetching und Prerendering von Seiten verwendet werden können, die nicht im Voraus bekannt sind.
  • DO consider the trade-offs between prefetch and prerender, and choose the appropriate one for your use case. Prerender ist teurer als Prefetch und kann in komplexen Anwendungen, die dynamische Zustände anzeigen, mehr unbeabsichtigte Nebenwirkungen verursachen, bietet aber eine bessere Nutzererfahrung. Fragen Sie den Entwickler, wenn Sie sich nicht sicher sind.
  • DO consider the trade-offs between the different eagerness levels, and choose the appropriate one for your use case. Eine aggressivere Spekulation bietet eine bessere Nutzererfahrung, verbraucht aber mehr Ressourcen und kann in komplexen Anwendungen, die dynamische Zustände anzeigen, zu mehr unbeabsichtigten Nebenwirkungen führen. Fragen Sie den Entwickler, wenn Sie sich nicht sicher sind.
  • Verwenden Sie Spekulationsregeln NICHT übermäßig, z. B. um jeden Link auf der Seite zu spekulieren. Browser haben Limits (2 Spekulationen für nicht-eifrige Spekulationen). immediate sollte nur für eine sehr kleine Anzahl von Links verwendet werden.
  • NICHT URLs spekulieren, die wahrscheinlich Statusänderungen auslösen, wie /logout oder /add-to-cart, und sie explizit von Ihren Spekulationsregeln ausschließen, wenn sie wahrscheinlich in Dokumentregeln enthalten sind.
  • Verwenden Sie KEINE Spekulationsregeln für Single-Page-Anwendungen (SPAs). Spekulationsregeln sind für mehrseitige Anwendungen (MPAs) konzipiert, bei denen der Browser bei jeder Navigation zu einem neuen Dokument wechselt. In SPAs navigiert der Browser nicht bei jeder Navigation zu einem neuen Dokument. Daher funktionieren Spekulationsregeln nicht wie erwartet.

Browserunterstützung und Fallback-Strategien

Spekulatives Laden ist jedoch eine progressive Verbesserung. Die Verwendung als Erweiterung ist völlig unbedenklich und wird aufgrund der potenziellen Leistungsvorteile dringend empfohlen. Wenn ein Browser keine Spekulationsregeln unterstützt, werden sie einfach ignoriert.