{"id":18857,"date":"2026-04-09T08:34:56","date_gmt":"2026-04-09T06:34:56","guid":{"rendered":"https:\/\/webhosting.de\/dns-prefetching-preloading-speed-optimierung-serverboost\/"},"modified":"2026-04-09T08:34:56","modified_gmt":"2026-04-09T06:34:56","slug":"dns-prefetching-precarga-optimizacion-de-la-velocidad-serverboost","status":"publish","type":"post","link":"https:\/\/webhosting.de\/es\/dns-prefetching-preloading-speed-optimierung-serverboost\/","title":{"rendered":"DNS prefetching y preloading: optimizaci\u00f3n de la velocidad del sitio web"},"content":{"rendered":"<p>DNS Prefetching und Preloading verk\u00fcrzen aktiv die Zeit bis zum ersten sichtbaren Inhalt, indem sie DNS, TCP und TLS fr\u00fch ansto\u00dfen und kritische Dateien vorab bereitstellen. Ich zeige, wie du mit <strong>DNS Prefetching<\/strong>, Preconnect und Preloading die <strong>Website-Geschwindigkeit<\/strong> sp\u00fcrbar steigerst \u2013 inklusive Code, WordPress-Setup und praxiserprobten Priorit\u00e4ten.<\/p>\n\n<h2>Zentrale Punkte<\/h2>\n\n<ul>\n  <li><strong>DNS Prefetch<\/strong>: Fr\u00fchzeitige Namensaufl\u00f6sung reduziert Latenz.<\/li>\n  <li><strong>Preconnect<\/strong>: DNS, TCP und TLS vorab \u00f6ffnen.<\/li>\n  <li><strong>Preload<\/strong>: Kritische Dateien aktiv vorziehen.<\/li>\n  <li><strong>Priorisierung<\/strong>: Wenige, aber entscheidende Domains.<\/li>\n  <li><strong>Monitoring<\/strong>: Effekte im Wasserfall pr\u00fcfen.<\/li>\n<\/ul>\n\n<h2>DNS Prefetching: kurz erkl\u00e4rt<\/h2>\n\n<p>Mit <strong>DNS Prefetching<\/strong> l\u00f6st der Browser die IP einer Domain vorab, bevor er eine Datei l\u00e4dt, und spart damit 20\u2013250&nbsp;ms pro Domain \u2013 besonders auf mobilen Verbindungen mit hoher <strong>Latenz<\/strong>. Ich setze den Hint f\u00fcr externe Hosts, die ich im Above-the-Fold-Bereich brauche, etwa f\u00fcr Fonts, Analytics oder ein CDN. Der Browser f\u00fchrt den DNS-Lookup im Hintergrund aus und verk\u00fcrzt so den kritischen Pfad zum ersten Rendern. Moderne Browser nutzen Prefetching teilweise automatisch, doch ich sichere den Effekt mit einem klaren Hint im Head ab. So reduziere ich Roundtrips, stabilisiere den fr\u00fchen Renderstart und beschleunige die <strong>Core&nbsp;Web&nbsp;Vitals<\/strong>.<\/p>\n\n<pre><code>&lt;link rel=\"dns-prefetch\" href=\"\/\/fonts.googleapis.com\"&gt;\n&lt;link rel=\"dns-prefetch\" href=\"\/\/www.googletagmanager.com\"&gt;\n&lt;link rel=\"dns-prefetch\" href=\"\/\/cdn.example.com\"&gt;\n<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-full is-resized\">\n  <img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/webhosting.de\/wp-content\/uploads\/2026\/04\/dns-speed-optimierung-1147.png\" alt=\"\" width=\"1536\" height=\"1024\"\/>\n<\/figure>\n\n\n<h2>Unterschied: DNS Prefetching vs. Preconnect<\/h2>\n\n<p>Prefetch l\u00f6st nur den <strong>DNS<\/strong>-Namen, w\u00e4hrend Preconnect zus\u00e4tzlich den TCP- und TLS-Handshake \u00f6ffnet und die Verbindung warm h\u00e4lt. F\u00fcr kritische Hosts, etwa ein CDN f\u00fcr Render-CSS oder Webfonts, ziehe ich Preconnect dem blo\u00dfen Prefetch vor. Ich setze es sparsam ein, da jeder offene Socket Browser-Slots belegt. Das Attribut <strong>crossorigin<\/strong> geh\u00f6rt an alle Hosts mit CORS, damit sp\u00e4tere Requests nicht gebremst werden. Einen klaren \u00dcberblick zu Auswahl und Reihenfolge findest du im kompakten <a href=\"https:\/\/webhosting.de\/dns-prefetching-preconnect-ladezeit-optimieren-performance-boost\/\">Leitfaden zu Prefetch<\/a>.<\/p>\n\n<pre><code>&lt;link rel=\"preconnect\" href=\"https:\/\/cdn.example.com\" crossorigin&gt;\n&lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin&gt;\n<\/code><\/pre>\n\n<h2>Preloading: Dateien gezielt vorziehen<\/h2>\n\n<p>Preload l\u00e4dt spezifische <strong>Dateien<\/strong> aktiv in den Cache, bevor der Parser sie \u00fcblicherweise anfordert, und beschleunigt so FCP und LCP. Ich nutze es nur f\u00fcr Ressourcen, die sicher gebraucht werden, etwa critical CSS, Hero-Bilder oder WOFF2-Fonts. Das Attribut <strong>fetchpriority<\/strong> lenkt die Gewichtung nach oben, ohne andere wichtige Transfers komplett zu verdr\u00e4ngen. Ich kontrolliere, dass der MIME-Typ, das as-Attribut und die tats\u00e4chliche Nutzung \u00fcbereinstimmen, sonst verliere ich Bandbreite. Eine gute Erg\u00e4nzung bildet HTTP\/3, wie im Beitrag zu <a href=\"https:\/\/webhosting.de\/http3-push-preload-performance-optimierung-webseiten-zoom\/\">HTTP\/3 und Preload<\/a> beschrieben.<\/p>\n\n<pre><code>&lt;link rel=\"preload\" as=\"style\" href=\"\/assets\/css\/critical.css\" fetchpriority=\"high\"&gt;\n&lt;link rel=\"preload\" as=\"font\" href=\"\/assets\/fonts\/inter-regular.woff2\" type=\"font\/woff2\" crossorigin&gt;\n&lt;link rel=\"preload\" as=\"image\" href=\"\/assets\/img\/hero.webp\" imagesrcset=\"\/assets\/img\/hero.webp 1x, \/assets\/img\/hero@2x.webp 2x\"&gt;\n<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-full is-resized\">\n  <img decoding=\"async\" src=\"https:\/\/webhosting.de\/wp-content\/uploads\/2026\/04\/web_speed_optimierung_2174.png\" alt=\"\" width=\"1536\" height=\"1024\"\/>\n<\/figure>\n\n\n<h2>Performance-Gewinn im Hosting-Setup<\/h2>\n\n<p>Ein schnelles <strong>Hosting<\/strong> verst\u00e4rkt die Wirkung der Hints, weil niedrige RTTs, HTTP\/3 und ein nahes CDN die Wartezeiten pro Stufe dr\u00fccken. Ich sehe regelm\u00e4\u00dfig, dass TTFB um bis zu eine Sekunde f\u00e4llt, wenn DNS, TCP und TLS vorgew\u00e4rmt starten und der Origin fix antwortet. Auf Mobilger\u00e4ten mit hoher Latenz zahlt sich das doppelt aus, weil jeder gesparte Roundtrip direkt ins LCP eingeht. Ich achte auf stabile TLS-Aushandlungen, OCSP-Stapling und eine schlanke TLS-Konfiguration. So nutzt der Browser seine wenigen gleichzeitigen Verbindungen optimal aus und beschleunigt die <strong>Website&nbsp;Speed<\/strong>.<\/p>\n\n<h2>Schnellvergleich: welche Technik wof\u00fcr?<\/h2>\n\n<p>Die folgende Tabelle fasst Wirkung, Einsatz und Beispiel-Tags zusammen und hilft mir, pro Host die richtige Ma\u00dfnahme zu w\u00e4hlen. Ich kombiniere Prefetch f\u00fcr Breite, Preconnect f\u00fcr kritische Hosts und Preload f\u00fcr unverzichtbare Dateien. Dabei halte ich die Anzahl gleichzeitig ge\u00f6ffneter Verbindungen gering. So bleibt genug Spielraum f\u00fcr Parser-Entdeckungen und late-critical Assets. Dieser \u00dcberblick macht Entscheidungen zur <strong>Priorisierung<\/strong> leichter.<\/p>\n\n<table>\n  <thead>\n    <tr>\n      <th>Technik<\/th>\n      <th>Was passiert<\/th>\n      <th>Typischer Einsatz<\/th>\n      <th>Beispiel-Tag<\/th>\n      <th>Auswirkung auf FCP\/LCP<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <td>DNS Prefetch<\/td>\n      <td>Fr\u00fche <strong>Namensaufl\u00f6sung<\/strong><\/td>\n      <td>Externe Hosts mit sp\u00e4teren Requests<\/td>\n      <td><code>&lt;link rel=\"dns-prefetch\" href=\"\/\/fonts.googleapis.com\"&gt;<\/code><\/td>\n      <td>M\u00e4\u00dfig positiv, je nach Latenz<\/td>\n    <\/tr>\n    <tr>\n      <td>Preconnect<\/td>\n      <td>DNS + TCP + <strong>TLS<\/strong> vorw\u00e4rmen<\/td>\n      <td>CDN, Fonts, kritische APIs<\/td>\n      <td><code>&lt;link rel=\"preconnect\" href=\"https:\/\/cdn.example.com\" crossorigin&gt;<\/code><\/td>\n      <td>Deutlich positiv, spart Roundtrips<\/td>\n    <\/tr>\n    <tr>\n      <td>Preload<\/td>\n      <td>Datei aktiv <strong>vorladen<\/strong><\/td>\n      <td>Critical CSS, WOFF2, Hero-Image<\/td>\n      <td><code>&lt;link rel=\"preload\" as=\"style\" href=\"\/critical.css\"&gt;<\/code><\/td>\n      <td>Sehr positiv, wenn korrekt gew\u00e4hlt<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table>\n\n<h2>WordPress-Integration: sauber und wartbar<\/h2>\n\n<p>In WordPress setze ich die Hints sehr fr\u00fch im <strong>Head<\/strong>, damit der Browser sie vor dem Parser-Bottleneck sieht. Ich dedupliziere Hosts, pr\u00fcfe das Vorhandensein von https und erg\u00e4nze <code>crossorigin<\/code> nur bei Bedarf. Der folgende Code platziert Eintr\u00e4ge ganz oben, was den Effekt maximiert. Zus\u00e4tzlich kontrolliere ich nach Deployments, ob neue externe Hosts dazugekommen sind. So bleibt die Hint-Liste schlank, aktuell und <strong>effizient<\/strong>.<\/p>\n\n<pre><code>function add_dns_prefetch() {\n    $domains = ['\/\/fonts.googleapis.com', '\/\/www.googletagmanager.com', '\/\/cdn.webhoster.de', 'https:\/\/fonts.gstatic.com'];\n    $printed = [];\n    foreach ($domains as $domain) {\n        $key = preg_replace('#^https?:#', '', $domain);\n        if (isset($printed[$key])) { continue; }\n        $printed[$key] = true;\n        echo '&lt;link rel=\"dns-prefetch\" href=\"' . esc_url($key) . '\" \/&gt;' . \"\\n\";\n        if (strpos($domain, 'https:\/\/') === 0) {\n            echo '&lt;link rel=\"preconnect\" href=\"' . esc_url($domain) . '\" crossorigin \/&gt;' . \"\\n\";\n        }\n    }\n}\nadd_action('wp_head', 'add_dns_prefetch', 1);\n<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-full is-resized\">\n  <img decoding=\"async\" src=\"https:\/\/webhosting.de\/wp-content\/uploads\/2026\/04\/dns-speed-optimization-2345.png\" alt=\"\" width=\"1536\" height=\"1024\"\/>\n<\/figure>\n\n\n<h2>Best Practices: knapp, aber wirkungsvoll<\/h2>\n\n<p>Ich beschr\u00e4nke Preconnect auf drei bis f\u00fcnf <strong>Hosts<\/strong>, sonst blockiert der Browser zu viele Sockets vorzeitig. Ich setze Hints immer an den Anfang des Head, danach folgen Preloads, dann Styles und Scripts. F\u00fcr Fonts kombiniere ich Preconnect mit <code>font-display: swap<\/code>, damit Text sofort erscheint und CLS niedrig bleibt. Ich achte darauf, dass Preload-Dateien garantiert genutzt werden, sonst verschenke ich Bandbreite und priorisiere am Bedarf vorbei. F\u00fcr Third-Party-Skripte pr\u00fcfe ich kritisch, ob wirklich jede <strong>Domain<\/strong> n\u00f6tig ist.<\/p>\n\n<h2>Messung und Monitoring: Erfolge sichtbar machen<\/h2>\n\n<p>Im Network-Tab der DevTools schaue ich auf die Reihenfolge von <strong>DNS<\/strong>, TCP und TLS und pr\u00fcfe, ob sie fr\u00fcher starten als zuvor. Ein Vorher-Nachher-Vergleich im Wasserfall zeigt klar, ob die Hints greifen. Mit Lighthouse oder PageSpeed Insights beachte ich FCP, LCP und CLS sowie den TTFB-Trend. WebPageTest liefert zus\u00e4tzlich Connection-View und Filmstrips, die den Renderstart belegen. Nach gr\u00f6\u00dferen \u00c4nderungen wiederhole ich die Messung und entferne veraltete <strong>Hosts<\/strong> aus der Hint-Liste.<\/p>\n\n\n<figure class=\"wp-block-image size-full is-resized\">\n  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/webhosting.de\/wp-content\/uploads\/2026\/04\/dnsspeedoptimierung5132.png\" alt=\"\" width=\"1536\" height=\"1024\"\/>\n<\/figure>\n\n\n<h2>HTTP\/3, QUIC und Connection Coalescing<\/h2>\n\n<p>Mit HTTP\/3 \u00fcber QUIC spare ich zus\u00e4tzliche <strong>Roundtrips<\/strong>, weil Verbindungsaufbau, Verlustbehandlung und Multiplexing effizienter arbeiten. Ich pr\u00fcfe, ob mein CDN und mein Origin HTTP\/3 anbieten und setze Preconnect weiterhin gezielt ein. Connection Coalescing reduziert die Anzahl separater Verbindungen, wenn Zertifikate und IPs passen. Dadurch bedienen Hosts mit demselben Zertifikat mehrere Subdomains \u00fcber eine gemeinsame <strong>Verbindung<\/strong>. In Summe profitiert der fr\u00fche Renderpfad deutlich, besonders bei vielen kleinen Dateien.<\/p>\n\n<h2>CDN-Warmup und Prefetch kombinieren<\/h2>\n\n<p>Ich erw\u00e4rme mein CDN, wenn ich Traffic-Spitzen erwarte, und kombiniere das mit <strong>Prefetch<\/strong> und Preconnect f\u00fcr Edge-Hosts. So liegen wichtige Objekte im Edge-Cache und die Handshakes sind bereits vorbereitet. Das senkt Latenzen vor allem auf Erstaufrufen und unter Mobilbedingungen. Eine praktische Anleitung liefert der Beitrag zu <a href=\"https:\/\/webhosting.de\/cdn-warmup-prefetching-website-speed-optimi-cache\/\">CDN-Warmup<\/a>, den ich gern als Checkliste nutze. Vor Rollouts teste ich Cache-Hit-Rates und beobachte die <strong>TTFB<\/strong>-Entwicklung.<\/p>\n\n\n<figure class=\"wp-block-image size-full is-resized\">\n  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/webhosting.de\/wp-content\/uploads\/2026\/04\/entwicklerdesk_datenoptimierung_2356.png\" alt=\"\" width=\"1536\" height=\"1024\"\/>\n<\/figure>\n\n\n<h2>Governance: Hint-Liste aktuell halten<\/h2>\n\n<p>Ich f\u00fchre eine kurze <strong>Inventur<\/strong> aller externen Hosts und pr\u00fcfe quartalsweise, ob neue Skripte, Fonts oder Bilder dazugekommen sind. Entfernte Integrationen streiche ich samt Hint, damit die Liste schlank bleibt. F\u00fcr jeden Host vermerke ich Zweck, Kritikalit\u00e4t und die eingesetzte Technik (Prefetch, Preconnect oder Preload). \u00c4nderungen am CDN oder an Schriften pflege ich sofort ein, damit keine verwaisten Eintr\u00e4ge liegen bleiben. So behalte ich Kontrolle, reduziere Overhead und sichere eine konsistente <strong>Performance<\/strong>.<\/p>\n\n<h2>Browserunterst\u00fctzung, Heuristiken und Grenzen<\/h2>\n\n<p>Ich kalkuliere ein, dass Browser Hints als <strong>Signale<\/strong> verstehen \u2013 nicht als Befehl. Bei geringer Bandbreite, aktivem Data Saver oder im Hintergrundtab kann der Browser Priorit\u00e4ten anpassen oder Hints drosseln. Safari ist konservativer bei Preconnects, Firefox hat teils andere Heuristiken f\u00fcr DNS-Caches, und Mobile-Varianten reduzieren parallele Sockets. Deshalb formuliere ich Hints <em>pr\u00e4zise<\/em> und vermeide \u00dcbersignalisierung: wenige Hosts, klare <code>as<\/code>-Werte, korrekte <code>type<\/code>-Angaben. F\u00fcr Fonts achte ich auf <code>crossorigin<\/code>, sonst drohen doppelte Fetches oder ein sp\u00e4tes CORS-Blocken. Wenn ich Prefetch vollst\u00e4ndig steuern m\u00f6chte, kann ich mit <code>&lt;meta http-equiv=\"x-dns-prefetch-control\" content=\"on\"&gt;<\/code> oder <code>off<\/code> die automatische Heuristik beeinflussen.<\/p>\n\n<h2>HTTP-Header und 103 Early Hints<\/h2>\n\n<p>Neben HTML-Tags nutze ich <strong>Link-Header<\/strong>, damit Hints schon mit der ersten Serverantwort einfliegen \u2013 ideal bei serverseitigem Rendering. 103 Early Hints schicken diese Header sogar <em>vor<\/em> der finalen 200-Antwort und gewinnen so weitere Dutzend Millisekunden auf langen Leitungen.<\/p>\n\n<pre><code># NGINX: Preconnect und Preload via Link-Header\nadd_header Link '&lt;https:\/\/fonts.gstatic.com&gt;; rel=preconnect; crossorigin' always;\nadd_header Link '&lt;\/assets\/css\/critical.css&gt;; rel=preload; as=style; fetchpriority=high' always;\nadd_header Link '&lt;\/assets\/fonts\/inter-regular.woff2&gt;; rel=preload; as=font; type=font\/woff2; crossorigin' always;\n<\/code><\/pre>\n\n<pre><code># Apache (htaccess)\nHeader add Link '&lt;https:\/\/cdn.example.com&gt;; rel=preconnect; crossorigin'\nHeader add Link '&lt;\/assets\/img\/hero.webp&gt;; rel=preload; as=image'\n<\/code><\/pre>\n\n<p>Unterst\u00fctzt der Server <strong>103 Early Hints<\/strong>, sende ich die Link-Header zus\u00e4tzlich fr\u00fchzeitig. Wichtig: Ich halte die Liste <em>kurz<\/em>, weil jeder Eintrag Parsing-Aufwand und potenzielle Verbindungs\u00f6ffnungen erzeugt.<\/p>\n\n\n<figure class=\"wp-block-image size-full is-resized\">\n  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/webhosting.de\/wp-content\/uploads\/2026\/04\/optimierung-webspeed-7623.png\" alt=\"\" width=\"1536\" height=\"1024\"\/>\n<\/figure>\n\n\n<h2>SPA und Service Worker: Routen- und Daten-Prefetch<\/h2>\n\n<p>Bei Single-Page-Apps verschiebe ich Hints <strong>zustandsbasiert<\/strong>: Sobald der Hero sichtbar ist, starte ich ein gezieltes Preload f\u00fcr die n\u00e4chste Route (JS-Chunk, kritisches Bild, API-Schema). Im Service Worker kann ich Preload-Ergebnisse cachen und nach Navigationsereignissen verwenden. Ich definiere klare Abbruchkriterien (Tab versteckt, CPU \u00fcberlastet, schwaches Netz), damit Prefetch nicht zum Kostentreiber wird. F\u00fcr ES-Module setze ich fr\u00fch <code>modulepreload<\/code>, damit die Dependenz-Kette nicht ausbremst.<\/p>\n\n<pre><code>&lt;link rel=\"modulepreload\" href=\"\/assets\/js\/app.entry.js\"&gt;\n&lt;script&gt;\n\/\/ Vorsichtige SPA-Vorladung\nif (navigator.connection?.saveData !== true) {\n  const idle = window.requestIdleCallback || ((cb) =&gt; setTimeout(cb, 300));\n  idle(() =&gt; {\n    const l = document.createElement('link');\n    l.rel = 'preload';\n    l.as = 'script';\n    l.href = '\/assets\/js\/route-checkout.js';\n    document.head.appendChild(l);\n  });\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n\n<h2>Sicherheit, Datenschutz und Richtlinien<\/h2>\n\n<p>Ich bedenke Policy-Rahmenwerke: Ein strenges <strong>CSP<\/strong> kann Preloads blockieren, wenn <code>font-src<\/code>, <code>style-src<\/code> oder <code>img-src<\/code> die Ziele nicht zulassen. <code>crossorigin<\/code> ist f\u00fcr Fonts Pflicht, sonst greift der Cache nicht origin-\u00fcbergreifend. Bei sensiblen Third-Parties streue ich keine Preconnects, wenn ich die Domain k\u00fcnftig entfernen k\u00f6nnte \u2013 jeder Hint ist ein Signal an den Browser und kann Tracking-Skripte beschleunigen. Ich pr\u00fcfe au\u00dferdem <strong>Save-Data<\/strong> und <strong>Data Saver<\/strong>: In diesen Modi reduziere ich die Aggressivit\u00e4t von Preloads und lasse lediglich DNS Prefetch f\u00fcr zentrale Hosts aktiv.<\/p>\n\n<h2>Messpraxis vertiefen: Timing API und Logs<\/h2>\n\n<p>Neben Wasserf\u00e4llen nutze ich die <strong>Resource Timing API<\/strong> und <strong>PerformanceObserver<\/strong>, um <em>im Feld<\/em> zu messen, ob Hints vor dem Parser landen und wie sich <code>domainLookupStart<\/code>, <code>connectStart<\/code> und <code>secureConnectionStart<\/code> verschieben. So erkenne ich, ob ein Preconnect wirklich genutzt oder vom Browser verworfen wurde.<\/p>\n\n<pre><code>&lt;script&gt;\nnew PerformanceObserver((list) =&gt; {\n  for (const e of list.getEntriesByType('resource')) {\n    if (e.name.includes('fonts.gstatic.com')) {\n      console.log('DNS:', e.domainLookupEnd - e.domainLookupStart,\n                  'TLS:', e.secureConnectionStart &gt; 0 ? e.connectEnd - e.secureConnectionStart : 0,\n                  'Start:', e.startTime.toFixed(1));\n    }\n  }\n}).observe({ type: 'resource', buffered: true });\n&lt;\/script&gt;\n<\/code><\/pre>\n\n<p>Ich gleiche diese Daten mit Server-Logs und CDN-Statistiken (TLS-Resumption-Rate, HTTP\/3-Anteil, Cache-Hits) ab. Wenn ich sehe, dass TLS fast immer res\u00fcmiert, kann ich die Anzahl aktiver Preconnects reduzieren und Slots f\u00fcr Parser-Entdeckungen freigeben.<\/p>\n\n<h2>WordPress-Vertiefung: Core-Filter sauber nutzen<\/h2>\n\n<p>WordPress bringt bereits eine Infrastruktur f\u00fcr Resource Hints mit. Ich h\u00e4nge mich an <code>wp_resource_hints<\/code>, statt selbst Roh-HTML zu drucken, und \u00fcbergebe nur deduplizierte Ziele. F\u00fcr Preload setze ich <code>wp_enqueue_style<\/code>\/<code>wp_enqueue_script<\/code> und erg\u00e4nze die richtigen <code>as<\/code>-Attribute \u00fcber <code>wp_style_add_data<\/code>.<\/p>\n\n<pre><code>\/\/ Preconnect und DNS Prefetch via Core-Filter\nadd_filter('wp_resource_hints', function($urls, $relation_type) {\n    $critical = [\n        'preconnect'   =&gt; ['https:\/\/fonts.gstatic.com', 'https:\/\/cdn.example.com'],\n        'dns-prefetch' =&gt; ['\/\/fonts.googleapis.com', '\/\/www.googletagmanager.com', '\/\/cdn.webhoster.de']\n    ];\n    if (!empty($critical[$relation_type])) {\n        foreach ($critical[$relation_type] as $u) {\n            if (!in_array($u, $urls, true)) { $urls[] = $u; }\n        }\n    }\n    return $urls;\n}, 10, 2);\n\n\/\/ Preload korrekt enqueuen\nadd_action('wp_enqueue_scripts', function() {\n    wp_enqueue_style('critical', get_stylesheet_directory_uri() . '\/assets\/css\/critical.css', [], null);\n    wp_style_add_data('critical', 'preload', true);\n    wp_style_add_data('critical', 'as', 'style');\n\n    wp_register_style('font-inter', false);\n    wp_enqueue_style('font-inter');\n    add_action('wp_head', function() {\n        echo '&lt;link rel=\"preload\" as=\"font\" href=\"' . esc_url(get_stylesheet_directory_uri() . '\/assets\/fonts\/inter-regular.woff2') . '\" type=\"font\/woff2\" crossorigin \/&gt;' . \"\\n\";\n    }, 2);\n}, 1);\n<\/code><\/pre>\n\n<p>Zus\u00e4tzlich achte ich darauf, dass Optimization-Plugins (<em>defer<\/em>, <em>combine<\/em>) Hints nicht hinter den Parser rutschen lassen. Nach Aktivierung teste ich, ob die Reihenfolge im Head erhalten bleibt und ob keine doppelten Preloads entstehen.<\/p>\n\n<h2>Fehlersuche und Anti-Patterns<\/h2>\n\n<ul>\n  <li><strong>Zu viele Preconnects<\/strong>: Mehr als 3\u20135 Hosts verschwenden Sockets. Ich k\u00fcrze auf die <em>erstkritischen<\/em> Ziele (Fonts\/CDN\/API).<\/li>\n  <li><strong>Falsches as\/type<\/strong>: Ein <code>as=\"font\"<\/code> ohne <code>type=\"font\/woff2\"<\/code> kann zu verfehlter Priorit\u00e4t oder doppeltem Request f\u00fchren.<\/li>\n  <li><strong>Unbenutzte Preloads<\/strong>: Jede nicht genutzte Ressource verstopft die Leitung. Ich entferne Preloads, die im Above-the-Fold nicht sicher gebraucht werden.<\/li>\n  <li><strong>Crossorigin vergessen<\/strong>: Bei Fonts oder fremden CDNs f\u00fchrt das zu CORS-Problemen und Cache-Verlust.<\/li>\n  <li><strong>HTML-Reihenfolge<\/strong>: Hints m\u00fcssen an den Anfang des Head. Preloads vor Styles, dann Render-CSS, dann kritische JS.<\/li>\n  <li><strong>Imagesrcset ohne sizes<\/strong>: Ich erg\u00e4nze <code>imagesizes<\/code>, damit der Browser richtig w\u00e4hlt und Downloads schlank bleiben.<\/li>\n<\/ul>\n\n<pre><code>&lt;link rel=\"preload\" as=\"image\" href=\"\/assets\/img\/hero.webp\"\n      imagesrcset=\"\/assets\/img\/hero.webp 1x, \/assets\/img\/hero@2x.webp 2x\"\n      imagesizes=\"(min-width: 1024px) 1200px, 100vw\"&gt;\n<\/code><\/pre>\n\n<h2>Priorisierung fundiert treffen<\/h2>\n\n<p>Ich entscheide anhand weniger Fragen: 1) <strong>Wird der Host\/Asset garantiert fr\u00fch<\/strong> gebraucht? 2) <strong>Wie hoch<\/strong> ist die Latenz (mobil, global, kaltes CDN)? 3) <strong>Gibt es Alternativen<\/strong> (Inline-CSS-Subset, Self-Hosting der Fonts)? 4) <strong>Ist die Verbindung wiederverwendbar<\/strong> (Coalescing, H3, Resumption)? 5) <strong>Beeintr\u00e4chtigt<\/strong> die Ma\u00dfnahme Parser-Entdeckungen? Daraus folgt: Prefetch f\u00fcr breite, g\u00fcnstige Gewinne; Preconnect selektiv f\u00fcr Warmups; Preload nur f\u00fcr <em>garantiert<\/em> ben\u00f6tigte Dateien mit sauberem Typing und korrekter Priorisierung.<\/p>\n\n<h2>Zusammenfassung in K\u00fcrze<\/h2>\n\n<p>Ich nutze <strong>DNS<\/strong> Prefetching f\u00fcr breite, g\u00fcnstige Latenzgewinne, Preconnect f\u00fcr wenige, aber zentrale Hosts und Preload f\u00fcr garantiert ben\u00f6tigte Dateien. Die Reihenfolge im Head und eine sparsame Auswahl liefern die gr\u00f6\u00dften Effekte. Ich messe jede \u00c4nderung, pr\u00fcfe Wasserf\u00e4lle und passe die Hint-Liste regelm\u00e4\u00dfig an. In Kombination mit HTTP\/3, einem nahen CDN und schlauer Ressourcenpriorisierung hebe ich FCP und LCP sichtbar an. So setze ich browser optimization dns effektiv ein und steigere nachhaltig die <strong>Website&nbsp;Speed<\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>DNS prefetching y precarga optimizan **la velocidad del sitio web** mediante la resoluci\u00f3n temprana de DNS y la precarga de recursos. Perfecto para el alojamiento web.<\/p>","protected":false},"author":1,"featured_media":18850,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_crdt_document":"","inline_featured_image":false,"footnotes":""},"categories":[674],"tags":[],"class_list":["post-18857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web_hosting"],"acf":[],"_wp_attached_file":null,"_wp_attachment_metadata":null,"litespeed-optimize-size":null,"litespeed-optimize-set":null,"_elementor_source_image_hash":null,"_wp_attachment_image_alt":null,"stockpack_author_name":null,"stockpack_author_url":null,"stockpack_provider":null,"stockpack_image_url":null,"stockpack_license":null,"stockpack_license_url":null,"stockpack_modification":null,"color":null,"original_id":null,"original_url":null,"original_link":null,"unsplash_location":null,"unsplash_sponsor":null,"unsplash_exif":null,"unsplash_attachment_metadata":null,"_elementor_is_screenshot":null,"surfer_file_name":null,"surfer_file_original_url":null,"envato_tk_source_kit":null,"envato_tk_source_index":null,"envato_tk_manifest":null,"envato_tk_folder_name":null,"envato_tk_builder":null,"envato_elements_download_event":null,"_menu_item_type":null,"_menu_item_menu_item_parent":null,"_menu_item_object_id":null,"_menu_item_object":null,"_menu_item_target":null,"_menu_item_classes":null,"_menu_item_xfn":null,"_menu_item_url":null,"_trp_menu_languages":null,"rank_math_primary_category":null,"rank_math_title":null,"inline_featured_image":null,"_yoast_wpseo_primary_category":null,"rank_math_schema_blogposting":null,"rank_math_schema_videoobject":null,"_oembed_049c719bc4a9f89deaead66a7da9fddc":null,"_oembed_time_049c719bc4a9f89deaead66a7da9fddc":null,"_yoast_wpseo_focuskw":null,"_yoast_wpseo_linkdex":null,"_oembed_27e3473bf8bec795fbeb3a9d38489348":null,"_oembed_c3b0f6959478faf92a1f343d8f96b19e":null,"_trp_translated_slug_en_us":null,"_wp_desired_post_slug":null,"_yoast_wpseo_title":null,"tldname":null,"tldpreis":null,"tldrubrik":null,"tldpolicylink":null,"tldsize":null,"tldregistrierungsdauer":null,"tldtransfer":null,"tldwhoisprivacy":null,"tldregistrarchange":null,"tldregistrantchange":null,"tldwhoisupdate":null,"tldnameserverupdate":null,"tlddeletesofort":null,"tlddeleteexpire":null,"tldumlaute":null,"tldrestore":null,"tldsubcategory":null,"tldbildname":null,"tldbildurl":null,"tldclean":null,"tldcategory":null,"tldpolicy":null,"tldbesonderheiten":null,"tld_bedeutung":null,"_oembed_d167040d816d8f94c072940c8009f5f8":null,"_oembed_b0a0fa59ef14f8870da2c63f2027d064":null,"_oembed_4792fa4dfb2a8f09ab950a73b7f313ba":null,"_oembed_33ceb1fe54a8ab775d9410abf699878d":null,"_oembed_fd7014d14d919b45ec004937c0db9335":null,"_oembed_21a029d076783ec3e8042698c351bd7e":null,"_oembed_be5ea8a0c7b18e658f08cc571a909452":null,"_oembed_a9ca7a298b19f9b48ec5914e010294d2":null,"_oembed_f8db6b27d08a2bb1f920e7647808899a":null,"_oembed_168ebde5096e77d8a89326519af9e022":null,"_oembed_cdb76f1b345b42743edfe25481b6f98f":null,"_oembed_87b0613611ae54e86e8864265404b0a1":null,"_oembed_27aa0e5cf3f1bb4bc416a4641a5ac273":null,"_oembed_time_27aa0e5cf3f1bb4bc416a4641a5ac273":null,"_tldname":null,"_tldclean":null,"_tldpreis":null,"_tldcategory":null,"_tldsubcategory":null,"_tldpolicy":null,"_tldpolicylink":null,"_tldsize":null,"_tldregistrierungsdauer":null,"_tldtransfer":null,"_tldwhoisprivacy":null,"_tldregistrarchange":null,"_tldregistrantchange":null,"_tldwhoisupdate":null,"_tldnameserverupdate":null,"_tlddeletesofort":null,"_tlddeleteexpire":null,"_tldumlaute":null,"_tldrestore":null,"_tldbildname":null,"_tldbildurl":null,"_tld_bedeutung":null,"_tldbesonderheiten":null,"_oembed_ad96e4112edb9f8ffa35731d4098bc6b":null,"_oembed_8357e2b8a2575c74ed5978f262a10126":null,"_oembed_3d5fea5103dd0d22ec5d6a33eff7f863":null,"_eael_widget_elements":null,"_oembed_0d8a206f09633e3d62b95a15a4dd0487":null,"_oembed_time_0d8a206f09633e3d62b95a15a4dd0487":null,"_aioseo_description":null,"_eb_attr":null,"_eb_data_table":null,"_oembed_819a879e7da16dd629cfd15a97334c8a":null,"_oembed_time_819a879e7da16dd629cfd15a97334c8a":null,"_acf_changed":null,"_wpcode_auto_insert":null,"_edit_last":null,"_edit_lock":null,"_oembed_e7b913c6c84084ed9702cb4feb012ddd":null,"_oembed_bfde9e10f59a17b85fc8917fa7edf782":null,"_oembed_time_bfde9e10f59a17b85fc8917fa7edf782":null,"_oembed_03514b67990db061d7c4672de26dc514":null,"_oembed_time_03514b67990db061d7c4672de26dc514":null,"rank_math_news_sitemap_robots":null,"rank_math_robots":null,"_eael_post_view_count":"460","_trp_automatically_translated_slug_ru_ru":null,"_trp_automatically_translated_slug_et":null,"_trp_automatically_translated_slug_lv":null,"_trp_automatically_translated_slug_fr_fr":null,"_trp_automatically_translated_slug_en_us":null,"_wp_old_slug":null,"_trp_automatically_translated_slug_da_dk":null,"_trp_automatically_translated_slug_pl_pl":null,"_trp_automatically_translated_slug_es_es":null,"_trp_automatically_translated_slug_hu_hu":null,"_trp_automatically_translated_slug_fi":null,"_trp_automatically_translated_slug_ja":null,"_trp_automatically_translated_slug_lt_lt":null,"_elementor_edit_mode":null,"_elementor_template_type":null,"_elementor_version":null,"_elementor_pro_version":null,"_wp_page_template":null,"_elementor_page_settings":null,"_elementor_data":null,"_elementor_css":null,"_elementor_conditions":null,"_happyaddons_elements_cache":null,"_oembed_75446120c39305f0da0ccd147f6de9cb":null,"_oembed_time_75446120c39305f0da0ccd147f6de9cb":null,"_oembed_3efb2c3e76a18143e7207993a2a6939a":null,"_oembed_time_3efb2c3e76a18143e7207993a2a6939a":null,"_oembed_59808117857ddf57e478a31d79f76e4d":null,"_oembed_time_59808117857ddf57e478a31d79f76e4d":null,"_oembed_965c5b49aa8d22ce37dfb3bde0268600":null,"_oembed_time_965c5b49aa8d22ce37dfb3bde0268600":null,"_oembed_81002f7ee3604f645db4ebcfd1912acf":null,"_oembed_time_81002f7ee3604f645db4ebcfd1912acf":null,"_elementor_screenshot":null,"_oembed_7ea3429961cf98fa85da9747683af827":null,"_oembed_time_7ea3429961cf98fa85da9747683af827":null,"_elementor_controls_usage":null,"_elementor_page_assets":[],"_elementor_screenshot_failed":null,"theplus_transient_widgets":null,"_eael_custom_js":null,"_wp_old_date":null,"_trp_automatically_translated_slug_it_it":null,"_trp_automatically_translated_slug_pt_pt":null,"_trp_automatically_translated_slug_zh_cn":null,"_trp_automatically_translated_slug_nl_nl":null,"_trp_automatically_translated_slug_pt_br":null,"_trp_automatically_translated_slug_sv_se":null,"rank_math_analytic_object_id":null,"rank_math_internal_links_processed":"1","_trp_automatically_translated_slug_ro_ro":null,"_trp_automatically_translated_slug_sk_sk":null,"_trp_automatically_translated_slug_bg_bg":null,"_trp_automatically_translated_slug_sl_si":null,"litespeed_vpi_list":null,"litespeed_vpi_list_mobile":null,"rank_math_seo_score":null,"rank_math_contentai_score":null,"ilj_limitincominglinks":null,"ilj_maxincominglinks":null,"ilj_limitoutgoinglinks":null,"ilj_maxoutgoinglinks":null,"ilj_limitlinksperparagraph":null,"ilj_linksperparagraph":null,"ilj_blacklistdefinition":null,"ilj_linkdefinition":null,"_eb_reusable_block_ids":null,"rank_math_focus_keyword":"DNS Prefetching","rank_math_og_content_image":null,"_yoast_wpseo_metadesc":null,"_yoast_wpseo_content_score":null,"_yoast_wpseo_focuskeywords":null,"_yoast_wpseo_keywordsynonyms":null,"_yoast_wpseo_estimated-reading-time-minutes":null,"rank_math_description":null,"surfer_last_post_update":null,"surfer_last_post_update_direction":null,"surfer_keywords":null,"surfer_location":null,"surfer_draft_id":null,"surfer_permalink_hash":null,"surfer_scrape_ready":null,"_thumbnail_id":"18850","footnotes":null,"_links":{"self":[{"href":"https:\/\/webhosting.de\/es\/wp-json\/wp\/v2\/posts\/18857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webhosting.de\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webhosting.de\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webhosting.de\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webhosting.de\/es\/wp-json\/wp\/v2\/comments?post=18857"}],"version-history":[{"count":0,"href":"https:\/\/webhosting.de\/es\/wp-json\/wp\/v2\/posts\/18857\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webhosting.de\/es\/wp-json\/wp\/v2\/media\/18850"}],"wp:attachment":[{"href":"https:\/\/webhosting.de\/es\/wp-json\/wp\/v2\/media?parent=18857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webhosting.de\/es\/wp-json\/wp\/v2\/categories?post=18857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webhosting.de\/es\/wp-json\/wp\/v2\/tags?post=18857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}