CSS内部化でページの表示速度を改善

従来、メンテナンス性とキャッシュの効果で、スタイルシート(CSS)は外部ファイルにするのが一般的でした。しかし、CSSファイルサイズがあまり大きくない場合は、CSSを内部ファイルに(インライン化)してやる方がページの表示速度の改善に効果があることがあります。

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

表示の高速化にはHTTPリクエストを最小限にする

W3Cに合格したCSSの画像

応答時間の大部分はコンポーネントをダウンロードする時間に費やされています。ファイル数を減らすだけでも速度アップになります。

複数のファイルがある場合はこれを1つにすると効果があります。CSSファイルでは複数のファイルを1つにします。

また、ファイルサイズが大きくない場合は外部CSSファイルを無くして内部CSSに(インライン化)するのも効果があります。特にスマートフォンでは効果が大きいものです。

モバイルCSSの内部化

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

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

<style>
<!--
<?php if(is_mobile()) { ?>
#main {max-width:640px;margin:0}
#side {max-width:640px;position:relative;top:0;left:0;margin:0}
.sp_lh {line-height:1.8}
<?php } ?>
-->
</style>

is_mobile関数の定義

is_mobile関数は次のようになります。ユーザーエージェントでスマートフォンかどうかをPHPで判定しています。この例では、アンドロイドタブレット端末はスマートフォンと判定されずに除外されます。

スマートフォン版 Googlebot-Mobileのユーザーエージェントには、「iPhone」という文字列があり、このままで、グーグルの検索やアドセンスでも問題無いと思います。

<?php
function is_mobile () {
$useragents = array('iPhone','iPod','Android.*Mob','Opera.*Mini','blackberry','Windows.*Phone');
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
?>

このPHPスクリプトはヘッドタグ内の先頭付近またはそれ以前に置いてください。もちろん外部ファイルにしてインクルードしてもかまいません。

よく考えると、私の場合は、完全にレスポンシブウエブデザインなので、モバイル端末だけCSSを別にする必要もなさそうです。アドセンス広告ユニットもレスポンシブ対応にすれば、モバイル用のCSSも必要ありません。

メインのCSSファイルも内部化する

私の場合、メインのCSSファイルサイズは2kB以下でありこれも内部化してみました。内部化すると、普通はファイルのメンテナンスの問題が発生します。つまり、普通は各ファイルにCSSがある訳で、これを変更する時は全てのファイルの変更が必要です。

ファイルのメンテナンスの問題は、ファイルを小さくした外部CSSファイルをPHPでインクルードしたので全く問題はありませんが、今度はホームページ編集ソフトのCSS適用の問題が発生することが考えられました。これは次のようにして解決しました。

次のように、スタイルシートの読み込みの行を残して、PHPコマンドでこの行を取り込まないようにしました。「$_SERVER['DOCUMENT_ROOT']==''」は必ず「偽」となり、これらのスクリプトは無いのと等しくなります。しかし、ホームページ編集ソフトはPHPが理解できないのでスタイルシートは有効となります。

<?php if ($_SERVER['DOCUMENT_ROOT']=='') { ?>
<link rel="stylesheet" href="/***/style.css" media="all" />
<?php } ?>

CSSファイルの圧縮

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

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

その結果、ファイルサイズは約1割小さくなりました。また、改行が無くなったので、ソース上では1行になりブラウザで見たソースが見難いということはありません。CSSのエラーもありません。今後も更にCSSファイルの最適化(小型化)に取り組んで行きたいと思っています。

メインのCSSファイルをインクルードして取り込む

メインのCSSファイルは圧縮しただけなので、スタイルシートとしての体裁を整える為に、次のようにしてファイルをインクルードしました。HTML5で記述しています。インクルードされるファイルの拡張子は何でもかまいません。

<style>
<!--
<?php include($_SERVER['DOCUMENT_ROOT'].'/***/style.css'); ?>
-->
</style>

結果

グーグルもページの表示スピードには神経を使っているようで、グーグル検索のページもCSSを内部化しているようです。グーグルアドセンスのスコアカードのPageSpeed Insightsでの評価も上がりました。特にモバイルに対して効果があったようです。