おにちゃん塾の商品一覧

【保存版】WordPress高速化のテクニック|表示速度32から72

URLをコピーする
URLをコピーしました!
想定読者

WordPressで高速化するための施策を詳しく知りたい

本記事では、上記の方を想定しています。

おにちゃん

執筆者:PageSpeed Insightsで32だったサイトを72までスピードアップさせた実績があります。

WordPress高速化の実績

WordPress高速化:おにちゃん塾の例

ちなみに、おにちゃん塾のサイトは300記事程度+画像を多用しているサイトなので、72という数値はかなり良いです。

基本的な考え方:サイト記事が多くなればなるほど表示速度は遅くなります。また、画像を使えば使うほど表示速度は遅くなります。

おにちゃん塾の歴史

  1. WordPressテーマJINを使って150記事達成→スピード39~45程度
  2. WordPress高速化を行う(具体的にはサーバーを変更しました)→スピード60~68程度まで改善
  3. その後、250記事達成の時に計測→32に落ちていた
  4. WordPressテーマをJINからSWELLに変更+画像対応→72になる
目次

WordPress高速化の必要性

WordPress高速化の必要性

WordPress高速化の施策を紹介する前に、なぜWordPressを高速化すべきなのかについて解説していきます。

WordPress高速化すべき理由

  • 理由①直帰率・離脱率に影響が出る
  • 理由②SEO対策でマイナスの影響が出る


理由①直帰率・離脱率に影響が出る

ページの表示速度が遅すぎて、イライラした経験はないでしょうか。

表示速度の遅いサイトにイライラするのはあなただけでなく、どのユーザーにも当てはまります。

Googleは公式で「表示速度のユーザーに与える影響はかなり大きい」と発言していました。

  • 1秒から3秒になると離脱率が32%上昇
  • 1秒から5秒になると離脱率が90%上昇
  • 1秒から6秒になると離脱率が106%上昇
  • 1秒から10秒になると離脱率が123%上昇

このような結果を踏まえて、おにちゃん塾が読者に提唱するのは「表示速度3秒未満のサイト作り」です。

3秒未満、もっというと1秒程度で表示されるサイトを作ることができれば、ユーザーにストレスを与えずに記事を読んで貰えます。

本記事では、1秒から3秒の間を目指すための方法を沢山紹介しています。

是非、参考にしてみてください。


理由②SEO対策でマイナスの影響が出る

2018年:Googleの公式ブログにて、ページの表示速度をモバイル検索のランキング要素に追加したことを発表しました。

注意点:ページの表示速度が早ければ早いほど評価されるというわけではないです。Googleは、ページの表示速度が遅いもののみ評価を下げると公表しています。

実際問題、評価が下げられるほど遅いサイトは少ないです。

ただ、もし該当してしまうと大変なので、そうならないように本記事通りWordPress高速化を行いましょう。


現在の表示速度を計測する

実は、WordPress高速化の施策をする必要がないのにも関わらず、WordPress高速化に時間とお金を投入してしまう方がいます。

非常に勿体無いです。

ご自身が、WordPress高速化の必要があるかどうかは『Googleページインサイト』を使用して確認しましょう。

このサイトを活用して、平均50点以上が毎回計測されるサイトに関してはWordPress高速化の必要なしです。

60点から100点にしたい気持ちは分かります。

おにちゃん

ただ、ページの表示速度を合格している方が、リスクを取ってまでWordPress高速化をする必要性はかなり低いです。

そこに時間をかけるのであれば、コンテンツ制作をした方が良いです。

実際に、僕はスコア30程度のサイトを72にした段階で、WordPressの高速化施策をストップさせました。

もし仮に、平均点50を超えている方がWordPress高速化したい場合は僕が紹介している内容通りに施策をしてください。


WordPress高速化に必要な要素

WordPress高速化に必要な要素

WordPressの高速化に必要な要素は下記の通りです。

  1. サーバー→若干のリスク有り
  2. 画像対応→リスクなし
  3. ソース記述内容→リスク有り
  4. キャッシュ→リスク有り
おにちゃん

ページの表示速度の点数によってやるべき施策をまとめておきましたので、ぜひ参考にしてください。

スクロールできます
ページの表示速度50点未満50~70点未満70点以上
サーバー
画像対応
ソース記述内容××
キャッシュ××


高速化要素前提:サーバー

WordPress高速化に必要な要素の前提はレンタルサーバーです。

格安レンタルサーバーを使っているのであれば、乗り換えるだけで表示速度はかなり速くなるはずです。

おにちゃん

実際に、僕はWordPressテーマJIN×エックスサーバーを活用していて表示速度が30ほどでしたが、コノハに乗り換えただけで60まで表示速度を上げられました。

ブログ初心者であれば、エックスサーバー。なぜなら、情報が多いから
中級者以上はコノハでいいと思います。なぜなら、情報がなくてもなんとかできるから。

後は、サーバーのPHPバージョンを最新にすることも重要です。


高速化要素1:画像対応

WordPress高速化に必要な要素1つ目は『画像対応』です。

これは、ページ速度が遅い人から早い人でも絶対にやるべき施策です。

おにちゃん

正直、ここをしっかり対応するだけでかなり表示速度は速くなります。


高速化要素②ソース記述内容

WordPress高速化に必要な要素2つ目は『ソースの記述内容』です。

WordPressテーマはプログラムで作られています。

そのプログラムを圧縮or必要ない部分を削除することでWordPressの高速化ができます。

しかし、HTML、CSS、JavaScriptがある程度分からないとかなり厳しいです。

おにちゃん塾の見解

  • 有料のWordPressテーマを使っている→必要なし
  • 自作のWordPressテーマを使っている→圧縮&不要部分の削除

最近のWordPressテーマは優秀なので、どのテーマも圧縮+不要部分の削除がされています。

そのため、有料のワードプレステーマを活用しているのであれば、圧縮は不要です。


高速化要素③キャッシュ

WordPress高速化に必要な要素3つ目はキャッシュです。

そもそもキャッシュとは:一度、サイトを閲覧した読者が二度目スムーズにサイトを閲覧するための技術

もっと深掘りしてみましょう。

  1. 読者Aがおにちゃん塾のページを見る。
  2. 「読者Aはおにちゃん塾のページを見た」とおにちゃん塾のWebサーバーが記憶する
  3. 数日後、読者Aがおにちゃん塾のページを見る
  4. Webサーバーは読者Aを記憶しているので、スムーズにデータを渡してあげる

簡単にいうと、こんな感じです。

キャッシュをうまく使うと、2度目の訪問者のページ速度を上げることができます。

正直、キャッシュを理解するのにはご自身でプログラムを書かないと厳しいです。

そのため、キャッシュをどうにかしたい場合は業者やフリーランスに頼むか、自分で勉強して実装するようにしましょう。


【画像編】WordPress高速化

【画像編】WordPress高速化

WordPress高速化施策一つ目は画像最適化です。

Webサイトは基本的にテキスト情報と画像で構成されています。

  • テキスト情報→サイトの表示速度に影響ほぼ与えない
  • 画像情報→サイトの表示速度にかなり影響を与える

テキスト1万文字と画像30KBが同じサイズだと言われています。

多くのサイトが画像によって、サイトの表示速度が落ちているので、WordPressの高速化=画像対応と考えましょう。

やるべき施策は下記の通りです。

  1. 画像プラグインを導入する
  2. 画像圧縮ツールを活用する
  3. 画像遅延読み込みを活用する


画像プラグインEWWW Image Optimizer

EWWW Image Optimizerでは画像圧縮+次世代フォーマット変換の2つを行うことができます。

  • 画像圧縮:約30%ほど減少
  • 次世代フォーマット変換:約30%ほど減少

これをやるだけで、サイトの表示速度を10~20ほどアップさせることができます。


WordPress高速化:画像圧縮する手順

EWWW Image Optimizerで画像を圧縮する手順は下記の通りです。

  1. プラグインをインストール
  2. プラグインの初期設定
  3. 一括最適化をクリックする
おにちゃん

詳しい内容は下記の記事を参考にしてください。


画像圧縮ツールを活用

EWWW Image Optimizerでの画像圧縮では正直足りません。

基本的には、画像を圧縮する専用のツールを使用する→EWWWの手順です。

おすすめの画像圧縮ツールは下記のものです。

おにちゃん塾愛用のテール

  • COMPRESS PNG
  • COMPRESS JPG

画像圧縮ツールの使い方などに関しては、下記の記事を参考にしてください。


画像遅延読み込み

画像遅延読み込みとは:サイト内の画像を一度に読み込まないことでWordPress高速化を実現する技術です。

簡単にいうと、デバイス画面(スマホ、パソコン、タブレット)に画像が表示されるまで、画像を読み込まない技術です。

具体的には、Lazy Load や画像遅延ロードなどと言われています。

画像遅延読み込み技術を使用しないと、画像に表示されていない部分の画像も読み込んでしまうので、かなり表示速度が遅くなってしまいます。

注意点:以前までは、プラグインの導入or画像遅延機能を導入する選択肢しかありませんでした。

しかし、現在ではWordPressの標準機能で画像遅延読み込みが行われるようになりました。

つまり、何もせずともWordPress高速化の施策を行なっているということです。

実装されたのは2020年8月のことなので、それ以前からアップデートしていない方は、WordPressをアップデートするだけで、対応できます。


【ソース記述内容編】WordPress高速化

【ソース記述内容編】WordPress高速化

ソースとはプログラムのことです。

エンジニアによって書かれたプログラムを圧縮することでWordPressの高速化を行なっていきます。

  • 自分の力で圧縮する→依頼しましょう。
  • プラグインを導入する→簡単だがリスク有り


自分の力で圧縮する方法

自力で圧縮する際には下記のツールを活用します。

今回はcssを圧縮する際の方法をご紹介します。

ソースコードは通常下記のようになっています。

この画像は私が運営するWP専門屋のCSSコードです。その後、ソースコードの圧縮を行い下記のような画面になりました。

このように、ソースコードを圧縮するだけで、ファイルサイズを抑えることが出来るのでWordPressの高速化が実現できます。

CSSファイルを圧縮するだけで20%もカットすることができます。


プラグインを導入する

プラグインはAutoptimizeを活用します。

簡単に導入できますが、多くのWordPressテーマと相性が悪すぎるのであまりおすすめはしません。

どうしても圧縮したい方は下記の記事を参考にしてください。

現在作成中


【キャッシュ編】WordPress高速化

【キャッシュ編】WordPress高速化
  • WP Super Cache
  • W3 Total Cache

これらのプラグインを導入することで、キャッシュ対応することができます。

詳しい内容は、現在記事にしていますので、少々お待ちください。


まとめ:WordPress高速化にお悩みの方はおにちゃん塾に依頼しよう

まとめ:WordPress高速化にお悩みの方はおにちゃん塾に依頼しよう

ここまでで『【保存版】WordPress高速化のテクニック|表示速度32から72』の解説は以上です。

おにちゃん

本記事は以上です。最後までご覧いただきありがとうございました。


WordPressの高速化を深く学びたい方はWordPressを勉強しよう

WordPress高速化をもっと早くしたい方は、ご自身でWordPressスキルを身につけましょう。

WordPressの独学手順を下記の記事で紹介していますので、ぜひ参考にしてみてください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる