htaccess

Webサイトの表示速度を改善する

遅い。当サイトは、WordPressで制作されていますが、Webサイトの表示速度が遅すぎる。
あまりに気になるので、Webサイトの表示速度を改善してみようと思います。

①表示速度を計測する

GTmetrixは、URLを入力すると簡単にWebサイトの表示速度を計測できます。
では、どれくらいの速度がでているのか、現在のWebサイトの表示速度を計測してみます。

Webサイト評価

「Page Speed Grade」はGoogle、「YSlow Grade」はYahooのWebサイト表示評価ですが、それぞれC評価という結果。これは、すぐに改善する必要がありますね。

②問題点の把握

評価結果の下に評価を下げている原因が表示されます。
当サイトの表示速度が遅くなっている原因を見てみましょう。

サイト評価原因

B〜Fまでの評価がいくつかあります。レンタルサーバーなどの環境においては、改善できない項目もあるのですが、当サイトはさくらのVPSサーバーでできる範囲での対策を行います。
簡単にできる改善方法から試してみます。

③.htaccessによるキャッシュの設定

Leverage browser cachingという項目を改善します。現在はF評価の35点、ひどい。
この項目は、ユーザーのブラウザにCSSや画像などの情報をキャッシュ(記憶)させて、ページの読み込み速度を改善しましょうということ。
改善方法は、.htaccessにキャッシュの設定をします。
Webサイトに設置されている.htaccessに下記3行のコードを追加してください。
※.htaccessが有効になっていない場合は、.htaccessを有効にするを参考にしてください。

<Files ~ ".(gif|jpe?g|png|ico|js|css)$">
Header set Cache-Control "max-age=604800"
</Files>

1行目は、キャッシュさせるファイルの拡張子を指定しています。
(gif|jpe?g|png|ico|js|css)なので、gif,jpg,jpeg,png,ico,js,cssの拡張子がつくファイルを指定。
※jpe?gは、jpgとjpegの両方を指定。
キャッシュさせたい拡張子を追加する場合には、()内に追記します。
例として、フラッシュのファイル(.swf)をキャッシュさせたいのなら、

<Files ~ ".(gif|jpe?g|png|ico|js|css|swf)$">
Header set Cache-Control "max-age=604800"
</Files>

と()内末尾にswfと追記するだけ。

2行目は、キャッシュさせる期間を設定しています。
Googleの推奨キャッシュ期間は、1週間から1年間先ということですが、さすがに1年間は長すぎるので、今回は1週間に設定をしています。
※604800は1週間の秒数を表します。キャッシュ期間については、1週間〜1年間で設定してください。
1週間=604800
1ヶ月間=2592000
1年間=31536000

さて、どれくらい改善されたかGTmetrixで再計測。

Leverage browser caching

なんと、F評価(35点)→C評価(76点)と大幅に改善されました!
.htaccessにキャッシュ設定を行うだけで、十分な効果があるようです。

しかし、C評価で留まってしまった理由は、FacebookやTwitterなどの外部ファイルを読み込んでいるのですが、それらの外部ファイルは今回のキャッシュ設定は適用範囲外となっているためです。
なので、htaccessによるキャッシュの設定は完了とします。

④圧縮を有効にする

次は、Enable gzip compressionという項目を改善してみます。現在は、C評価の73点。
この項目は、WebサイトのコンテンツをVPSサーバー側で圧縮し閲覧者のブラウザに送信することで、転送量を減らし高速化しましょうということ。
ただし、VPSサーバー側のCPU使用率が上がるため、状況によっては表示速度が落ちる可能性があります。

この設定を有効にするには、httpd.confまたは、htaccessのどちらかに設定をすることで実現できるのですが、今回はhttpd.confで設定を行ってみます。

httpd.confを開いてに下記のコードがあることを確認してください。ない場合には、httpd.conf内に追記。
このmod_deflateというのが、圧縮をしてくれるモジュール。

LoadModule deflate_module modules/mod_deflate.so

次に、http.conf内の末尾に下記のコードを追加します。

# 転送するコンテンツに圧縮を適用
SetOutputFilter DEFLATE

# 圧縮非対応の古いブラウザへの対応
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# gif,jpg,pngなど画像コンテンツは圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

# MIMEタイプ指定で指定したファイルのみ圧縮
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
# AddOutputFilterByType DEFLATE application/xhtml+xml
# AddOutputFilterByType DEFLATE application/xml
# AddOutputFilterByType DEFLATE application/rss+xml
# AddOutputFilterByType DEFLATE application/atom_xml
# AddOutputFilterByType DEFLATE application/x-javascript
# AddOutputFilterByType DEFLATE application/x-httpd-php

上記の設定では、plain,html,xml,cssファイルを圧縮するよう指定しています。xhtmlなどを圧縮指定する場合には、行頭の#(コメントアウト)を削除して有効化してください。

また、特定のディレクトリに適用させるには、下記のように<Directory>や<Location>内に設定します。

<Directory "/var/www/example/">
# 転送するコンテンツに圧縮を適用
SetOutputFilter DEFLATE

# 圧縮非対応の古いブラウザへの対応
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# gif,jpg,pngなど画像コンテンツは圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

# MIMEタイプ指定で指定したファイルのみ圧縮
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
# AddOutputFilterByType DEFLATE application/xhtml+xml
# AddOutputFilterByType DEFLATE application/xml
# AddOutputFilterByType DEFLATE application/rss+xml
# AddOutputFilterByType DEFLATE application/atom_xml
# AddOutputFilterByType DEFLATE application/x-javascript
# AddOutputFilterByType DEFLATE application/x-httpd-php
</Directory>

設定が完了したら、httpd.confを保存。
設定を反映させるため、Apacheを再起動します。

[root@ ~]# service httpd restart

それでは、GTmetrixで再計測。

Enable gzip compression

A評価に改善されました!C評価(73点)→A評価(100点)の改善なので、文句なし。
相当な効果があったようです。
Webサイト表示速度の総合評価も確認してみると、
Webサイト評価

「Page Speed Grade」「YSlow Grade」共にB評価でワンランク改善されました。
キャッシュの設定と圧縮の有効化だけで、かなりの効果がありました。
ここまで来たら、A評価を狙いたい!

⑤Keep Aliveを有効にする

最後にEnable Keep-Aliveという項目を改善します。
この項目は、サーバーとクライアント間の接続を開いたままにすることによってサーバーのパフォーマンスを向上させましょうということ。
ただし、Keep Aliveは接続終了の判定が行いにくいため、クライアントが終了したにも関わらず接続が維持されたままにより、逆にパフォーマンスを低下させてしまう恐れもありますので注意。
通常の設定では、Keep AliveをOnに設定しておくものですが、今回はWebサーバー構築時に設定をできていなかったようです・・・。

それでは、httpd.confを開いてKeepAlive Offというコードを見つけてください。

#
# KeepAlive: Whether or not to allow persistent connections (more than
# one request per connection). Set to "Off" to deactivate.
#
KeepAlive Off

このKeepAliveのOffをOnに編集してください。

KeepAlive On

以上で編集完了ですので、ファイルを保存してください。
設定を反映させるため、Apacheを再起動します。

[root@ ~]# service httpd restart

さて、GTmetrixで再計測をしてみます。

Webサイト評価

「Page Speed Grade」がA評価に改善されました。
3項目の設定で、ある程度の改善が出来ましたので、一度これで良しとします。
「YSlow Grade」のA評価は次回に。

拡張子.htmlでphpを動作させる

.htaccessの設定により拡張子.htmlファイルでphpを動作させることが可能です。
phpを動かしたい.htmlファイルと同じディレクトリ、または上層にある.htaccessに下記内容を記述してください。

AddHandler php5-script .php .html

以上の設定で、拡張子.htmlファイル内のphpが動作します。

上記の設定で動作しない場合

下記の設定を試してください。

設定方法①

AddType application/x-httpd-php .php .html

設定方法②

AddHandler application/x-httpd-php .php .html

設定方法③

AddHandler php-script .php .html 

おそらくphp5環境下だと一番上の方法で動作すると思います。
また、拡張子.htmでphpを動作させたい場合は、.html部分を.htmに変えるか、.htmlの後に追記してください。
当たり前ですが、.htaccessが有効になっていないと設定が反映されないので、忘れずに。

【補足】さくらのレンタルサーバの場合

上記は、さくらのVPSで設定する方法でしたが、さくらのレンタルサーバでは設定方法が異なります。
さくらインターネットでVPSとレンタルサーバの両方を使用されている方も多いと思いますので、補足として記載します。

まず、FTPからレンタルサーバにアクセスします。
共有ディレクトリの「/usr/local/php/●.●/bin(/home/rs/php/●.●/bin)」の中にある「php-cgi」を、FTPのバイナリ転送モードでダウンロードします。
(※●.●はPHPバージョン名。自分がレンタルサーバで使用している同じPHPバージョンからファイルをダウンロードします。)

ダウンロードした「php-cgi」は、設定したい環境のドキュメントルートにバイナリ転送モードでアップロードし、ファイル名を「php-cgi」から「php.cgi」にリネームします。また、パーミション(属性)を705または755に設定します。

次に、「php.cgi」を設置したドキュメントルートにある「.htaccess」に下記内容を追記します。(.htaccessがない場合は新規作成する)

Action myphp-script /php.cgi
AddHandler myphp-script .php .html

以上の設定で、さくらのレンタルサーバで拡張子.htmlをphpとして動作させることができます。
気をつける点としては、FTPでダウンロード・アップロードする際に、転送モードをバイナリモードにすることです。

【参考サイト】
.htaccessで、拡張子.htmlのままPHPを実行する方法 | 海外SEO情報ブログ

.htaccessを有効にする

.htaccessを利用することで、Webサイトへのアクセス制限やbasic認証を行うことができます。
Webサーバーの構築では、.htaccessを有効にする設定にしていないので、このページで説明します。

①/var/www/htmlディレクトリ配下にある.htaccessを有効にする

SSHでVPSサーバーにアクセスし、root権限でhttpd.confを編集します。

[root@ ~]# vi /etc/httpd/conf/httpd.conf (httpd設定ファイルの編集)

.htaccessを有効にするには、AllowOverride None の記述部分を AllowOverride All に変更します。

<Directory "/var/www/html">

#
# Possible values for the Options directive are "None", "All",
# or any combination of:
#   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
#
# Note that "MultiViews" must be named *explicitly* --- "Options All"
# doesn't give it to you.
#
# The Options directive is both complicated and important.  Please see
# http://httpd.apache.org/docs/2.2/mod/core.html#options
# for more information.
#
    Options FollowSymLinks

#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
#   Options FileInfo AuthConfig Limit
#
    AllowOverride All (NoneをAllに変更)

#
# Controls who can get stuff from this server.
#
    Order allow,deny
    Allow from all

</Directory>

変更が完了したら、ファイルを保存してください。
設定を有効にするため、Apacheを再起動。

[root@ ~]# service httpd restart (Apacheの再起動)

以上の設定で、/var/www/htmlディレクトリ配下にある.htaccessは有効になります。

②その他のディレクトリ配下にある.htaccessを有効にする

上記の設定では、/var/www/htmlディレクトリ配下にある.htaccessを有効にしましたが、/var/www/htmlディレクトリ以外でウェブコンテンツを設定している場合には、そのディレクトリで.htaccessが有効になるよう設定をします。
例として、/var/www/example.netディレクトリ配下の.htaccessを有効にします。

SSHでVPSサーバーにアクセスし、root権限でhttpd.confを編集します。

[root@ ~]# vi /etc/httpd/conf/httpd.conf (httpd設定ファイルの編集)

httpd.confのファイル末尾に下記3行を追加します。
“ “内のディレクトリ指定部分は適時変更してください。

<Directory "/var/www/example.net">
AllowOverride All
Order allow,deny
Allow from all
</Directory>

追加したら、ファイルを保存。
設定を有効にするため、Apacheを再起動。

[root@ ~]# service httpd restart (Apacheの再起動)

以上で設定したディレクトリ配下にある.htaccessが有効になります。

③.htaccessの利用について

.htaccessの設定内容によっては、ウェブサイトに支障をきたす可能性がありますので、.htaccessの設定は注意して行ってください。