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サイトにおけるバナーの重要性に変わりはありません。…

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

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

  3. キービジュアル・広告制作に役立てたい、絵画・アート作品のコレクシ…

    Webサイトのキービジュアルや広告のクリエイティブを制作する際は、歴史的な名画やアート作品に目を向け…

  4. ランディングページ制作に携わるなら知っておきたい、行動心理学の4…

    訪問したユーザーを納得させ、具体的なアクションに導くことが求められるランディングページ制作。Webデ…

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

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

  6. 有力キュレーションマガジンも導入。スマホの動画視聴にマッチしたタ…

    バーチャルリアリティ(VR)やオーグメンテッドリアリティ(AR)と並び、新しい動画コンテンツのトレン…

  7. クリック率19倍UPの事例も。Facebookも活用しているパー…

    閲覧履歴や購入履歴をベースとして、1人1人のユーザーにあわせたコンテンツを配信するパーソナライズは動…

  8. 画像のクオリティにこだわりたい場合の選択肢。意外と知られていない…

    Webサイトやソーシャルメディアで使われる画像の多くは、JPEGやGIF形式です。その一方、自分で写…

PICKUP

PAGE TOP