AFFINGER5は遅いって本当ですか？
AFFINGER5を使ったサイトを高速化する方法はありますか？
今回はこの悩みに答えていきます。
私のこのサイトもAFFINGER5を使っていますが、快適に運営ができています。
AFFINGER5はめっちゃ早いWordPressテーマです。
私は昔、「JIN」というテーマを使ってサイト運営しておりましたが、いろんな高速化施策を試しても速度が遅いままだったのでテーマの乗り換えをしました。
「JINからAFFINGER5にテーマを乗り換えた話」の記事でも指摘していますが、サイトの速度は現在のSEOでは重要な指標です。
この記事の前半ではAFINGER5の速さを他のWordPressテーマの速度と比較しつつ、記事の後半ではAFFINGER5を使ったサイトの高速化施策についても解説していきます。
この記事の信頼性
My Profile
最高月間400万PV
累計1億5000万PV以上
副業月収100万円以上達成!!
この記事であなたが知ることができるのは私がこれまでに培ってきたブログのアクセスや収益を伸ばす方法です。
AFFINGER5は遅いどころか爆速
AFFINGER5はWordPressテーマの中でもトップレベルで高速なテーマです。
各WordPressテーマの速度比較をしてみました。
人気WordPressテーマのスピード比較
| テーマ | PC速度 | スマホ速度 |
| JIN | 30 | 31 |
| DIVER | 63 | 30 |
| THE THOR | 77 | 59 |
| SWALLOW | 75 | 52 |
| STORK19 | 91 | 69 |
| SWELL | 93 | 75 |
| AFFINGER5 | 96 | 91 |
人気のWordPressテーマのデモサイトの速度を計測してみました。
数ある人気テーマの中でもAFFINGER5はダントツで速いですね。
もちろん、デモサイトでの計測なのでサイト運営者が高速化施策をすることで速度が改善することは十分にあります。
あくまで「WordPressテーマそのもののポテンシャル」くらいに考えておきましょう。
AFFINGER5には独自の高速化機能が搭載されている
AFFINGER5にはサイトの速度を最優先にする機能がβ版として提供されています。
サイトが重くなる原因となる要素を無効化することで速度特化の設定をすることができます。
デザインや機能面の制限をしても問題ないサイトなら、この機能を使うことで高速化が可能です。
AFFINGER5の表示速度を高速化する方法
AFFINGER5のテーマは圧倒的に高速なサイトを構築するのが簡単にできてしまいます。
しかし、WordPressテーマを購入するだけでは速度は速くなりません。
AFFINGER5で作ったサイトに「高速化施策」を実施することでテーマのポテンシャルを発揮することができます。
- 遅延読み込みを導入する
- CSS,JavaScriptを圧縮する
- 画像のサイズを小さくする
- AMP対応をする（個別設定可能）
- WebPを導入する
AFFINGER5を高速にする5つの施策の具体的なやり方を解説します。
高速化施策①Lazy Lord（遅延読み込み）の導入
遅延読み込みを導入する
遅延読み込みとは、ページを開いた最初の画面に映らない画像などの読み込みを遅らせることで、速くページの操作を可能にする技術です。
通常、ページを開くときはそのページの画像やテキスト、デザイン要素（CSSなど）を全て読み込んでから画面に表示されます。
しかし、PCやスマホに最初に映る部分のみを優先して読み込んで、画面の表示を最優先に処理することで、サイトに訪れた読者が「速く表示された」と体感できるのが遅延読み込みの最大のメリットです。
AFFINGER5の場合、遅延読み込みはプラグインの導入だけで対策できます。
- a3 Lazy Load
- BJ Lazy Load
- Lazy Loder（無料）
- 【公式】Lazy LordSEO（5000円）
遅延読み込みはデザイン側との相性問題が発生するので、自分のサイトで試してみないとなんとも言えません。
私の場合は無料のプラグインならBJ Lazy Lordがうまく行きました。
このサイトもAFFINGER5で構築しているサイトになりますが、私は公式で販売されている「Lazy LordSEO」を購入しました。
デザイン崩れの対応や相性問題の解決に時間をかけるのが面倒なタイプなのでお金で解決しました。笑
遅延読み込みプラグインはSEO対策的に不利と言われていますが、公式プラグインはその対策が施されているうえに、AFFINGER5との相性が良いのでデザイン崩れの心配もなくサイト運用ができるので楽です。
とは言え、私の個人的な意見ですが、SEO的に不利とは言っても誤差の範囲です。
無料プラグインのBJ Lazy Lordを利用してビッグワードの上位をとっているサイトも私の手持ちにはあるので、あくまで1要素くらいに考えればいいですよ。
遅延読み込みの導入は必須です。
高速化施策②Auto Optimazeの導入
html,CSS,JavaScriptを圧縮する
Auto Optimazeはコードの圧縮で最適化を簡単にできる無料プラグインです。
- HTML最適化
- CSS最適化
- Java Script最適化
画像の遅延読み込み機能も搭載されていますが、別のプラグインで施策をしているのでAuto Optimazeでは使いません。
高速化施策③画像のリサイズ・変換・圧縮
画像のサイズを小さくする
ページが遅くなる最大の要因になるのが画像ファイルです。
画像が重かったり、適切なサイズ感になっていない場合だとサイトが重いと感じる挙動になります。
WordPressに画像をアップロードする前に画像の調整を実施しましょう。
利用するのはこちら。
- I♡IMG｜無料サイト
- EWWWImage Optimizer｜無料プラグイン
おすすめの手順を解説します。
アップロード前にサイズ変更
まず、画像をアップロードする前に画像サイズを変更しましょう。
I♡IMGのサイトで画像をアップロードし、画像のピクセルを指定してサイズを小さくします。
- 横幅：1200px
- 縦幅：縦横比を維持
アイキャッチや記事内画像のサイズは上記でだいたい調整しています。
画像を使う場所次第でお好み調整してください。
アップロード前にpngをjpegに変換
画像ファイルをpngのまま使うと画像がかなり重くなります。
| ファイル形式 | ファイル容量 | 特徴 |
| jpeg | 軽い | 保存を繰り返すと画質が低下していく 画像の透過ができる |
| png | jpegより重い | 画質がjpegより綺麗 画像の透過ができる 圧縮しても品質が維持される |
同じ寸法の画像であれば、ファイルサイズはjpegの方が小さいです。
画像の透過が不要な場所ではできる限りjpegに変換してからWordPressにアップロードすることで、サイトの高速化に役立ちます。
pngファイルを一括でjpegに変換することもI♡IMGで可能です。
アップロード前に画像を圧縮
画像は圧縮することで品質をほとんど損なうことなくファイル容量を減らすことができます。
I♡IMGで圧縮も一括でできます。
画像の圧縮が終われば、ようやくWordPressにアップロードできます。
EWWW Image Optimizerのプラグインを入れる
EWWW Image Optimizerは画像の最適化プラグインです。
- 既存画像の一括圧縮＆最適化
- アップロード画像の自動圧縮＆サイズ最適化
- 次世代ファイル形式「WebP」への対応
画像の品質をほとんどそこなうことなく（ピクセルパーフェクト）、サイトの画像を最適化することができます。
I♡IMGと合わせて利用しています。
下記の「高速化施策⑤WebPの対応」でもこのプラグインを使います。
プラグインを有効化して準備しておきます。
高速化施策④AMP対応
AMP対応をする（個別設定可能）
AMPもサイトの高速化施策のひとつです。
AMPの仕組みを簡単に言うと、検索クエリと関連性の高いAMPページがGoogleのクローラーにキャッシュされれば、そのAMPページが検索結果に採用される仕組みです。
SEOラボ
AFFINGER5のテーマには記事を個別ごとにAMP対応するかしないかを選べる機能があります。
AMP対応に対応していないテーマだと、デザイン崩れを招いたり導入が面倒なことになります。
AFFINGER5は標準搭載されており、AMP対応する記事も任意で選べるので便利です。
AMP対応したい記事は記事投稿画面のタブで「AMPに対応する」にチェックを入れて終わりです。
高速化施策⑤WebPの対応
WebPを導入する
AFFINGER5の高速化施策で一番効果があったのがWebP対応です。
WebP（ウェッピー）は、米Googleが開発しているオープンな静止画像フォーマット。ファイルの拡張子は「.webp」。
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。
画像圧縮については動画規格WebMのベースであるVP8ビデオコーデックの技術を利用しており、コンテナ形式としてRIFFを採用している。コンテナの部分を除くと、非可逆のWebPは1フレームのWebMである。
ウィキペディア
要するにjpegやpngの画像の品質を損なわずに、読み込みを軽くすることができるファイル形式です。
WebPの対応はWordPressなら簡単にできるので手順を紹介します。
必ずバックアップをしてから作業しましょう。
バックアップは「BackWPup」のプラグインで簡単にできます。
EWWW Image Optimizerの設定画面を開く
EWWW Image OptimizerでWebP対応をしていきます。
管理画面からプラグインの設定画面に移動し、「WebP」のタブを開きます。
WebPを有効化する
「jpeg,pngからWebP」にチェックを入れます。
他はチェックを外しておいてOKです。
ページ下部に移動し「変更を保存」を押しましょう。
すると、10行くらいのコードが出てくるのでまるごとコピーします。
htaccessに記述する
コピーしたコードを「.htaccess」に記述します。
エックスサーバーであれば、管理画面から該当ドメインの.htaccessの編集画面を開きましょう。
FTPを使って直接編集をしてもOKです。
注意点として、コピーしたコードはhtaccessの最初の要素として貼り付けましょう。
コードを貼り付けたら、保存します。
画像の一括最適化を実施する
最後にEWWW Image Optimizerのプラグイン側で画像の一括最適化をします。
「再最適化を強制」と「WebPのみ」にチェックして一括最適化を実行します。
これでサイト内のjpeg,png画像のWebPバージョンが作成されました。
WebP対応のブラウザでサイトにアクセスすると、今回作成したWebPの画像が優先されるので、サイトの表示が高速化します。
以上、お疲れ様でした。
