WordPress

「AFFINGER5は遅い」は嘘!表示速度の高速化施策5選【簡単】

AFFINGER5を買うか迷っています。
AFFINGER5は遅いって本当ですか?
AFFINGER5を使ったサイトを高速化する方法はありますか?
悩み

今回はこの悩みに答えていきます。

私のこのサイトもAFFINGER5を使っていますが、快適に運営ができています。

AFFINGER5はめっちゃ早いWordPressテーマです。

私は昔、「JIN」というテーマを使ってサイト運営しておりましたが、いろんな高速化施策を試しても速度が遅いままだったのでテーマの乗り換えをしました。

JINからAFFINGER5にテーマを乗り換えた話」の記事でも指摘していますが、サイトの速度は現在のSEOでは重要な指標です。

この記事の前半ではAFINGER5の速さを他のWordPressテーマの速度と比較しつつ、記事の後半ではAFFINGER5を使ったサイトの高速化施策についても解説していきます。

この記事の信頼性

My Profile

最高月間400万PV


累計1億5000万PV以上


副業月収100万円以上達成!!


この記事を書いている私は累計1億5000万PV以上を達成しています。ブロガー歴6年で当サイト含め10サイト以上のブログやアフィリエイトサイトを運営しており、ブログやアフィリエイト、SEO対策に詳しいです。
この記事であなたが知ることができるのは私がこれまでに培ってきたブログのアクセスや収益を伸ばす方法です。

AFFINGER5は遅いどころか爆速

AFFINGER5は遅いどころか爆速

AFFINGER5はWordPressテーマの中でもトップレベルで高速なテーマです。

各WordPressテーマの速度比較をしてみました。

人気WordPressテーマのスピード比較

テーマPC速度スマホ速度
JIN3031
DIVER6330
THE THOR7759
SWALLOW7552
STORK199169
SWELL9375
AFFINGER59691

人気のWordPressテーマのデモサイトの速度を計測してみました。

数ある人気テーマの中でもAFFINGER5はダントツで速いですね。

もちろん、デモサイトでの計測なのでサイト運営者が高速化施策をすることで速度が改善することは十分にあります。

あくまで「WordPressテーマそのもののポテンシャル」くらいに考えておきましょう。

【評判レビュー】AFFINGER5は初心者におすすめな最強テーマ【ブログアフィリエイト】

AFFINGER5には独自の高速化機能が搭載されている

AFFINGER5にはサイトの速度を最優先にする機能がβ版として提供されています。

サイトが重くなる原因となる要素を無効化することで速度特化の設定をすることができます。

デザインや機能面の制限をしても問題ないサイトなら、この機能を使うことで高速化が可能です。

AFFINGER5の高速化機能

AFFINGER5の表示速度を高速化する方法

AFFINGER5のテーマは圧倒的に高速なサイトを構築するのが簡単にできてしまいます。

しかし、WordPressテーマを購入するだけでは速度は速くなりません。

AFFINGER5で作ったサイトに「高速化施策」を実施することでテーマのポテンシャルを発揮することができます。

  • 遅延読み込みを導入する
  • CSS,JavaScriptを圧縮する
  • 画像のサイズを小さくする
  • AMP対応をする(個別設定可能)
  • WebPを導入する

AFFINGER5を高速にする5つの施策の具体的なやり方を解説します。

高速化施策①Lazy Lord(遅延読み込み)の導入

遅延読み込みを導入する

遅延読み込みとは、ページを開いた最初の画面に映らない画像などの読み込みを遅らせることで、速くページの操作を可能にする技術です。

AFFINGER5の速度改善

通常、ページを開くときはそのページの画像やテキスト、デザイン要素(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のサイトで画像をアップロードし、画像のピクセルを指定してサイズを小さくします。

  • 横幅:1200px
  • 縦幅:縦横比を維持

アイキャッチや記事内画像のサイズは上記でだいたい調整しています。

画像を使う場所次第でお好み調整してください。

アップロード前にpngをjpegに変換

画像ファイルをpngのまま使うと画像がかなり重くなります。

ファイル形式ファイル容量特徴
jpeg軽い保存を繰り返すと画質が低下していく
画像の透過ができる
pngjpegより重い 画質がjpegより綺麗
画像の透過ができる
圧縮しても品質が維持される

同じ寸法の画像であれば、ファイルサイズはjpegの方が小さいです。

画像の透過が不要な場所ではできる限りjpegに変換してからWordPressにアップロードすることで、サイトの高速化に役立ちます。

pngファイルを一括でjpegに変換することもI♡IMGで可能です。

アップロード前に画像を圧縮

画像は圧縮することで品質をほとんど損なうことなくファイル容量を減らすことができます。

I♡IMGで圧縮も一括でできます。

画像の圧縮が終われば、ようやくWordPressにアップロードできます。

EWWW Image Optimizerのプラグインを入れる

EWWW Image Optimizerのプラグインを入れる

EWWW Image Optimizerは画像の最適化プラグインです。

  • 既存画像の一括圧縮&最適化
  • アップロード画像の自動圧縮&サイズ最適化
  • 次世代ファイル形式「WebP」への対応

画像の品質をほとんどそこなうことなく(ピクセルパーフェクト)、サイトの画像を最適化することができます。

I♡IMGと合わせて利用しています。

下記の「高速化施策⑤WebPの対応」でもこのプラグインを使います。

EWWW

プラグインを有効化して準備しておきます。

高速化施策④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の設定画面を開く

EWWW Image OptimizerでWebP対応をしていきます。

管理画面からプラグインの設定画面に移動し、「WebP」のタブを開きます。

WebPを有効化する

WebP

「jpeg,pngからWebP」にチェックを入れます。

他はチェックを外しておいてOKです。

ページ下部に移動し「変更を保存」を押しましょう。

すると、10行くらいのコードが出てくるのでまるごとコピーします。

htaccessに記述する

コピーしたコードを「.htaccess」に記述します。

エックスサーバーであれば、管理画面から該当ドメインの.htaccessの編集画面を開きましょう。

htacess

FTPを使って直接編集をしてもOKです。

注意点として、コピーしたコードはhtaccessの最初の要素として貼り付けましょう。

コードを貼り付けたら、保存します。

画像の一括最適化を実施する

最後にEWWW Image Optimizerのプラグイン側で画像の一括最適化をします。

画像の一括最適化

「再最適化を強制」と「WebPのみ」にチェックして一括最適化を実行します。

これでサイト内のjpeg,png画像のWebPバージョンが作成されました。

WebP対応のブラウザでサイトにアクセスすると、今回作成したWebPの画像が優先されるので、サイトの表示が高速化します。

以上、お疲れ様でした。

【最強SEO対策済】おすすめWordPressテーマ【無料あり】

【必須】記事書く前に登録しなきゃ後悔する「ASP」5選【審査が通る】

RECOMMEND

1

WordPressのテーマって結局どれを選べば良いの? 無料と有料どっちがいいの? テーマ選びの基準を教えて。悩み ちあきこの記事ではWordPressテーマの正しい選び方を解説しています。 美しいブ ...

2

ブログ運営を効率化したいです。 稼ぐために必要なツールを揃えたいです。 便利なツールを教えてください。悩み ちあき今回は私がサイト運営に利用している便利ツールをまとめました。 ブログやアフィリエイトで ...

3

副業ブログを始めたいです。 どうやったらブログを始められるの? 無料ブログで稼げるの? WordPressってやつでブログを始めるにはどうしたらいい?悩み ちあき副業ブログの一番最適な始め方を画像30 ...

-WordPress

© 2021 ブログアフィリエイトで稼ぐロードマップ