AFFINGER6 ブログ

【サイトが重い方必見】ブログの表示速度を改善する方法|AFFINGER6

Webサイトの表示速度改善
悩んでる人

AFFINGERを使用しているけど、サイトスピードが遅い…

悩んでる人

AFFINGERのモバイルスコアが低いのを改善したい…

こういったお悩みを解決します!

当ブログも今回解説することを実践するまで、サイトスピードは20以下と最悪のスコアでした…

これから紹介する「サイトスコアを改善する方法9選」を実践していただければ、サイトの表示速度を改善することができます

この記事の内容は以下の通りです

  • サイトスコアを改善する方法10選を解説
  • サイト速度を改善するプラグインを紹介

当ブログはAFFINGER6 × エックスサーバーで運用しています!ぜひ以下からチェックしてみてください!

合わせて読みたい

便利なプラグイン付きのAFFINGERパック!

ACTION PACK3の詳細はこちら

※クリックすると公式HPに遷移します

ブログの表示速度はSEOには必須

SEOの重要性アイキャッチ

ブログの表示速度が遅いと、Googleだけでなく、読者もいい評価をしてくれません。

Googleはモバイル検索のランキング要素として、サイトスコアを使用するとしているため、表示速度が遅いサイトはランキング上位に入ることができません

» Google ウェブマスター向け公式ブログ

また、読者もブログサイトが表示される時間が5秒を超えると、直帰率は表示時間1秒に比べて90%も増加するという調査結果も出ています

Tomo

ブログが表示されるまでの時間を3秒以内にすることで、読者の滞在率が高くなるだけでなく、Googleからもいい評価をしてもらえるので、ブログの収益にも関わってきます!

ブログの表示速度はPageSpeed Insights - Google Developersで確認することができます

このページでは”サイトスコア”として、ブログを評価したものを確認できます

site score image
サイトスコア

これから紹介することを実践したおかげでモバイルスコアは18から50、PCスコアは40から92まで改善することができました

【AFFINGER6】ブログの表示速度を改善する方法9選

表示速度を改善する方法9選
Tomo

私は以下のことを全て実践したところ、20以下だったサイトスコアを改善することができました!

これから紹介する改善方法は以下の9つになります

  • 画像を軽量化する
  • 次世代フォーマットを使用する
  • プラグインを減らす
  • サーバーを検討する
  • Twitterの埋め込みをなくす
  • 遅延読み込みプラグインを使用する
  • アドセンス広告の停止
  • 不要なCSSを削除
  • ブログの構成を考える

手段①:画像を軽量化する

まずは既存の画像を軽量化、これから投稿する画像を軽量化します

画像を200KB以下にしておくと、サイトスコアの向上につながります。画像を軽量化する方法は3つです

  • WordPressプラグイン「EWWW Image Optimizer」
  • 圧縮してから投稿する
  • 画像を次世代フォーマットにする(手段②で解説)

Macをご利用の方は、プリインストールアプリの「Automator」を利用して圧縮する方法を以下の記事で解説しています

【ブログ用画像】MacのAutomatorで画像を簡単に圧縮する方法

軽量化プラグインはさまざまありますが、私は「EWWW Image Optimizer」を使用しています

「EWWW Image Optimizer」は画像を軽量化するだけでなく、自動でこれから投稿する画像も軽量化・リサイズしてくれます

手段②:画像を次世代フォーマット形式にする

Googleが開発した画像フォーマットに、WebPという画像ファイル形式があります

この画像形式にすることで、画像の品質を落とすことなく軽量化することが可能です

悩んでる人

でも、どうやってそのフォーマットに変換するの…?

次世代フォーマットに変更する際も「EWWW Image Optimizer」を使うことでできます

WebPへ変換する画像

設定から「EWWW Image Optimizer」の設定画面へ進み、WebP変換の「一括最適化」を行います

ブラウザ(ChromeやSafariなど)によってはWebPに対応していないブラウザもあります

しかし、その場合でも「EWWW Image Optimizer」は自動的に切り替えて表示してくれるのでとても便利です

手段③:プラグインを減らす

実はブログを表示するときにプラグインも読み込んでいます

そのため、プラグインが多いとサイトの表示速度にも影響が出てきます

プラグインの数はできるだけ少なく抑えましょう

私が導入しているプラグインは以下の通りになります

(1)軽量化系

  • EWWW Image Optimizer
  • Async JavaScript
  • Native Lazyload
  • WP Fastest Cache

(2)バックアップ

  • BackWPup

(3)サイトの機能

  • Contact Form 7
  • PS Auto Sitemap
  • Table of Contents Plus
  • XML Sitemaps

(4)商品リンク

  • Rinker

よく必須系のプラグインとしてJet Packが紹介されますが、私は導入していません

JetPackはセキュリティやアクセス管理に役立つと言っていますが、動きが重く、サイトスコアに影響するとも言われています

Tomo

JetPackが本当に必要なのか、ぜひ検討してみてください!

手段④:サーバーを検討する

いくら画像を軽量化したり、プラグインを減らしたところで、サーバーの速度が遅ければ意味がありません

PageSpeed Insights - Google Developersでは、サイトの速度だけでなく、サーバーの速度も計測することができます

そこでのサーバーの速度が遅い場合は乗り換えを検討してみてください

おすすめのサーバー3選

エックスサーバー」:国内シェア、速度No.1のレンタルサーバー。最速性能に加えて、安定性とアクセス耐性に重点を置いたサービス

wpXシン・レンタルサーバー」: エックスサーバーをもとにしたレンタルサーバーで、最新技術で最先端のサーバー環境を提供

ConoHa WING」:月額740円から使え、WordPressの「かんたんセットアップ」や「かんたん移行」といったサービスがある

私が使用している「エックスサーバー」はサーバー速度No.1かつ国内シェアNo.1のレンタルサーバーです

エックスサーバー国内シェア No.1

エックスサーバー
  • 月額742円から契約可能!
  • オールSSDよりも14倍高速「オールNVMe」
  • 他ユーザーの影響を受けない「リソース保証」機能

お申し込みはこちらから

手段⑤:Twitterの埋め込みを消す

Twitterのタイムラインを埋め込むのはサイトスコアの低下を引き起こす可能性が高いです

Twitterのタイムラインはどんな投稿をしているのかを見せることができるので、便利な反面

表示させるまでには時間がかかってしまいます

Twitterに誘導したい場合は、以下のようなボタンを作成してみると良いかもしれないですね

Twitterで見てみる

手段⑥:遅延読み込みプラグインを導入する

遅延読み込みプラグインとは、表示されていない部分の画像は読み込まないというプラグインです

これを使うことにより、最初に表示される部分だけが優先して読み込まれるので、表示速度が向上します

最も有名な遅延読み込みプラグインは「Lazy Load」です

ワードプレスのプラグイン新規追加から追加できます

Lazy Loadには種類がたくさんありますが、私が導入しているのはGoogleが作成している「Native Lazyload」です

これはインストールするだけでいいので、細かな設定が要らずとても楽チンです

手段⑦:アドセンス広告の停止

Googleアドセンスは、広告を表示させるためにヘッダーのコードを読み取りに時間がかかります

Googleアドセンスは収益のために大きく貢献をしてくれますが、サイトスコアを向上させて検索ランキングをあげる方を優先させた方がいいです

検索ランキングが向上することで、PV数が上がり、結果的に収益増加に繋がります

SNSからの集客をメインにしている方はアドセンス広告を停止しなくても検索ランキングに関係しないので表示してもいいと思います

収益はアフィリエイト広告の方が圧倒的に高いので、いずれはアフィリエイトをメインにできるといいです

手段⑧:不要なCSSを消去する

AFFINGERでは独自のCSSを追加して、ブログの見た目を変更することが可能です

独自のCSSが入っているかは、「外観」→「カスタマイズ」→「追加CSS」から確認することができます

しかしこのCSSは別ファイルとして読み込まれるので、表示速度低下に繋がってしまいます

プラグインを使用することで、改善することもできますが、私はそれを実践してもあまり効果がありませんでした

「これは絶対に必要なCSSだ!」というもの以外は削除してしまいましょう

手段⑨:ブログの構成を考える

私はブログのトップページだけで、40個以上の画像を表示していたため読み込みにかなり時間がかかってしまっていました

トップページで自分のブログのいいところや、記事を全部伝えたいですが、詰め込みすぎてしまうとサイトスコアの低下を招きます

画像だけで伝えるのではなく、なるべくテキストなどを入れてブログの構成を考えることをおすすめします

Tomo

私のブログの場合は、トップページの構成を変えることが表示速度に1番影響があったように感じます(個人の感想)

まとめ:AFFINGER6 × エックスサーバーで快適ブログへ!

表示速度のまとめ

今回は「ブログの表示速度を改善する方法9選」という内容で、解説をしました

この9つを実践して、ぜひあなたのブログのサイトスコアを高めて、高ランクの検索結果を獲得できるようにしましょう!

今回のまとめ

  • 画像を軽量化する
  • 次世代フォーマットを使用する
  • プラグインを減らす
  • サーバーを検討する
  • Twitterの埋め込みをなくす
  • 遅延読み込みプラグインを使用する
  • アドセンス広告の停止
  • 不要なCSSを削除
  • ブログの構成を考える

このブログでは他にもブログに関する記事や、WordPressテーマに関する記事があるのでそちらもチェックしてみてください

今回紹介したエックスサーバーのお申し込みは以下からどうぞ。では。

エックスサーバー国内シェア No.1

エックスサーバー
  • 月額742円から契約可能!
  • オールSSDよりも14倍高速「オールNVMe」
  • 他ユーザーの影響を受けない「リソース保証」機能

お申し込みはこちらから

  • この記事を書いた人

Tomo

生粋のApple信者大学生ブロガー。2021年3月よりブログを開設し、Twitterは開始1ヶ月でフォロワー600人。大学では経営学を専攻し。英語学習歴は2年で、海外経験はないが、TOEICの点数は800点台。

-AFFINGER6, ブログ