このブログを検索

2015/07/19

cssの最適化

adsenseのスコアカードで、cssの最適化がされていないと指摘された。

改善策として、cssの一部をインライン、つまりhtmlファイルの中に直接書いて、
css全体はあとから読むようにする、ということが書いてあった。

そのときは、以下のようにhtmlファイルのheadの部分に、cssファイルをリンクさせていた。

<head>
<link rel="stylesheet" type="text/css" href="http://example.com/css/mycss.css">
</head>


別ファイルを読みに行くのだから時間がかかるだろうとは思うが、
その内容をhtmlの中に直接書くのはイヤだ。

adsenseが言うには、全部ではなくて、初期表示に必要な一部だけ、ということなのだが、
どれが必要でどれが必要でないか判断がつかない。


とりあえず、cssをキャッシュするように、apacheを設定してみた。
apacheで、mod_expireというモジュールを有効にする。

/etc/httpd/conf/httpd.conf

で、下記の行がコメントアウトされていなければよい。

LoadModule expires_module modules/mod_expires.so

そして、下記のように、各ファイルについて有効期限を設定する。
ここに設定した期限が経過するまでは、クライアントはサーバに直接アクセスせず、
キャッシュを参照するそうだ。


<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType text/css "access plus 12 months"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access 1 years"
ExpiresDefault "access plus 1 days"
</IfModule>

私のサイトは画像を一切使っていない。

今回指摘されたのも、cssについてだけだ。

とりあえず、12 monthsで設定してみた。ここがあまり短いと、警告は消えない。



そして、htmlファイルのheadに記載しているcssファイルへのリンクを、
bodyの後ろ、もっというと、</html>の前に持ってくる。

これをやると、cssを読む前にコンテンツを読み込み、cssを読んだら内容が反映される。

部分的なインライン記述をしなくても、adsenseの警告はこれで消えた。



上記のExpireなんたらの記述は.htaccessに書く方法もあるらしいのだが、
基本的に.htaccessは使わないほうがよさそうなので、httpd.confに書いた。