Zum Inhalt springen
EUID Prüfservice & Prüfsiegel, Startseite
Website prüfen lassen

Prüfpunkt co2.prefetch.medienDatenmenge je Aufruf

Warum laden Videos und PDFs besser erst auf Klick?

Mit <link rel="prefetch"> sagt eine Seite dem Browser: Diese Datei braucht der Besucher wahrscheinlich als Nächstes, lade sie im Hintergrund. Für die nächste kleine Seite ist das sinnvoll. Zeigt der Hinweis auf ein Video, ein Archiv oder ein PDF, laden Chrome, Edge und Firefox die Datei bei jedem Besuch mit; den Nutzen hat, wer sie öffnet. Die Prüfung meldet das mit der Adresse der Datei.

prefetch ist für die nächste Seite gedacht

Mit rel="prefetch" sagt eine Seite dem Browser, dass der Besucher eine Datei wahrscheinlich bei einer der nächsten Navigationen braucht; der Browser legt sie im Zwischenspeicher auf der Festplatte ab. Gedacht ist der Hinweis laut MDN für Seiten derselben Website und deren Dateien. Für ganze Seiten empfiehlt MDN inzwischen die Speculation Rules API. WordPress hat sie mit Version 6.8 auf allen Websites eingeschaltet, in der vorsichtigsten Stufe: Der Browser holt eine Seite erst, wenn der Besucher auf den Link zu klicken beginnt, nach WordPress meist einen Bruchteil einer Sekunde vor dem Seitenwechsel. Vorabladen ist damit Alltag, aber gezielt.

Was auf Verdacht lädt, zahlt jeder Besucher

Die Autoren des Web Almanac 2024 raten im Kapitel Nachhaltigkeit, vorausschauendes Laden zu vermeiden, weil es Dateien holen kann, die nie gebraucht werden. Bei einer Seite mit wenigen Kilobyte ist der Verlust klein. Bei einem Imagefilm oder einem Katalog als PDF lädt jeder Besucher die ganze Datei, auch wer nur die Öffnungszeiten sucht und im Mobilnetz unterwegs ist. Die neueren Speculation Rules nehmen darauf Rücksicht: Nach MDN laden sie nichts vorab, solange das Gerät im Energiespar- oder Datensparmodus läuft.

Was die Prüfung sucht

Sie liest alle link-Elemente mit rel="prefetch" und meldet jene, deren Adresse auf .mp4, .webm, .mov, .zip, .pdf, .mp3 oder .wav endet, unabhängig von der Größe der Datei. Der Befund nennt die Anzahl, bis fünf, und eine Adresse als Beispiel.

Warum das ins Gewicht fällt

Ein Imagefilm hat schnell 20 MB, eine Preisliste als PDF einige MB. Vorab geladen, vervielfacht so eine Datei die Datenmenge des Aufrufs, in Chrome, Edge und Firefox für jeden Besucher, auch im mobilen Netz. Den Nutzen hat, wer die Datei öffnet.

Beispiele

Imagefilm

Nicht erfüllt
<link rel="prefetch" href="/medien/imagefilm.mp4">
Erfüllt
<video controls preload="none" poster="/medien/imagefilm-vorschau.webp">
  <source src="/medien/imagefilm.mp4" type="video/mp4">
</video>

Preisliste

Nicht erfüllt
<link rel="prefetch" href="/downloads/preisliste-2026.pdf">
Erfüllt
<a href="/downloads/preisliste-2026.pdf">Preisliste 2026 (PDF, 3,2 MB)</a>

So gehen Sie es an

  1. Suchen Sie im Quelltext nach rel="prefetch" und sehen Sie nach, worauf die Hinweise zeigen.
  2. Entfernen Sie prefetch für Videos, Archive, Audio und PDFs.
  3. Verlinken Sie solche Dateien wie gewohnt; sie laden dann erst, wenn jemand klickt.
  4. Behalten Sie prefetch nur für kleine Dateien, die die nächste Seite sicher braucht.

Tipps aus der Praxis

  • Der Browser kennzeichnet vorab geladene Abrufe mit der Kopfzeile Sec-Purpose: prefetch. Protokolliert Ihr Server diese Kopfzeile, sehen Sie, wie oft eine Datei auf Verdacht geholt wurde.
  • Nennen Sie im Link Dateityp und Größe, etwa „Preisliste als PDF“ mit der Dateigröße dahinter. Wer im Mobilnetz ist, entscheidet dann selbst, ob er die Datei jetzt lädt.
  • Soll die nächste Seite schneller erscheinen, sind Speculation Rules mit der Stufe conservative der sparsame Weg: Sie laden eine Seite erst, wenn jemand auf ihren Link zu klicken beginnt.

Mehr zu diesem Thema

Weiter im Prüfbereich CO₂ & EmpCo

Dieser Prüfpunkt gehört zum Prüfbereich CO₂ & EmpCo; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.

  • Siegel Digitale Barrierefreiheit
  • Siegel Daten & Recht
  • Siegel Technische Qualität
  • Siegel Digital Excellence
  • Siegel Cyberversicherung

Geprüft. Für eine bessere digitale Zukunft.euid.com