y.o.designers-works

WordPressを高速化する方法について

WordPreseはPHPによって動的にページを生成してます。
その為、静的なHTMLファイルで作成されたページより表示速度が遅くなりがちです。
WordPressだから遅いというわけではないですが、Webサイトの表示には様々な要因が絡んできます。
今回はWordPressを高速化するための方法、プラグインを紹介します。

Webサイトのパフォーマンスを向上する為には

Webサイトの動作が遅い場合、WordPressが原因なのかHTMLや画像が原因なのか、サーバーに原因があるかをよく検討する必要があります。
どこがボトルネックになっているのかを調査することが大事です。

WordPressでページが表示されるまでの仕組みについて

WordPressはクライアントからリクエストに応じてデータベースに情報を問い合わせて取得したデータに応じてHTMLを作成し、クライアントにレスポンスを返します。

WordPressでページが表示されるまでの仕組み

高速化を考えるときは、一連の流れを把握し、どの部分のパフォーマンスを向上するかを知っておく必要があります。
また高速化をするプラグインは多数ありますが、プラグインを入れすぎると逆にパフォーマンスが落ちてしまいますので使うプラグインは慎重に選定しましょう。

Webサイトのパフォーマンスをチェックする

まず、自分のサイトのどこがボトルネックになってるかを調べてことが大事です。
パフォーマンス診断の為のツールとしてGoogleのサービスPageSpeed Insightsがあります。
自分のサイトのURLを入れるだけで指摘と改善手段を表示してくれます。

修正が必要、考慮すべきポイントへの対処

「PageSpeed Insights」を使ってサイトをチェックすると「ブラウザのキャッシュを活用する」、「画像を最適化する」、「CSSを縮小する」、「JavaScriptを縮小する」…など様々なボトルネックが表示されます。
WordPress高速化プラグインやWebサービスを使用しての対処方法を一通りですがまとめてみました。

「ブラウザのキャッシュを活用する」への対処

これは.htaccessを設置してブラウザキャッシュを設定することにより解決できます。
.htaccessは設置したディレクトリ以下に適用されます。
自分の場合はWordPressインストール時に展開されたディレクトリ内に置きました。

<ifmodule mod_expires.c> ExpiresActive On
 ExpiresDefault "access plus 1 seconds"
 ExpiresByType text/html "access plus 1 seconds"
 ExpiresByType image/gif "access plus 2592000 seconds"
 ExpiresByType image/jpeg "access plus 2592000 seconds"
 ExpiresByType image/png "access plus 2592000 seconds"
 ExpiresByType text/css "access plus 604800 seconds"
 ExpiresByType text/javascript "access plus 86400 seconds"
 ExpiresByType application/x-javascript "access plus 86400 seconds" 
</ifmodule>

この場合は単位が秒数なので、1日なら2,592,000で、1週間で604,800、30日ならば2,592,000になります。 なお、Apacheのモジュール「mod_expires」に対応している必要があります。
また、記述する期間はサイトの運用状況によって変更が必要になりますのであしからず。

「CSSを縮小する」と「JavaScriptを縮小する」への対処

Googleからは余分なスペース、改行、インデントなどの不要なバイトを取り除くことが必要だと言われています。
WebサービスのRefresh-SFで対処できます。
使い方は至って簡単で、JavaScriptのコードやCSSを張り付けて縮小するファイルのボタンを押すだけの2ステップでできます。

Refresh-SFの使い方

「CSSを縮小する」と「JavaScriptを縮小する」への対処

Googleからは余分なスペース、改行、インデントなどの不要なバイトを取り除くことが必要だと言われています。
WebサービスのRefresh-SFで対処できます。
使い方は至って簡単で、JavaScriptのコードやCSSを張り付けて縮小するファイルのボタンを押すだけの2ステップでできます。

「画像を最適化する」への対処

これは、EWWW Image Optimizerというプラグインで対処します。
このプラグインは管理画面のメディアに画像をアップロードするときに、自動で画像のファイルサイズを縮小してくれる便利なプラグインです。

画像がどれほど圧縮されたか確認するためにはメインナビゲーションから[メディア]をクリックされるだけで画面右側に圧縮状態が表示されます。

画像圧縮の確認

すでにアップされている画像を圧縮する方法は、メインナビゲーションの[メディア]⇒[BulkOptimize]を選択し、[Optimize Media Library]の下にあるボタン[Start optimizing]をクリックしてください。

既存の画像を圧縮する方法

まとめ

上記以外にもいろんな改善方法はあるかと思います。
またサイトの運用状況によっては変更することで不具合が出ることもありますし、必ずしも全てのボトルネックを修正できるとは限りません。
良い改善方法があったらまた追記したいと思います。

スポンサーリンク

他にオススメな記事