Affinger5でPageSpeed Insightsの表示速度向上のテクニック

WordPressの人気テンプレート「affinger5」でサイトを作ったところ、Googleが提供している「PageSpeed Insights」で速度を見ると最悪だった。
なんて経験を持っている方が多いのではないでしょうか？

いろんな解決法が多岐に渡って多くのサイトで説明されているけど、どれも難しくて意味が分からないなんて事になっていませんか？
そこで、今回の記事ではaffinger5で作成したサイトの特にモバイルでの表示速度向上のテクニックを分かりやすく解説します。

affinger5に必要なプラグイン

とにかく便利なアフィンガー5ですが、いろんな機能を使うほど、モバイルでの表示速度が下がります。
見た目は良くなるのですが、PageSpeed Insightsにサイトを入れて調べてみると下記のような結果になって愕然とします。

下記はあるaffinger5で作ったあるサイトを調べたモバイルの結果です。

今はGoogleがサイトの表示順位を決めるのに、表示速度（特にモバイル）が大きく影響します。
時間を掛けて作ったサイトなのに、これでは上位表示はほぼ無理となってしまいます。

これを解決するために必要がプラグインを紹介します。

Autoptimize

CSS、JavaScript、HTML、を最適化して、画像を遅延読込してくれます。
画像は最初のページが開く時に見える部分の画像だけ表示して、見えない部分はスクロールなど始まってから読み込む事でサイトの表示が速くなります。

設定

・JavaScript オプション

①にレ点を入れます。
②はレ点を入れますと、スマホのスライドメニューが動かなくなります。

・CSS オプション

下記の3点のレ点を入れます。

・HTML オプション

下記の通りレ点を入れます。

・その他オプション

①にレ点をいれます。
②で変更を保存します。

①画像のタブを選びます。
②レ点を入れます。
③変更の保存をクリックします。

追加のタブをクリックします。

①レ点を入れます。
②レ点を入れます。
③変更の保存をクリックします。

以上で終わりです。

Async JavaScript

上記のプラグインと同じ方が作ったもので、JavaScriptを非同期してサイトの表示速度を上げます。

Settinegsをクリックします。
①にレ点を入れます。
②をクリックします。

最下部の「Save Setting」をクリックします。

これで終了です。

EWWW Image Optimizer

画像を「WebP」などの容量の少ない画像に一括最適化してくれます。
サイトの読み込みを一番遅くする大きな原因は画像の容量の大きさです。

これを解決しますと、かなりサイトの表示が改善されます。

基本タブで、「メタデーターを削除」にレ点を入れます。
「変更を保存」をクリックします。

写真や画像には、コメント、カラープロファイル、撮影場所、日付、etc.と多くの情報が入っています。
これを削除します。

「上級者向け」タブでJPL品質レベルを100に設定します。

下部の「設定を保存」をクリックします。
意外に設定を保存しない方が多いので要注意です。

「WebP」タブをクリックして「 WebP 変換」にレ点を入れます。

①下部にスクロールして「変更を保存」をクリックします。
一旦保存されて画面が上に上がりますので再度下にスクルールしますと、下記のような画面に変化しています。

②の「リライトルールを挿入する」をクリックします。

右下のマークが緑色の「WEBP」になって入ればOKです。

設定はこれで終了です。

ですが、このプラグインを入れた時にすでに画像をメディアにアップロードしている方は、次の作業が必要になります。
ダッシュボードのメディアから、一括最適化をクリックします。

今までアップロードした画像や写真が全て、「WebP」に最適化され軽くなります。
5分ぐらいは時間の掛る作業になりますので、その間に違う事をしましょう。(^^♪

これが終了しましたら、その後にアップした写真や画像は自動で、「WebP」に最適化されます。
ですので、画像をアップする時に若干時間が掛るようになりますが正常です。

WP Fastest Cache

超有名な「WP Fastest Cache」プラグインです。
ほとんどの方はいれていると思いますが、一応設定ができているかだけ確認しましょう。

設定が下記のようになっていればOKです。
プラグインをしたけど、設定していない方がいますので要注意です。

プラグインは以上になります。
お疲れ様です。(^^♪

AFFINGER5 管理の設定

管理画面に入って、「その他」の「上級者向け」の「headに出力するコード※wp_head()にエスケープせずにそのまま出力されます」枠の中に下記を入れます。

必ず「保存」ボタンをクリックするのを忘れないようにしましょう。

おすすめ記事一覧関連

「AFFINGER5 管理」にある「おすすめ記事一覧」は見た目が良くなりますが、使用しない方がおすすめです。
特に、①にレ点を入れて、②を設定しますとモバイル表示はグンと遅くなります。
同じ状態で使用している方はすぐに消してしまいましょう。

スライドショー

トップページで、スライドショーを使用しますと見た目はいいのですが、モバイルでの表示が大きく低下します。
スライドショーは、下部で使うか違うページで使用しましょう。

出来れば、トップページでは使用しない方が賢明です。

YouTube

YouTubeをトップページに入れている方がいますが、これも確実にモバイルでの表示を遅くさせます。
ですので、違うページで使用してトップでは使用しないようにしましょう。

YouTubeを遅れて読み込ませるなどの方法があります。
ですが、頑張った割にあまり成績は良くなりませんから無駄です。

まとめ

その結果モバイルの成績は下記にまで上げる事ができました。
AFFINGER5で作ったWordPressサイトでなくても、AFFINGER5の説明以外の部分は使えますので参考にしてください！

いろんな環境がありますので、全く必ず同じようにモバイルでのスピード向上が期待できるわけではありません。
もっとスピードが出るサイトもあれば、上記より出ないサイトも出てきます。

ですが、間違いなく今よりも確実に向上しますので是非悩んでいる方はチャレンジしてください。(^^♪