WordPressの高速化

Googleは、サイトの表示速度を順位の決定要因の一つとすることを発表しました。これからも上位表示され続けるには、サイトを速く表示する必要があります。また、サイトの表示速度を上げることはユーザーエクスペリエンスの向上にもつながるので、サイトの表示速度を上げることはもはや必須です。

ですが、WordPressのページを高速で読み込めるようにするにはどうすればよいのでしょうか。今回は、WordPressのページを高速化して1秒台で表示する方法を書きたいと思います。

高速化が必要な理由

では、なぜ、WordPressの表示速度を向上させなければならないのでしょうか。

それは、「ページの表示速度が遅すぎると、そのページを読んでもらえないようになる」からです。

あなたも、表示速度が遅いサイトにイライラした経験はないでしょうか。また、表示速度が遅すぎて、そのページに集中できなくなった経験はないでしょうか。また、表示があまりにも遅い場合、そのサイトを開くことをあきらめてしまったことはないでしょうか。

ページの表示が遅すぎると、ユーザーがページに集中できなくなったり、ユーザーにページを読んでもらえなくなる可能性が出てきます。そのため、ページを高速化することが必要です。

また、ショッピングサイトのAmazon.co.jpで、サイトの表示速度を0.1秒上げるだけで成約率が数パーセント上がるという実験結果も出ていることから、ページを高速化することには非常に効果があるといえます。

最近では、インターネットの回線の品質の向上に伴い、ユーザーがページの表示に我慢できる時間は非常に短くなってきています。そのため、少しでも速くページを表示できるよう努力しましょう。

高速化させるには

では、具体的に、ページを速く表示させるにはどうすればよいのでしょうか。

外部ファイルを小さくする

ページ表示の際に読み込まれるファイルの中で最も容量が大きく、ページの表示速度に影響を与えるファイルは、ほとんどの場合は画像ファイルです。

画像データは文字データに比べると大きく、何万文字のページよりも画像ファイルのほうが容量が大きいこともあります。そこで、画像ファイルを圧縮することでページ表示を高速化することができます。

また、CSS(カスケードスタイルシート)やJavaScriptファイルなども圧縮すれば読み込み速度が改善されます。なお、画像の圧縮には、画質を低下させないで行う可逆圧縮と、画像が劣化する不可逆圧縮があります。可逆圧縮は画質の劣化が起きないので、画像の画質を落としたくない場合は可逆圧縮を行いましょう。

しかし、このようなサイトを使用して一つ一つ手動で画像の可逆圧縮を行うのは非効率です。WordPressには自動的に可逆圧縮を行う便利なプラグインがあります。そのプラグインは「WordPressのプラグインおすすめ10選」で解説します。圧縮は自動で行われるので、使用することをおすすめします。

また、画像ファイルのリサイズを行うことでファイルのサイズを大きく減少させることができます。このリサイズを行うと、画像の画質が大きく低下することがあります。そのため、リサイズでサイズを縮小させる際は慎重に行うようにしましょう。

JavaScriptを最適化する

JavaScriptは、ページの表示速度を大幅に遅らせていることがあります。JavaScriptを最適化しましょう。

非同期にする

JavaScriptは、基本的には即座に実行されます。あるJavaScriptの実行に時間がかかっているときは、そのJavaScriptが終了するまでその下のコンテンツは表示されません。

ですが、そのJavaScriptを必要なときに読み込むようにすると、高速化させることができます。例えば、十秒後にダイアログを表示するJavaScriptを十秒経った後に読み込むようにすることで、読み込み速度を向上させることができます。

JavaScriptには、JavaScriptを必要なときに読み込むようにする「非同期」という機能があります。この機能を積極的に使いましょう。

縮小する

基本的に、JavaScriptなどのプログラミング言語では、コードを読みやすくするために「インデント」が使用されています。インデントとは、コードの構造をわかりやすくするためのタブやスペースのことです。しかし、機械はこのインデントを必要としません。インデントが使用されていない、人間にとって読みにくいコードでも、機械は問題なく読み取ることができます。

このようなインデントは、JavaScriptのファイルサイズを無駄に大きくしてしまいます。そのため、このインデントは削除しましょう。インデントを削除することによって、JavaScriptのファイルサイズが小さくなるので、表示速度を速めることができます。

また、プログラムには、自然言語でプログラム内に説明を入れる「コメント」という機能があります。この「コメント」を削除することで、JavaScriptのファイルサイズを小さくすることができます。

ソーシャルボタン

公式のソーシャルボタンは、表示に非常に時間がかかっており、表示速度に大きな影響を与えます。そのため、ソーシャルボタンはオリジナルのものを使用し、公式が提供するJavaScriptは使用しないようにしましょう。

キャッシュを使う

WordPressは、表示するページをリクエストされた際に生成しています。このようなページを「動的Webページ」といいます。対して、もともと用意されているページをそのまま返すページを「静的Webページ」といいます。

静的Webページは、リクエストされた際にすでに存在するページを返すだけなので高速にページを表示させることができますが、WordPressでは、ユーザーがページをリクエストした都度、データベースと呼ばれるサーバーからデータを呼び出してHTMLファイルなどのファイルを生成しているため、静的ページよりも表示に時間がかかります。

「W3 Total Cache」などのプラグインを使用することで、この問題は解決できます。このプラグインを使用すると、WordPressで一度生成されたページがキャッシュとして保存され、その後のページのアクセス時にそのキャッシュファイルをそのままレスポンスするようになるので、静的ページと同じ程度のパフォーマンスが期待できるようになります。このプラグインの使用方法は「WordPressのプラグインおすすめ10選」で解説します。

まとめ

  • 外部ファイルを小さくする
  • JavaScriptを非同期にする
  • JavaScriptを縮小する
  • オリジナルのソーシャルボタンを使う
  • キャッシュを使う

これらの事項を実践すれば、WordPressの表示速度は大幅に改善され、2秒ルールも厳守できるでしょう。また、ページを1秒台で表示することも難しくはないかもしれません。あなたのブログでも実践してみてはどうでしょうか。