こうして改善、Google のスコア (5) CSSを圧縮して表示速度改善 - ホームページ・Web制作全般 - 専門家プロファイル

会員登録
ヘルプ
井上 みやび子
すぐ使える株式会社　代表取締役
東京都
Webエンジニア
専門家プロファイルとは？

詳しい内容を見る

注目の専門家コラムランキングRSS

対象：ホームページ・Web制作

TryCMSのチップス

三井 博康
三井 博康
（Webプロデューサー）

2013年夏季休業のお知らせ（8月12日～16日）

原島 洋
原島 洋
（Webプロデューサー）

Facebookウィルス情報

小菅 太郎
小菅 太郎
（ITコンサルタント）

『遅れてごめんね』－バレンタインの翌日戦略

原島 洋
（Webプロデューサー）

PC・スマホ対応 レスポンシブメールフォームモニタ募集

井上 みやび子
（Webエンジニア）

閲覧数順　2024年12月10日更新

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

注目のキーワード

こうして改善、Google のスコア (5) CSSを圧縮して表示速度改善

- good

  1. 法人・ビジネス
  2. ホームページ・Web制作
  3. ホームページ・Web制作全般
やさしいWebサイト管理 SEO対策

さて前回は圧縮機能を利用してページの表示速度を上げる方法をご紹介しました。

これまでご紹介した表示高速化の方法はサーバの設定を行えば簡単に効果が上がるものでしたが、今回からは中級編に入り、少し手の込んだ方法をご紹介します。今回はCSSの軽量化の方法です。

CSSの軽量化とは？

jQuery などのプラグインを使ったときに、xxx.min.css というファイルが付いてくることがありますよね。これが軽量化されたCSSです。CSSファイルが圧縮されたもので、ホームページアクセス時の転送容量を減らして表示の速度を改善する効果があります。

具体的には例えば、CSSファイルを書く場合は、通常は以下のように適当な空白や改行を入れながら書きますね。

/*header*/
#header{
    border-top: 1px #cccccc solid;
    background:url(../images/header_bg.jpg) no-repeat left bottom;
    padding-left: 2px;
}

軽量化は、この改行や空白を取り除いて、なるべくファイルを小さくします（※）。軽量化のための変換ツールを使うと「#cccccc」は省略表記「#ccc」に変換してくれるなど、徹底的に余計な記載を省いてくれます。

※まだ決まった訳語が無いようですので、「圧縮」と言ってもいいかもしれません。ただし、前回ご紹介したWebサーバの設定での圧縮とは別のものです。

試しに上記の CSS を軽量化ツールで変換すると、下記のようになります。

#header{border-top:1px #ccc solid;background:url(../images/header_bg.jpg) no-repeat left bottom;padding-left:2px}

CSSの軽量化の効果

Googleのスコア改善という意味では、CSS軽量化を行っても必ずしも Google のスコアが上がらない場合もあるようです。

ただそれでも圧縮と同じようにファイルの転送容量が減りますので、ユーザにとっての快適さという点で、モバイルユーザが多いサイトでは試してみる価値があると思います。特に複数ファイルにCSSが分かれてしまっている場合、軽量化のついでにこれをまとめれば、サーバへのアクセス回数が減る事で、表示速度がより大きく改善します。

もし Google のページ速度測定ツール PageInsights でこの点の警告が出ていたのであれば、これはスコアアップも期待できます。

なお、軽量化の有無にかかわらず、CSSへのリンクやページ内CSS（<style> タグ）はページ先頭の<head>-</head>内に書くのが表示高速化のための原則です。もしページ末尾にまとめて記載していたり、<body> が始まった後に記載があった場合は移動してみて下さい。

CSS軽量化ツールの使い方

ここで言う「軽量化」は、英語では「minify」と言います。これで検索するとたくさんツールがヒットしますが、使いやすいものを一つご紹介します。定評のある、Yahoo! の軽量化プログラムをベースに使っているサイトです。

CSS軽量化ツールサイトにアクセス

下記のURLにアクセスして下さい。

Online JavaScript/CSS Compression Using YUI Compressor
http://refresh-sf.com/yui/

CSSファイルの選択

「File(s)」タブをクリックした後、ボタンからWebサイトのCSSファイルを選び、「Compress」ボタンを押します。

圧縮ファイルのダウンロード

圧縮の結果が表示されますので、「Download Compressed File」を右クリックしてファイルを「(元のファイル名)-min.css」として保存して下さい。

軽量化後のCSSの切替え

公開しているホームページのCSSを圧縮した軽量化CSSに切り替えるには、ホームページの全HTMLファイルを編集して下さい。HTMLファイル内に<link>タグで「(元のファイル名).css」を指定している部分があると思いますので、これを保存した「(元のファイル名)-min.css」に変更して下さい。

Dreamweaverなどのウェブオーサリングツールを使って簡単に一括変換できればよいのですが、もしたくさんのHTMLファイルをいちいち変更するのが面倒であれば、以下のような .htaccess ファイルを作ってCSSファイルと同じディレクトリにアップロードしておくと、「(元のファイル名)-min.css」があるときだけ、自動的にそちらのファイルが使われます。

軽量化CSSに切り替えるための.htaccess設定

#---ここから----
<IfModule mod_rewrite.c>
RewriteEngine on

#CSSファイルのあるディレクトリに .htaccess を置き、
#「/css/」の部分はサーバルートからのディレクト名に変更。
RewriteBase /css/
#「/user/htdocs/css/」部分はサーバホスト内の絶対パスに変更。
#絶対パスはレンタルサーバ会社などに問合せて下さい。

RewriteCond %{REQUEST_URI} \.css$
RewriteCond %{REQUEST_URI} !-min\.css$
RewriteCond /user/htdocs/css/$1-min.css -f
RewriteRule ^(.*)\.css $1-min.css [L]
</IfModule>
#---ここまで----
 
<< こうして改善、Google のスコア… こうして改善、Google のスコア… >>

このコラムに類似したコラム

CMSでらくらくホームページ作成 三井 博康 - Webプロデューサー（2013/12/05 16:04）

アメブロのサイドバーのタイトル文字を簡単に英語表示にする方法 小菅 太郎 - ITコンサルタント（2013/09/02 22:13）

Web フォントとは？ 井上 みやび子 - Webエンジニア（2013/04/01 08:00）

レスポンシブ Web デザインとは？ 井上 みやび子 - Webエンジニア（2013/03/21 08:00）

ホームページ作成のための参考書 井上 みやび子 - Webエンジニア（2013/03/04 09:00）