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

PageSpeed Insights

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 の結果ページで、右クリック → 検証をクリック
  • 画像の矢印部分を、クリック
  • 「ウェブフォント読み込み中の全テキストの表示」の修正したい URL 部分にカーソルを合わせて、クリック
  • Elementsに、HTMLが表示される。
  • 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 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 の効果を発揮していきます。

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

【終了間近】Amazon Music Unlimitedが4ヶ月99円!

ふだんはApple Music 推しなサウンドオルビスですが、「Amazon Prime Unlimited」の安さには、度胆を抜かれました。

安い!安すぎる!だって、4ヶ月間 99 円でつかえるんですよ!

今年の夏。はじめての音楽ストリーミングは、Amazon Music Unlimited できまりでしょう。

残り時間が迫っていますので、決断はおいそぎください。

2019年7月16日23時59分まで、いそげ↓

記事へのお問い合わせ

サウンドオルビス

1,260,480 views

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

プロフィール
  1. めいあん

    フォントの読み込み速度改善のために、こちらのサイトを参考にさせていただきました。
    最初のうちは.cssをいくらいじっても何ら改善しませんでした。
    というのも、子テーマの方で編集していたからでした。
    もしかして、と思い、親テーマの方で編集したら解決しました。

    それでもPageSpeed Insightsの点数は向上しませんでした。orz

ブログについて

「サウンド」「テクノロジー」をキーワードに、最新情報・商品レビュー・ハウツー講座・噂・小技など、個人で稼ぎたいクリエイターが役立つ情報を集めたメディアです。
Soundtech-Labo とは?

NEW POSTS