従来、メンテナンス性とキャッシュの効果で、スタイルシート(CSS)は外部ファイルにするのが一般的でした。CSSファイルサイズがあまり大きくない場合は、CSSを内部ファイルに(インライン化)してやる方がページの表示速度の改善に効果があることがあります。は速ければいくら速くてもかまいません。表示の速いサイトはグーグルの評価が上がる可能性があるそうですので、今後もページの表示速度の改善に努めていきたいものです。表示の高速化にはHTTPリクエストを最小限にする応答時間の大部分はコンポーネントをダウンロードする時間に費やされています。ファイル数を減らすだけでも速度アップになります。複数のファイルがある場合はこれを1つにすると効果があります。CSSファイルでは複数のファイルを1つにします。ファイルサイズが大きくない場合は外部CSSファイルを無くして内部CSSに(インライン化)するのも効果があります。スマートフォンでは効果が大きいものです。私は従来、モバイルCSSについてはメンテナンスの観点から外部CSSとしていました。これは特にファイルサイズが小さく、これを内部化することで、ファイルの読み込みが一つ減り、高速化につながります。次のようにPHPを使って、スマートフォンの時のみヘッドタグ内でCSSを上書きしています。?>--></style>is_mobile関数の定義is_mobile関数は次のようになります。ユーザーエージェントでスマートフォンかどうかをPHPで判定しています。この例では、アンドロイドタブレット端末はスマートフォンと判定されずに除外されます。Googlebot-Mobileのユーザーエージェントには、「iPhone」という文字列があり、このままで、グーグルの検索やアドセンスでも問題無いと思います。$_SERVER['HTTP_USER_AGENT']);}?>このPHPスクリプトはヘッドタグ内の先頭付近またはそれ以前に置いてください。外部ファイルにしてインクルードしてもかまいません。考えると、私の場合は、完全にレスポンシブウエブデザインなので、モバイル端末だけCSSを別にする必要もなさそうです。アドセンス広告ユニットもレスポンシブ対応にすれば、モバイル用のCSSも必要ありません。メインのCSSファイルも内部化する私の場合、メインのCSSファイルサイズは2kB以下でありこれも内部化してみました。内部化すると、普通はファイルのメンテナンスの問題が発生します。普通は各ファイルにCSSがある訳で、これを変更する時は全てのファイルの変更が必要です。ファイルのメンテナンスの問題は、ファイルを小さくした外部CSSファイルをPHPでインクルードしたので全く問題はありませんが、今度はホームページ編集ソフトのCSS適用の問題が発生することが考えられました。これは次のようにして解決しました。次のように、スタイルシートの読み込みの行を残して、PHPコマンドでこの行を取り込まないようにしました。「$_SERVER['DOCUMENT_ROOT']==''」は必ず「偽」となり、これらのスクリプトは無いのと等しくなります。ホームページ編集ソフトはPHPが理解できないのでスタイルシートは有効となります。?>CSSファイルの圧縮CSSファイルの圧縮とは、CSSファイルの容量を小さくすることです。圧縮するとコメントや改行や無駄なスペースを消しています。Compressorというサイトを利用して圧縮してみました。各オプションは何も設定せず、デフォルトのままで使いました。その結果、ファイルサイズは約1割小さくなりました。改行が無くなったので、ソース上では1行になりブラウザで見たソースが見難いということはありません。CSSのエラーもありません。今後も更にCSSファイルの最適化(小型化)に取り組んで行きたいと思っています。メインのCSSファイルをインクルードして取り込むメインのCSSファイルは圧縮しただけなので、スタイルシートとしての体裁を整える為に、次のようにしてファイルをインクルードしました。HTML5で記述しています。インクルードされるファイルの拡張子は何でもかまいません。?>--></style>結果グーグルもページの表示スピードには神経を使っているようで、グーグル検索のページもCSSを内部化しているようです。Insightsでの評価も上がりました。モバイルに対して効果があったようです。:2022/10/02。