皆様、こんばんは。
今回の投稿は、「WordPress」の人気テーマである「Simplicity」の動作環境に関する投稿となります。
それでは今回の投稿にまいりましょう。
【スポンサーリンク】
はじめに
【目次】
さて改めまして今回の投稿は、「WordPress」の人気テーマである「Simplicity」の動作環境に関する投稿になります。
「WordPress」でWebサイトを開設しているユーザーにおいては、「WordPress」の利用する際にどのようなテーマを使用するかということは重要な事柄の一つではないでしょうか。
当ブログついても「WordPress」を利用してWebサイトを開設しており、「WordPress」のテーマには「Simplicity」を使用しています。
そして当ブログでも使用している「Simplicity」は、「WordPress」のテーマの中でも人気が高く使用するユーザーが多いテーマになります。
しかしながら「WordPress」でWebサイトを運営するユーザーの悩みといえば、Webサイトの表示速度があると思います。
「WordPress」を利用するWebサイトは、「WordPress」の仕組み上の理由から、どうしてもWebサイトの表示速度が遅くなる場合があります。
そして「WordPress」を利用するWebサイトの表示速度を改善するための手段の一つとしては、「Google」が公開する「PageSpeed Insights」というWebサイトがあり、当ブログ管理人も利用しています。
そこで以下の当ブログにおける「PageSpeed Insights」のWebサイトの表示速度テストの結果を参照してください。
＜「PageSpeed Insights」のWebサイトの表示速度テストの結果＞
このように当ブログでは、Webサイトの表示速度テストにおけるいくつかの改善項目が表示されましたが、それらの改善項目の中で特に「ウェブフォント読み込み中のテキストの表示」という改善項目に着目したところ、当ブログで使用している「Simplicity」というテーマについては、比較的容易に解決することができる改善項目ということがわかりました。
そこで今回の投稿では、「WordPress」のテーマで「Simplicity」を使用しているWebサイトに表示される「PageSpeed Insights」のWebサイトの表示速度テストの「ウェブフォント読み込み中のテキストの表示」という改善項目を解決する方法について、記事を記載してまいりたいと思います。
それでは本題に入りましょう。
【スポンサーリンク】
「PageSpeed Insights」の「ウェブフォント読み込み中のテキストの表示」という改善項目の意味
それでは初めに「PageSpeed Insights」の「ウェブフォント読み込み中のテキストの表示」という改善項目の意味について記載いたします。
まずは再度以下の当ブログにおける「PageSpeed Insights」のWebサイトの表示速度テストの結果を参照してください。
＜「PageSpeed Insights」のWebサイトの表示速度テストの結果＞
前項で記載するように「PageSpeed Insights」のWebサイトの表示速度テストでは、このようにWebサイトの表示速度を改善するための項目をテスト結果に表示します。
そして今回の投稿テーマである「ウェブフォント読み込み中のテキストの表示」という改善項目については、改善項目に表示されているようにウェブフォントを読み込んている間にユーザーがテキストを読めるようにするということを意味します。
当記事を参照されている皆様がお使いのWebブラウザでWebサイトにアクセスする際には、WebブラウザがWebサイト情報を読み込んでレンダリング（描画）という動作を行ってから、初めてWebブラウザ画面にWebサイトを表示することができるわけです。
しかしながらWebブラウザが読み込むWebサイト情報が多い場合には、レンダリング（描画）という動作に時間を要するために、Webサイトにアクセスしようとするユーザーに対するウェブパフォーマンスが悪くなってしまいます。
例えば昨今のWebサイト構成に必要不可欠な要素として「Javascript」という要素がありますが、Webサイトに「Javascript」を多用する場合に、Webブラウザが「Javascript」を読み込むことに時間がかかり、結果的にWebブラウザのレンダリング時間が長くなってWebブラウザ画面にWebサイトを表示する時間が長くなるということになります。
そして今回の投稿テーマである「ウェブフォント読み込み中のテキストの表示」という改善項目に記載されているWebフォントについても同様のことが言えます。
Webフォントというものは、あらかじめWebサーバー上に設置されたり、インターネット上で提供されているフォントをCSS機能で提供する技術のことであり、昨今のWebサイト構成に必要不可欠な要素の一つと言えます。
特にWebフォントの最大メリットといえることは、従来のWebブラウザが各端末にインストールされているフォントを用いて表示する方法と異なり、インターネット上にあるWebフォントダウンロードすることで誰でもデザイン性の高いWebサイトの構築が可能ということでしょう。
しかしながらWebフォントをインターネット上からダウンロードするということを考えると、WebブラウザがWebフォントをダウンロードして読み込む際に、Webサイトにアクセスしようとするユーザーに対するウェブパフォーマンスが少しながら悪くなるということも考えられます。
つまり今回の投稿テーマである「ウェブフォント読み込み中のテキストの表示」という改善項目の意味としては、WebブラウザがWebフォントをダウンロードして読み込む際に、例えばWebブラウザやパソコンにインストールされているシステムフォントを代用するなどして、Webサイトにアクセスしようとするユーザーに対するウェブパフォーマンスを落とさないようにしてくださいという意味になろうかと思います。
「PageSpeed Insights」の「ウェブフォント読み込み中のテキストの表示」という改善項目の意味に関する記載は以上です。
「PageSpeed Insights」の「ウェブフォント読み込み中のテキストの表示」という改善項目の対策方法
【「Font Awesome」】
それでは次に「PageSpeed Insights」の「ウェブフォント読み込み中のテキストの表示」という改善項目の対策方法について記載いたします。
まずは「Simplicity」というテーマに採用されている「Font Awesome」というWebフォントの対策方法について記載します。
当ブログでも使用している「Simplicity」というテーマでは、Webフォントとして「Font Awesome」及び「IcoMoon」という二種類のWebフォントが採用されています。
そして当ブログにおいては、この二種類のWebフォントに対策を実施することにより、「PageSpeed Insights」の「ウェブフォント読み込み中のテキストの表示」という改善項目を解決することができました。
また当ブログでも使用している「Simplicity」というテーマについては、この二種類のWebフォントを「WordPress」が設置されているWebサーバーから読み込む仕様となっているために、「PageSpeed Insights」の「ウェブフォント読み込み中のテキストの表示」という改善項目を解決する手順も比較的簡単といえます。
そこでまずはお使いの「WordPress」が設置されているWebサーバーにFTPソフトやファイルマネージャを使用してアクセスしてから、以下のように「WordPress」の階層を辿って「Simplicity」というテーマのWebフォントが保存されているフォルダにアクセスしてください。
なお「WordPress」が設置されているWebサーバーにアクセスして「Simplicity」というテーマのWebフォントが保存されているフォルダにアクセスする場合には、各Webサーバーによって「WordPress」の階層を辿る方法が異なりますので注意をお願いいたします。
＜「Simplicity」というテーマのWebフォントが保存されているフォルダ＞
/wp-content/themes/simplicity2/webfonts/css/
次に上記画像は当ブログで使用している「WPX Speed」というレンタルサーバーのファイルマネージャーの画面になります。
そこでまずはFTPソフトで「Simplicity」というテーマのWebフォントが保存されているフォルダにアクセスした場合は、「font-awesome.css」及び「font-awesome.min.css」というファイルを任意の場所にダウンロードしてから、任意のテキストエディターで「font-awesome.css」というファイルを開いてください。
またファイルマネージャーで「Simplicity」というテーマのWebフォントが保存されているフォルダにアクセスした場合は、「font-awesome.css」というファイルを開きます。
次に「font-awesome.css」というファイルを開いてから、上記画像のように以下の値を追加してください。
＜値＞
font-display: swap;次に開いている「font-awesome.css」というファイルを保存してから、「font-awesome.css」というファイルに記載されている内容を全てコピーします。
次に以下のWebサイトにアクセスしてください。
＜CSS Minifier＞
次に先ほどコピーした内容を上記サイトに張り付けてから、以下のように圧縮されて出力されたコードをコピーして、今度は「font-awesome.min.css」というファイルを開いて貼り付けを行い保存します。
＜圧縮済みコード＞
次にFTPソフトで「Simplicity」というテーマのWebフォントが保存されているフォルダにアクセスした場合は、任意の場所にダウンロードした「font-awesome.css」及び「font-awesome.min.css」というファイルについて、再度FTPソフトで「Simplicity」というテーマのWebフォントが保存されているフォルダにアップロードしてください。
以上で「ウェブフォント読み込み中のテキストの表示」という改善項目の「Font Awesome」というWebフォントを改善することができました。
「Font Awesome」というWebフォントの対策方法に関する記載は以上です。
【「IcoMoon」】
それでは次に「IcoMoon」というWebフォントの対策方法について記載いたします。
当ブログにおいては「IcoMoon」というWebフォントについて「Simplicity」というテーマのフォルダに保存されているWebフォントの読み込み個所を削除することにより、当ブログから「IcoMoon」というWebフォントを削除することにしました。
しかしながら「Simplicity」というテーマの子テーマに保存されている「functions.php」というファイルに以下の値を追加することにより、「IcoMoon」というWebフォントを削除することができます。
＜値＞
＜「post-template.php」というファイルのエラー箇所＞
add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_style( 'icomoon-style' );
});以上で「ウェブフォント読み込み中のテキストの表示」という改善項目の「IcoMoon」というWebフォントを改善することができました。
「PageSpeed Insights」の「ウェブフォント読み込み中のテキストの表示」という改善項目の対策方法に関する記載は以上です。
「Google Fonts」を削除する方法
それでは次に「Google Fonts」を削除する方法について記載いたします。
「WordPress」では既定値として「Google」が開発している「Google Fonts」というWebフォントが読み込まれています。
しかしながら「WordPress」を利用してWebサイトを開設するユーザーの中には、「Google Fonts」というWebフォントを削除することにより、若干ながらWebサイトの表示速度を改善させると考えられるユーザーもいらっしゃることでしょう。
そして当ブログにおいては、「Google Fonts」というWebフォントを削除する手段として、「Autoptimize」というプラグインを使用しています。
そこで「Autoptimize」というプラグインを使用して「Google Fonts」というWebフォントを削除する場合は、以下のWebサイトが公開する「Autoptimize」というプラグインを設定する方法に関する過去記事を参照してください。
＜Autoptimizeプラグインの設定と使い方＞
１、URL
「Autoptimize」の使い方に関する記載は以上です。
あとがき
さて今回の投稿は以上となります。
今回の投稿で記載する記事以外の当ブログで公開するソフトウェアの日本語化ファイルに関連する記事に興味がある方は、ぜひ一度以下の当ブログで公開するソフトウェアの日本語化ファイルに関連する記事のまとめを参照してください。
＜当ブログで公開するソフトウェアの日本語化ファイルに関連する記事のまとめ＞
１、URL
・当ブログで公開するソフトウェアの日本語化ファイルに関連する記事のまとめ
それでは以上です。