2022.07.17

HTML・CSS

Google Fontsの読み込みをDNSプリフェッチで最適化

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解決したことにより、フォントデータの読み込みが少し速くなります。

関連記事

2024.08.15

HTML・CSS

box-decoration-breakでテキストの背景色を設定

box-decoration-breakプロパティでテキストに背景色を設定します。複数行の文字に対応でき、改行も問題ありません。デモページはこちら 以下のhtm…

2025.08.14

HTML・CSS

1行のテキストの均等割りについて

デザイン上テキストが1行に限定されている場合のテキストの均等割りを確認します。デモページはこちら 以下のhtml構造で確認します。 CSSは以下になります。te…

2024.08.16

HTML・CSS

flex-shrinkで文字の改行を防ぐ

flexボックスのレイアウトで、flexアイテムにflex-shrinkプロパティを指定してテキストが改行されるのを防ぎます。デモページはこちら 以下のhtml…

2021.02.02

HTML・CSS

flex-growプロパティを利用した横並びのリスト

flex-growプロパティを利用して、左右にボーダーのある横並びのリストを作ります。リスト内のテキストの文字数が異なる場合でも、簡単にレスポンシブ対応できます…

2021.07.06

HTML・CSS

Photoshopのドロップシャドウをbox-shadowプロパティで適用

Photoshopのレイヤースタイルで作成したドロップシャドウを、box-shadowプロパティで適用します。デモページはこちら box-shadowプロパティ…

上に戻る