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ディレクターが最低限知っておきたい著作権の3つのポイント

    昨年2015年に東京オリンピックのエンブレム問題が大きな騒動になったように、他人の作品を無断で流用し…

  2. 月間ユーザー1億人以上のサービスも。Webディレクターが知ってお…

    世界中で10億人以上の人に利用されているSNS。Webサイトも分野を問わずSNSからの流入が増えてお…

  3. Webサイトのプランニングに活用できる「マインドマップ」(前編)…

    ユーザービリティ向上やコンバージョン率改善など、Webサイト制作の目的はさまざまです。目的を実現する…

  4. 日常的に使うPhotoshopだからこそ知っておきたい、初期設定…

    画像のレタッチやリサイズなど、Webディレクター業務でも何かと使う機会の多いPhotoshop。Ph…

  5. フラットデザイン化に使える無料アイコンのダウンロードサイト

    ページの表示速度アップやレスポンシブ対応、アピールしたい要素を強調できることなど、さまざまなメリット…

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

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

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

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

  8. Webサイトに動画コンテンツを取り入れるメリット&実際の制作費

    Youtubeをはじめとした動画配信プラットフォームが普及し、スマートフォンで場所・時間を問わず動画…

PICKUP

PAGE TOP