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

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

WordPress

「ウェブフォント読み込み中のテキスト」、表示されたけど、どうやって解消するの?って、疑問を解決していきます。

わたしも、Google の PageSpeed Insights で、ブログを計測したら「ウェブフォント読み込み中のテキストの表示」診断されちゃいました。受けたアドバイスは、こちら↓

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

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

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

過去に CSS だけで解決できたはずなのですが...あらためて PageSpeed Insights を試してみると、改善する項目にでてきてしまっていたようです。

そこで今回は、2020年6月7日現在で、TCD テンプレートを使用しているとでてくる「design_plus.woff」について、問題を解消できたのでシェアさせていただきますね。

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

「ウェブフォント読み込み中のテキストの表示」を解決!!

「ウェブフォント読み込み中のテキストの表示」を解決する方法を、解決していきます。

ブログ環境
  • WordPress バージョン:5.4 以降
  • 使用テーマ:TCD「Bloom」バージョン 1.3.4 以降

※ 2020年6月8日 現在。

今回の解決方法では、TCD のテーマを使用していて、「fonts/design_plus.woff?v=1.0」系の web フォントについて診断があった場合の解決方法になります。

たった1行、TCD テーマのスタイルシートに書き込むだけでした。テーマのファイルを変更するので、事前のバックアップを忘れずに!!それでは、いってみよ〜!

解決方法:TCD テーマファイルの @font-face にコードを加える

加えるコード
font-display: swap;
コードを追加する場所

Fontdsplay swap01

TCD テーマ「Bloom」では、「style.css」の101行目にある @font-face の末尾に、コードを加えれば OK!!


ウェブフォント読み込み中のテキストの表示を解決する方法は、1行コードを加えることでした。

TCD テーマファイルの「style.css」にある、@font-face にコードを加えます。加えるコードは、「font-display: swap;」だけです。

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

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

解決方法が、@font-face にコードを追加するだけなので...テンプレートがわで対応してくれたらうれしいのですが汗。

きっと何か理由があるのでしょう。何れにしても、たいした原因ではないので、サクッと解決しちゃいましょう。

その後:合格した監査に移動する

Pagespeed webfont2

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

今回ご紹介した方法を試したら、あらためて PageSpeed Insight で計測してみましょう。合格した監査に、問題箇所が移動できていたら大丈夫ですよ。

TCD テンプレートの場合は、今回の処理だけで OK なので、サクッと対応したいですね。そのほかの WEB フォントについては、スコアも悪くなりがちなので、当ブログでは採用を見送っているんですよ...

落ち着いたら、ほかの WEB フォントでも検証してみますね!

スタイルシートに直接 @font-face 書いても、反応しない?

TCD テーマに、@font-face を書き込んでも、どうやら反応しないらしいです。

以前、この記事では、TCD のスタイルシート(CSS)に、直接コードを記入する方法を紹介していました。2020年6月8日現在では、どうやらこの方法では解決できないみたいなんです。実際に、わたしも WordPress の高速化をしているときに気が付いてしまいました。

ちなみに以前は、下記のコードをスタイルシート(CSS)に書き込めば、ウェブフォント読み込み中のテキストの表示が解決できていました↓

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

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

外部の解決記事([CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」)を、参考にさせていただきましたが...WEB の世界は常に変化していますからね!仕様が変わることもありますし、対応していけば問題ありません!

どうやら、font-face は上書きできないことが、以前紹介していた方法で解決できないポイントみたいです。さらに詳しくわかったら、追記していく予定です。「あれ?解決できないぞ?」って方は、参考にしてみてください。

指摘のあったウェブフォントの URL を調べる方法

指摘のあったウェブフォントの URL を調べる方法を、解説します。

いちばん簡単な方法は、Google Chrome の検証を活用することです。便利な WEB ブラウザ「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 が表示されないので困っている人は、お試しください。

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

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

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

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

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

まとめ

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

追加 CSS に追加するよりも。TCD テーマで使われているフォントの「ウェブフォント読み込み中のテキストの表示」なら、直接テーマを修正する方が効率的かもしれません。

もちろん、テーマファイルに修正を加えるため、しっかりバックアップをとることをお忘れなく!!

ひとつずつは小さな評価ですが、積もり積もって SEO の効果を発揮していきます。あなどらずに真摯に向き合っていきましょう!

今回のウェブフォント読み込み中のテキストの表示を解決する記事が、あなたのブログ運営にお役に立てていたらうれしいです。

サウンドオルビス
サウンドオルビス
それじゃあ、今回はこの辺で!?

そのほか、ブログに関する記事は、こちらの記事をご覧ください↓

【関連】ブログ記事まとめ | サウンドテック・ラボ

サウンドオルビス

3,507,051 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事