wordpress blog header image

Webページ表示速度を改善した①(.htaccessの設定)

はじめに

このブログの表示速度が非常に遅く、いちいちイライラする。
記事の内容はともかく、ページの表示速度が原因で読者の方をイライラさせるのは忍びないので、改善した。

今回は、WordPressで構築されたサイトの表示速度を改善する流れをまとめる。

現在のページ表示速度を計測してみる

世の中には、Webページの表示速度を計測する便利なツールがあるようだ。
これらを用いてこのブログの現在のページ表示速度を計測する。

2つの計測ツール

PageSpeed Insights
PageSpeed Insightsは、入力したURLのページ速度スコアとページ表示速度改善に必要なアドバイスをしてくれるGoogle提供の無料ツールである。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

GTmetrix
Webツールの一つでGoogleの提供するPageSpeed Insightsと、Yahoo!の提供するYSlowを使って同時にサイト・ブログのパフォーマンスを計測してくれるものである。

GTmetrix
https://gtmetrix.com/

計測結果

それぞれの結果がコチラ。

PageSpeed Insights

GTmetrix
こちらは画像を用意することが出来ませんでした。

結果は散々だったので、早速高速化を実施する。

サーバー側での圧縮を有効にする

WebサイトのコンテンツをVPSサーバー側で圧縮し閲覧者のブラウザに送信することで、転送量を減らし高速化を図る。
※ VPSサーバー側のCPU使用率が上がるため、状況によっては表示速度が落ちる可能性がある(らしい)。

mod_deflateとは?

mod_deflate」とは、コンテンツファイルを圧縮することで、通信するファイルの容量を減らし、画面表示を高速化するための仕組みを提供するApacheのモジュールである。

mod_deflateについての詳細(書式等)は下記のページを参照。
Apache モジュール mod_deflate
http://httpd.apache.org/docs/2.2/ja/mod/mod_deflate.html

.htaccessとは?

.htaccess」とは、Webサーバーに「Apache」を用いている場合に、利用できるファイルである。
サイトの管理者が、「Apache」の各種設定や制御をおこなえるようにしたファイルで、ディレクトリ単位で設置・設定が行える。
今回は、ここにApacheの設定を追加していく。

.htaccessについての詳細は下記のページを参照。
Apache チュートリアル: .htaccess ファイル
https://httpd.apache.org/docs/2.2/ja/howto/htaccess.html

.htaccessに mod_deflate の設定を追記する

WordPressのルートフォルダにある.htaccessに下記のコードを追記することで、mod_deflateを設定する。

ブラウザキャッシュを有効にする

ユーザーのブラウザにCSSや画像などの情報をキャッシュ(記憶)させて、ページの読み込み速度の改善を図る。

キャッシュとは?

ブラウザなどが表示したウェブページのデータを一時的にコンピューターに保存する機能である。次に同じページにアクセスしたときに、インターネット上のデータではなく、保存されたデータを参照するため、すばやく表示できる。

mod_expiresとは?

mod_expires」とは、キャッシュ(cache)を設定することで画面表示を高速化するための仕組みを提供するApacheのモジュールである。

mod_expiresについての詳細は下記のページを参照。
Apache モジュール mod_expires
https://httpd.apache.org/docs/2.2/ja/mod/mod_expires.html

.htaccessに mod_exprise の設定を追記する

mod_deflateと同様に、WordPressのルートフォルダにある.htaccessに下記のコードを追記することで、mod_expiresを設定する。

ページ速度を再計測する

最後にページの表示速度を再計測する。

PageSpeed Insights

モバイルのスコアまだまだですが、改善が見られます。

GTmetrix

システム・オールグリーン!って感じ。
ここまで目に見えて高速化がなされると楽しいです。

おわりに

無事、ページ表示(読み込み)速度を改善することができた。
次は、WordPressのキャッシュ関連のプラグインを導入して更なる高速化を図る。

参考ページ

Webサイトの表示速度を改善する – さくらVPS設定マニュアル
http://www.sakura-vps.net/speed-up-web-site/

.htaccess の見直しでWebページ高速化 – Thought is free 自由な思考で語ろう
http://thk.kanzae.net/net/itc/t1544/

.htaccessのmod_deflateでファイル圧縮送信で高速化でSEO対策!
http://blog.s-giken.net/222.html

WordPress のキャッシュ系プラグインを整理しました- WordPress & Lifelog
http://wp-kappa.com/wordpress-cache-plugins-2014/

シェアしていただけると嬉しいです

スポンサーリンク