ブログ運営

【AFFINGER5】サイトスピードの改善方法【2つのプラグインで解決】

サイトスピード改善の設定
悩んでる人
AFFINGER5使ってるのにブログの表示速度が遅い

サイトスピードを計測したら点数が悪かった

サイトスピードを改善する方法が分からない

こんな悩みを解決します。

 

このブログでは「AFFINGER5」というテーマを使用していますが、今回の方法は他のテーマを使用している方でも使える内容になっています。

 

本記事の内容

  • サイトスピード改善前と後の比較
  • サイトスピードの計測方法
  • AFFINGER5サイトスピードの改善手順
  • Autoptimizeの使い方・設定方法
  • WP fastest cacheの使い方・設定方法

本記事の信頼性

このサイト「Kawateru blog」では、

サイト測定ツール「PageSpeed Insights」でサイトスピードを計測したところ、

  • PC 98点
  • モバイル 72点

の得点を出しています。

(モバイル版の点数が少し低い理由は後程解説)

 

こんにちは、かわてる(@kaz_lion)です!

今回は僕が行った、サイトスピードを改善する方法について解説していきます。

結論から言うと、

  • Autoptimize
  • WP Fastest Cache

この2つのプラグインを導入して正しく設定してあげるだけで、ブログの表示速度をかなり改善できます。

 

サイトスピード改善前と後の比較

AFFINGER5を設定する人

まずは本記事のサイトスピードが改善前と改善後でどれくらいの速度の差が出たのかを見ていきましょう。

 

改善前のサイトスピード測定結果

PC版サイトスピード

モバイル版サイトスピード

 

このブログではAFFINGER5というテーマを使っていて

表示速度も速いと有名なテーマだったので

あれ?なんで?って感じでした(笑)

 

モバイル版なんて息してませんよね…

さすがににここまで遅いと不安になるのでサイトスピードの改善に取り組むことに。

改善後の結果がこちら。

 

改善後のサイトスピード測定結果

PC版サイトスピード

AFFINGER5のサイトスピード

モバイル版サイトスピード

AFFINGER5速度改善後

かなり良くなったでしょ?

こんな感じでWordPressの場合プラグインで簡単に改善できます。

以前のはてなブログの時はあきらめてましたが(笑)

 

表示速度の点数の差

  • PC 79 ➜ 98 19点UP‼
  • モバイル 26 ➜ 72 46点UP‼

ここにきてAFFINGER5の威力が発揮されてきました。

PC版 98点は満足の数値です。

他のテーマでは試してないのでわかりませんが、これだけ数値が変わるのであればほかのテーマにも有効だと思います。

 

ちなみにモバイル版の速度ですが

基本的にはPC版に対してモバイル版の方が遅くなる傾向にあります。

 

理由としてはPC用のコンテンツをスマホでも読み込んでしまっていたり、

画像のサイズがPC用だったりと何かとスマホの方が遅いです。

 

AMP化などを行えばもっと改善できるのですが、

サイトが簡素になってしまい、動きが付けれなかったり、画像も制限されたりとあまりよさを感じなかったので今回はこの点数で妥協しました。

kawateru
ブログにはデザイン性も必要!!

AFFINGER5はAMP化も超簡単にできるよ

 

サイトスピードの計測方法

サイトスピード計測

まだ自分のサイトスピードを計測したことがないという人は、URLを入れるだけなので是非試してみましょう。

PageSpeed Insightsの使い方

PageSpeed Insightsにアクセス

Googleのサービスの一つです。

サイトスピード計測ツール

こちらのページが表示されるので赤枠部分に自分のブログのURLを記入

右の矢印の「分析」をクリック

 

後は1~2分くらいで先ほどの点数がついた計測結果が表示されます。

サイトスピード改善のヒントを教えてくれる

計測結果が出たら下の方にサイトスピードを改善するための提案がいくつか表示されます。

ですが今回はできるだけ簡単に速度を改善したいのでスルーしましょう。

 

何を言われてるかわからなかったりするんですよね(笑)

難しく考えずに進みましょう!

 

AFFINGER5サイトスピードの改善の手順

AFFINGER5改善の手順

ここからは実際にサイトスピードを改善するための手順を紹介します。

注意点としてすべての場合に言えますが新しくプラグインを入れる場合はバックアップを忘れずにとりましょう。

万が一不具合が起きた場合にすぐに元に戻せるようにする為です。

 

Autoptimizeの導入

Autoptimizeの導入

まず一つ目はAutoptimizeというプラグインを導入していきます。

WordPressの管理画面➜プラグイン➜新規追加をクリックして右上の検索ボックスに「Autoptimize」といれて検索します。

インストールが完了したら有効化しておきましょう。

Autoptimizeの使い方・設定方法

次にAFFINGER5のサイトスピードを改善するために設定をしていきます。

WordPressの管理画面➜設定➜Autoptimizeを開きます。

難しい項目が多いので必要な部分だけ設定していきます。

サイトスピード改善の設定

この項目ではJavaScriptコードの最適化とAggregate JS-files?にチェックを入れます。

JavaScriptという動きを付けるためのファイルを圧縮してくれます。

 

サイトスピード改善の方法

 

CSSの設定は上の3つにチェックを入れたいのですが、

3つ目だけブログトップで使用している画像に影響が出たのでチェックを外しました。

チェックを入れてみて何か問題があれば外せばいいと思います。

 

Autoptimizeの設定

HTMLの項目では上にだけチェックを入れました。

もしHTMLファイルにコメントを記入したりしている場合はHTMLコメントを残すにもチェックを入れておきましょう。

特にファイルを直接いじることがない人は外していて問題ないです。

 

 

Autoptimizeで改善

その他のオプションでは3つともチェックが入っているのを確認してから

保存を押しましょう。

 

Autoptimizeプラグイン

 

次にImagesタブのLazy-load images?にチェックしましょう。

これにチェックを入れると画像の遅延読み込みをしてくれます。

もしほかのプラグインで導入している場合はチェックを入れなくて大丈夫です。

タブを切り替えるとリセットされるので保存を忘れずにクリックしときましょう。

 

AFFINGER5設定

最後に追加タブのGoogle Fontsの設定です。

赤枠の部分を選択して変更を保存をクリック。

これでAutoptimizeの設定は終わりです。

 

kawateru
これだけでもかなり改善されますが、

せっかくなのでもう一つだけプラグインの設定頑張りましょう!

 

WP fastest cacheの導入

WP fastest cacheの導入

先ほどと同様にプラグインを導入していきます。

WordPressの管理画面➜プラグイン➜新規追加をクリックして右上の検索ボックスに「wp fastest cache」といれて検索します。

インストールが完了したら有効化しておきましょう。

WP fastest cacheの使い方・設定方法

インストールが終わったら管理画面にWP Fastest Cacheの欄が増えていると思います。

最初英語で表示されてますが、下の方のボックスから言語が選べるので日本語に直しておきましょう。

WP Fastest Cacheの設定

 

設定画面が表示されたら画像と同じようにチェックを入れていきます。

HTMLの圧縮などは先ほどのプラグインで行っているのでチェック無しで大丈夫です。

たまにポップアップが表示されますが下記のような設定にしましょう。

 

Preloadをチェックしたら出てきます。

どのページのキャッシュを作成するかの設定なので基本的には下記でいいと思います。

WP AFFINGER5で使用

新しい投稿をチェックしたら出てきます。

WP Fastest Cacheとは

UpdatePostをチェックしたら出てきます。

WP Fastest Cacheの設定

最後に設定を保存をクリックして設定は終了です。

kawateru
おつかれさまでした!

 

もう一度PageSpeed Insightsにアクセスしてサイトスピードを計測しましょう!!

 

まとめ【AFFINGER5】サイトスピード改善方法

サイトスピード改善方法のまとめ

今回は2つのプラグインを使ったサイトスピードの改善方法について解説してきました。

  • PC 79 ➜ 98 19点UP‼
  • モバイル 26 ➜ 72 46点UP‼

このブログではこれぐらいの改善ができましたが、

上記の方法を試してもあまりいい結果が出なかったという人は、AFFINGER5などの有料テーマに切り替えてみるのも検討してみてはいかがでしょうか。

AFFINGER5はサイトスピードやアフィリエイトに特化したテーマなのでオススメですよ♪

  • この記事を書いた人
  • 最新記事

kawateru

【ブログ運営】×【Twitter運用】×【エンジニア】 3月からWordPressに移行しました。 4年間ブラック飲食→MGになるも28歳で退職→未経験から開発エンジニアに転職→最短でフリーランス目指す‼ ●大阪出身 ●28歳 ●1児のパパ

-ブログ運営
-,

Copyright© Kawateru blog , 2020 All Rights Reserved Powered by AFFINGER5.