複数のCSSファイルをサーバーでまとめてSEO対策しよう

Googleがページの表示速度を検索結果ランキング評価の１要素にするという発表で、多くのサイト管理者は速度アップの対策に追われていることと思います。

その対策の一つとして、サーバーとの通信回数を減らすことが挙げられますが、CSSファイルを分けて管理している場合は困ったことになります。

管理側は複数のCSSで効率よく管理したいんですけど...

分かります、分かりますとも。

CSSはご存知の通り、各ブラウザごとで微妙に異なる解釈をします。　そのためCSSファイルをブラウザごとに分けておき、screen.css 内で@import を使って読み込ませると、手軽に切り分けることができますよね。

@charset "utf-8";

@import url("reset.css");
@import url("fonts.css");

/* 基本 */
@import url("base.css");

/* Win IE6以前用 */
@import url("baseIE6.css");

/* Win IE7用 */
@import url("baseIE7.css");

しかし、これだとページを表示する際にブラウザが６回も通信をしないといけなくなり、サイトの表示スピードに影響がでてきちゃうんですね。

サーバー側で合体させてしまう

この問題をうまく両方解決するためには、以下のようにサーバー側で1つにまとめてしまうのが良いと思います。

0．事前にscreen.css を削除しておく
1．screen.css要求時にファイルがなければ screen.php に要求先を変更
2．screen.php 内で必要なCSSファイルを全て読み込み
3．読み込んだCSSの記述を screen.css ファイルを新規作成して書き込み
4．読み込んだCSSの記述を要求元に返す
5．CSSを新しく修正したら screen.css を削除しておく

ポイントは3のscreen.cssの作成ですかね。　こうしておくと、また新たにscreen.cssの要求があったときに、こんどはちゃんとscreen.cssを返すようになります。　負荷もかからないので良いですね。

mod_rewriteを使って要求先をscreen.php に変更

1の対策ですが、mod_rewrite機能を使ってhttpd.conf あるいは .htaccessファイル内に次のように書いて、screen.css ファイルが存在しない場合はscreen.php へ要求先を切り替えるようにします。

.htaccess

RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} .*screen\.css$
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^(.*)screen\.css$ $1screen.php [L]

screen.php 内で必要なCSSを読み込み

要求先のscreen.phpでは次のようにして2、3、4の対策を施します。

screen.php

<?php
header("Content-Type: text/css; charset=utf-8");

$dir = dirname($_SERVER['SCRIPT_FILENAME']);

$str = '';
if (is_file("$dir/reset.css")) $str .= file_get_contents("$dir/reset.css");
if (is_file("$dir/fonts.css")) $str .= file_get_contents("$dir/fonts.css");
if (is_file("$dir/base.css")) $str .= file_get_contents("$dir/base.css");
if (is_file("$dir/baseIE6.css")) $str .= file_get_contents("$dir/baseIE6.css");
if (is_file("$dir/baseIE7.css")) $str .= file_get_contents("$dir/baseIE7.css");

if (!is_file("$dir/screen.css")) @file_put_contents("$dir/screen.css", $str);

echo $str;
?>

このページに関連のある記事はこちら

コメント(2)

metaboy | 2010年5月 1日 10:41 | 返信

こんにちは。素晴らしい！
早速利用させていただき、紹介させて
いただきました！
http://metaboy.blog23.fc2.com/blog-entry-1336.html
ありがとうごじましたっ！

山下こうじからmetaboyへの返信 | 2010年5月 2日 22:17 | 返信

metaboyさん、コメントありがとうございましたっ！
すごい、jsにも適用されてるんですね！　お役に立って良かったです。