【アフィンガー】表示速度が遅い?PSIを100近くまで改善した高速化プラグインWPロケットの紹介と使い方を解説

初心者

アフィンガーのスピードが遅い
Google Page Speed Insightで17ってヤバイよね?
ネットで解説している方法を導入してもスピードが遅い
モバイルのスピードが悪すぎる

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

ページの読み込みスピードはSEOの要素。検索順位で上位に表示させるには少しでも早くしたいですよね?アフィンガーって高機能なせいか、表示スピードがイマイチあがりにくいと感じていました。

特にモバイル。表示スピードをGoogle Page Speed Insight(以後PSI)で測定したら17…体感だけでなく、本当に遅くて焦りました。アフィンガーのスピード改善のため、効果がありそうなプラグインを無料のものだけでなく有料のものを試しました。

スピード改善のプラグインでPSIスコアが17→85に上がったプラグインを見つけたので紹介します。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
かんた です
目次

効果のあったアフィンガー向け高速化プラグイン

効果のあったアフィンガー向け高速化プラグイン

アフィンガー6に導入して一番効果が出たのはWPロケットというプラグインでした。フランスの会社が開発したプラグインで45ドルの有料プラグインです。

かんた

日本円だとだいたい5千円ぐらい。
買い切りタイプのプラグインです。

公式 WordPress高速化プラグイン「WPロケット」

有名ブロガーのサイトにも導入されていた

WPロケットって聞いたことありますか?

実は有名なブロガーさんのサイトを調べていて、このプラグインを使っていることを知りました。

WPロケットプラグインを使っているブログ

  • ヒトデさん:ヒトデブログ
  • マクリンさん:ガジェットブログ

有料テーマSWELLって最近人気ですよね。本ブログでも使っているテーマなんですが、表示スピードがかなり早いのが特徴の1つです。

リサーチしてみると、SWELLの開発者さんもWPロケットとの相性を考慮しているとツイートしていました。今後WordPressの高速化でスタンダードなプラグインになるかもしれません。

かんた

海外のプラグインなんですが、ここ最近流行っていて有名なブロガーさんも自分のブログに導入しているので要チェックです。

【検証結果】アフィンガーにWPロケットを入れた効果

【検証結果】アフィンガーにWPロケットを入れた効果

17→85まで改善

WPロケットの効果をハッキリさせるために、アフィンガー6を有効化しテーマの設定は変更せずWPロケットプラグイン以外を使わずPSI測定しました。

かんた

10回測定した平均値です↓

導入前(Before)
モバイル
17.1
パソコン
68.1
導入後(After)
モバイル
85.2
パソコン
99.0
スクロールできます
1回目2 回目 3回目 4回目 5回目 6回目 7回目 8回目 9回目 10回目
パソコン69666671686868737359
モバイル15181818191915161617
AFFINGER:WPロケットプラグイン導入前の測定データ

「スゴイ」の一言です。さすが有料プラグインだけのことはあります。モバイルのスコアは一番悪い数値で15でしたが、WPロケットプラグインを入れただけで最速87まで急上昇しました。WPロケットプラグインを入れた以外、アフィンガーで何も設定を変更していないのにこの効果です。

45ドルでこの効果なら大満足といったところです。

かんた

ちまちま画像を圧縮したりしていたのは無駄だったと感じました。

JINやSWELLなど、アフィンガー6以外の有料テーマでもWPロケットの効果がありました。他のテーマにWPロケット入れた検証結果は次の記事で紹介しています。

アフィンガーの高速化方法

その他の高速化方法

「有料のプラグイン購入したくない。WPロケット抜きでな遅く感じるアフィンガーのサイトを早くしたい」。

そんな人向けに有料プラグイン抜きでアフィンガーの表示スピードを改善するテクニックを紹介します。

チェックポイント

  1. テーマの高速化オプションを使う
  2. 外部サイトの埋め込みを削除
  3. 不要なプラグインの削除
  4. 外部リソースの読み込みを削減する
  5. 画像の最適化
  6. PHPバージョンの変更
  7. WordPressのバージョンアップ
  8. レンタルサーバーの高速化機能を設定する
  9. レンタルサーバーの変更
かんた

それぞれ解説していきます。

テーマの高速化オプションを使う

アフィンガーにはページ読み込みスピードに関する設定オプションがあります。

遅延読み込み

高速化の定番「遅延読み込み」。アフィンガーにも搭載されている標準機能です。画像の読み込みを必要最小限に抑えることでページ読み込みのスピードを上げる効果があります。

アフォンガーの遅延読み込みの設定は「AFFINGER管理」→「その他」にあります。チェックを入れるだけで有効になります。このオプションを使う注意点として、遅延読み込み機能のプラグインを使わないこと。遅延読み込みはテーマ、高速化型プラグインで一緒に使うと不具合を起こします。

アフィンガーの遅延読み込み機能を有効化する場合は「高速化プラグインを使わない」、もしくは「高速化プラグインで遅延読み込み機能を無効化する」ことを忘れないようにしましょう。

アニメーション機能の無効化

不要なアニメーションを無効化しましょう。アニメーションの多くはJS、CSSファイルを読み込んでいます。読み込むファイルが多くなるとページ読み込みスピードは遅くなります。アニメーション系の設定は管理画面上にちらばっているので、一つずつ無効化しましょう。

「AFFINGER管理」→「その他」

  • jsによるスムーススクロールを使用する→無効化推奨
  • FontAwesomeIcons4.7.0の読み込み→無効化推奨
  • 記事タイトルをフェードイン→無効化推奨

会話アイコン

  • 会話アイコンを少し動かす→無効化推奨

外部サイトの埋め込みを削除

SNS系の埋め込み機能を使っている場合は削除しましょう。

埋め込みの一例

  • Twitter
  • インスタグラム
  • Facebook
  • YouTube

削除対象はウィジェットやコンテンツエリア内に埋め込んでいるもの全てです。

特にTwitterの埋め込みを多様している人は注意してください。僕はレビューブログを書く時、ネットの評判や口コミをまとめるコンテンツを作っています。以前はTwitterにある口コミをそのままブログに貼っていましたが、PSIのスコアが40以上落ちていました。

かんた

Twitterの埋め込みはPSIに影響が出ます。できるだけ使わないようにするか、完全に無くす運用がおすすめです。

不要なプラグインの削除

なんとなく有効化しているプラグインってありませんかね?もしあんまり使っていないプラグインがあれば削除しましょう。プラグインによっては必要としていないページでもJSファイルやCSSファイルを読み込むようになっていて、PSIスコアに直結します。

影響のないテスト環境を用意できる場合、プラグインを1つずつ停止して適当なページをPSIでチェックするのがおすすめです。全部のプラグインを一気に停止するのではなく、1個プラグインを停止したらPSIで5回程度測定しスピードを確認するという作業を地道に行うのがポイントです。

かんた

どのプラグインがサイトパフォーマンスに影響を与えているかを把握しましょう。

外部リソースの読み込みを削減する

SNS系の埋め込み同様に「Webフォント」「Font Awesome」など外部から読み込んでいるとページ読み込みに時間がかかります。サイト運営に本当に必要なもの以外を読み込まないよう設定しましょう。

Webフォント

「AFFINGER管理」→「デザイン」

  • フォントの種類→デフォルト推奨

「全体」の設定だけでなく「記事タイトル・見出し」も「使用しない」にチェックを入れましょう。

Font Awesome

Font Awesomeはサイト上に表示するアイコンセットのことです。企業サイトなどでよく使いますが、あまりブログ運営では使っている人は少ないかもしれません。グロナビなどでFont Awesomeを使っているブログをチラホラ見ますが、利用していない人は Font Awesomeの読み込みを停止しましょう。

「AFFINGER管理」→「その他」

  •  「FontAwesomeIcons4.7.0の読み込み」→チェックを外す

画像の最適化

ページに表示される画像のファイルサイズが大きい場合、読み込みに時間がかかります。不必要な解像度の画像をアップロードしていないか確認し画像のサイズを最適化しましょう。

画像サイズを圧縮する無料プラグインもありますが、基本的にアップロード前の元データのファイルサイズを調整するのが確実です。過剰にプラグインを入れることはおすすめしません。

PHPバージョンの変更

PHP(ピー・エイチ・ピー)はプログラム言語の一種です。WordPressのデータベースと連携し、投稿ページなどを表示するのが主な役割です。

最新のアフィンガーはPHP7.3、PHP7.4に対応しています(アフィンガー公式サイト:動作環境)。

PHP5系の古いバージョンのPHPを使っているならPHP7系にバージョンアップしましょう。

PHPはWordPressのダッシュボードではなく、レンタルサーバーのコントロールパネルからバージョンの指定が可能です。選択できるPHPはレンタルサーバー会社ごとに異なりますが、エックスサーバー、ConoHa WINGといったメジャーなレンタルサーバーの場合7系のPHPが利用できます。

「バージョンアップ」というと、プログラムコードを編集しないといけなそうなイメージでしょうか?PHPのバージョンアップはコントロールパネルから利用したいバージョンをポチッと選択するだけですので初心者の人でも簡単に変更できます。

WordPressのバージョンアップ

アフィンガー6は最新のWordPress(5.8)に対応しています。最新のWordPressを使っていないならバージョンアップを実施しましょう。

WordPressのバージョンアップで注意すべき点は、アップグレードするWordPressのバージョンが動作する環境を事前に用意する点です。

WordPress5.8の動作要件

  • PHP 7.4以上
  • MySQL5.6またはMariaDB バージョン10.1以上
かんた

エックスサーバーなど一般的なレンタルサーバーはほとんど対応しています。

レンタルサーバーの高速化機能を設定する

レンタルサーバー会社によってはサイトの表示スピードを早くする機能を提供しています。基本無料で利用できるので、レンタルサーバーのコントールパネルから設定をしましょう。

高速化オプションの例

スクロールできます
レンタルサーバー会社高速化オプション
エックスサーバーXアクセレーター
サーバーキャッシュ
ブラウザキャッシュ
ConoHa WINGコンテンツキャッシュ
ブラウザキャッシュ
レンタルサーバー会社の高速化オプション

レンタルサーバーの変更

WordPressのパフォーマンスはレンタルサーバーのスペックに大きく影響を受けます。スペックの低い格安レンタルサーバーや、共有レンタルサーバーに同居人がユーザーへービーの場合、自分のサイトをいくら改善してもサーバーのレスポンスは悪いままといったこともあります。

どれだけ対策をしても早くならないという場合はサーバーの引っ越しを検討しましょう。

WordPressを運営できるレンタルサーバーは多々あります。どれを選んで良いか分からない場合は、エックスサーバーのスタンダード(旧X10プラン)がおすすめです。

まとめ

WordPressテーマ「アフィンガー」の高速化についての記事でした。

有料テーマは遅くなりがち。テーマの機能、プラグイン、運用面といった様々なアプローチでページ読み込みスピードを改善できます。ぜひアフィンガーの高速化にチャレンジしてみてください。

公式 WordPress高速化プラグイン「WPロケット」

よかったらシェアしてね!
もくじ
先頭へ
目次
閉じる