ValueServer ウェブページを高速化する方法

GTmatrixでPage Speed Grade:A(99%) YSlow Grade:A(99%)を獲得することができました。
今回はその方法の一部を公開したいと思います。

PHP高速化キャッシュ APCを有効化する


.htaccess ファイルに php_flag apc.cache_by_default On を追加することによってAPCが有効になります。

WordPressの一部のプラグインと相性が悪いようなので気を付けましょう。

WordPressの一部のプラグインとAPCが相性が悪いそうです。
で、そのプラグインの１つに「wp super cache」も該当するようで、APCをONにするとダメっぽかったです。

「W3 Total Cache」や「Quick cache」は問題なく動作するようです。

専用ネームサーバーを使用する


ValueDomainでドメインを管理している場合は NS11.VALUE-DOMAIN.COM NS12.VALUE-DOMAIN.COM NS13.VALUE-DOMAIN.COM　を使ったほうが高速で安定します。

gzip 圧縮でファイルの転送速度を高速化

自分でファイルを圧縮したファイルをアップロードしておく方法とサーバー側でファイルを圧縮する方法の２通りあります。

自分でファイルをgzip圧縮する方法

  1. JavaScriptやCSSを専用ソフトやOnline JavaScript/CSS Compression Using YUI Compressorなどでgz圧縮する。
  2. gzファイルをサーバーにアップロード
  3. gzファイルが存在する場合にはアクセスされたファイル名.gzを読み込むようにする。以下を「.htaccess」に記述する。
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
<files *.html.gz>
AddType "text/html;charset=utf-8" .gz
</files>
<files *.js.gz>
AddType "text/javascript;charset=utf-8" .gz
</files>
<files *.css.gz>
AddType "text/css" .gz
</files>
AddEncoding x-gzip .gz

サーバー側でファイルをgzip圧縮する方法

サーバーでファイルを圧縮して転送量を削減します。
自分でgzip圧縮ファイルをアップロードしなくて済みますが、サーバーの負担は大きくなります。（サーバーのCPU使用率が高くなる）

<IfModule deflate_module>
<Location />
# NetScape4.x
BrowserMatch ^Mozilla/4 gzip-only-text/html

# NetScape4.06-4.08
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# Internet Explorer
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

# Filter
FilterDeclare Compression CONTENT_SET
FilterProvider Compression DEFLATE resp=Content-Type $text/html
FilterProvider Compression DEFLATE resp=Content-Type $text/xml
FilterProvider Compression DEFLATE resp=Content-Type $text/css
FilterProvider Compression DEFLATE resp=Content-Type $text/plain
FilterProvider Compression DEFLATE resp=Content-Type $image/svg+xml
FilterProvider Compression DEFLATE resp=Content-Type $application/xhtml+xml
FilterProvider Compression DEFLATE resp=Content-Type $application/xml
FilterProvider Compression DEFLATE resp=Content-Type $application/rdf+xml
FilterProvider Compression DEFLATE resp=Content-Type $application/rss+xml
FilterProvider Compression DEFLATE resp=Content-Type $application/atom+xml
FilterProvider Compression DEFLATE resp=Content-Type $text/javascript
FilterProvider Compression DEFLATE resp=Content-Type $application/javascript
FilterProvider Compression DEFLATE resp=Content-Type $application/x-javascript
FilterProvider Compression DEFLATE resp=Content-Type $application/x-font-ttf
FilterProvider Compression DEFLATE resp=Content-Type $application/x-font-otf
FilterProvider Compression DEFLATE resp=Content-Type $font/truetype
FilterProvider Compression DEFLATE resp=Content-Type $font/opentype
FilterChain Compression

</Location>
</IfModule>

[adsense]

ファイルをブラウザにキャッシュさせる

.htaccess にキャッシュの期限を記述をする。
キャッシュを制御する Expires ヘッダを追加して、リソースをブラウザにキャッシュさせ、httpリクエスト の数を減らします。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType text/x-component A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/javascript A31536000
ExpiresByType text/x-js A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/json A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType image/svg+xml A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType application/x-font-ttf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/font-woff A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>

A3600は一時間
A31536000は一年
こちらに各秒数をまとめた一覧があります。
「早見表」すぐわかる1分～100年まで何秒なのか一覧表

キャッシュの有効期間として指定した期間内はブラウザはローカルのキャッシュを読みにいくので、キャッシュ対象にしたファイルや画像などに変更を加えた場合はファイル名を変更しないと、変更が反映されないので注意が必要です。

CSS/Javascript 縮小(minify)してファイルの転送速度を改善

CSSやJavascriptファイルの改行やスペースを無くしたり、複数のファイルを結合するのがminify化です。
minify化することによってファイルサイズを小さくし、結合することによってhttpリクエスト数を減らします。

Online JavaScript/CSS Compression Using YUI Compressorでminify化したファイルを作成することができます。

WordPressを使っている場合はプラグインを使うと便利です。プラグインを使えば元々のファイルに手を加えずに自動でminifyファイルを生成してくれますのでメンテナンス性が高いですし、何らかのエラーが発生してもプラグインを無効化にすれば解決できます。

「W3 Total Cache」や「Head Cleaner」などのプラグインでminfy化できますが、私の一番のおすすめは「Autoptimize」です。

「Autoptimize」はminify化以外の余計な機能がついていないので設定がわかりやすく、Javascriptが動かないなどのエラーも発生しにくいです。
また更新なども比較的頻繁で最新のWordPressにも対応できます。

HTTPレスポンスヘッダにETagを追加する

ETagはブラウザのキャッシュされたコンポーネントと、Webサーバ上のオリジナルが一致しているかどうかを決定するためのHTTPレスポンスヘッダです。
.htaccess ファイルに下記を追加します。 

FileETag MTime Size

ETagを発行しておけば余計なファイルダウンロードがなくなりページ表示が高速化します。

不要な画像の削除・画像ファイルの圧縮

ページの文字数が何千文字になってもファイルの容量はそう増えませんが、ウェブ用に圧縮していない大きな画像ファイルは一枚だけでも数MBになってしまうこともあります。
ウェブページ表示を高速化するならばできるだけ画像を使わないほうが良いですが画像があまりに少ないと見た目が寂しくつまらないサイトになってしまいます。なので

  • 画像ファイルを圧縮
  • CSSで表現可能なものはCSSに置き換える。
  • 小さな画像ファイルを多数使っている場合は「CSS Sprite」を使って結合させる
画像圧縮サイト/ソフト
画像圧縮WordPressプラグイン

WordPressならEWWW Image Optimizerをインストールするのが良いと思います。
WP Smush.itは動作が重くて使いにくいです。

コメントを残すコメントをキャンセル

  3. ValueServer ウェブページを高速化する方法