menu

ファイルをコンパクトにして表示速度をUP。JavaScript/CSSの圧縮ツール4選

制作

スマートフォンやタブレットの普及によってコミュニケーションのスピードが早まるなか、Webページに表示速度は以前にも増してますます重要になりつつあります。コンテンツの質で勝負するコンテンツマーケティングでも、画像が表示されるのが遅かったり、なかなかスクロールできなかったりすれば、ユーザーはストレスを感じて離脱してしまい、コンテンツ制作に掛けた時間・コストも水の泡です。

また現在のGoogleのアルゴリズムでは、ページの表示速度が検索順位の評価基準の1つになっていることが公表されています。Webサイトにより多くのユーザーを集めるためにも、Webページの表示速度の改善は欠かせません。

Webページの表示速度を改善するためには、フラットデザインやレスポンシブデザインを取り入れるのも1つの方法ですが、それと合わせて取り組んでおきたいのがJavaScript/CSSの圧縮です。以下で紹介するツールを使って不要なコードや無駄な改行を削除することによって、ページを構成するファイルがコンパクトになり、読み込むスピードが早くなります。

Online JavaScript/CSS/HTML Compressor
日本語には対応していないものの、非常に簡単に使えるソースコードの圧縮ツールです。任意のソースコードをコピーして「Input」エリアに貼り付けたうえで、右下の「JavaScript」、「CSS」、「HTML」をクリックするだけで、不要なコメントや改行が削除されてソースコードを圧縮することができます。圧縮したコードはそのままダウンロードもできるので、容量を計算したい場合にも役立ちます。

Closure Stylesheets
Googleが提供しているCSSの圧縮ツールです。無駄な改行などを削除してソースコードをコンパクトにできるだけでなく、CSSクラス名の短縮などさまざまな機能が付いているのが特徴です。CSSの文法チェック機能も提供されているので、初心者の方はこのツールを使いながらプログラムを確認することによって、CSSのスキル・知識を身につけることもできるでしょう。

YUI Compressor
世界中で広く利用されているJavaScriptとCSSの圧縮ツールが「YUI Compressor」です。オンライン上で直接圧縮するほか、ダウンロードしてコマンドラインから圧縮を実行することもできます。

CSS Compressor
名前の通りCSSに特化した圧縮ツールです。UIが非常にシンプルで使い勝手が良く、圧縮レベルを「Highest」、「High」、「Standard」、「Low」の4段階から選ぶことができます。

Web制作に関するご依頼、ご相談、お見積はこちら

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

One to Oneマーケティングの成功事例。「ガスト」公式アプリ

2つ一緒に考えるのは間違い‥?UI/UXそれぞれの違い・注意点について

関連記事

  1. Webディレクターなら正しく理解しておきたい、HTML5の4つの…

    2014年10月に勧告され、さまざまなWebサイトで使われているHTML5。国内でも無印良品などHT…

  2. EFO(入力フォーム最適化)に役立つ、無料で使えるjQueryプ…

    ECサイトだけでなく、会員登録やアンケート、問い合わせなど、多くのWebサイトに設置されている入力フ…

  3. よりスピーディに分かりやすく。大手企業2社のインフォグラフィック…

    グラフ、文字、イラストを組み合わせることで、データを視覚化するインフォグラフィック。ビジュアルと数字…

  4. ユーザーに声をヒントにWebサイトを改善。手軽に利用できるアンケ…

    Webサイトの効果を示すデータは大きく2つに分けられます。1つはアクセス数やクリック率(CTR)、コ…

  5. SNSとも相性抜群。心理テスト系コンテンツの3つの特徴・効果とは…

    会員登録や資料請求を目的とする各種ポータルサイトや結婚情報サイト、占いサイトなどでは、ユーザーが手軽…

  6. マルチタスクを効率的に管理。スムーズなプロジェクト進行に活かせる…

    「納期までに間に合わず、実装予定の機能を絞らざるを得なかった‥」、「プロジェクトの進行が滞ったことで…

  7. Webサイトをより洗練された印象に。海外のWebサイトで人気の合…

    「合字」とは2つ以上の文字を組み合わせて1つの文字として表現したもの。例えば、「AND」を「&」と表…

  8. 無料素材とあわせて動画コンテンツ作成に活用したい、無料編集ツール…

    コストを抑えて動画コンテンツの制作・公開するために、動画素材の無料ダウンロードサイトとあわせて使いた…

PICKUP

PAGE TOP