脱サラ攻略ブログ

WordPressの高速化。4つのポイントと改善手順を大公開

2021.10.3

最近サイトの表示が遅いな。。。

そう感じているならこのページを読み進めていけば爆速のサイトに改善できます。表示速度の改善は次のメリットがあります。

  • ユーザーの離脱を防げる
  • ユーザーの滞在時間を伸ばせる

表示に3秒以上かかるモバイルページは53%が離脱するというGoogleの調査報告もあるように、折角役に立つコンテンツを書いても表示速度が遅くて離脱されたら意味がないですよね。表示速度は、Googleのランキングシグナルの1つでもあるので、高速化して他サイトより上位表示獲得していきましょう。

WordPress触りたての人でも改善できるようにまとめてますのでぜひ、実践してみてください。

まずは自分のサイトを分析

下記2つの計測サイトにURLを入れて分析しましょう。面倒な人は、Googleが提供するPage Speed InsightsのみでOK!

表示が遅い主な4つの原因

  • 画像サイズが大きい
  • プラグインの入れすぎ
  • リソースが多い
  • サーバースペックが低い

画像サイズが大きい

画像の最適化できていますか?

  • 画像のリサイズ
  • 画像の形式
  • 画像の圧縮

「画像は横1200px以上でJPEG形式のものを圧縮」して利用しましょう。横1200px以上は、Google砲対策のためで、JPEG形式はPNG形式より容量を抑えることができるためです。

Google砲は、Google Discoverのフィードに掲載されることでアクセス数が爆発的に伸びることです。掲載されやすい項目の中に、1200px以上の画像の使用を推奨しています。

画像のリサイズと形式変換は、Windowsならペイント、Macならプレビューで可能です。

画像の圧縮は、「あっしゅくま」がオススメ。ドラッグ&ドロップでサクッとできちゃいます。

ここまでやると画像1枚あたり30KB~80KBまで抑えることができます。

 

プラグインの入れすぎ

プラグインの入れ過ぎは、サーバーの負荷が増大して表示速度に影響を与えます。本当に必要なものだけに絞りましょう。

  • 未使用のプラグインを無効化/削除する
  • 実装できないか考えてみる

当サイトでメインに使用しているプラグインは現在2つのみです。20~30個入れている人は、10個くらいまで抑えられるか見直してみましょう。

リソースが多い

ここでのリソースは、CSSやJSを指しています。これらのファイル数や容量が多いとサーバーとの通信に時間がかかり、表示までに時間がかかってしまいます。また、ヘッダーでCSSやJSの読み込みをしているとレンダリングブロック(読み込みが終わるまでブラウザに表示がされないこと)が発生します。ページを開く時に、一瞬白い画面が発生するのがそれです。

有名なWordPressテーマでは、CSSはヘッダー、JSはフッターに書かれていることが多いです。なのでテーマを直接いじらない人は何もしなくて大丈夫。自前でCSSやJSを追加する人は、配置に気をつけましょう。

リソースを抑えるためにできることは次の2つです。

  1. リソースの容量を抑える
  2. リソースの数を抑える

この2つをまとめてやってくれるのが、WordPressの「Autoptimize」というプラグイン。リソースの容量を抑えて、ファイルを1つにまとめてくれます。詳しくない人はこれを入れて有効化すればOKです。※テーマ独自のリソース圧縮機能や他プラグインで同様のことをやっている場合は競合してしまうので使わないようにして下さい。

プラグインを使用したくない場合は、「CSS Minifier」や「JS Minifier」などのサービスを使って、1つ1つのファイルを最小化して、1つのファイルにまとめましょう。

 

サーバースペックが低い

最初のサーバー応答時間を速くしてください

Page Speed Insightsで上記項目が出たら、一見サーバー側で対策をしなければいけないと思うかもしれませんが、上記の対策(画像の圧縮・プラグインの削減・リソース圧縮/削減)をしていればクリアできます。

それでも表示が出てしまう場合は、サーバーのスペックアップや乗り換えを検討しましょう。

当サイトでも使用しているJETBOYは、爆速表示且つスペックアップが可能なレンタルサーバーなのでオススメです。