AFFINGER ブログのスキル

アフィンガー向けブログの表示速度の改善法【53人分のデータあり】

2021年2月19日

雷に乗る男の人

 

悩む学生
ブログの表示速度がなんだか重いです。重いとSEO的によくないと聞いたので不安です。どうやって解決すればいいのですか。表示速度を上げて、検索順位を上げたいです。

 

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

 

本記事の内容

  • ブログの表示速度を改善する意味と確認方法
  • ブログの表示速度を改善する具体的な方法
  • ブログの表示速度に関する疑問を解決

 

ほかの人のブログはさくさく表示されるのに、自分のブログの表示がやけに遅いと心配になりますよね。

 

ぼくも以前はそうでしたから、気持ちがすごく分かります。

 

しかし、ブログを運営する上で表示速度の改善は欠かせません。あとで詳しく紹介しますが、ブログの表示速度が遅いとGoogleからも評価されにくくなるからです。

 

そこで、今回はブログの表示速度の改善方法を紹介します。

 

ちなみに、ぼくのブログは2021年2/18日夜時点でPageSpeed Insightベースでモバイル版67点、PC版93点とまあまあのいい点が出ていますので安心してください。

 

表示速度のPC版

表示速度のモバイル版

 

ただし、ぼくはアフィンガー5ユーザーなので本記事もアフィンガー5ユーザー向けの内容になっております。
その点はご了承ください。

 

この記事を見れば、ブログの表示速度の改善方法も分かり、あなたのブログが上位にきやすくなりますよ。

 

表示速度に悩む人は最後まで見てください。53人分のデータも載せていますので参考になると思います。

 

ブログで表示速度を改善する理由と速度の確認方法

クエスチョンマークの男性

 

表示速度を改善する理由と、現状の表示速度の確認方法を紹介します。もう知ってるよという方は次の目次に飛んでください。

 

ブログの表示速度を改善する理由

 

ブログの表示速度を改善する理由から紹介します。
結論、検索上位されるのに関わる重要な要素の1つだから。

 

もう少し詳しく説明すると、Googleはブログの表示速度はSEOにおいて重要と明言しています。

読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

出典:https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

 

また、以下のデータのように示速度が遅すぎると読者はブログを開くのを諦めます。

 

  • 表示速度が1秒から3秒に増加すると直帰率は32%増加
  • 表示速度が1秒から5秒に増加すると直帰率は90%増加
  • 表示速度が1秒から6秒に増加すると直帰率は106%増加
  • 表示速度が1秒から10秒に増加すると直帰率は123%増加

出典:Think With Google

 

読者がすぐに離脱するとGoogleはあなたのサイトをいいものとは評価してくれず、SEO的にマイナスです。

 

以上の事実からも分かるように、ブログにおいて表示速度が遅すぎるのは致命的。よって、サイトの表示速度が遅いと思う人は必ず改善しましょう。

 

ブログの表示速度の確認方法

 

表示速度の確認方法を紹介します。表示速度の確認にはPageSpeed Insightsを使いましょう。

 

使い方は簡単。あなたのサイトのURLを張りつけて、待つだけです。
リットン

 

モバイル版とPC版のそれぞれで点数が出ると思います。また、下に赤字で表示される部分は大幅に改善の余地あり、黄色なら改善の余地ありのサインです。

 

後で詳しく紹介しますが、モバイル版で45点、PC版で80点なら改善しなくてもだいたい平均点ぐらいですので安心してください。

 

これより低すぎた人は表示される項目を1つずつ改善していきましょう。

 

ブログの表示速度の改善方法(アフィンガー5ユーザー向け)

チェックマークをつける人

 

以下ではアフィンガー5ユーザー向けに、表示速度の改善方法を紹介します。ほかの有料テーマを使っている方にはすべては参考にはなりませんので、ご了承ください。

 

今回改善していくのは以下の5項目です。

ブログの表示速度の改善方法

  1. プラグインの見直し
  2. リビジョンの削除
  3. 画像の最適化
  4. レンダリングを妨げるリソースの除外
  5. キーリクエストのプリロード

 

上記の項目を改善すれば、かなりブログの表示速度は改善されるはずです。ちなみに、上記から順に簡単におこなえるかなという順で並べました。

 

順に1つずつ見ていきます。

 

プラグインの見直し

 

まずはプラグインの見直しからです。アフィンガー5ユーザー向けに限った話をすれば、以下のプラグインは不要なので削除しましょう。

 

不要なプラグイン

  • Jetpack
  • All in One SEO Pack
  • Adsense Plugin Wp QUADS

 

ただし、All in One SEO Packにタイトルやメタディスクリプションを書いてる場合は、削除前にアフィンガー5側に書き写してください。

 

でないと、All in One SEO Packに入っていた情報がすべて消えます。

 

ちなみに、pc版で67点、モバイル版で93点を出した当サイトが使っているプラグインを知りたい方はこちらの記事を参考にどうぞ。プラグインはすべて無料です。

AFFINGER5におすすめのプラグインを紹介【すべて公開】

 

リビジョンの削除

リビジョンの削除は見落としがちな改善項目です。PageSpeed Insightsの改善項目に出てきませんし、あまりほかのサイトでも紹介されてません。

 

先に改善法だけ示すと、以下の2つのプラグインで解決します。

  • WP-Optimize
  • Optimize Database after Deleting Revisions

 

しかし、プラグインを紹介されただけでは分からないと思うので、リビジョンが何かを少し説明します。

 

リビジョンとは、過去に執筆・編集した際の記事の内容が記事の保存・公開・更新のタイミングでデータベースに保管されていく機能のこと。リビジョンがあることで、記事の内容を前に戻せます。

 

ですが、ぶっちゃけぼくは1度使ったことがあるかなというレベルで、必要ないというのが個人的な意見です。
リットン

 

このリビジョンはデータに蓄積されるので、多すぎるとブログは重くなります。
また、ブログの記事のIDが投稿数に対して大きすぎるのはリビジョンが原因です。

 

というわけで、とくにメリットを感じないリビジョンは以下のプラグインで削除しましょう。
(どちらでも大丈夫ですが、WP-Optimizeの方が簡単な印象)

 

ぼくは以下のプラグインをリビジョン削除のときのみ導入してます。
今のところ入れたり削除したりしても不具合は起きてませんので安心してください。。

  • WP-Optimize
  • Optimize Database after Deleting Revisions

 

使い方に関する記事は以下の2つを参考にしてください。(外部リンクです)

 

ぼくはリビジョンをすべて削除してかなり点数が上がった記憶があります。

 

3000近く溜まってましたからね。記事のIDを無駄に大きくすると覚えにくいですし、リビジョンはこまめに消すといいですよ。
リットン

 

画像の最適化

 

画像の最適化とは、画像の容量をできるだけ小さくすることです。詳しくはブログで使う理想の容量とサイズは?【圧縮手順は簡単3ステップ】に書いていますが、画像の圧縮の大まかな手順だけ解説しておきます。

 

画像圧縮の手順

  1. 画像をBulkResize Photosでリサイズ(サイズの縮小)
  2. TinyPngにかけて容量を圧縮
  3. EWWW Image Optimizerの利用

 

人によってはどんなときも必ずJPEGという人もいます。たしかにJPEGだと容量は軽くなるのですが、圧縮するうちに画質があからさまに下がります。

 

なので、ぼくはPNGと使い分けてます。いずれにせよ、目指すべき画像の容量は約100KBです。

 

レンダリングを妨げるリソースの除外

 

レンダリングを妨げるリソースの除外とはざっくり説明すると、「CSSやJavaScriptを1つのファイルにまとめて、重要じゃないのは読み込みを後に回してください」ということです。

 

分からなくても改善できれば大丈夫です。

 

Autoptimizeというプラグインを導入すれば、レンダリングを妨げるリソースの除外は改善されます。

 

プラグインのインストールと有効化が終わったら下記の欄にチェックを入れましょう。

 

JS、CSS、HTMLの設定

  1. JavaScript コードの最適化
  2. JS ファイルを連結する
  3. CSSコード最適化
  4. CSSファイルを連結する
  5. インラインのCSSも連結
  6. CSSのインライン化と遅延
  7. HTMLコードを最適化

 

画像の読み込みの設定は画像の遅延読み込み (Lazy-load) を利用にのみチェック

 

追加の設定

  1. Googleフォント→Googleフォントの削除
  2. 絵文字の削除

 

とりあえず上記項目にチェックが入っていたら、ほかはデフォルトのままでも問題ありません。

 

キーリクエストのプリロード

 

キーリクエストのプリロードも難しいですが、意味を少しだけ確認します。

 

レンダリングを妨げるリソースの除外と似ていて、重要なファイルから先に読み込むようにするということ。
意味をもっと深く知りたい人はググってみましょう。

 

ここでは、改善方法だけ紹介しておきます。ちなみに、アフィンガー5ユーザー向けに解説します。

 

アフィンガー5のユーザーならとても簡単です!
リットン

 

ぼくはすでに改善してしまったので表示されませんが、キーリクエストのプリロードをクリックしてください。アフィンガー利用者なら以下のようなURLが出てくるはずなので、URLをコピーします。

 URL
https://サイト名/wp-content/themes/affinger5/css/fontawesome/fonts/人による

 

コピーしたURLを以下のコードの途中に張りつけてください。

 command
<!--キーリクエストのプリロード -->
<link rel="preload" as="font" type="font/woff" href="コピーしたURL " crossorigin>

 

複数表示された場合は、その分だけ同じものを用意してください。そして、用意したコードをアフィンガー5側に張りつけます。

 

手順はAFFINGER5管理その他→上級者向けの欄にある</>コードに出力の、「headに出力するコード※wp_head()にエスケープせずにそのまま出力されますの部分に用意したコードを張りつけます。

 

キーリクエストのプリロード

 

完了したら保存して終了です。こちらの改善項目はかなり点数が改善された記憶があります。

 

ブログの表示速度に関する事実【53人分のデータあり】

データの分析をする人たち

 

悩む学生
PageSpeed Insightsの点数がなかなか改善されない。トップブロガーさんはやっぱり80点とかなのかな。

 

結論そんなこともなく、月収が7桁の人も表示速度は飛びぬけてはいません。

 

ぼくがアフィンガー5ユーザーを53人調査した結果を掲載します。

 

ブログの表示速度のグラフ

(下のグラフは読める人は参考にしてください。ちなみに×が平均値です)

 

ついでに表示速度の目安の偏差値を出しておきました。

 

ブログの表示速度の偏差値

 

上記の表とグラフから分かることを簡単にまとめると下記のとおり。

  • モバイル版がPC版より遅いのは普通
  • モバイル版なら42点が、PC版なら78点が平均点
  • モバイル版なら60点でも高得点
  • PC版はかなり高く90点も珍しくない

 

ただし以下の理由でぼくの調査が絶対に正しいとは限りません。

  • 表示速度の点数は計測する時間などによって左右される
  • 統計的にはサンプルが不十分である

あくまで参考程度にお願いします。

 

が、とりあえずモバイル版なら45点、PC版なら80点を目指せば大丈夫かなと。

 

計測すれば分かりますが、Twitterに点数を載せている人はだいたい数値を盛ってます。
正確には記事数が少ない段階で計測したか、いい点数が出るまでしたかの2択。

 

なので、やけに高得点な人を見ても心配する必要はありません。その人のブログのURLをPageSpeed Insightsに張りつけた結果を見て、安心しましょう。
リットン

 

ちなみに、名誉なことなのでモバイルで89点と突出した得点を叩きだした方だけ紹介しておきます。

https://gekkolog.com/

 

 

表示速度よりブログの内容がもっとも重要

ノートを書く人

 

悩む学生
月に7桁稼ぐ人でも点数は普通なんですか。最初に表示速度は重要って言ってましたよね?

 

たしかに表示速度は重要な要素です。しかし、もっとも重要なのはブログの内容で、Content is King(コンテンツ・イズ・キング)と言えるでしょう。

 

53人分をリサーチして感じたのは、点数ほどの表示速度の差を体感では感じなかったということです。
結局、トップのアフィリエイターの方々は内容で上位表示を狙っています。

 

悩む学生
コンテンツが重要って具体的にどうすればいいんですか?

 

質が高い記事は基本的に次の条件を満たしています。

記事の質を高める条件

  • 文章が読みやすい
  • 情報が網羅されている
  • 記事に信頼性・権威性・専門性がある
  • 読者の検索意図を深くまで理解している
  • 経験談などの一次情報が盛り込まれている
  • 図や画像などが必要に応じて使用されている

 

上記の条件を満たせば、記事の質はある程度は担保されます。とくに初心者の方は下記の条件ならすぐに意識できるはず。

 

記事の質の高め方(初心者向け)

  • 文章は見やすいか
  • 情報を網羅できているか
  • 経験談などのオリジナルな内容があるか

 

これらの条件はあなたが手を抜かないかどうかの話なので、ブログ歴に関係ありません。

 

実際にぼくもこの記事を書くための調査や表作りに1時間以上はかけてます。
リットン

 

ですがその努力もあり、PageSpeed Insightsは50点でOKです。みたいな根拠に乏しい記事にならずにすみました。

 

ブログの歴が浅いのに、手を抜いたら100%上位には勝てません。泥臭くリサーチしましょう。

 

ブログの表示速度の改善は重要だけどこだわりすぎはNGです

ハードルを越える人

 

ブログにおける表示速度の改善は読者を離脱させないための施策として重要です。

 

アフィンガー5ユーザー向けにもう改善策を再度まとめておきます。

ブログの表示速度の改善方法

  1. プラグインの見直し
  2. リビジョンの削除
  3. 画像の最適化
  4. レンダリングを妨げるリソースの除外
  5. キーリクエストのプリロード

 

まずは、上記の内容を改善して、モバイル版で45点、PC版で80点を目指しましょう。

 

ただし、表示速度の改善で沼にはまってはいけません。主役は記事の質で、あくまで表示速度は検索上位表示の補助にしか過ぎません。

 

ある程度改善したら、記事の質を高める努力をしましょう。今回は以上です。

 

関連記事ブログで使う理想の容量とサイズは?【圧縮手順は簡単3ステップ】

関連記事ブログで使う画像にできるSEO対策を5つ紹介【初心者必見!】

-AFFINGER, ブログのスキル

Copyright © Lytton Blog