AFFINGER

AFFINGER6を高速化する方法【サイト表示速度】

2021年8月14日

シン

ブロガー|本業プログラマー|大阪在住|29歳|SEOライティング独学|特化ブログ月間33万PV達成|使用プログラミング言語:Java/HTML/CSS/SQL|好きな食べ物はカレー|猫好きです。

AFFINGER6(アフィンガー)のサイト速度はどうやったら速くできるの?詳しい設定方法を教えて欲しい。

こんなお悩みにお答えします。

本記事の内容

  • サイト速度が重要な理由
  • AFFINGER6をプラグイン無しで高速化する方法
  • AFFINGER6をプラグイン有りで高速化する方法

シン(1000)
Twitter(@shin_memo09)

本記事では、WordPressテーマ「AFFINGER6」を高速化する方法について解説していきます。

結論、この記事で解説する方法を実施していただければ、高速化することは可能です。

実際に僕はこれからお伝えするやり方を実施した結果、スピードチェックにて80~90の値を出すことができています。

設定自体はとても簡単なので、ぜひ最後までご覧いただき、実践してみてください。

サイト表示速度がSEOで重要な理由

高速化の前にページ速度の重要性についてみていきましょう。

ページの表示速度はSEOに影響する

ページの表示速度が遅いと、SEOでも不利になります。

サイト速度が遅い=ユーザーの離脱率が上がるからですね。

表示速度が1秒から5秒に落ちると、直帰率は90%上がるというデータもでています。

あと、Googleは2018年7月に「Speed Update」をモバイル検索のランキング要素にいれています。

ユーザーは忙しく、表示速度が遅いと簡単に離脱されるので、速度は上げておいた方が良いですね。

特に近年スマホユーザーが増えてきている為、モバイルのサイト速度を意識していきましょう。
シン

サイト速度チェック方法

サイト速度をチェックする方法は「PageSpeed Insights」にアクセスをし、URLを貼れば確認ができます。

サイト速度の目安は下記の通り。

  • 0〜49(赤):悪い
  • 50〜89(オレンジ):改善が必要
  • 90〜100(緑):良い

0~49は即改善した方が良さそうです。

僕の体感では80以上あれば速いと感じています。
シン

AFFINGER6を高速化する方法【プラグインなし】

プラグインを使わずに表示速度を上げる方法を解説していきます。

スライドショーを非表示にする

AFFINGERスライドショー

AFFINGER6にはスライドショーがありますが、読み込みで遅延の原因になるので、なくても良い場合は外しておきましょう。

当サイトのトップページのように「おすすめ記事」や「新着記事一覧」を表示させる方法もありますので、よければご検討ください。
シン

ヘッダー下のおすすめ記事の高さを低くする

AFFINGERのヘッダー下のおすすめ記事は、「スマホ閲覧時の高さを倍にする」設定があるのですが、こちらも遅延の原因になります。

サイドバーのウィジェットを減らす

ウィジェットが多いのも速度低下の原因になりますので、不要なものは外しておきましょう。

Twitterの埋め込みをなくす

Twitterの埋め込みは速度遅延になります。

サイドバーやフッター、記事内にある場合、埋め込みをなくすことで速度アップします。

僕も初めはサイドバーに設置してましたが、そもそもあまり効果も感じなかったので、外しました。

個別記事に関しては、口コミ等でTwitterを埋め込む場合は外すのは難しいと思うので、そこは口コミ優先でいいでしょう。
シン

プラグインを極限まで減らす

プラグインも速度低下の原因になりますので、使ってないものはどんどん削除していきましょう。

参考までに当サイトは下記プラグインのみ使用しています。

主に上記7つのプラグインを使用しています。

Show Articleは内部リンク構造を確認するプラグインですが、使う機会が少ない為、使用時のみオンにしています。

AFFINGER6はテーマ自体の内部SEO対策がしっかりされているため、SEO系のプラグインも不要です。
シン

余分なCSSを削除する

使用していない追加CSSは削除しておきましょう。

表示速度優先を有効化する

AFFINGERはページの表示速度を高速化する設定があります。

affinger6サイト速度設定

こちらの設定は一部の機能を制限することで、表示速度を優先させる為のものです。

主に下記の機能が使用できなくなります。

  • スライドショー機能(ショートコード含む)
  • Googleフォント・マテリアルアイコン
  • スクロール追尾広告
  • コピー機能(SNSボタン)
  • アニメーションクラス
  • カウントダウン(EX)
  • もっと読む(無限スクロール)(EX)
  • レスポンシブ(ショートコード含む記事一覧)画像の画質を上げる(EX)
設定は一度有効化すると元に戻せず、再設定が必要になる為、自己責任でお願いします。
シン

AFFINGER6を高速化する方法【プラグインあり】

プラグインを使うとより高速化することができるので、そちらについても解説していきます。

EWWW Image Optimizer

EWWW Image Optimizerは画像サイズを縮小してくれるプラグインです。

画像の容量が大きいと読み込みに時間がかかりますが、こちらのプラグインを入れておくことで、自動で画像サイズを縮小してWordPressにアップロードしくれます。

まずはWordPressのプラグインから新規追加を押し「EWWW Image Optimizer」を有効化しましょう。

有効化まで終わりましたら下記の箇所をチェックしていきましょう。

チェック箇所

  • 今は無料モードのままにする
  • EXIFやコメント、カラープロファイルなどピクセルデータでないすべてのメタデータを削除します。
  • 画像が表示領域に入った
  • 自動スケーリング
画像遅延読み込みはONにすると、ページがスクロールされたタイミングで読み込まれるようになり、速度改善につながります。
シン

Autoptimize

Autoptimizeも高速化プラグインの一つです。

こちらもプラグインを新規追加し、有効化しておきましょう。

チェック箇所

  • JavaScript コードの最適化
  • JS ファイルを連結する
  • インラインのJSも連結

チェック箇所

  • HTML コードを最適化
  • HTML コメントを維持
  • 連結されたスクリプト/CSSを静的ファイルとして保存
  • 除外されたCSSファイルとJSファイルを最小化
  • 404フォールバックの使用
  • ログイン状態の編集者、管理者にも最適化を行う

チェックができましたら最後に「変更を保存」で完了です。

まとめ:AFFINGER6は高速化できる

以上がAFFINGER6を高速化するための設定でした。

高速になったよ!という方はぜひTwitterでおしえてくださいね。

それでは今回はここまでとなります。

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

シン

ブロガー|本業プログラマー|大阪在住|29歳|SEOライティング独学|特化ブログ月間33万PV達成|使用プログラミング言語:Java/HTML/CSS/SQL|好きな食べ物はカレー|猫好きです。

-AFFINGER