Wie können wir dem Browser helfen, sich auf das Laden von Ressourcen vorzubereiten?
sobes.tech KI
Antwort von AI
Verwenden Sie Preload-Direktiven: preconnect, dns-prefetch, preload, prefetch, prerender.
| Direktive | Beschreibung | Beispiel |
|---|---|---|
preconnect |
Stellt eine Verbindung (DNS-Lookup, TCP-Handshake, TLS-Verhandlung) zu einer anderen Datenquelle im Voraus her. | <link rel="preconnect" href="https://cdn.example.com"> |
dns-prefetch |
Führt die DNS-Auflösung im Voraus durch. | <link rel="dns-prefetch" href="//api.example.com"> |
preload |
Fordert Ressourcen (JS, CSS, Schriftarten) mit hoher Priorität im Voraus an, ohne das Rendering zu blockieren. | <link rel="preload" href="/styles.css" as="style"> |
prefetch |
Fordert Ressourcen an, die wahrscheinlich in Zukunft benötigt werden (z.B. auf der nächsten Seite). | <link rel="prefetch" href="/next_page.html"> |
prerender |
Rendert die nächste Seite im Hintergrund in einem versteckten Tab. | <link rel="prerender" href="/upcoming_page.html"> |
Verwenden Sie das Attribut async oder defer im <script>-Tag, um Skripte asynchron zu laden und auszuführen, ohne das HTML-Parsing zu blockieren:
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
Verwenden Sie das Attribut loading="lazy" für Bilder und <iframe>, um sie bei Sichtbarkeit verzögert zu laden:
<img src="image.jpg" loading="lazy" alt="Lazy geladene Bild">
Optimieren Sie Bilder (komprimieren, moderne Formate wie WebP verwenden), Schriftarten (Subsets, Formate WOFF/WOFF2) und andere Ressourcen.
Minimieren und komprimieren Sie CSS, JavaScript und HTML.
Verwenden Sie Service Worker, um Ressourcen zwischenzuspeichern und Offline-Zugriff zu gewährleisten.
Teilen Sie großen JavaScript-Code in kleinere Teile (Code Splitting) und laden Sie sie bei Bedarf.
Verwenden Sie HTTP/2 und HTTP/3 für effizienteres Multiplexing und Header-Kompression.
Setzen Sie die richtigen Cache-Header (Cache-Control, Expires) auf dem Server.
Verwenden Sie <link rel="modulepreload">, um ES-Module JavaScript im Voraus zu laden.
<link rel="modulepreload" href="/dist/module.js">