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

ウェブページの読み込み時間のパフォーマンスは速ければ速い程ネットユーザーにとっては良いのです。私はCSSファイルの内部化やJSファイルの内部化やHTTPプロトコルの省略や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 Compression Using YUI Compressorというサイトを利用して圧縮してみました。各オプションは何も設定せず、デフォルトのままで使いました。

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

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秒以内になりました。