Google のコアアップデート(2020年5月)の影響か、サイトのアクセスが減ったこともあり、この機会にサイトの表示速度を調べてみました。
ちなみに、このサイト(WordPress)のテーマは「JIN」を愛用していて、その他のサイトは速度を求めて「アフィンガー(AFFINGER)」に移行しました。
どちらも、PageSpeed Insights(PSI)でスマホ(モバイル)向けのスコアが低く、JIN では 30 点台、アフィンガーでは 60 点台とイマイチです。
今回はアフィンガーのテーマで、スマホのスコアを 100 点に近付けることに成功したので紹介します。
(JIN については別の機会に挑戦します)
ブログのコンテンツ
アフィンガーを使用しているブログのコンテンツの特徴は以下の通り。
・Google Adsense の広告を使用しない
・独自の JS を使用しない
・独自の css は定義する
・ヘッダ画像を使用しない
要は、標準のデザインをベースに、少しだけ装飾用の css(スタイルシート)を追加した程度の内容です。
この状態で獲得できるスコアがイマイチなのはショックですよね。
PC：85点
モバイル(スマホ)：65点
PageSpeed Insightsからのアドバイス
「PageSpeed Insights」の計測結果には、何が遅延の原因となっているかのアドバイスも表示してくれます。
今回の場合は「レンダリングを妨げるリソースの除外」ということなので、JS と css が影響してそうですね。
クリックして詳細を確認してみましょう。
Google のフォント(font)とアフィンガーのメイン css の読み込みに時間が掛かっていることがわかります。
ここを撲滅していきましょう。
スピードアップのためのプラグイン3選
WordPress をカスタマイズする方法はいくつかありますが、今回は JS や css などフロントエンドの技術に絡むのでプラグインに頼ることをオススメします。
以下の機能を持ったプラグインを選定していきましょう。
・画像の遅延ロード
・ページのキャッシュ
・css の結合
・JS の非同期ロード
画像の遅延ロード
記事に画像データがある場合、通常はページの読み込み時に画像もロードされます。
画面を下にスクロールしていかないと見えない画像なのに、ページ読み込み時に待たされるのもどうかと思いますよね。
そこで、画像の位置までスクロールした時に画像を読み込ませるプラグインを活用します。
JavaScript のライブラリを利用すれば、プラグインを使わなくても同じことは実現できますが、プラグインを使った方がかなり楽に実装することができます。
オススメのプラグインは「a3 Lazy Load」です。
プラグインをインストールして有効化すれば、画像のあるページにすぐに適用されます。
画面をスクロールしていくと、リアルタイムに画像が読み込まれていくのがわかりますよ。
これでページ読み込みのスピードアップが期待できます。
ページのキャッシュとcssの統合
次にページのキャッシュと css ファイルの統合です。
キャッシュは、WordPress で処理して生成したページ(記事)を保存しておき、2 回目からは保存した状態のデータを素早く返すという技術です。
毎回、記事を作らなくて済むので WordPress(サーバ側)の処理負担が大きく軽減されます。
キャシュの方法はたくさんありますが、WordPress の場合はファイルでキャッシュするケースが多いでしょうか。
オススメのプラグインは「WP Fastest Cache」です。
このプラグインの良いところは、キャッシュ以外に以下の機能を持っていることです。
・css ファイルの統合
・JS ファイルの統合
・css や JS ファイルの gzip 圧縮
参考までに、私は以下の項目にチェックを入れています。
css ファイルが何個もあると、ページを閲覧しに来た人はファイルの数だけサーバに問い合わせて取得しなければいけません。
これだと通信回数が増えて、特に 4G(LTE)回線のスマホだと少なからず影響がありますよね。
そこで css ファイルを 1 つにまとめてしまい、最小の数だけをダウンロードするという手法が考えられます。
JS と違って css ファイルだけであれば、1 つにまとめてしまってもレイアウト崩れが発生する可能性も低いでしょう。
ただし、リスクがまったくないわけではないので、統合した状態でレイアウトに影響がないか動作確認を怠らないように。
JSファイルの非同期ロード
最後に、JS ファイルの非同期ロードです。
JS はページに動きを与える処理に多く使われますが、レイアウトを構築する時点(ページのレンダリング)ではすぐに必要のないものもあります。
そこで、レイアウトを作る際には邪魔をしないように、別のタイミングで取得しに行ってもらうという手法が考えられます。
これを実現するオススメのプラグインは「Async JavaScript」です。
特に、WordPress では標準で jQuery が使われたりするので、これだけでも非同期にするメリットは大きいです。
設定方法は、「設定」から「Async JavaScript」を選択して、以下の画面の赤枠で囲った場所にチェックを入れていきます。
async ではなく defer にチェックを入れているのは、確実にページのレンダリングを邪魔せずに実行を遅らせれるからです。
async でも同期的にロードするよりは大きな効果があるので、自分のサイトに合わせて調整してみてください。詳しくは以下の記事が参考になります。
スピードアップのためのアフィンガーの設定
ここまで、高速化にオススメのプラグインを紹介してきました。
最後に、アフィンガーの設定で速度に影響を出しているフォントについて調整をしていきます。
フォントについて、あまり意識されていない方もいると思いますが、アフィンガーでは標準で「Googleのフォント」が使われているのです。
これ自体は悪くないのですが、フォントのダウンロードに時間が掛かるのでページの表示速度には影響しています。
どうしても必要なら仕方ないですが、不要であれば使わないようにしましょう。
「アフィンガー管理」の「デザイン」から「フォントの種類」をクリックして設定状況を確認しておきます。
「M PLUS Rounded 1c」や「Noto Sans」にチェックが入っていたら、Google のフォントを使用していることになるので、使わないように調整してしまいます。
まとめ
アフィンガーのテーマにおけるページ高速化について紹介してきました。
・高速化に役立つプラグイン
・アフィンガーの設定
実際に提供したサイトでは以下のスコアを叩き出しています。
(上が PC、下がモバイル)
ほぼ、100 点に近いところまでいきましたね。
残念ながら、この「JIN」のテーマを使っている当サイトでは、同じ施策をしてもそこまでスコアは上がりません。
ただ、ここで紹介したプラグインは他のテーマでも有効なので、ぜひ試してみてくださいね。
