ページスピードを上げる為にCSS/JSを圧縮してみよう！

WEBサイトの運営者にとって少しでも表示速度を上げるのはユーザー満足度を上げる為に必要な事です。

このページではCSSとJavascriptを圧縮して、ページ速度の改善を行います。

とても簡単にできる方法なので、初心者の方もやってみましょう。

現在の自分のサイトのページスピードを測定するにはGoogleアナリティクスの「行動」->「サイト速度」->「速度の提案」の順にクリックしていけば、モバイルとPCの速度が出てきます。

改善を提案する項目が多数あるのですが、その中には初心者の方には難しい部分も多々あります。

まずは簡単にできるところからはじめていくのがいいでしょう。

当サイトでは74から80へと改善されました。※CSSやJSのボリュームによってはこのような数字にならない事がありますので、あくまで参考までにご確認ください。

CSSを圧縮するサービス

スタイルシートを圧縮する前に圧縮前ファイルをコピペして保存しておきましょう。
下記のサイトから、はじめます。クリックすると別ウィンドウで開きます。
CSS Drive Gallery

CSS Drive Galleryの使い方

Compression mode: (?)
・Light
・Normal
・Super Compact

Comments handling: (?)
・Don’t strip any comments
・Strip ALL comments
・Strip comments at least 4 chars long (NOT counting line breaks within comment)

Compression modeは圧縮の強度です。当サイトでは最大のSuper Compactを選択しています。
Comments handlingはコメントアウトを消す際の条件です。当サイトでは4文字以上でコメントアウトを消すようにしています。
Don’t strip any comments「消さない」
・Strip ALL comments「全て消す」

ご自分の条件に合わせて選択しましょう。

Javascriptを圧縮するサービス

コードをコピーして「minify」ボタンを押すだけです。
下記サイトへアクセスしてください。別ウィンドウで開きます。
javascript-minifier.com

注意点としては、修正前のファイルの保存を忘れずに行いましょう。

さて、いかがでしたか？初心者の方でもできるページ速度の改善方法でした。