Mit DNS Prefetch WordPress PageSpeed optimieren

Hallo Speed-Junkies, heute ist es mal wieder an der Zeit einen Schnellen Tip rauszuhauen. Ich habe mich dazu entschieden, etwas über DNS Prefetch in Wordpress zu schreiben. Es soll sowohl darum gehen, wie ihr die unnötigen Standard DNS-Abfragen von z.B. Wordpress.org entfernt und eure eigenen einfügen könnt. So könnt ihr euren Pagespeed Score verbessern und ganz nebenbei die Fehlermeldung “Preconnect to required origins” loswerden.

DNS Prefetching in WordPress

Da viele das Prefetching mit Preloading verwechseln, fangen wir mit den Basics an: Wofür ist DNS Prefetching? Ganz einfach gesagt, werden dadurch externe Ressourcen auf deiner Website schneller geladen, da die Namensauflösung (DNS Lookup) des Server abgeschlossen ist.

Wenn du also z.B. Google Analytics benutzt, kannst du durch DNS Prefetching dem Browser deines Besuchers signalisieren, dass er gleich Resourchen von www.google-analytics.com herunterladen muss und die Namensauflösung (DNS) schon mal erledigt soll.

Um das in unserer WordPress Site bearbeiten zu können, müssen wir alles was etwas mit DNS Prefetching zu tun haben, in der functions.php unseres (Child)Themes durchführen.

DNS Prefetch von wordpress.org entfernen

Das vorzeitige laden der DNS-Einträge von wordpress.org können wir in der Regel getrost entfernen. Außer natürlich, du benutzt tatsächlich Jetpack oder andere Plugins, die darauf zurückgreifen. Da ich jetzt mal nicht davon ausgehe, hier der Funktionscode zum entfernen:

/** remove dns prefetch Wordpress.ORG **/
remove_action('wp_head', 'wp_resource_hints', 2);Code-Sprache: PHP (php)

Zur erklärung, bei der Zeile oben /** remove dns prefetch Wordpress.ORG **/ hanelt es sich lediglich um ein Kommentar, die Zeile unterhalb ist die eigentliche Funktion zum entfernen des wordpress.org DNS Prefetch.

Eigene DNS Prefetchs zu WordPress hinzufügen

So, kommen wir nun zum spannenderen Teil. Jetzt zeige ich dir, wie man eigene domains hinzufügen, also vorzeitig auflösen, kann. Das ganze machen wir natürlich auch in der functions.php, aber erstmal sollten wir natürlich wissen, welche Einträge wir hinzufügen sollen.

Adressen für DNS Prefetching finden 🔍

Im Google Chrome gibt es dafür eine sehr einfache Möglichkeit. Einfach in den Dev Tools im Reiter “Audits” ein Lighthouse Audit starten.

Prefetch Funktion

Nun da wir die URLs gefunden haben, müssen wir diese noch mit einer Funktion in den Header unserer Website schreiben, sodass diese dann in etwa so aussehen: <link rel=”dns-prefetch” href=”//www.google-analytics.com”>

Wie schaffen wir das? Mit einer eigenen Funktion natürlich! Füge die Funktion einfach in die functions.php deines (Child)-Themes ein und los gehts.

/** Adding DNS Prefetching **/
function dns_prefetch() {
$prefetch = 'on';
    echo "\n <!-- DNS Prefetching Starting --> \n";
    echo '<meta http-equiv="x-dns-prefetch-control" content="'.$prefetch.'">'."\n";
    
    if ($prefetch == 'on') {
      $dns_domains = array( 
          "https://www.google-analytics.com", 
          "https://pagead2.googlesyndication.com",
          "https://googleads.g.doubleclick.net",
          "https://adservice.google.com",
          "https://adservice.google.de",
          "https://www.googletagservices.com"
      );
      foreach ($dns_domains as $domain) {
        if (!empty($domain)) echo '<link rel="dns-prefetch" href="'.$domain.'" />'."\n";
      }
      unset($domain);
    }
    echo "<!-- DNS Prefetching end --> \n";
}
add_action( 'wp_head', 'dns_prefetch',  );Code-Sprache: PHP (php)

Du musst lediglich deine eigenen URLs in dem Array dns_domains einfügen und den Rest, falls es zu viele sein sollten, entfernen. (Nach dem letzten Eintrag im Array bitte kein Komma , setzten!)