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が相性が悪いそうです。
で、そのプラグインの1つに「wp super cache」も該当するようで、APCをONにするとダメっぽかったです。

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

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


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

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

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

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

  1. JavaScriptやCSSを専用ソフトやOnline JavaScript/CSS Compression Using YUI Compressorなどでgz圧縮する。
  2. gzファイルをサーバーにアップロード
  3. gzファイルが存在する場合にはアクセスされたファイル名.gzを読み込むようにする。以下を「.htaccess」に記述する。

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

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

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

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

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 ファイルに下記を追加します。

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

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

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

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

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

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