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

グーグルアドセンスの管理画面でスコアカードが表示されるようになり、ウェブページの読み込み時間のパフォーマンスで問題が指摘されていました。GZIP圧縮やCache-ControlやJavaScriptの非同期読み込みやJPG画像の更なる圧縮やVary HTTPヘッダーの使用や文字セットの使用でページの表示速度を改善し、「提案はもうありません(28件)」との表示だけになりました。

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

ウェブページの表示速度は速ければいくら速くてもかまいません。速いサイトはグーグルの評価が上がる可能性があるそうですので、今後もページの表示速度の改善に努めていきたいものです。

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

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

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

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

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

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

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

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

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

これをうまく高速で動作させる為には、htaccessファイルに次の一行を追加します。

Header set Vary Accept-Encoding

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

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

モバイルCSSのインライン化

モバイルCSSはメンテナンスの観点から外部CSSとしていました。これはファイルサイズが小さく、これをインライン化することで、ファイルの読み込みが一つ減り、高速化につながります。

私の場合、次のようにPHPを使って、スマートフォンの時のみヘッドタグ内でCSSを上書きしています。

<?php if (is_mobile()) { ?>
<style>
<!--
#main {max-width:480px;margin:0}
#side {max-width:480px;position:relative;top:0;left:0;margin:0}
img {max-width:100%;height:auto;margin:0}
.f_size_s {font-size:1em}
.f_size_ss {font-size:1em}
.hp_name {margin:0;padding:0;white-space:normal}
.sp_lh {line-height:2.0}
-->
</style>
<?php } ?>

モバイルCSSに限らず、メインのCSSファイルサイズが小さい場合は、外部CSSを内部CSSにすることでページの表示速度を改善することができます。

HTTPプロトコル(スキーム)を省略する

下記のようにリンク先などの外部ファイルのURLからhttp:やhttps:などのHTTPプロトコルを省略するとHTMLコードを短くできます。特にリンク集やメニュー部分などでこれを省略するとファイルサイズをかなり小さくできます。この場合、プロトコルが省略されているとそのページの表示に使われているHTTPプロトコルが自動的に適用されますのでページの表示には全く問題ありません。

<link rel="icon" href="//sample.jp/favicon.ico" />

<a href="//sample.jp/hogehoge.html">hoge</a>

もし、http:でページを表示しているのなら、参照先のURLにも自動的にhttp:が使われます。https:でページを表示しているのなら、参照先のURLにも自動的にhttps:が使われます。このため、http:とhttps:の両方を同時に省略することはできません。

DirectoryIndexを適切に記述する

URLの最後が「/」になっていると、サーバーはインデックスファイルが省略されていると判断して、index.html ファイルなどを探します。また、次のようにhtaccessファイルでDirectoryIndex が設定されていると index.html 以外のファイルを呼び出すこともできます。

DirectoryIndex index.html index.htm index.shtml index.php top.html

サーバーは DirectoryIndex に記述されているファイルを前から順番に探していって見つかればそのファイルを表示します。PHPファイルしか無いサイトの場合なら例えば次のようにします。

DirectoryIndex index.php index.html index.htm

このようにPHP拡張子のものを最初に書いた方が速く表示されます。また、必要の無いファイルは指定しない方が良いでしょう。

その他色々な対策

アクセス解析とカウンターを設置していたのが、ページの表示速度をかなり遅くしていたのでこれを削除しました。今後のアクセス解析はグーグルのアナリティクスだけにします。

楽天モーションウィジェットの広告はページの表示速度を極端に遅くしていました。そこでこれを廃止して、普通の広告に変えました。でもクリック数は極端には落ちないようです。

グーグルアドセンスについては、非同期コードを設定してみました。スマートフォンでの表示がかなり速くなるようです。今はベータ版ですが今後の正式版に期待します。でも、HTML5以外ではW3Cエラーの出まくりです。

結果

グーグルアナリティクスのサイトの速度や他のスピードチェッカーでチェックすると、キャッシュや圧縮やその他の項目でも問題ないようになっていました。「提案はもうありません(28件)」とだけ表示されていました。ページの表示速度は約1.5～3秒以内になりました。