稼ぐ

【初心者必見】ブログの表示速度を改善させる方法

ブログ初心者

ブログの表示速度って何?

そもそも大事なのか?

シロモン

それが大事なんだよー。

グーグルの検索で上位になるためには関係ある項目ですよー。

2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

この ”Speed Update” (と私たちは呼んでいます)は、ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。

そのページがどのような技術を用いて制作されたかに関係なく、すべてのページに同じ基準を適用します。

検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。

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

シロモン

このように書かれていることから、ブログのスピードアップは大事です

なので、今回はブログのスピードをアップさせる方法を書いていきます!

ブログの表示速度を知る方法

まずは自分のブログ速度を知らないと始まりません。

https://developers.google.com/speed/pagespeed/insights/

ここから自分のブログ速度を調べられます!

どのくらいのスピードでしたでしょうか?

すでに80・90以上ある方はこのブログをすぐ閉じてください。笑

ん? 30以下の人もいる・・・かな?

シロモン

ではさっそく改善策を書いていきたいと思います。

改善策

私のテーマは「jin」を使用してます。

ちなみに初期のスピードは・・・

モバイル

パソコン

でした。

モバイルが圧倒的に遅いです・・・

有料テーマであるJINは、丁寧に高速化する方法を公式サイトにきちんと載せてくれています。

JIN公式サイトに載っている方法は

  1. JINを最新版にアップデート
  2. FontAwesomeをOFFにする
  3. 画像は圧縮してアップロード
  4. アニメーションをOFFにする
  5. 標準フォントを利用する
  6. 高速化プラグインを活用する
  7. Xアクセラレーターを活用する

ですが、自分はサーバーを「konoHA」にしているため、⑦の「Xアクセラレーターを活用する」以外を試してみました。

JINを最新版にアップデート

1か月前に購入したのですでに最新版なので、ここはスルーします。

Fontawesome・標準フォント・アニメーションをOFFにする

ここに関しても、OFFにしましたが、スピードに変化はありませんでした。

一応、確認方法を載せときます。

Fontawesomeの確認方法

「外観」→「カスタマイズ」→「その他設定」

→「fontawesomeを読み込まない」にチェック

フォント・アニメーションの確認方法

「外観」→「カスタマイズ」→「サイト基本設定」

→「フォント、アニメーション」→OFF

これで確認できます。

onにしている方は変更してみてください

画像を圧縮してアップロード

jin推奨プラグインであるEWWW Image Optimizerを利用。

「メディア」→「一括最適化」で画像が自動で圧縮されます。

高速化プラグインを活用する

  1. Autoptimize
  2. Lazy Load
  3. WP Super Cache

これらのプラグインも公式で推奨されているので、入れてみます。

Autoptimize

このプラグインは、WordPressのHTMLソースコードやCSSなどを最適化してサイトの表示速度を向上するプラグインです。

簡単に言うと、余分な改行や空白を詰めて容量を削減したり、画面内で表示されていない画像の読み込みを遅らせるすることができます。

しかし、「Autoptimize」では、テーマによっては表示が崩れたりする場合もあります。

その場合は、チェックボックスを一つ一つon/offするなどしてどの機能が原因なのか調べる必要があります。

Lazy Load

このプラグインは、画像やコンテンツを、あえて遅延して表示させることでページの表示速度の向上に繋げてくれるプラグインです。

WP Super Cache

このプラグインに関しては不具合が生じているい方もいるので、入れませんでした。

結果①

結果は・・・

少し改善しましたが・・・

まだまだ遅い部類。

しかし、まだ改善できると踏んだため、新たな改善策を調べました。

改善策(番外編)

さらに画像圧縮

メディアの画像の中で、容量がもともと大きい画像(500kb程度)があったので、

tinypng」という圧縮ツールを使い、

一個一個手作業でアイキャッチ画像の圧縮作業をしました。

シロモン

かなり時間がかかる作業でした。

おかげで(500kb→300kb)程度に削減できました。

しかし、、、、

速度はあまり変わりません・・・・・

プラグインを見直す

  1. WordPress Popular Posts
  2. All in One Seo Pack

これらが入っていると表示速度が遅くなるということしたが、すでに入っていないので、スルーします。

compress JPEG & PNG imagesを利用

画像圧縮プラグイン「compress JPEG & PNG images」を「EWWW Image Optimizer」の代わりに入れてみました。

しかし、変化はありません・・・

「compress JPEG & PNG images」は圧縮画像の数に制限があるので、

画像圧縮プラグインは「EWWW Image Optimizer」が簡便でいいのかもしれませんね。

Imsanity

画像をリサイズ(画像サイズの変更)するプラグイン、「Imsanity」を入れてみました。

設定方法としては、

設定方法

「設定」→「Imsanity」

①「固定ページ / 投稿でアップロードされた画像」と「メディアライブラリへ直接アップロードされた画像」

→jinのアイキャッチ画像サイズである横760px:縦428pxに変更

②「その他の方法でアップロードされた画像(テーマヘッダー、背景、ロゴなど)」

→「0」で固定

③JPG画像品質

→デフォルトのまま82で設定

ちなみにすでにアップロードされている画像の大きさを変更するには、

「設定」→「Imsanity」→「一括画像リサイズ」欄より「画像を検索」し、「選択した画像のサイズを変更する」だけです。

結果②

その結果として・・・

少し改善できました。

Imsanityが効いたのかもしれません!!!

これぐらいがマックスですかねー。

まとめ

いろいろ試してみましたが、「jin」ではなかなか難しいようです。

もともとテーマのデザイン性も高いことも原因かもしれません。

シロモン

「jin」で作られているほかのブログも計測してみましたが、、

どれも40~50までの間を推移していました。

検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。

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

このようにグーグルに書かれているあたり、速度よりも中身を充実させることができれば、順位も上がる可能性もありますので、速度がすべてではないと思います。

スピードも大事ですが、中身も頑張って書いてみるのが第一かもですね。

それではまた。