16. November 2024

Astro: Performance-Boost mit Prefetch

In der heutigen Zeit, in der Benutzerfreundlichkeit und Geschwindigkeit immer wichtiger werden, ist die Optimierung von Ladezeiten ein entscheidender Faktor. In diesem Artikel zeige ich, wie du mit der Prefetch-Option im Astro Framework ein nahezu verzögerungsfreies Nutzererlebnis schaffst. Prefetch sorgt dafür, dass Seiten vorab geladen werden, sodass sie beim Navigieren sofort verfügbar sind.

Das Aktivieren von Prefetching

Die Aktivierung von Prefetch ist denkbar einfach und erfolgt in der Konfigurationsdatei astro.config.mjs:

import {defineConfig} from 'astro/config';

export default defineConfig({
    prefetch: true
});

Nach der Aktivierung wird das Prefetch-Skript automatisch eingebunden. Mit dem Attribut data-astro-prefetch kannst du das Prefetching gezielt für Links aktivieren:

<a href="/blog" data-astro-prefetch>

Standardmäßig lädt der Browser die verlinkte Seite vor, sobald der Benutzer den Mauszeiger über den Link bewegt.

Konfiguration von Prefetch

Prefetch bietet vier Strategien, die individuell konfiguriert werden können:

hover (Standard): Lädt die Zielseite vor, wenn die Maus über den Link fährt.
tap: Lädt die Seite vor, sobald der Benutzer den Link antippt.
viewport: Lädt die Seite vor, wenn der Link in den sichtbaren Bereich des Browsers gelangt.
load: Lädt alle Links der Seite vor, sobald die aktuelle Seite vollständig geladen ist.

Interessant: Bei langsamen Verbindungen oder aktiviertem Stromsparmodus passt Prefetch sich automatisch an und verwendet die Strategie tap.

Beispiel für die Konfiguration eines Links:

<a href="/blog" data-astro-prefetch="viewport">

Standardeinstellungen anpassen

Die Standardeinstellung von Prefetch lässt sich ebenfalls in der astro.config.mjs festlegen:

import {defineConfig} from 'astro/config';

export default defineConfig({
    prefetch: {
        defaultStrategy: 'viewport'
    }
});

Für meine eigenen Projekte bevorzuge ich die Strategie viewport, da sie eine gute Balance zwischen Performance und Ressourcenschonung bietet.

Weiterführende Informationen

Für noch mehr Details zu Prefetch im Astro Framework empfehle ich die offizielle Dokumentation.

← Zurück zum Blog