ウェブページの表示速度改善方法1

グーグルアドセンスの管理画面でスコアカードが表示されるようになり、ウェブページの読み込み時間のパフォーマンスで問題が確認できるようになりました。GZIP圧縮やCache-ControlやJavaScriptの非同期読み込みやJPG画像の更なる圧縮やVary HTTPヘッダーの使用や文字セットの使用などでページの表示速度を改善しました。

グーグルアドセンスの管理画面のスコアカードのページ速度の提案はわかりにくくて、具体的に何をしたら良いのかがわからないものです。私の速度改善方法が参考になりましたら幸いです。

ウェブページの表示速度は速ければいくら速くてもかまいません。速いサイトはグーグルの評価が上がる可能性があるそうです。ページの表示速度改善方法2も参考にしてください。

GZIP圧縮、HTTPキャッシュヘッダの設定、非同期読み込み

GZIP圧縮とHTTPキャッシュヘッダの設定については別ページで解説しています。JavaScriptの非同期読み込みについても別にページを作成していますので、そちらを参照してください。

JPG、JPEG、PNG画像の更なる圧縮

JPG、JPEG画像は元々非可逆圧縮ですが、更にデーターを小さくすることができます。これは「圧縮情報の最適化」と「撮影情報の削除」をすることで、画質を落とすことなく、更に圧縮できるからです。

私はcarmineというフリーソフトを使ってホームページ内のJPG、JPEG全画像を更に圧縮してみました。ファイルサイズは更に2~20%程小さくなるようです。

PNGについては、PNGGauntletというソフトを使って更に圧縮してみました。画質を全く劣化させないでファイルサイズのみを縮小してくれます。この動作は、画像ファイル内のコメントなどの画質とは関係のない情報を取り除いたり、カラーパレットの整理や圧縮方法の変更で画質に関する部分を最適化しているようです。

GIF画像の更なる圧縮1

ペイントなどで作成されたイラストなどを GIFファイル楽天として保存した場合は、比較的きれいな割にファイルサイズが小さくて良いのですが、更に画質を落とさずにファイルを圧縮できることがあります。(ロスレス圧縮、可逆圧縮)

私は、ホームページ・ビルダーに付属した、ウェブアートデザイナーというソフトの「Web用保存ウィザード」を使って処理するだけで更に1割程度圧縮できました。この段階では特に色数を減らす必要はありませんでした。

その後、GIF画像も更に圧縮できるというサイトで更に圧縮しました。GIF画像で使っている色の数を減らすことができますので、ロスレス圧縮もできますし、非可逆ですが更にファイルを圧縮することも可能でした。ファイル処理の順番はこの順番でないとうまくいきません。逆の順番ではあまり小さくならないことがありました。

GIF画像の更なる圧縮2

GIFeq というソフトを使うと、フォルダー内のGIFファイルだけを簡単に更に圧縮できます。これは、静止画のGIFやアニメーションGIFのファイルサイズを減量できるソフトです。

画像へ埋め込まれたコメントの削除やインターレース表示用データを削除したり、アニメーションの差分最適化などによりファイルサイズを減らす仕組みのようです。複数のGIF画像のファイルサイズをまとめて減量できてとても便利に使えます。

これを使っても、ページスピートインサイトでは更に圧縮しなさいと言われることがあります。これはページスピートインサイトのバグでしょうか。

Vary HTTPヘッダーを使用してページの表示速度を改善

Vary HTTPヘッダーというのは、ブラウザからサーバーにアクセスがあると、サーバーがデータと一緒に返す「Vary」という名前のHTTPヘッダーのことです。この内容はユーザーエージェントやgzipやクッキーの状態などによって変わることがあります。

ページの表示速度の改善には、一般的に前記のようにキャッシュを利用しています。このキャッシュを適切に処理する為に、ユーザーエージェントやgzipやクッキーの状態でキャッシュを使い分けているのがVary HTTPヘッダーなのです。

ユーザーエージェントでコンテンツを出し分けているのなら、これをうまく高速で動作させる為には、htaccessファイルに次の一行を追加します。

Header set Vary User-Agent

もし、ブラウザのgzipなどの受信形式とユーザーエージェントでコンテンツやキャッシュなどが変化するのなら、htaccessファイルに次の行を追加します。

Header set Vary Accept-Encoding,User-Agent

HTTPヘッダーに文字セットを使用してページの表示速度を改善

グーグルアドセンスのスコアカードに、HTTPヘッダーに文字セットを使用してページの表示速度を改善するようにとの提案がありますが、実際には何をしたら良いのかよくわかりません。

私はネットの情報を見て色々と実験してみました。しかし、サーバーエラーになったり、JavaScriptの広告が消えたりして、ことごとくうまくいきませんでした。結論として次のような記述をhtaccessに記述したらうまくいきました。これは文字セットがシフトJISの場合の例です。

このことは、文字化けの問題よりも、デフォルトで文字コードが設定されていると、ブラウザが高速でアクセスできるという事だと思います。

AddDefaultCharset Shift_JIS

英語のページには次のようにUTF-8の設定をしました。

AddDefaultCharset utf-8

ETagの設定

ETagは、ブラウザのキャッシュ管理に使われるようです。Entityタグ(ETags)はブラウザがキャッシュしたものと、サーバ上のオリジナルが一致しているかどうかを決定するためのもののようです。よくわかりませんが、htaccessファイルに次のように設定しました。

<Files ~ "\.(css|js|html?|xml|gz|php)$">
FileETag MTime Size
</Files>
<Files ~ "\.(gif|jpe?g|png|flv|mp4|ico)$">
FileETag None
</Files>

PHPの高速化キャッシュモジュールAPC

2013年6月頃にコアサーバーのPHPの高速化キャッシュモジュールAPCについての変更があったようです。標準で有効（ON）になっていたのを、標準で無効（OFF）として、手動で有効にできる形に変更したとのことです。手動で有効（ON）にする場合、高速化させたいホームページ内の.htaccessにて、下記を記述してくださいとのことです。

php_flag apc.cache_by_default On

これを設定すると更に速くなったように感じました。

結果

グーグルアナリティクスのサイトの速度や他のスピードチェッカーでチェックすると、キャッシュや圧縮やその他の項目でも問題ないようになっていました。ページの表示速度は約1.5~3秒以内になりました。