Mit DNS-Prefetching externe Inhalte schneller laden

Um das laden der Webseite zu optimieren können wir DNS-Prefetching einsetzen.

DNS prefetching Beispiele:

<!-- Amazon S3 -->
<link rel="dns-prefetch" href="//s3.amazonaws.com">

<!-- Google CDN -->
<link rel="dns-prefetch" href="//ajax.googleapis.com">

<!-- Microsoft CDN -->
<link rel="dns-prefetch" href="//ajax.microsoft.com">
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">

<!-- CDN JS -->
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">

<!-- Bootstrap CDN -->
<link rel="dns-prefetch" href="//netdna.bootstrapcdn.com">

<!-- Google Tag Manager -->
<link rel="dns-prefetch" href="//www.googletagmanager.com">

<!-- Google Analytics -->
<link rel="dns-prefetch" href="//www.google-analytics.com">

<!-- Google Fonts -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">

<!-- Facebook -->
<link rel="dns-prefetch" href="//connect.facebook.net">

<!-- Google+ -->
<link rel="dns-prefetch" href="//apis.google.com">

<!-- Linkedin -->
<link rel="dns-prefetch" href="//platform.linkedin.com">

<!-- Twitter -->
<link rel="dns-prefetch" href="//platform.twitter.com">

Prefetch über Typoscript einbinden

page.headerData {
 10 = TEXT
 10 {
 value (
 <link rel="dns-prefetch" href="//ajax.googleapis.com">
 <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com" />
 )
 }
}

Von welchen Browsern aktuell DNS Prefetch unterstütz wird, sehen Sie hier:

http://caniuse.com/#feat=link-rel-dns-prefetch

DNS-Prefetching ist nur dann sinnvoll wenn man externe Inhalte wie z.B. jQuery oder Google Fonts o.ä extern einbindet, ansonsten kann auf DNS-Prefetching verzichtet werden. Bei der Optimierung für Google Page Speed sollte es auf alle Fälle angewendet werden.