DNSプリフェッチを利用すると、外部ドメイン名(ホスト名)の名前解決(DNSルックアップ)を事前に強制できます。
WEBページ表示時ブラウザが外部ドメインにアクセスしますが、すでに名前解決が完了していると読み込み時間を短縮することができます。
Google Fontsの読み込み時にアクセスする外部ドメイン名は「fonts.googleapis.com」と「fonts.gstatic.com」の2つです。それぞれに対してheadタグ内に以下の記述でDNSプリフェッチを行います。
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
「http:」部分は省略して記述できます。httpsページのDNSプリフェッチはできません。crossorigin属性は「anonymous」と「use-credentials」が指定できますが、単にcrossoriginと書いた場合は「crossorigin="anonymous"」と同じです。
Google Fonts読み込み時の外部ドメイン名をDNS解決したことにより、フォントデータの読み込みが少し速くなります。





