blog-management

AFFINGER6でサイトを高速化する施策7選

こんにちは、なおきです（@naoki_koudou）。

こんな疑問にお答えしていきます。

なおき｜サイト運営者

なおき
「サイトの高速化をしたい」「できればコードは打ち込みたくない」

この記事では、サイトの高速化をしたい方に向けて具体的な施策を7つ紹介していきます。記事を読むことで、「画像の圧縮方法」「サイトの読み込み速度」が理解出来ますよ。

 

AFFINGER6の高速化より、AFFINGERの評判と感想が気になる方は下記をどうぞ。

»AFFINGER6を4ヶ月使った感想と評判

【まとめ】AFFINGERのサイトを高速化する施策

サイトを高速化する効果の大きい施策をまとめました。

ポイント

  • 画像の圧縮&次世代画像フォーマットの利用
  • スクリプトの最適化
  • SNSの埋め込みを外す

上記の３つをやることで、すぐにサイトの高速化が可能です。やり方も解説しますね。

サイトの読み込み速度が大切な理由

サイトの表示速度は本当に大切です。Googleのデータでもこんな研究結果があります。

Googleがディープランニングを用いて予測したデータです。

  • 表示速度が1秒から3秒に落ちると、直帰率は32%上昇
  • 表示速度が1秒から5秒に落ちると、直帰率は90%上昇
  • 表示速度が1秒から6秒に落ちると、直帰率は106%上昇
  • 表示速度が1秒から7秒に落ちると、直帰率は113%上昇
  • 表示速度が1秒から10秒に落ちると、直帰率は123%上昇
    引用元：『表示速度が１秒→7秒で直帰率は113%』

上記のとおり、表示速度はサイトの離脱率に影響します。せっかく良質な記事を書いても、サイトの読み込み速度が遅いと読者を逃してしまいますよ。

記事を書いている僕のGoogle PageSpeed Insightsスコア

モバイルのスコア(11月25日時点)

PageSpeed モバイル11/25

パソコンのスコア(11月25日時点)

PageSpeed デスクトップ11/25

 

メモ

ページの表示速度を計測できるサイト

 

AFFINGER6の購入はこちらから

※AFFINGER6は、SEO対策とカスタマイズ性の高さに優れています。

AFFINGERの表示速度優先から高速化する方法

ここでは、AFFINGER付属の表示速度優先項目を有効にします。手っ取り早く、AFFINGERに付属している表示速度優先設定を触っていきます。

 

AFFINGERの設定をいじることで、「表示速度」が最大に優先されます。しかし使えなくなる機能もいくつかあります。使えなくなる機能は以下のとおり。

  1. スライドショー機能（ショートコード含む）
  2. Googleフォント・マテリアルアイコン
  3. スクロール追尾広告
  4. コピー機能（SNSボタン）
  5. アニメーションクラス
  6. カウントダウン（EX）
  7. もっと読む（無限スクロール）（EX）
  8. レスポンシブ（ショートコード含む記事一覧）画像の画質を上げる（EX）

 

表示速度優先のやり方は、AFFINGER管理からSEO→表示速度優先(β)→有効化で可能です。AFFINGER6 EX版やAFFINGER5の方は、下記の画像と設定画面の表記が変わると思います。

AFFINGER6でサイトを高速化する施策7選のイメージ

AFFINGER6でサイトを高速化する施策7選のイメージ

投稿ページをAMPに対応させる

サイトの記事をAMPに対応させると、記事の読み込み速度が超高速になります。設定方法は、AFFINGER管理→Google・広告/AMP→AMP対応→「全ての投稿ページをAMP対応にする」にチェックを入れます。

AFFINGER6でサイトを高速化する施策7選のイメージ

AFFINGER6のAMP対応項目

AFFINGER6でサイトを高速化する施策7選のイメージ

 

最後に投稿画面から「AMPに対応する」にチェックを入れると、記事がAMPに対応します。
AFFINGER6でサイトを高速化する施策7選のイメージ
なおき

AFFINGER6でサイトを高速化する施策7選のイメージ

画像圧縮プラグインの導入をする

画像圧縮をすることでサイトの読み込み速度を大幅に上げることができます。画像の圧縮方法はいくつかあります。方法としては、以下のとおり。

ポイント

»Tiny JPG(サイト)
»EWWW Image Optimizerの導入＆使い方

次世代画像フォーマットを使う

画像を圧縮したら次世代フォーマットを使います。次世代フォーマットを使うと、サイトの読み込み速度が爆速になりますよ。次世代画像フォーマットを使うには、プラグインを入れる必要があります。WordPress標準時では対応してないからです。

 

実際ぼくも次世代フォーマットを採用してから、サイトが軽く・高速になりました。
AFFINGER6でサイトを高速化する施策7選のイメージ
なおき

 

ダウンロード»WebP Express

設定方法»WebP Express

SNSの埋め込みを外す

SNSなどの外部リンクはスクリプトを読み込むため、サイトの読み込みに時間がかかってしまいます。そのため当サイトでは、Twitter・Instagramの埋め込みを外しました。

 

やり方は、ダッシュボードからユーザー→プロフィール→連絡先情報→TwitterとInstagram欄のURLを消すだけ。現在記入しているリンクは、サイトとfeedのみです。

AFFINGER6でサイトを高速化する施策7選のイメージ

スクリプトの読み込みを最適化

スクリプトを最適化することで、ページを読み込んだ時のレンダリングブロック時間を削減できます。

 

レンダリングブロックリソースとは、Webサイトの読み込み速度を落としてしまう原因のことで、読み込み速度の低下は読者と収入を失う原因になります。

ページを最初に表示する際のJavaScriptやCSSの使用は、画面の表示時間を大きく遅らせてしまいます。
引用元：レンダリングブロックの原因と解決法

 

スクリプトの最適化には、プラグインを使います。スクリプトを最適化することでGoogle社のPageSpeed Insightsのスコアアップが狙えます。

 

ダウンロードしてインストールするだけで、設定は完了します。

 

ダウンロード»ASync JavaScript

設定方法»Async JavaScript

当サイトでは以前まで、Scripts-To-Footerを使っていました。しかしプラグインが削除できない不具合が発生したため現在は推奨していません。
AFFINGER6でサイトを高速化する施策7選のイメージ
なおき

導入しているプラグインを極力減らす

導入しているプラグインも見直すとサイトの速度改善に繋がります。実はプラグインを入れすぎてもサイトの低速化に繋がっちゃうんです。多すぎるプラグインの量としては、10〜20個ほど。

 

ぜひプラグインも見直してみてください。僕自身プラグインを見直したら、サイトの読み込み時間が短くなりました。
AFFINGER6でサイトを高速化する施策7選のイメージ
なおき

プラグインも減らせば良いわけではなく、サイトの高速化をしてくれるプラグインなどは残したほうがベストです。当サイトでは現在7コプラグインを入れています。

 

7コの中でもサイトの高速化に繋がるプラグインは以下のとおり。

メモ

キャッシュ系のプラグインと画像圧縮は、GooglePageSpeed Insightsのスコアも上がりやすいですよ。
AFFINGER6でサイトを高速化する施策7選のイメージ
なおき

 

»オススメのプラグイン7選

結論：サイトの高速化をするには、効果の大きいものから実践すべき

変化が大きいものから実践すると、効果もすぐに出るのでオススメです。ぼくは最初、「画像の最適化・次世代画像フォーマット」から施策を行ってきました。

 

SNSの埋め込みや表示速度優先も大切な要素ですが、一番効果が高いのは画像類です。決まった順序はないので、自分が「これなら簡単そう！」と思った手順からやってみて下さい。

 

今回はWordpressのサイトの高速化施策を解説しました。サイトの読み込み速度は、離脱率にも影響してくるので高速にしておいて損はないです。

メモ

AMP対応の方法

  1. AFFINGER管理→Google・広告/AMP→AMP対応→「全ての投稿ページをAMP対応にする」にチェックを入れる
  2. 追加で投稿画面からAMPに対応するにチェックを入れてAMP化は完了

 

表示速度の優先設定

やり方は、AFFINGER管理からSEO→表示速度優先(β)→有効化をする。使えなくなる設定もいくつかありますので注意してください。

AFFINGER関連でオススメの記事

-blog-management