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

seo
ウェブページのスタイルや画面動作を設計する際に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% 以上の軽量化