Zum Inhalt springen
noel.marketing

Astro

Astro Prefetch für schnellere Navigation

Noel

Geschrieben von Noel
Veröffentlicht:
20 Min. Lesezeit

Themen mit KI-Unterstützung recherchiert; von Noel vor der Veröffentlichung geprüft und überarbeitet.

Entwickler überprüft die Navigationsleistung auf einem Laptop-Bildschirm

Thema vertiefen

Weitere Astro-Guides, Glossar-Einträge und Workflows findest du im Themen-Hub.

Astro Prefetch ist Astros Methode, um interne Seiten zu laden, bevor ein Besucher sie anklickt, sodass die Navigation schneller und reaktionsschneller wirkt. In praktischen Begriffen reduziert es die Wartezeit zwischen Absicht und Seitenwechsel, was auf Inhaltsseiten, Marketingseiten und Produktflüssen wichtig ist, wo jede zusätzliche Sekunde den Schwung unterbrechen kann.

Die Grundidee ist einfach: Machen Sie die Arbeit vor dem Klick, aber nur, wenn es ein gutes Signal gibt, dass der Klick wahrscheinlich ist. Deshalb bietet Astro Ihnen mehrere Strategien an, anstatt ein einziges immer aktives Verhalten.

Wichtigste Erkenntnisse

  • Prefetching hilft am meisten, wenn die nächste Seite wahrscheinlich besucht wird, nicht wenn jeder Link gleich wichtig ist.
  • Die Standard-Hover-Strategie ist ein guter Ausgangspunkt, da sie auf die Benutzerabsicht wartet.
  • Aggressives Vorladen kann Bandbreite verschwenden und mit wichtigeren Seitenressourcen konkurrieren.
  • Sie können das Verhalten pro Link oder global anpassen, was es einfacher macht, reale Navigationsmuster zu treffen.
  • Prefetching verbessert die wahrgenommene Geschwindigkeit, ersetzt jedoch nicht eine gute Seitenarchitektur oder leichte Seiten.

Was ist das?

Astro Prefetch ist eine optionale Navigation-Optimierung, die verlinkte Seiten im Voraus abruft. Wenn ein Besucher über einen Link fährt, fokussiert, tippt, in der Nähe scrollt oder auf andere Weise Interesse an einem Link signalisiert, kann Astro beginnen, die Zielseite im Hintergrund zu laden, sodass die nächste Navigation fast sofort erscheint.

Das ist wichtig, denn Nutzer erleben Leistung selten als Labormetrik. Sie erleben es als Reibung: eine Pause nach dem Klicken auf ein Menüelement, eine Verzögerung nach der Auswahl einer Produktseite oder ein kurzes Stocken beim Wechsel von einem Artikel zu einem anderen. Prefetching reduziert dieses Stocken, indem es einen Teil der Netzwerkarbeit früher in die Interaktion verschiebt.

Ein konkretes Beispiel: Stellen Sie sich eine Händlerseite mit einer Homepage, Kategorieseiten und einigen Produktdetailseiten mit hoher Absicht vor. Wenn ein Besucher über einen hervorgehobenen Produktlink fährt und dann darauf klickt, könnte die Seite bereits teilweise geladen sein, bis der Klick erfolgt. Das Ergebnis ist kein Zauber, aber es fühlt sich oft viel flüssiger an als eine kalte Navigation.

Astro Prefetch ist auch selektiv gestaltet. Es gilt für interne Links und nicht für externe Seiten, was die Funktion auf Ihre eigenen Navigationspfade konzentriert. Das macht es besser geeignet für Mehrseitenanwendungen, bei denen die nächste Seite vorhersehbar ist und es sich lohnt, sie im Voraus vorzubereiten.

In der Praxis wird die Funktion am besten als Wahrscheinlichkeitswerkzeug verstanden. Es garantiert nicht, dass die nächste Seite verwendet wird, aber es versucht, Netzwerkaufwand nur dann zu betreiben, wenn die Chancen gut stehen. Deshalb ist es nützlich auf Seiten mit klaren Pfaden: eine Homepage, die auf einige Dienstleistungsseiten verweist, eine Dokumentationsseite mit einer logischen Lesereihenfolge oder ein Shop, in dem Kategorieseiten natürlich zu Produktdetailseiten führen. Wenn die Navigation der Seite zufällig oder erkundend ist, sinkt der Wert schnell.

Ein nützliches mentales Modell ist, es mit einem Reservierungssystem zu vergleichen. Anstatt zu warten, bis der Besucher bereits an der Tür ist, beginnt Astro, das Zimmer vorzubereiten, wenn der Besucher Anzeichen zeigt, dass er kommt. Diese Vorbereitung kann den Übergang nahtlos erscheinen lassen, aber nur, wenn die Reservierung für das richtige Zimmer erfolgt. Wenn Sie zu viele Zimmer reservieren, wird das System ineffizient; wenn Sie die falschen reservieren, verschwindet der Nutzen.

Astro Prefetch passt auch in das breitere Konzept der “wahrgenommenen Leistung”. Eine Seite kann immer noch Zeit zum Rendern benötigen, aber wenn die nächste Seite bereits wartet, wenn der Benutzer danach fragt, fühlt sich die Erfahrung viel unmittelbarer an. Diese Unterscheidung ist für Teams wichtig, da sie das Optimierungsziel ändert. Sie versuchen nicht nur, den Browser absolut schneller zu machen; Sie versuchen, die sichtbare Pause zu entfernen, in dem Moment, in dem der Besucher entscheidet, sich zu bewegen.

Warum es wichtig ist – geschäftliche und technische Auswirkungen

Aus geschäftlicher Sicht reduziert schnellere Navigation die kleinen Momente des Zögerns, die eine Browsing-Sitzung unterbrechen können. Wenn ein Besucher eine Dienstleistungsseite, ein Portfolio oder einen Produktkatalog erkundet, schafft jede verzögerte Seitenänderung eine Gelegenheit zur Ablenkung. Prefetching hilft, den Fluss aufrechtzuerhalten, insbesondere in Reisen, bei denen Benutzer mehrere Seiten besuchen, bevor sie konvertieren.

Für Händler kann das in der Kategoriebrowsing, redaktionellen Landingpages und Produktvergleichsflüssen von Bedeutung sein. Ein Besucher, der von einer Seite zur anderen wechseln kann, ohne zu warten, ist wahrscheinlicher geneigt, weiter zu erkunden. Das garantiert keine Konversion, entfernt jedoch eine häufige Quelle der Reibung vom Pfad.

Technisch ist Astro Prefetch nützlich, weil es Ihnen die Kontrolle darüber gibt, wann und wie Ressourcen vorbereitet werden. Sie sind nicht gezwungen, ein pauschales Verhalten zu verwenden. Stattdessen können Sie wählen, ob die Seite auf Hover, Tap, Sichtbereichseintritt oder Seitenladung reagieren soll, und Sie können diese Wahl für einzelne Links überschreiben, wenn der Kontext es erfordert.

Der Nachteil ist Bandbreite und Browserarbeit. Zu viel Prefetching kann mit der aktuellen Seite konkurrieren, insbesondere auf langsameren Geräten oder Verbindungen. Deshalb ist die Funktion nur dann wertvoll, wenn sie mit Maß angewendet wird. Das Ziel ist nicht, alles vorab zu laden; das Ziel ist es, wahrscheinliche Navigation schneller erscheinen zu lassen, ohne die aktuelle Seite schwerer zu machen, als sie sein muss.

Es gibt auch einen betrieblichen Vorteil für Teams. Da Prefetching konfigurierbar ist, können Entwickler es mit Analytik, Inhaltsprioritäten und Geräteverhalten in Einklang bringen, anstatt zu raten. Wenn die Daten zeigen, dass Besucher normalerweise von einer Kategorieseite zu einer bestimmten Produktseite wechseln, kann dieser Pfad optimiert werden. Wenn ein anderer Link sichtbar, aber selten verwendet wird, kann er unbeachtet bleiben. Dieser selektive Ansatz hält die Seite reaktionsschnell, ohne jede Seite in ein Hintergrunddownload-Hub zu verwandeln.

Ein zweiter technischer Vorteil ist Vorhersehbarkeit. Wenn ein Team weiß, welche Interaktionen Prefetching auslösen, wird es einfacher, das Netzwerkverhalten während QA- und Leistungsbewertungen zu verstehen. Das ist besonders hilfreich auf Seiten, die bereits Bildoptimierung, partielle Hydration oder andere Leistungsmerkmale verwenden. Prefetching wird dann zu einem Teil einer breiteren Strategie, anstatt zu einem isolierten Trick.

Es hilft Teams auch, eine häufige Leistungsfalle zu vermeiden: das Optimieren der falschen Ebene. Eine Seite kann Wochen damit verbringen, Millisekunden beim Rendern abzuziehen, während der Benutzer nach jedem Klick immer noch wartet. Prefetching adressiert diese spezifische Lücke zwischen Absicht und Navigation. Mit anderen Worten, es verbessert den Moment, in dem der Benutzer am empfindlichsten auf Verzögerungen reagiert, was oft wertvoller ist als eine kleine Verbesserung irgendwo früher im Seitenlebenszyklus.

Wie es funktioniert – Schritt für Schritt den Mechanismus erklären

Astro Prefetch funktioniert, indem es ein Prefetch-Skript auf Ihrer Seite hinzufügt und dann Link-Ebenen-Signale verwendet, um zu entscheiden, wann Zielseiten abgerufen werden sollen. Sie aktivieren die Funktion in der Konfiguration und markieren Links oder konfigurieren Standardwerte, damit Astro weiß, welche Navigationspfade im Voraus vorbereitet werden sollen.

Die Standardinteraktion basiert auf Hover. Das bedeutet, dass der Browser mit dem Vorladen beginnt, wenn ein Benutzer über einen Link fährt oder ihn fokussiert. Dies ist eine nützliche Basis, da sie die Absicht widerspiegelt, ohne zu eifrig zu sein. Wenn ein Benutzer lediglich an einem Link vorbeiscrollt oder einen kurzen Blick darauf wirft, passiert nichts. Wenn er darauf verweilt, kann die Seite mit dem Laden des Ziels beginnen.

Astro unterstützt auch andere Strategien. Tap wartet bis kurz vor einem Klick, was nützlich ist, wenn Hover kein zuverlässiges Signal ist, wie bei Touch-first-Geräten. Viewport beginnt, wenn ein Link in den Sichtbereich eintritt, was gut für lange Listen oder Artikelseiten funktioniert, bei denen der nächste wahrscheinliche Klick sichtbar ist. Load prefetches alle Links, nachdem die Seite geladen wurde, was die aggressivste Option ist und in der Regel diejenige, die am vorsichtigsten behandelt werden muss.

Es gibt auch einen programmatischen Weg über das astro:prefetch-Modul. Das ist wichtig, wenn die Navigation kein einfacher Anker-Tag ist oder wenn Sie Prefetching von einer benutzerdefinierten Interaktion auslösen möchten, z.B. von einem Button oder einem geskripteten Menü. In diesem Fall können Sie prefetch() aus dem Client-Seiten-Code aufrufen und die gleichen browserbewussten Schutzmaßnahmen verwenden.

Eine nützliche Art, über den Mechanismus nachzudenken, ist in Schichten:

  1. Die Seite entscheidet, ob Prefetching aktiviert ist.
  2. Ein Link oder eine Interaktion signalisiert, dass eine Seite bald benötigt werden könnte.
  3. Astro ruft die Zielseite im Hintergrund ab.
  4. Der Browser hält diese Arbeit für die tatsächliche Navigation bereit.
  5. Wenn der Benutzer nie klickt, kann der Nutzen verloren gehen, aber die Kosten sind durch die gewählte Strategie begrenzt.

Deshalb ist die Auswahl der Strategie ebenso wichtig wie die Funktion selbst. Das gleiche Prefetch-System kann sanft oder aggressiv sein, je nachdem, wie Sie es konfigurieren.

Astro versucht auch, unnötige Anstrengungen in Situationen mit geringem Wert zu vermeiden. Die Dokumentation weist darauf hin, dass Prefetching in den Datensparmodus oder bei langsamen Verbindungen auf ein weniger aggressives Verhalten zurückfallen kann, was wichtig ist, da die gleiche Interaktion, die auf einem schnellen Laptop großartig erscheint, auf einem eingeschränkten mobilen Netzwerk aufdringlich wirken kann. Mit anderen Worten, der Mechanismus ist nicht nur “früh abrufen”; es ist “früh abrufen, wenn die Browser- und Netzwerkbedingungen einen sinnvollen Kompromiss darstellen.”

Es gibt einen praktischen Unterschied zwischen Prefetching und tatsächlich Navigieren. Prefetching bereitet das Ziel vor, ersetzt jedoch nicht den Klick oder die normalen Navigationsregeln des Browsers. Das bedeutet, dass die Funktion am sichersten ist, wenn sie verwendet wird, um Verzögerungen zu reduzieren, nicht um die Benutzererwartungen zu ändern. Besucher sollten weiterhin das Gefühl haben, die Kontrolle über die Reise zu haben, und die Seite sollte sich weiterhin wie ein normales Set von Links verhalten.

Ein weiteres wichtiges Detail ist, dass Prefetching nicht dasselbe ist wie das Vorab-Rendern der Seite. Es kann die Menge der Arbeit, die beim Klick übrig bleibt, reduzieren, aber der Browser muss die Navigation trotzdem abschließen und das Ziel rendern. Deshalb kommen die besten Ergebnisse, wenn Prefetching mit leichten Seiten, effizienten Assets und einer klaren Routenstruktur kombiniert wird. Wenn das Ziel teuer zu rendern ist, kann Prefetching nur einen Teil der Arbeit leisten.

Anwendungsfälle – wo Teams dies tatsächlich anwenden

Ein häufiger Anwendungsfall ist redaktionelle und inhaltsreiche Navigation. Wenn Sie einen Blog, eine Dokumentationsseite oder eine Wissensdatenbank betreiben, bewegen sich Leser oft von einem Artikel zum nächsten über verwandte Links, Kategorielinks oder in-seitige Navigation. Prefetching kann diese nächsten Schritte flüssiger gestalten, insbesondere wenn die Zielseiten leicht sind und die Links klar absichtlich sind.

Ein zweiter Anwendungsfall sind Marketing- und Portfolio-Websites. Diese Websites haben oft eine kleine Anzahl von hochgradig wertvollen Seiten: Startseite, Dienstleistungen, Fallstudien, Über uns, Kontakt und vielleicht einige Landingpages. Prefetching kann dem Besucher helfen, diese Reise ohne offensichtliche Pausen zu durchlaufen, was die Aufmerksamkeit auf die Botschaft und nicht den Ladezustand lenkt. Für eine Portfolio- oder Agenturseite kann das das Browsing-Erlebnis polierter erscheinen lassen.

Ein dritter Anwendungsfall sind Produktentdeckungsflüsse auf Händlerseiten. Denken Sie an eine Kategorieseite mit Filtern, hervorgehobenen Produkten und redaktionellen Blöcken. Wenn Besucher dazu tendieren, von einer Kategorieseite zu einer Produktseite und dann zu einem verwandten Produkt oder einer Markenstory zu wechseln, kann das Vorladen der wahrscheinlich nächsten Seite das Gefühl der Wartezeit zwischen Entscheidungen reduzieren. Es funktioniert am besten, wenn die Seitenstruktur bereits einen klaren Pfad widerspiegelt.

Das wichtige Entscheidungskriterium ist Vorhersehbarkeit. Wenn Sie die nächste Klick-Aktion vernünftigerweise erraten können, ist Prefetching wahrscheinlicher hilfreich. Wenn Benutzer unvorhersehbar zwischen nicht verwandten Seiten springen, ist ein leichterer oder selektiverer Ansatz in der Regel besser. Deshalb ist die Funktion in strukturierten Browsing-Umgebungen am stärksten und in chaotischen Navigationsmustern schwächer.

Es ist auch nützlich für Teams, die mehrere Navigationsoberflächen pflegen. Eine obere Navigation, eine Fußzeile, ein verwandter Inhaltsblock und ein Kartenraster verdienen nicht alle die gleiche Behandlung. Die obere Navigation kann ein guter Kandidat für Hover oder Tap sein, weil sie absichtliches Verhalten widerspiegelt. Ein dichtes Raster von Dutzenden von Karten kann besser nur für die wichtigsten Elemente durch den Sichtbereich bedient werden. Über die Navigationsoberflächen nachzudenken hilft Teams, den Fehler zu vermeiden, eine globale Regel auf jeden Link auf der Seite anzuwenden.

Für Entwickler ist ein weiterer Anwendungsfall die Reduzierung der wahrgenommenen Verzögerung in mehrstufigen Flows, ohne zu einer vollständigen Single-Page-App zu wechseln. Eine Seite kann ein MPA bleiben und sich dennoch schnell anfühlen, wenn die nächste Seite zum richtigen Zeitpunkt vorbereitet wird. Das ist nützlich für Teams, die die Einfachheit von servergerenderten Seiten möchten, aber dennoch ein anwendungsähnliches Browsing-Erlebnis anstreben.

Ein letzter Anwendungsfall ist die interne Navigation auf Kampagnen- oder saisonalen Seiten. Wenn eine Landingpage nur wenige Nachfolgezielseiten hat, kann Prefetching die Reise aufrechterhalten, ohne den Besucher nach einem Call-to-Action warten zu lassen. Das ist besonders hilfreich, wenn die Seite darauf ausgelegt ist, die Aufmerksamkeit auf einen oder zwei nächste Schritte zu lenken, anstatt viele konkurrierende Optionen zu bieten.

Wie man es implementiert oder anwendet – praktische Anleitung

Beginnen Sie damit, zu entscheiden, ob Sie ein globales Standardverhalten oder eine selektive Einführung wünschen. Wenn Ihre Seite nur eine kleine Anzahl wichtiger interner Links hat, ist selektives Prefetching oft die sauberere Wahl. Wenn die meisten internen Navigationen bedeutungsvoll sind und die Seite nicht ressourcenintensiv ist, kann ein breiteres Standardverhalten akzeptabel sein.

Ein praktischer Implementierungsweg besteht darin, Prefetching in astro.config.mjs zu aktivieren und dann data-astro-prefetch zu den Links hinzuzufügen, die am wichtigsten sind. Das gibt Ihnen die Kontrolle, ohne dass jeder Link gleich reagiert. Beispielsweise kann ein hero Link auf der Startseite, primäre Navigationselemente und einige hochgradig verwandte Links vor dem Rest vorab geladen werden.

Wenn Sie ein anderes Interaktionsmodell benötigen, wählen Sie die Strategie, die zum Gerät und Layout der Seite passt. Hover funktioniert gut für Desktop-Navigation. Tap ist natürlicher für touch-first Verhalten. Viewport kann bei Seiten helfen, wo der nächste wahrscheinliche Klick in einer sichtbaren Liste erscheint. Load sollte vorsichtig behandelt werden, da es die umfassendste und teuerste Option ist.

Ein guter Implementierungsworkflow sieht so aus:

  • Identifizieren Sie die Seiten, die Benutzer am wahrscheinlichsten als nächstes besuchen.
  • Überprüfen Sie, ob diese Seiten leicht genug sind, um sie vorab zu laden, ohne die aktuelle Seite zu überladen.
  • Wählen Sie eine Standardstrategie, die dem dominierenden Geräteverhalten entspricht.
  • Überschreiben Sie einzelne Links, wenn die Absicht stärker oder schwächer ist als die Standardstrategie.
  • Testen Sie bei langsamen Verbindungen und weniger leistungsstarken Geräten, nicht nur auf einem schnellen Desktop.

Wenn Sie benutzerdefinierte Schaltflächen oder geskriptete Navigation verwenden, kann die prefetch() API helfen. Verwenden Sie sie nur im Client-Seiten-Code, da sie von Browser-APIs abhängt. Das macht sie zu einem nützlichen Werkzeug für interaktive UI-Muster, jedoch nicht zu einem Ersatz für durchdachtes Linkdesign.

Ein weiterer praktischer Punkt: Wenn Ihre Seiten bereits die Astro Islands-Architektur verwenden, sollte Prefetching weiterhin als Navigation-Optimierung bewertet werden und nicht als Komponentenkorrektur. Islands können die Seite leicht halten, während Prefetching die nächste Seite schneller ankommen lässt. Sie lösen unterschiedliche Probleme.

Eine sinnvolle Einführung beginnt normalerweise mit einem oder zwei hochgradigen Pfaden anstelle der gesamten Seite. Ein Team könnte beispielsweise die primäre Navigation und die am häufigsten angeklickten verwandten Links eine Woche lang vorladen und dann vergleichen, wie sich die Seite auf Mobilgeräten und Desktop anfühlt. Wenn sich die Erfahrung verbessert, ohne offensichtliche Bandbreitenkosten zu verursachen, können sie erweitern. Andernfalls können sie den Umfang einschränken oder die Strategien ändern. Dieser inkrementelle Ansatz ist sicherer als alles auf einmal zu aktivieren und zu hoffen, dass der Browser es regelt.

Wenn Sie es implementieren, denken Sie an das Inhaltsmodell. Ein Link in einer Produktkarte, ein Link in einem festen Header und ein Link am Ende eines Artikels tragen nicht die gleiche Absicht. Je mehr der Link an einen wahrscheinlichen nächsten Schritt gebunden ist, desto wertvoller wird Prefetching. Deshalb ist eine gute Implementierung in der Regel sowohl redaktionell als auch technisch: Jemand muss entscheiden, welche Pfade die zusätzliche Hilfe verdienen.

Wenn Sie mit einer größeren Seite arbeiten, kann es hilfreich sein, eine einfache Prefetch-Politik zu erstellen, bevor Sie den Code berühren. Zum Beispiel: Primäre Navigation erhält Hover, hochgradige Karten erhalten Viewport, touch-lastige Flows erhalten Tap und alles andere bleibt aus, es sei denn, die Analytik beweist, dass es wichtig ist. Diese Politik gibt Designern, Redakteuren und Entwicklern einen gemeinsamen Regelrahmen, was die Funktion über die Zeit einfacher zu pflegen macht.

Häufige Fehler und Fallstricke

Der häufigste Fehler besteht darin, Prefetching als standardmäßigen Performance-Vorteil zu betrachten. Das ist es nicht. Wenn Sie zu viele Seiten vorladen, können Sie unnötige Netzwerkaktivitäten erzeugen, insbesondere auf mobilen Geräten oder bei Verbindungen mit begrenzter Bandbreite. Das Ergebnis kann ein geschäftigerer Browser sein, ohne einen merklichen Nutzen für den Benutzer.

Ein weiterer Fehler besteht darin, die falsche Strategie für die Interaktion auszuwählen. Hover ist auf Touch-Geräten nicht immer sinnvoll, und Viewport ist nicht immer nützlich, wenn die sichtbaren Links geringwertig oder zahlreich sind. Die Strategie sollte tatsächliches Verhalten widerspiegeln, nicht nur das, was technisch elegant erscheint.

Eine dritte Falle besteht darin, das Seitengewicht zu ignorieren. Wenn die Zielseiten groß sind, kann Prefetching mehr Daten abrufen, als der Benutzer wahrscheinlich benötigt. Das kann für eine kleine Anzahl kritischer Seiten akzeptabel sein, wird jedoch riskant, wenn es breit auf einer großen Seite angewendet wird.

Es ist auch leicht zu vergessen, dass Prefetching nur für interne Links hilft. Wenn Ihre Navigation stark von externen Zielen abhängt, wird die Funktion diesen Teil der Erfahrung nicht lösen. In diesem Fall müssen Sie möglicherweise die Platzierung von Links verbessern, die Reibung auf der aktuellen Seite reduzieren oder die Reise selbst überdenken.

Schließlich sollten Sie nicht davon ausgehen, dass Prefetching die schlechte Informationsarchitektur ausgleichen kann. Wenn Benutzer nicht vorhersagen können, wohin ein Link führt, oder wenn die Struktur der Seite verwirrend ist, wird das frühere Laden von Seiten das zugrunde liegende Problem nicht beheben. Die besten Ergebnisse erzielen Sie, wenn die Seite bereits klare Pfade hat und die Funktion einfach die Wartezeit von diesen Pfaden entfernt.

Ein verwandter Fehler besteht darin, die Einrichtung nach Inhaltsänderungen nicht erneut zu überprüfen. Ein Link, der heute Prefetching verdient, kann nach einem Redesign an Wert verlieren, und eine Seite, die im letzten Quartal zu schwer war, kann jetzt leicht genug sein. Prefetch-Regeln sollten als lebendige Konfiguration behandelt werden, nicht als einmalige Optimierung. Wenn sich die Navigation der Seite ändert, sollte die Prefetch-Strategie gleichzeitig überprüft werden.

Ein weiterer Fallstrick ist, zu überschätzen, wie viel Prefetching langsames Rendering verbergen kann. Wenn die Zielseite selbst teuer zu rendern ist, kann Prefetching die Verzögerung nur früher verschieben, anstatt sie zu entfernen. In diesem Fall könnte die bessere Lösung darin bestehen, die Zielseite zu vereinfachen, die clientseitige Arbeit zu reduzieren oder die Asset-Auslieferung zu verbessern, bevor die Prefetch-Abdeckung erweitert wird.

Es gibt auch ein subtiler UX-Risiko: Prefetching kann eine Seite sprunghaft erscheinen lassen, wenn es zu eifrig ausgelöst wird. Ein Besucher kann seinen Zeiger über mehrere Links bewegen, während er browsed, und wenn die Seite mit jeder kurzen Berührung beginnt, Daten abzurufen, kann der Browser Arbeit für Seiten leisten, die der Benutzer nie beabsichtigt hat zu öffnen. Deshalb sind Absichtsschwellen wichtig. Eine gute Einrichtung sollte sich die meiste Zeit unsichtbar anfühlen, nicht ständig aktiv.

Beste Praktiken und schnelle Checkliste

Der sicherste Ansatz ist, klein zu beginnen und nur dort zu erweitern, wo die Beweise dies unterstützen. Prefetch die Links, die am wichtigsten sind, beobachten Sie, wie Besucher durch die Seite navigieren, und entscheiden Sie dann, ob die Einführung ausgeweitet werden sollte. Das hält die Funktion an realem Verhalten orientiert und nicht an Annahmen.

Eine starke Prefetch-Einrichtung folgt normalerweise einigen Prinzipien. Erstens, sie respektiert die Absicht: Verwenden Sie Hover oder Tap für die meisten Links und reservieren Sie aggressivere Strategien für Seiten, bei denen der nächste Klick hochgradig vorhersagbar ist. Zweitens schützt sie die Bandbreite: Vermeiden Sie es, alles vorzuladen, es sei denn, die Seite ist klein und die Navigation ist eng kontrolliert. Drittens bleibt sie wartbar: Dokumentieren Sie, welche Links vorab geladen werden und warum, damit zukünftige Bearbeitungen die Logik nicht rückgängig machen.

Verwenden Sie diese Checkliste, wenn Sie es anwenden:

  • Prefetch nur die Seiten, die Benutzer wahrscheinlich als nächstes besuchen werden.
  • Passen Sie die Strategie an das Gerät und das Interaktionsmuster an.
  • Halten Sie die Standardkonfiguration konservativ, es sei denn, Sie haben einen klaren Grund, dies nicht zu tun.
  • Testen Sie bei langsamen Netzwerken und mobiler Hardware.
  • Überprüfen Sie, ob Prefetching nach größeren Navigationsänderungen weiterhin nützlich ist.

Eine letzte beste Praxis ist, Prefetching mit guter Linkplatzierung zu kombinieren. Wenn der nächste Schritt offensichtlich und leicht zu erreichen ist, kann Prefetching diesen Schritt nahtlos erscheinen lassen. Wenn der nächste Schritt verborgen oder mehrdeutig ist, hat die Funktion nur begrenzten Wert. Mit anderen Worten, Prefetching funktioniert am besten als abschließende Schicht auf einer gut strukturierten Seite.

Es hilft auch, in Bezug auf “hohe Zuversicht” und “niedrige Zuversicht” Links zu denken. Hochzuverlässige Links sind die, die Benutzer fast immer als nächstes wählen, wie eine primäre CTA, ein oberes Navigationselement oder ein verwandter Artikel, der direkt mit der aktuellen Seite verbunden ist. Niedrigzuverlässige Links sind die, die sichtbar sind, aber nicht stark an die aktuelle Aufgabe gebunden sind. Prefetch die erste Gruppe zuerst und erweitern Sie sich nur in die zweite Gruppe, wenn die Daten dies unterstützen.

Eine schnelle betriebliche Checkliste für Teams:

  • Bestätigen Sie die häufigsten nächsten Seitenpfade der Seite.
  • Entscheiden Sie, welche Links standardmäßig Prefetching verdienen.
  • Wählen Sie eine Strategie, die dem dominierenden Gerätemix entspricht.
  • Überprüfen Sie, ob langsame Verbindungen weiterhin sinnvoll funktionieren.
  • Überprüfen Sie die Einrichtung nach Änderungen an Inhalt, Layout oder Navigation.

Wenn Sie eine einfache Faustregel wünschen, verwenden Sie dies: Prefetch, wenn die nächste Seite sowohl wahrscheinlich als auch wertvoll ist, vermeiden Sie es, wenn die nächste Seite ungewiss oder teuer ist. Diese eine Entscheidungsregel verhindert die meisten häufigen Fehler und hält die Funktion auf die Momente fokussiert, in denen sie die Erfahrung tatsächlich verbessert.

Verwandte Begriffe und weiterführende Literatur

Thema vertiefen

Weitere Astro-Guides, Glossar-Einträge und Workflows findest du im Themen-Hub.

Häufige Fragen

Was macht Astro Prefetch?

Astro Prefetch lädt eine verlinkte Seite im Hintergrund, bevor ein Besucher darauf klickt. Dadurch kann die Navigation viel schneller erscheinen, da der Browser die nächste Seite bereits bereit oder teilweise bereit hat. Es gilt nur für interne Links, also für Bewegungen innerhalb Ihrer eigenen Website.

Welche Prefetch-Strategie sollte ich standardmäßig verwenden?

Die standardmäßige Hover-Strategie ist normalerweise der sicherste Ausgangspunkt, da sie auf ein klares Zeichen der Absicht wartet. Sie eignet sich gut für Menüs, verwandte Inhaltslinks und die meisten redaktionellen Websites.

Verbessert Astro Prefetch immer die Leistung?

Nein. Es verbessert die wahrgenommene Geschwindigkeit, wenn Besucher wahrscheinlich einem Link folgen, kann aber auch Bandbreite verschwenden, wenn Sie zu aggressiv vorladen. Die beste Konfiguration hängt von den Verkehrsmustern, dem Seitengewicht und der Nutzung langsamer Verbindungen ab.

Kann ich jeden Link auf einer Seite vorladen?

Astro unterstützt das Vorladen aller Links standardmäßig, aber das ist nicht immer die richtige Wahl. Es kann nützlich sein auf kleinen, stark navigierbaren Seiten, wo die meisten Links wahrscheinlich verwendet werden.

Wie funktioniert Astro Prefetch mit Sichtübergängen?

Prefetching und Sichtübergänge lösen verschiedene Teile der Navigationserfahrung. Prefetching bereitet die nächsten Seitendaten früher vor, während Sichtübergänge den visuellen Wechsel zwischen Seiten glätten.

Wie entscheide ich zwischen Hover, Tap, Viewport und Load?

Wählen Sie die Strategie, die am besten zu der Art passt, wie Nutzer Links auf Ihrer Website entdecken. Hover ist am besten für Desktop-Nutzer, Tap für touch-first Interaktionen und Viewport für sichtbare Links in einer Liste.

Weiterlesen

  1. 1Effiziente Anfragenverarbeitung mit Astro

    Astro-Middleware ermöglicht es Ihnen, Anfragen abzufangen, bevor eine Seite gerendert wird, und Daten über lokale Variablen zu teilen. Dieser Leitfaden erklärt, wie es funktioniert und wann Sie es verwenden sollten.

  2. 2Astro Server Islands für SEO

    Ein praktischer Leitfaden zu Astro Server Islands für Händler und Entwickler, die schnellere Seiten ohne Verzicht auf dynamische Inhalte wünschen. Erfahren Sie, wo sie SEO unterstützen, wie sie funktionieren und was zu vermeiden ist.

  3. 3Astro-View-Transitionen: Fließende Navigation ohne Rätselraten

    Astro-View-Transitionen sorgen für eine flüssigere Navigation zwischen Seiten, indem sie den Wechsel von einer Ansicht zur anderen animieren. Dieser Leitfaden erklärt, wie sie funktionieren, wann sie hilfreich sind und wie man sie sicher anwendet.

  4. 4Optimierung von Bildern in Astro

    Die Optimierung von Bildern in Astro hilft Teams, schnellere Seiten zu erstellen, ohne raten zu müssen, welche Bilder transformiert oder zwischengespeichert werden sollten. Dieser Leitfaden erklärt den Workflow, Fallstricke und bewährte Praktiken.

  5. 5Astro-Inhaltskollektionen: Die praktische Methode zur strukturierten Inhaltsverwaltung

    Astro-Inhaltskollektionen bieten Teams eine strukturierte Möglichkeit, Markdown, MDX, JSON und YAML-Inhalte mit Validierung und Typensicherheit zu verwalten. Dieser Leitfaden erklärt, wie sie funktionieren und wann sie verwendet werden sollten.