AFFINGER5の表示を高速化する方法。すべてプラグインで解決できます！ 2024年11月

ブログの表示が遅いので、なんとか速くしたい…。どうすればいいの？

男性

こんな疑問を解決します。

ブログの表示は早いに越したことはありません。

Googleでは読み込み速度がSEOに直接関係するとは明言はしていません。ですが、ユーザーは表示が遅いブログはすぐに離脱します。Googleは滞在時間が低いサイトを嫌うため、表示速度はSEOにとって重要な項目となります。

速いは正義！

ブログは大きく二つにわけられます。

パソコンでみる場合
スマホで見る場合

ブログの速度は下記のサイトでチェックできます。

Google Page Speed Insights

上記のページはGoogleが提供しているサイトで、ブログの表示スピードの結果と改善策を表示してくれるサイトでブログを運営していく上で重要なツールのひとつです。

今回今まで気なっていたサイトのスピードが散々な結果でしたので、改善策をみなさんと共有できればと思います。

今回は無料のプラグインを3つ使用した速度の改善方法ですが、ひとつのプラグインでより安全にサイトの高速化を図りたい場合はこちらの記事が参考になります。

ブロガー歴3年が推奨するブログを爆速化する有料プラグイン【世界が変わります】

⇒ AFFINGER5を特典付きで購入してブログを高速化してみたい

ブログの速度が極端に遅い場合

外部へのアクセスが多い（大多数は広告）と、PageSpeed Insightsのポイントは上がらない場合があります。

ENGI WORKSのトップページも、当初外部リンク（Adsenseなど）が多く数値が下がったことがあります。

WordPress Popular Postsを使っている場合、これが原因で読み込みが遅くなります。

まずは不要なプラグインの停止、本当に必要なものだけを取捨選択してから当記事の方法を試してみてください。

なお、CloudflareなどのCDNを用いるとさらに4～5ポイントほどアップしましたが、常に更新を行うブログではテクニックが必要になりますので、今回紹介しておりません。

ブログ環境の説明

下記の環境で実施

WING AFFINGER5　バージョン　：20190504
AFFINGER 5 JET　バージョン　：20190125
ワードプレス　バージョン　：5.2.2
XSERVER（エックスサーバー）　：スタンダードプラン

2019年1月10日追記

親テーマ

WING-AFFINGER5バージョン: 20190110b

子テーマ

AFFINGER5 JET-Childバージョン: 20181226

上記のバージョン以降では、未使用のGoogle Fontsの読み込みを行わなくなりました。そのため、当サイトのページの表示スピードが、「大幅に仕様変更されたPageSpeed Insights」において劇的に改善されています。

パソコン版

モバイル版

コンテンツのレンダリングをブロックしているJavaScriptとCSSを排除し、ブログをキャッシュさせる

サイトスピードの表示で一番厄介なものがレンダリングをブロックするJavaScriptとCSSです。

いろいろプラグインが出ていますが、一番効果的で扱いやすいプラグインを使用します。

使用プラグインは下記の3つ

Autoptimize
W3 TOTAL CACHE
Async JavaScript

Autoptimize

Autoptimizeはあらかじめ、高度な設定を表示するにしておきます。

図はすでに高度な設定を表示させているため、非表示となっています。図のようになっていれば、OKです。

JavaScriptオプションは、「一般的には」チェックを入れますが、後ほど「Async JavaScript」というプラグインで細かく設定をしますので、ここにはチェックを入れません。

CSSオプションは下記の項目にチェックを入れる

CSSコードを最適化
Aggregate CSS-files
インラインのCSSを連結
すべてのCSSをインライン化

HTMLオプションは「HTMLコードを最適化」のみチェック

上記のAutoptimize設定はAFFINGER5 バージョン20190504の場合の設定ですが、ほかテーマでも有効とは思います。

その際は、あなたがお使いのワードプレステーマで独自のCSSやJavaScriptに関する速度調整を行っていないかチェックをしてください。ワードプレステーマとプラグインでも同じ設定をしてしまうと思わぬ誤作動を起こす場合があるためです。

最後に「変更を保存してキャッシュを削除」をクリック

続いて、追加タブをクリックします。

WING AFFINGER5では、Google fontsがデフォルトで設定されています。そのため、フォントを使用する・しない関係なくサイトの読み込みの際、google fontsがレンダリングをブロックします。

AFFINGER5ではGoogleフォントを使わない場合、「無効」になるはずなのですが、どうも読み込んでいる形跡がありましたので、Autoptimizeで無効化設定をしています。

「Googleフォントの削除」にチェックを入れます。

絵文字を使うことがないようであれば「絵文字を削除」にもチェックを入れてしまってOKです。

ここでいう絵文字とはFont Awesomeのことではありません。

以上で、Autoptimizeの設定は完了です。

保存して終了します。

W3 TOTAL CACHEでブログをキャッシュする

Autopitimizeは主にCSSやJavaScript、HTMLの最適化に特化したプラグインです。

ブログのキャッシュ設定には定評のあるW3 TOTAL CACHE（ダブルスリートータルキャッシュと読む）を使用します。

理由は下記の2つ

モバイルページにもキャッシュを有効にすることが可能（WP Fastest Cacheにもあるが有料）
AFFINGER5にW3 Total Cacheの独自設定が設けられている

続いて設定です。

「Page Cache」にチェックを入れます。

「Minify」の項目は無効「Enableにチェックを入れない」にします。Enableは有効という意味です。

CSSとHTMLはすでにAutoptimizeで縮小化の設定をしているためです。

これを使えば「Autoptimize」いらないんじゃない？！となりますが、JavaScriptは詳細に設定をしたいので、ここでは有効にしません。

「Data Base Cache」にチェックを入れます。

「Browser Cache」にチェックを入れます。

Async JavaScriptで非同期、遅延読み込みをさせる

AutoptimizeやW3 TOTAL CACHEにはJavaScriptを小さくしたりする設定はありますが、非同期にさせたり、遅延読み込みをさせる設定ができません。

ワードプレスで使うJavaScriptは読み込みが完了するまで描画をブロックするため、小さくしたりしたところで描画をブロックすることには変わりません。

描画がとまるということはブログを訪問してくれた人にとっては画面がいつまでたっても表示されないだけです。

それを改善させるためには不要な部分は後から読み込ませることが一番です。

Google PageSpeed Insightsでも遅延させることを推奨してきますので、そのように設定をしましょう。

プラグインには「Async JavaScript」を使用します。

Async JavaScriptの設定画面で図のように3箇所にチェックを入れいます。

「Async JavaScript Method」「jQuery」に図のとおり設定をします。

Methodは「方法」という意味があり、Asyncは「非同期」、Deferは「遅延」という意味があります。

「Async JavaScript For Plugins」でAutoptimizeと連携する

Async JavaScirptのおもしろい機能のひとつとして、「Async JavaScript For Plugins」というものがあります。

これは簡単にいうとほかのプラグインと連携することができる機能で、Async JavaScriptが連携できるプラグインがインストールされていればそのプラグインと連携するというものです。

Async JavaScriptは「Autoptimize」と連携ができます。

赤枠部分にチェックを入れます。

画像圧縮したが改善されない場合

EWWW Image Oputimizerなど使って画像を圧縮しているにもかかわらず画像圧縮を提案される場合があります。

少々強引ではありますが、コツがあります。

計測結果を見ると下記のメッセージがあるの、お気づきでしょうか。

画像圧縮された画像をダウンロードすることができる

ここから最適化された画像をダウンロードして、あなたが運営しているサーバーへアップロードすることで画像圧縮の恩恵を受けることができます。

赤枠以外の部分は外部サイトからの引用なので、対策が難しいですが、赤枠で囲った部分は自分のサイト内なので、対策可能です！

ワードプレス内の画像を置いてあるフォルダーへ対象の画像ファイルを置き換えることで圧縮された画像を適用することができます。

今回は紹介する程度にとどめますが、EWWW Image Oputimizerよりもより高画質で高圧縮が可能な、「Imagify」がおすすめです。

無料版では1ヶ月に圧縮できる画像枚数は限られますが、なかなかの効率アップが図れます。

わたしは「LITE版」を購入しました。

はや

Imagifyでは画像の圧縮レベルが設定できますが、「Nomal」が無難です。「AGGRESSIVE」や「URTLA」もありますが、ここまでやってしまうと画像に粗が目立ってきます。

画像は画像作成時に小さなサイズを作成することがデータサイズを抑えるコツです。

はや

しかしこの方法は手間ですので、出来れば新規記事作成時に画像はできるだけ圧縮しておきたいですね。オンラインで使えるフリーの画像圧縮ツールはこれで十分という記事でとても簡単に画像を超圧縮する方法をご案内していますのでご参考にどうぞ。

: オンラインで使えるフリーの画像圧縮ツール【最強】

続きを見る

st_af id="23331"]

AFFINGER5のサイトを高速化するほうほう（まとめ）

サイト表示のスピードアップはSEO対策にもなりますので、ワードプレス脱・初心者を目指す意味でもぜひ対策してみてください。

ブログはいくら見た目がきれいでも読まれなければ意味がありません。

ワードプレスはテーマによって重いものから軽いものから様々です。

AFFINGER5はデザインが美しくなりますが、重くなる傾向にあります。

ぜひ、紹介した方法で高速化をしてみてください。

最後までお読みいただきありがとうございました。