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

several_css_file_to_one.gif

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つにまとめてしまうのが良いと思います。

several_css_file_to_one.gif

  • 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;
?>
【ハサミいらず・作業効率UP】使用しているときには、ケーブルの直径に応じて手で引き裂くことができます。はさみを見つける手間を省き、作業効率を格段に向上させることができ ます 【自由に調整・ケーブルが傷みにくい】ケーブルバンドは、柔らかい素材を採用し、ミシン目加工付き、必要に応じた長さを手でちぎれます。ケーブルなどにもピッタリ巻き付き、コードやケーブルなどが傷みにくいです 【ナイロン・耐久性に優れ】ナイロンの特徴は、摩擦や摩耗に強いだけでなく耐久性にも強い点です。このケーブルバンドは上質なナイロン...
【フリーカット・簡単・しっかり】コード まとめる 結束バンド ケーブルバンド マジックテープ バンド ケーブルタイケーブル まとめる ケーブル バンド マジックテープ ケーブル結束バンド ケーブル 纏める 配線まとめ 結束テープ 結束バンド 繰り返し使用可能 (【10M】黒+青, ちぎれるタイプ) #1
【フリーカット・簡単・しっかり】コード まとめる 結束バンド ケーブルバンド マジックテープ バンド ケーブルタイケーブル まとめる ケーブル バンド マジックテープ ケーブル結束バンド ケーブル 纏める 配線まとめ 結束テープ 結束バンド 繰り返し使用可能 (【10M】黒+青, ちぎれるタイプ) #2
【フリーカット・簡単・しっかり】コード まとめる 結束バンド ケーブルバンド マジックテープ バンド ケーブルタイケーブル まとめる ケーブル バンド マジックテープ ケーブル結束バンド ケーブル 纏める 配線まとめ 結束テープ 結束バンド 繰り返し使用可能 (【10M】黒+青, ちぎれるタイプ) #3
【フリーカット・簡単・しっかり】コード まとめる 結束バンド ケーブルバンド マジックテープ バンド ケーブルタイケーブル まとめる ケーブル バンド マジックテープ ケーブル結束バンド ケーブル 纏める 配線まとめ 結束テープ 結束バンド 繰り返し使用可能 (【10M】黒+青, ちぎれるタイプ) #4
【フリーカット・簡単・しっかり】コード まとめる 結束バンド ケーブルバンド マジックテープ バンド ケーブルタイケーブル まとめる ケーブル バンド マジックテープ ケーブル結束バンド ケーブル 纏める 配線まとめ 結束テープ 結束バンド 繰り返し使用可能 (【10M】黒+青, ちぎれるタイプ) #5
【フリーカット・簡単・しっかり】コード まとめる 結束バンド ケーブルバンド マジックテープ バンド ケーブルタイケーブル まとめる ケーブル バンド マジックテープ ケーブル結束バンド ケーブル 纏める 配線まとめ 結束テープ 結束バンド 繰り返し使用可能 (【10M】黒+青, ちぎれるタイプ)

只今、カスタマーの評価を取得しています。

Amazon プライム対象 ￥749 (2025-04-15 13:17 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
【ハサミいらず・作業効率UP】使用しているときには、ケーブルの直径に応じて手で引き裂くことができます。はさみを見つける手間を省き、作業効率を格段に向上させることができ ます 【自由に調整・ケーブルが傷みにくい】ケーブルバンドは、柔らかい素材を採用し、ミシン目加工付き、必要に応じた長さを手でちぎれます。ケーブルなどにもピッタリ巻き付き、コードやケーブルなどが傷みにくいです 【ナイロン・耐久性に優れ】ナイロンの特徴は、摩擦や摩耗に強いだけでなく耐久性にも強い点です。このケーブルバンドは上質なナイロン... もっと読む

只今、イメージセットを取得中です。

読む・聞く、まとめる、言葉にする

只今、カスタマーの評価を取得しています。

￥1,725 (2025-04-15 13:17 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
【配線収納大正解】ケーブルクリップは引っ付けるだけで、散らかったケーブルをすっきりまとめることができます。デスクやカバンの中、ごちゃごちゃになった配線をきちんとまとめた後、散らばりにくくなります。これにより、日常の小さなストレスから解放され、快適な環境で作業や生活を送ることができます 【上品な配色・シンプル&カラフル】シンプルな黒白系セットとビビットな6色セットあり、さまざまなスタイルに対応し、どちらも生活を彩ることができます。黒白系のセットは、洗練された印象を与え、モダンでシックな雰囲気を醸し...
ケーブルクリップ コードクリップ マグネット 【利便性が高い・多機能実現】 ケーブル クリップ コード ケーブルホルダー マグネット ケーブルクリップ 配線整理グッズ ケーブル 収納 固定 まとめる 束ねる 巻き取り USB type-c きつく締める 紛失防止 配線まとめ 車 机 卓上 適用 繰り返し使用可能 6個入り (虹色・Mサイズ) #1
ケーブルクリップ コードクリップ マグネット 【利便性が高い・多機能実現】 ケーブル クリップ コード ケーブルホルダー マグネット ケーブルクリップ 配線整理グッズ ケーブル 収納 固定 まとめる 束ねる 巻き取り USB type-c きつく締める 紛失防止 配線まとめ 車 机 卓上 適用 繰り返し使用可能 6個入り (虹色・Mサイズ) #2
ケーブルクリップ コードクリップ マグネット 【利便性が高い・多機能実現】 ケーブル クリップ コード ケーブルホルダー マグネット ケーブルクリップ 配線整理グッズ ケーブル 収納 固定 まとめる 束ねる 巻き取り USB type-c きつく締める 紛失防止 配線まとめ 車 机 卓上 適用 繰り返し使用可能 6個入り (虹色・Mサイズ) #3
ケーブルクリップ コードクリップ マグネット 【利便性が高い・多機能実現】 ケーブル クリップ コード ケーブルホルダー マグネット ケーブルクリップ 配線整理グッズ ケーブル 収納 固定 まとめる 束ねる 巻き取り USB type-c きつく締める 紛失防止 配線まとめ 車 机 卓上 適用 繰り返し使用可能 6個入り (虹色・Mサイズ) #4
ケーブルクリップ コードクリップ マグネット 【利便性が高い・多機能実現】 ケーブル クリップ コード ケーブルホルダー マグネット ケーブルクリップ 配線整理グッズ ケーブル 収納 固定 まとめる 束ねる 巻き取り USB type-c きつく締める 紛失防止 配線まとめ 車 机 卓上 適用 繰り返し使用可能 6個入り (虹色・Mサイズ) #5
ケーブルクリップ コードクリップ マグネット 【利便性が高い・多機能実現】 ケーブル クリップ コード ケーブルホルダー マグネット ケーブルクリップ 配線整理グッズ ケーブル 収納 固定 まとめる 束ねる 巻き取り USB type-c きつく締める 紛失防止 配線まとめ 車 机 卓上 適用 繰り返し使用可能 6個入り (虹色・Mサイズ)

只今、カスタマーの評価を取得しています。

Amazon プライム対象 ￥749 (￥125 / Count) (2025-04-15 13:17 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
【配線収納大正解】ケーブルクリップは引っ付けるだけで、散らかったケーブルをすっきりまとめることができます。デスクやカバンの中、ごちゃごちゃになった配線をきちんとまとめた後、散らばりにくくなります。これにより、日常の小さなストレスから解放され、快適な環境で作業や生活を送ることができます 【上品な配色・シンプル&カラフル】シンプルな黒白系セットとビビットな6色セットあり、さまざまなスタイルに対応し、どちらも生活を彩ることができます。黒白系のセットは、洗練された印象を与え、モダンでシックな雰囲気を醸し... もっと読む

このページをシェアする

あわせて読みたい

2 件のコメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

2010-04-15

  1. トップ
  2. IT
  3. ITサービス
  4. 検索エンジン
  5. Google
  6. 複数のCSSファイルをサーバーでまとめてSEO対策しよう
Amazon プライム対象