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

ウェブページの読み込み時間のパフォーマンスは速ければ速い程ネットユーザーにとっては良いのです。私はCSSファイルの内部化やJSファイルの内部化やHTTPプロトコルの省略や小さい画像のBase64変換やDirectoryIndexを適切に記述するなどしてページの表示速度を改善しました。

サーバーの写真

グーグルのページ速度の提案は難解な為に、わかりにくくて、具体的に何をしたら良いのかがわからないものです。

私の実行した速度改善方法が参考になりましたら幸いです。ページの速度改善方法1も参考にしてください。

CSSファイルのインライン化(内部化)

メインのスタイルシートCSSはメンテナンスの観点から外部CSSとしていました。これを可能な限り小さくして、これをインライン化することで、ファイルの読み込みが一つ減り、高速化につながります。下記のようにインクルードして取り込みました。

<style>
<!--
<?php include(***/style.css); ?>
-->
</style>

モバイルCSSファイルがある場合についても同様に、外部CSSを内部CSSにすることでページの表示速度を改善できます。

私の場合は、レスポンシブウエブデザインですが、モバイルでも見やすいようにCSSを追加で設定しています。これも内部化してみました。

JSファイルの内部化

JavaScriptのファイルを外部ファイルにして読み込むのは、ウェブページを作成する時、よく使う手法です。それはメンテナンスが楽になるからです。しかし、ページスピードの観点からは良くない場合もあります。

JavaScriptファイルが小さい場合は、直接メインのHTMLファイルに記述した方がページの表示速度は速くなります。不必要なJSファイルの中身を精査して、更に圧縮してから、下記のようにPHPでインクルードすると便利です。

<script>
<?php include(***/sample.js); ?>
</script>

CSSファイルやJSファイルの圧縮方法

CSSファイルやJSファイルの圧縮とは、ファイルの容量を小さくすることです。圧縮するには、コメントや改行や無駄なスペースを消しています。

私はOnline JavaScript/CSS/HTML Compressorというサイトを利用して圧縮してみました。各オプションは何も設定せず、デフォルトのままで使いました。

その結果、ファイルサイズは約1割小さくなりました。また、改行が無くなったので、ソース上では1行になりブラウザで見たソースが見難いということはありません。

小さい画像はBase64に変換してページを高速化する

ファイルの内部化と同じ考えで、小さい画像も、Base64にして内部化することで、HTTPリクエストを減らしてページのスピードを速くします。

特に小さい画像は画像が多ければ多いほど、読み込む回数が増えてページが遅くなります。画像を文字列にして、HTMLに埋め込んでしまえばHTTPリクエスト回数を減らすことができるため、ページを高速化できるのです。

しかし、画像を Base64 に変換すると、ファイルサイズが約3割増加します。このため、小さな画像だけを Base64 に変換すると効果的です。

その方法は、「Base64 変換」などでインターネットで検索すると、変換ツールが色々と表示されます。それを使って画像を文字列に変換してください。

HTMLへの実装方法

実際にHTMLに書き込むのは、とても簡単です。HTMLで画像を挿入している img タグの src 部分を次のように書き換えます。

<img src="Base64 に変換した文字列" alt="タイトル" />

後は、サーバーにアップロードするだけです。

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エラーとなるので、HTML5で記述しました。

結果

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