【ウェブフォント読み込み中のテキストの表示】Font Awesomeをローカルに入れればOK

こんにちはクリアメモリです!

今回は、WordPressの有料テーマ「Diver」を高速化する方法について紹介します。

 

この記事で対策するのは、PageSpeedInsightsに表示される「ウェブフォント読み込み中のテキストの表示」です。

Font-Awesomeというフォントを、ローカルから読み込むようにすることで対策できたので参考にしてみてください。

はじめに

 

今回紹介する内容は、WordPressテーマ「Diver」の速度スコアを上げる方法について。

PageSpeedInsightsで自分のサイトをチェックしてみたところ「ウェブフォント読み込み中のテキストの表示」という改善案が表示されていました。

 

PageSpeedInsights ウェブフォント読み込み中のテキストの表示

 

私のサイトの全体的なスコアは

  • モバイル 30~40点
  • PC 50~60点

とお世辞にも良いスコアとは言えない感じでした。

 

そこで、対応できそうなところを改善したところ、モバイル「80点」PC「99点」まで上げることができたので参考にしてみてください。

ここで紹介している内容は、DiverというWordPressテーマを使った方法なので、別テーマではうまくいかない可能性があります。

 

WordPressテーマ Diver 詳細はこちら

 

あらかじめ、バックアップを取ったうえで挑戦してみてください。

 

"ウェブフォント読み込み中のテキストの表示”の対策方法

 

ウェブフォント読み込み中のテキストの表示」を改善するためには、css内に以下のような記述を追加すればOKです。

 

@font-face {
    font-family: 'フォント名';
    src: url('フォントのURL');
    src: url('フォントのURL') format('フォントの拡張子'), url('フォントのURL') format('フォントの拡張子'), url('フォントのURL') format('フォントの拡張子'), url('フォントのURL') format('フォントの拡張子');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

 

これで基本的にはうまくいくのですが、Font Awesomeのように「外部から読み込んでいるフォント」の場合は、うまく改善されませんでした。

Font Awesomeで対応する場合は、ローカルにフォントを設置することで改善できるようです。

 

ちなみに、表示されたURLはこちら。

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0

 

Point
外部から読み込んでいるフォントは対策できない!

 

Font-Awesomeをローカルに用意する

 

では、実際にFont-Awesomeをローカルから読み込むようにしていきましょう。

以下のリンク先から「Font-Awesome 4.7.0」をダウンロードします。

 

https://fontawesome.com

 

Diverのバージョンによっては、読み込んでいるFont-Awesomeが違うかも。

その場合は、ダウンロードするFont-Awesomeのバージョンも合わせる必要があるかもしれないので注意してください。

 

Font-Awesome 4.7.0のダウンロード手順

 

現在のFont-Awesomeはバージョンが新しくなっているため、ちょっとだけダウンロードする方法が変わっています。

Font-Awesome 5が入っている人は不要

 

上で紹介したリンク先にアクセスすると、以下のようなページが表示されました。

 

Font Awesome ダウンロードページ

 

今回ダウロードしたいのは、古いバージョンのFont Awesomeです。

そのまま下にスクロールしていくと「Looking for Version 4 ?」と書かれた項目が見つかります。

 

Font Awesome バージョン 4.7.0

 

その下に書かれた「Version 4 Files + Docs」をクリックすると、Font-Awesome 4のダウンロードページに移動できます。

 

Font Awesome バージョン 4.7.0

 

こんな感じのページが表示されたら「Get Started」をクリック。

 

Font Awesome バージョン 4.7.0

 

Get the latest Version」と書かれていますが、これは”新しいバージョンがあるよ”みたいな意味なので、今回は「No thanks, I'll just stick with Font Awesome 4」を選択します。

 

Font Awesome バージョン 4.7.0

 

CDNによる読み込みや、プログラミングによる実装方法などが書かれていますが、Downloadをクリックするだけ。

また、さっきと同じようにFont Awesome5を進められますが、No thanksでOKです。

 

Font Awesome バージョン 4.7.0

 

これで、ローカルに設置するFont Awesomeが用意できました。

ダウンロードが完了したら「解凍」しておいてください。

 

Font Awesomeのcssをサーバーに設置する

 

では、Font Awesomeをサーバー上に設置していきましょう。

任意のFTPソフトを使用して、先ほど用意したフォントをアップロードします。

 

Font Awesome ローカル CSS

 

今回は、Xserver & Cyberduck(FTP)を例に紹介します。

新規接続をクリックすると、接続するサーバーのユーザー名やパスワードを求められました。

 

サーバ自サイトのドメイン
ユーザー名Xserverのユーザー名
パスワードXserverから送られてきたパスワード

 

正しく接続できたら、サイト内のファイルや構造にアクセスできたと思います。

 

Xserver Cyberduck

 

以下を参考に、スクリプトの保存先まで進んでいきましょう。

 

 ドメイン名.com/public_html/wp-content/themes/diver_child/ここにfunctions.phpやstyleがある

 

続いて、diver_child内に新しく「css」というフォルダを作成します。

 

Cyberduck cssフォルダ作成

 

この中に、先ほどダウンロードした「Font Awesome」を設置するのですが、ここで必要なのは「font-awesome.min.css」のみ。

 

Point
font-awesome-4.7.0 > font-awesome-4.7.0 > css > font-awesome.min.cssにあります。

 

このcssを先ほど作成した「cssフォルダ」に追加してください。

 

Xserver Font Awesome ローカル

 

ドメイン名.com/public_html/wp-content/themes/diver_child/css/font-awesome.min.css」となっていればOKです。

 

fontsフォルダを設置する

 

同じように、解凍した「font-awesome-4.7.0」の中にある「fontsフォルダ」もアップロードします。

アップロード先はこちら。

 

Point
ドメイン名.com/public_html/wp-content/themes/diver_child/fonts

 

解凍したFont Awesomeと同じ構造になればOKです。

 

ローカルのFontAwesome 構造

 

-ドメイン名.com
--public_html
---wp-content
----themes
-----diver_child
------css
-------font-awesome.min.css
------fonts
-------FontAwesome
-------fontawesome-webfont.svg
-------fontawesome-webfont.ttf
-------fontawesome-webfont.eot
-------fontawesome-webfont.woff
-------fontawesome-webfont.woff2

 

FTPを使った作業はこれで終わり。

続いて、WordPressから、フォントの読み込み方法を書き換えていきます。

 

functions.phpからFont Awesomeを読み込む

 

WordPressのダッシュボードから「外観 > テーマエディター > テーマのための関数(functions.php)」を開きます。

 

 ※functions.phpの編集を誤るとサイトが壊れる可能性があります。バックアップを取りつつ注意しながら作業してください。

 

Diverの場合は、デフォルトでいくつかのコードが書かれていました。

/* カスタマイズする場合にはこれより下に追記してください */」の下に以下のような記述を追加しましょう。

 

// JS・CSSファイルを読み込む
function add_files() {
  wp_enqueue_style( 'main', get_stylesheet_directory_uri() . '/css/font-awesome.min.css' );
}
add_action('wp_enqueue_scripts', 'add_files');

 

このようにすることで、子テーマの「css/font-awesome.min.css」を読み込むという命令を出すことができます。

うまくできていれば、Font Awesome 4.7.0の読み込みが完了したと思います。

 

wordpress FontAwesomeをローカルに追加

FontAwesomeをローカルから読み込む

 

親テーマのFont Awesomeを消す

 

次は、親テーマの方で読み込んでいる「Font Awesome」を廃止していきます。

先ほど同様「外観 > テーマの編集」を開き、右上の編集するテーマを「diver」に変更して選択をクリックしましょう。

 

テーマの編集 diver

 

 

ここから、Diverの親テーマを編集していきます。

親テーマは、アップデートが入ると元に戻ってしまうので注意してください。

 

親テーマが開いたら「lib > functions > load-script.php」と進んでいきましょう。

 

diver 親テーマ load-script.php

 

私の環境下では「78行目」と「95行目」にFont Awesomeに関する記述がありました。

 

78行目:wp_enqueue_style( 'fontAwesome4', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), null, 'all');
95行目:wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), null, 'all');

 

これらのコードを「コメントアウト」します。

文頭に「//」を追加し、以下のようにしてください。

 

//wp_enqueue_style( 'fontAwesome4', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), null, 'all');
//wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), null, 'all');

 

コードがオレンジ色に変わっていればOKです。

コメントアウトには「使用しないコード」という意味があり、簡単で役に立つので覚えてみてください。

 

デベロッパーツールから「maxcdn.boostrapcdn.com/font-awesome/~~~」の記述が消えていれば完了です。

 

”ウェブフォント読み込み中のテキストの表示”を改善する

 

冒頭でも紹介した通り「ウェブフォント読み込み中のテキストの表示」を改善するためには、「font-display: swap」という記述を追加する必要があります。

先ほど追加した「font-awesome.min.css」を開いてください。

 

ローカルのfont-awesome.min.css

 

圧縮されていてわかりづらいですが、先頭に「@font-face」の記述があります。

この要素の最後に「font-display: swap;」というコードを追加すればOKです。

 

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

 

わかりやすくするとこんな感じ。

cssは圧縮されているため、font-styleの最後に「;」を追加してください。

 

@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; font-display: swap }

 

確認したら「ファイルを更新」しましょう。

最後に、Page Speed Insightsを開いて「ウェブフォント読み込み中のテキストの表示」が表示されなくなったら完了です。

 

ウェブフォント読み込み中の全テキストの表示 対処法

 

合格した監査に追加された!

 

フォントの読み込みを早くしよう

 

フォントをプリロードすることで、読み込みを早くできるそうです。

<head> </head>間に、以下のような記述を追加しましょう。

 

<link rel="preload prefetch" as="font" type="font/woff2" href="https://ドメイン名.com/wp-content/themes/diver_child/fonts/fontawesome-webfont.woff2?v=4.7.0" crossorigin>

 

ドメイン名は、各自の環境に合わせて変更してください。

私は、とりあえず「アクセス解析タグ </head>の直前」に記述してみましたが、実感できるような速度改善はありませんでした。

 

Diver アクセス解析タグ

WordPress フォントのプリロード

 

あまり変わった気はしないけどとりあえず追加してみた

 

まとめ

 

今回紹介した方法をとれば、PageSpeedInsightsの「ウェブフォント読み込み中のテキストの表示」を改善することができました。

Diverは、cdnから読み込んでいたため少し大変でしたが、少しでも速度の改善に役立てていただければ幸いです。

 

 

ではまた。

 

過去にレビューしたアイテム