CSSの統合と縮小とインライン化

公開日： 2015/02/22 CSS SEO WEB制作

またPageSpeed Insights関連です



CSS関連の分析結果に出てくる『コンテンツのレンタリングをブロックしている～』と『CSSの最適化』ですかね

非同期・遅延・統合・最適化・縮小・インライン化などなど方法はいろいろです

僕の場合、古いコンテンツほど複数のCSSファイルを使ってページ表示している傾向にありましたが、ひとつひとつが凄い短いCSSなので、とりあえずこれを僕が知っている限りの最適化処理をして1ファイルにしておき、phpでタブと改行を除去して読み込み用のCSSファイルを作成という形にしました

最適化は基本的な事だけ

今までブラウザが持つCSSのリセット部分は昔どっかから拝借してきたコードなので改めて見直して必要と思われる部分だけの記述にしました

あとは重複するスタイル指定や使ってないセレクタを見つけては削除、見つけては削除…
僕レベルの人間は古いコンテンツのCSS見るとtext-decoration: none;さえ各所にせっせと書いてます

body a{
text-decoration: none;
}
header,nav,article,aside,section,footer,h1,h2,h3{
clear: left;
}

paddingやmarginなどのpx指定も

padding: 20px 0px 20px 0px;
↓
padding: 20px 0px;

このCSSファイルをコンテンツページの読み込み時にタブと改行を除いて縮小する事にしました
毎アクセス処理するのもあれなんで処理済みのsite.cssがない場合のみに

if(!file_exists('site.css')){
$css = file_get_contents('base.css');
$del = array("\t","\n");
$css = str_replace($del,"",$css);
file_put_contents('site.css',$css);
}

これでCSSファイルを更新した際にsite.cssを削除すれば次回アクセス時にsite.cssが作られページ表示のCSSも更新されます
本当は半角スペースも削ろうかと思ったけど、必要な半角スペースもあるので色々やんなくちゃと思い面倒で止めました
クラスタ内最後のスタイル指定後の『;』などは簡単に消せそうですね


複数ファイルを結合したとはいえ僕のコンテンツ達のCSSは短いです
なので非同期や遅延読み込みではなくCSSをHTML内にインランン表示する事にしました

<style type="text/css">'.$css.'</style>

勿論、それではPageSpeed Insightsでの分析結果の評価点が上がるってだけで実際のページ読み込み速度は変わらないと思いますし、CSSファイルのキャッシュを有効にした方がいい筈です
でも、CSSファイルのキャッシュを有効にしても『コンテンツのレンタリングをブロックしている～』のアレは出てくるんですよね、きっと…

加えて、最終的にはphpで出力したHTMLのキャッシュ有効化処理をする予定なのでCSSはHTML内のインライン記述でいいのかなーって考えです



ここ数記事、PageSpeed Insightsの事ばっかり書いてます
実際、何もしないよりはしといた方がいいってぐらいだと思います
元々のコンテンツ内容が本当に充実してて検索エンジンに評価されるべきコンテンツでもない限り、これで劇的にインデックスが良くなってアクセスアップぅ～？とかいう事はないんだろうな、と＞＜

逆に大幅な変更という事で落ちってったりする可能性の方が…


結局、SEOやらSEOって考えるより魅力的なコンテンツを頑張って作った方が10倍早いし、SEOてのはその後の話なんですよね

あばばっ