CSS/JavaScriptの圧縮ツール7選【メリットと使い方も紹介】
投稿日:2021/08/18 (更新日:)
- CSS/JavaScriptの圧縮ツールを活用するメリット
- CSS/JavaScriptの圧縮ツール7選
- CSS/JavaScript圧縮ツールの使い方
- CSS/JavaScriptだけでなくhtmlの圧縮しよう
WordPressの表示速度を改善させための施策として「ソースコードの圧縮」は重要です。
2021年時点、CSS・JavaScriptなどのソースコードを圧縮する方法として最も人気があるのは「圧縮ツールを活用する」ことです。
そんな圧縮ツールを活用して自分(企業)サイトのソースコードを圧縮するときには、
- そもそもCSS/JavaScriptの圧縮ツールを使うメリットって何?
- CSS/JavaScriptのソースコードを圧縮する際におすすめのサイトを知りたい
- CSS/JavaScript圧縮サイトの具体的な使い方を知りたい
などのお悩みが発生するはずです。
今回のコラム記事では、ソースコード圧縮を活用してWordPressの表示速度を改善したい方に向けて、CSS/JavaScriptを活用するメリット、CSS/JavaScriptの圧縮ツール7選、圧縮ツールの使い方について解説をしています。
本コラム記事では、画像を使用したツール紹介や使い方を解説していますので、CSS/JavaScriptの圧縮ツールについて知識が少ない方も安心してご覧いただけます。
CSS/JavaScriptの圧縮ツールを活用するメリット
CSS/JavaScriptの圧縮ツールを活用するメリットは「簡単にソースコードを圧縮する」ことです。
手動でソースコードを圧縮しようとすると、多くの時間が必要となります。
しかし、本コラム記事で紹介しているソースコードの圧縮ツールを活用すると、数分でソースコードを圧縮する事ができます。
注意点
ソースコードの圧縮ツールを使用すると、予期せぬエラーが発生する場合があります。
確率でいうと、エラーが起きることは限りなくないなのですが、万が一に備え、ソースコード圧縮ツールを活用する際には、元のソースコードのバックアップは必ず行うようにしましょう。
CSS/JavaScriptの圧縮ツール7選
CSS/JavaScript圧縮ツールとして人気のあるものをまとめました。
- CSS Minifier
- Closure Stylesheets
- Format CSS Online
- JS Minifier
- CSS&JavaScriptCompressor
- Online JavaScript/CSS/HTML Compresor
- jsLex
この中で、ご自身に合うツールを活用するようにしてみてください。
各ツールの詳細を解説していきます。
CSS Minify
ソースコードの圧縮ツール1つ目は『CSS Minify』です。
CSS Minifyは、スタイルシート(いわゆるCSS)を自動圧縮してくれるツールです。
ボックス内にソースコードを貼り付け「Minify」ボタンをクリックすると、自動的に改行やコメントを削除してくれます。
Closure Stylesheets
ソースコードの圧縮ツール2つ目は『Closure Stylesheets』です。
Closure Stylesheetsは、Googleが提供しているスタイルシート(CSS)の圧縮ツールです。
先程紹介した機能(コメントを削除、改行削除)に加えて、文法の確認、変数定義、クラス名の短縮など様々な圧縮を行ってくれます。
他のツールのようにただ単に圧縮するのではなく、その他の圧縮ポイントまで見付けてくれる所が最大のポイントです。
使用するのには少し難易度が高いのですが、ソースコード圧縮を本格的に行いたい方は挑戦してみてください。
Format CSS Online
ソースコードの圧縮ツール3つ目は『Format CSS Online』です。
このツールでは、項目によって細かく圧縮の仕方を変えることができます。
他のツールに比べて、簡単に難易度の高い設定を行うことができるので、圧縮を細部までこだわりたい方におすすめです。
JS Minifier
ソースコードの圧縮ツール4つ目は『JS Minifier』です。
先程のCSS圧縮ツールとして紹介したCSS Minifyと同じ製作者が開発しています。
圧縮したいコードをボックスに貼り付け、Minifyボタンをクリックするだけで簡単に圧縮できます。
ツールの操作に自信がない方はこちらのツールをおすすめします。
CSS&JavaScript Compressor
ソースコードの圧縮ツール5つ目は『CSS&JavaScript Compressor』です。
このツールの特徴は、圧縮する前のファイルサイズと圧縮後のファイルサイズを比較してくれる点です。
また、CSS/JavaScriptファイルに対応していますので、一気にファイルを圧縮したい方はこのツールを活用しましょう。
Online JavaScript/CSS/HTML Compresor
ソースコードの圧縮ツール6つ目は『Online JavaScript/CSS/HTML Compresor』です。
このツールでは、CSS/JavaScriptだけでなくHTMLも圧縮することができます。
また、gzip形式のダウンロード方法もあるので、ファイルをしっかりと保管したい方にこのツールはおすすめです。
jsLex
ソースコードの圧縮ツール7つ目は『jsLex』です。
jsと書かれていますが、CSSにも対応しています。
このツールでは、Eclipse(エクリプス)にあるプラグインを使って圧縮を行っていきます。
Eclipseを利用している方は、jsLexでソースコードを圧縮させましょう。
ここまで、ソースコード(HTML/CSS/JavaScript)の圧縮に使うことができるツールを7つ紹介してきました。
どのツールも素晴らしいので、個人の目的や使いやすさなどを考慮して選択しましょう。
CSS/JavaScript圧縮ツールの使い方
今回は『CSS Minify』と『JS Minifier』の2つのツールを使った圧縮方法を解説していきます。
使い方1:CSS Minifyで圧縮する方法
CSS Minifyで圧縮する手順は下記の通りです。
- まずは圧縮したいCSSソースコードを準備します
- ソースコードをサイトに貼り付ける
- Minify(圧縮する)をクリックする
- CSSコードが圧縮される
たったこれだけでCSS Minifyの使い方は完了です。
実際に圧縮した際の画像は下記の通りです。
使い方2:JS Minifierで圧縮する方法
JS Minifierで圧縮する手順は、先ほどのCSS Minifyと同様の手順です。
JS Minifierを使用する際の注意点
JavaScriptの圧縮はエラーを起こしやすいです。
そのため、圧縮する前に必ずサイトのバックアップを行っておきましょう。
80行書かれたJavaScriptも圧縮すると15行程度になります。
CSS/JavaScriptだけでなくhtmlの圧縮しよう
CSS/JavaScript圧縮ツール・使い方について詳しく解説してきました。
サイトのソースコードにあるCSS/JavaScriptを圧縮するメリットは、表示速度を高速化してくれるところです。
今回ご紹介したCSS/JavaScriptの圧縮ツールを活用して、サイトの表示速度を改善させましょう。
ただし、CSS/JavaScriptの圧縮ツールを使用する前には、必ずバックアップをとっておき、何かトラブルが起きた場合に元のファイルに戻せるようにしておきましょう。
また、WordPressでサイト構築をしている場合は「Autoptimize」というプラグインを使用すると、CSS/JavaScriptだけでなくHTMLなどのソースコードも圧縮できます(詳しくは以下の関連記事をご覧ください)。