最速で解決!ウェブフォント読み込み中のテキストの表示

Blog

Google の PageSpeed Insights で、「ウェブフォント読み込み中のテキストの表示」という診断をくだされました。

というわけで今回は、「ウェブフォント読み込み中のテキストの表示」を解決する方法を最速で解決します。

解決方法:@font-face

解決方法は、@font-face を使います。

あなたのブログ CSS に、下記のコードを書きこんでください↓

@font-face {
     font-family: 'font_woff';
     font-style: normal;
     font-weight: 400;
     src: url('指摘のあったURL') format('フォーマットの種類');
     font-display: swap;
 }

赤い部分の調べ方は、次の見出しで解説します。

ちなみにコードは、こちらの参考記事を参考に作成しました↓

指摘のあったURL を調べる方法

指摘のあったURL を調べる方法は、Google Chrome の検証を使いましょう

ダウンロード:Google Chrome ウェブブラウザ

指摘のあったURL を調べる方法
  • Google Chrome で、PageSpeed Insights を実行する
  • PageSpeed Insights の結果ページで、右クリック → 検証をクリック
  • Chrome inspect

  • 画像の矢印部分を、クリック
  • Webfont text hyouzi1

  • 「ウェブフォント読み込み中の全テキストの表示」の修正したい URL 部分にカーソルを合わせて、クリック
  • Elementsに、HTMLが表示される。
  • Webfont text hyouzi3

  • title=” ” の中身が、「指摘のあったURL部分」なので、コピーする
  • 作業終了

PageSpeed Insights の結果だと、フルパスの URL が表示されないので困っている人は、お試しください。

format(フォーマットの種類の種類)について

format(フォーマットの種類の種類)は、下記のいずれかをご記入ください。

format(フォーマットの種類の種類)について
format(“woff”)Web Open Font Formatフォント
format(“truetype”)TrueTypeフォント
format(“opentype”)OpenTypeフォント
format(“embedded-opentype”)Embedded-OpenTypeフォントです。Internet Eplorer 8以前で必要とされる形式
format(“svg”)SVGフォント

woff2 って場合もあるようです。指摘のあった URL の最後の部分で、判断するしかないですね。

たとえば、今回の場合は下記の URL が問題だと指摘を受けました↓

https://soundorbis.com/wp-content/themes/bloom_tcd053/fonts/design_plus.woff?v=1.0

赤い部分を、ごらんください。.woff だったのでformat(“woff”)を指定してみました。その結果、Google 先生のご指摘をスルーできたのです。

@font-face で解決すると

Pagespeed webfont2

PageSpeed Insights の合格した監査に、「ウェブフォント読み込み中の全テキストの表示」がでてきます。

@font-face で解決する方法は、上記の見出しを参考にしてください。

スポンサーリンク


原因:テンプレートが読み込んでいたフォント

今回の原因は、テンプレートで読み込んでいたフォントでした。

わたしのブログ環境
  • WordPressバージョン バージョン 5.1.1
  • テンプレートTCD Bloom

解決方法が、@font-face を指定するだけなので、事前に仕込めるといいのですが…

TCD は手軽にプロレベルのワードプレス環境が揃うので、おすすめですよ!

症状:PageSpeed Insights で「ウェブフォント読み込み中の全テキストの表示」の診断

診断:「ウェブフォント読み込み中の全テキストの表示」

PageSpeed Insights で、このブログを計測したら、診断されちゃいました。受けたアドバイスは、こちら↓

フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。

なるほど、わからん。アドバイスの詳細を読んでも、イマイチわかりませんでした。

このあたりを参考にいろいろ試してみたんですが、どうにも解決できなかったんです。

っで、今回の解決に至った理由は、URLだったんです↓

解決方法に至った理由: @font-face 使ってもダメな理由はURLだった

@font-face を指定しもダメな理由は、ちゃんとフルパスURLを指定しなかったからだったんです。単純に、

@font-face {font-display: swap;}

を指定しただけじゃ、どうやらダメだったみたいなんです。ちゃんと、URL を指定してあげる。

って初歩を、見落としてしまった、私とおなじ悩みを持つ人がいるんじゃないかと思い記事にしてみました。

時代はモバイルファーストインデックス

PageSpeed Insights の採点基準が厳しくなってから、スコアががっつり下がっていたんですよ。

  • モバイル:87点
  • PC:97点

ここまでやっと、戻ってこれました。しかし、時代はモバイルファーストインデックスなので、PC がどれだけ高くても SEO には関係ないんですよね。

千里の道も一歩から、1つずつ課題を乗り越えていくしかありません。

まとめ

PageSpeed Insights の「ウェブフォント読み込み中のテキストの表示」を、最速で解決できましたか?

ひとつずつは小さな評価ですが、積もり積もって SEO の効果を発揮していきます。

あなどらずに真摯に向き合っていきましょう!

記事へのお問い合わせ

サウンドオルビス

926,851 views

あなたの問題を解決するために、情報発信をしています。悩みからの解放宣言。「音楽」「テクノロジー」が得意分野です。

プロフィール
  1. この記事へのコメントはありません。