[SEO][表示高速化] CSSやJavascriptを圧縮してページ表示速度を向上させよう

ウェブページのスタイルや画面動作を設計する際にCSS/javascriptファイルを使います。通常、開発・保守しやすいようにコメントを挿入したり、見やすさを重視するために余白(インデント)や改行を挿入したりすることがあります。ただし、改行、余白、コメントなどはファイルサイズを肥大化させる要因にもなります。

CSS/Javascriptファイルのダウンロードに時間がかかりますと、ブラウザでのページ表示に影響がでますし、googleなどのクローラーによる評価も下がるケースも有ります。CSSやJavascriptを圧縮してページ表示速度を向上させる「SEO対策のMinify CS」Sをここで紹介します。

CSSやJavascriptを圧縮
CSSやJavascriptを圧縮するには、圧縮ツールを使うことが多いです。下記ツールを使えば、かなり高い精度でMinify CSSを実現することが可能です。

CSS Compressor: CSS Compressor

$ 提供先：　csscompressor.com
$ 対象： 　 CSS
$ 圧縮情報
　Highest： ファイルサイズを圧縮；改行を削除
High： 　　可読性は残しつつ、ファイルサイズを圧縮 ；セレクタごとに改行する
Standard： 可読性とファイルサイズの中間設定；プロパティごとに改行する
Low： 可読性重視；コメントを削除
$ 検証結果
Highest： 41% 以上
High： 40% 以上
Standard： 32% 以上

Javascript Compressor: YUI Compressor

$ 提供先：　yuicompressor
$ 対象： 　 CSS, Javascript
$ 圧縮情報
Standard： ファイルサイズを圧縮；改行を削除；
$ 検証結果
Standard： CSSは35% 以上；Javascriptは70% 以上の軽量化

Javascript Compressor: JavaScript Minifier

$ 提供先：　http://javascript-minifier.com/
$ 対象： 　 Javascript
$ 圧縮情報
Standard： ファイルサイズを圧縮；改行を削除；
$ 検証結果
Standard： Javascriptは60% 以上の軽量化

 - SEO, W3 CSS, Javascript, Minify CSS, SEO, Web Analytics, ウェブ分析