サイトスピードを計測したら点数が悪かった
サイトスピードを改善する方法が分からない
こんな悩みを解決します。
このブログでは「AFFINGER5」というテーマを使用していますが、今回の方法は他のテーマを使用している方でも使える内容になっています。
本記事の内容
- サイトスピード改善前と後の比較
- サイトスピードの計測方法
- AFFINGER5サイトスピードの改善手順
- Autoptimizeの使い方・設定方法
- WP fastest cacheの使い方・設定方法
本記事の信頼性
このサイト「Kawateru blog」では、
サイト測定ツール「PageSpeed Insights」でサイトスピードを計測したところ、
- PC 98点
- モバイル 72点
の得点を出しています。
（モバイル版の点数が少し低い理由は後程解説）
こんにちは、かわてる（@kaz_lion）です！
今回は僕が行った、サイトスピードを改善する方法について解説していきます。
結論から言うと、
- Autoptimize
- WP Fastest Cache
この２つのプラグインを導入して正しく設定してあげるだけで、ブログの表示速度をかなり改善できます。
サイトスピード改善前と後の比較
まずは本記事のサイトスピードが改善前と改善後でどれくらいの速度の差が出たのかを見ていきましょう。
改善前のサイトスピード測定結果
PC版サイトスピード
モバイル版サイトスピード
このブログではAFFINGER5というテーマを使っていて
表示速度も速いと有名なテーマだったので
あれ？なんで？って感じでした（笑）
モバイル版なんて息してませんよね…
さすがににここまで遅いと不安になるのでサイトスピードの改善に取り組むことに。
改善後の結果がこちら。
改善後のサイトスピード測定結果
PC版サイトスピード
モバイル版サイトスピード
かなり良くなったでしょ？
こんな感じでWordPressの場合プラグインで簡単に改善できます。
以前のはてなブログの時はあきらめてましたが（笑）
表示速度の点数の差
- PC 79 ➜ 98 19点UP‼
- モバイル 26 ➜ 72 46点UP‼
ここにきてAFFINGER5の威力が発揮されてきました。
PC版 98点は満足の数値です。
他のテーマでは試してないのでわかりませんが、これだけ数値が変わるのであればほかのテーマにも有効だと思います。
ちなみにモバイル版の速度ですが
基本的にはPC版に対してモバイル版の方が遅くなる傾向にあります。
理由としてはPC用のコンテンツをスマホでも読み込んでしまっていたり、
画像のサイズがPC用だったりと何かとスマホの方が遅いです。
AMP化などを行えばもっと改善できるのですが、
サイトが簡素になってしまい、動きが付けれなかったり、画像も制限されたりとあまりよさを感じなかったので今回はこの点数で妥協しました。
AFFINGER5はAMP化も超簡単にできるよ
サイトスピードの計測方法
まだ自分のサイトスピードを計測したことがないという人は、URLを入れるだけなので是非試してみましょう。
PageSpeed Insightsの使い方
PageSpeed Insightsにアクセス
Googleのサービスの一つです。
こちらのページが表示されるので赤枠部分に自分のブログのURLを記入
右の矢印の「分析」をクリック
後は1~2分くらいで先ほどの点数がついた計測結果が表示されます。
サイトスピード改善のヒントを教えてくれる
計測結果が出たら下の方にサイトスピードを改善するための提案がいくつか表示されます。
ですが今回はできるだけ簡単に速度を改善したいのでスルーしましょう。
何を言われてるかわからなかったりするんですよね（笑）
難しく考えずに進みましょう！
AFFINGER5サイトスピードの改善の手順
ここからは実際にサイトスピードを改善するための手順を紹介します。
注意点としてすべての場合に言えますが新しくプラグインを入れる場合はバックアップを忘れずにとりましょう。
万が一不具合が起きた場合にすぐに元に戻せるようにする為です。
Autoptimizeの導入
まず一つ目はAutoptimizeというプラグインを導入していきます。
WordPressの管理画面➜プラグイン➜新規追加をクリックして右上の検索ボックスに「Autoptimize」といれて検索します。
インストールが完了したら有効化しておきましょう。
Autoptimizeの使い方・設定方法
次にAFFINGER5のサイトスピードを改善するために設定をしていきます。
WordPressの管理画面➜設定➜Autoptimizeを開きます。
難しい項目が多いので必要な部分だけ設定していきます。
この項目ではJavaScriptコードの最適化とAggregate JS-files?にチェックを入れます。
JavaScriptという動きを付けるためのファイルを圧縮してくれます。
CSSの設定は上の3つにチェックを入れたいのですが、
3つ目だけブログトップで使用している画像に影響が出たのでチェックを外しました。
チェックを入れてみて何か問題があれば外せばいいと思います。
HTMLの項目では上にだけチェックを入れました。
もしHTMLファイルにコメントを記入したりしている場合はHTMLコメントを残すにもチェックを入れておきましょう。
特にファイルを直接いじることがない人は外していて問題ないです。
その他のオプションでは3つともチェックが入っているのを確認してから
保存を押しましょう。
次にImagesタブのLazy-load images?にチェックしましょう。
これにチェックを入れると画像の遅延読み込みをしてくれます。
もしほかのプラグインで導入している場合はチェックを入れなくて大丈夫です。
タブを切り替えるとリセットされるので保存を忘れずにクリックしときましょう。
最後に追加タブのGoogle Fontsの設定です。
赤枠の部分を選択して変更を保存をクリック。
これでAutoptimizeの設定は終わりです。
せっかくなのでもう一つだけプラグインの設定頑張りましょう！
WP fastest cacheの導入
先ほどと同様にプラグインを導入していきます。
WordPressの管理画面➜プラグイン➜新規追加をクリックして右上の検索ボックスに「wp fastest cache」といれて検索します。
インストールが完了したら有効化しておきましょう。
WP fastest cacheの使い方・設定方法
インストールが終わったら管理画面にWP Fastest Cacheの欄が増えていると思います。
最初英語で表示されてますが、下の方のボックスから言語が選べるので日本語に直しておきましょう。
設定画面が表示されたら画像と同じようにチェックを入れていきます。
HTMLの圧縮などは先ほどのプラグインで行っているのでチェック無しで大丈夫です。
たまにポップアップが表示されますが下記のような設定にしましょう。
Preloadをチェックしたら出てきます。
どのページのキャッシュを作成するかの設定なので基本的には下記でいいと思います。
新しい投稿をチェックしたら出てきます。
UpdatePostをチェックしたら出てきます。
最後に設定を保存をクリックして設定は終了です。
もう一度PageSpeed Insightsにアクセスしてサイトスピードを計測しましょう!!
まとめ【AFFINGER5】サイトスピード改善方法
今回は2つのプラグインを使ったサイトスピードの改善方法について解説してきました。
- PC 79 ➜ 98 19点UP‼
- モバイル 26 ➜ 72 46点UP‼
このブログではこれぐらいの改善ができましたが、
上記の方法を試してもあまりいい結果が出なかったという人は、AFFINGER5などの有料テーマに切り替えてみるのも検討してみてはいかがでしょうか。
AFFINGER5はサイトスピードやアフィリエイトに特化したテーマなのでオススメですよ♪
