え！？わずか1秒でCSS / JavaScriptファイルを圧縮！Sublime Text3にYUI Compressorを入れてみた。 | ザ・サイベース
ファイルを圧縮するってどういうこと？サイトの読み込み速度などを意識するようになると、ファイルを圧縮したくなると思います。 圧縮というとなんだか難しそうですが、要はCSSやJavaScriptなどで、人がコードを見やすいように使用した、改行やタブ、半角スペースなどによるインデント、コメントなどを削除して少しでもファイルサイズを減らして、ブラウザの読み込み速度を向上させようとする作業のことです。 圧縮前のファイル名が「common.css」だとすると、圧縮後は「common.min.css」といった名称でファイル名を付けることが多いですね。 ファイルの圧縮ってどうやってやるの？これまでは、ファイルの圧縮を行う際はインターネット上のサービスを使用して、ブラウザ経由で圧縮することをよくやっていました。 http://ganquan.info/yui/ http://refresh-sf.com/
Gruntで効率化！ リリース前の面倒な作業をまとめる | MONSTER DIVE
納品時には、少しでもページを速く表示させるために、CSS・JS・画像の圧縮などファイルを最適化し、Webサイトを高速化することは必要不可欠です。 ファイルを圧縮するには、アプリを使ったりWebサービスを使ってもできますが、一つ一つ行うと時間がかかってしまいます。作業漏れの原因にもなります。 そこで、納品前の面倒な作業をGruntでまとめて行いたいと思います。Gruntを使うことによって、Sass(SCSS)のコンパイルやHTMLの量産を簡単に出来たりするので、とても便利なツールです。事前にGruntのインストールと、SassとCompassのインストールを行ってから、ぜひ以下の手順でお試しください。 今回、Gruntでやることは下記の通りです。 HTMLファイルの圧縮 CSSファイルの圧縮 画像ファイルの圧縮 JSファイル圧縮 不要なファイル・フォルダの削除(Comassでスプライト画像を
無料でJPG、PNG、GIF、SVG画像を圧縮して小さくしてくれる「Compressor」
アカウント登録不要・無料で利用でき、手元にある画像ファイルをブラウザでアップロードするだけで瞬時にファイルサイズを小さくしてくれるサービスが「Compressor.io」です。 Compressor.io - optimize and compress your images and photos http://compressor.io/ ページを表示させるとまず目に飛び込んでくるのがこのカメレオンの画像。画像の上には白いバーが表示されており、マウスで左右に動かすことで圧縮前と後での画質変化を確認することができます。 画像の下には、圧縮前後のデータ容量の変化と圧縮率が表示されています。 このサイトで対応しているのはJPEG、PNG、GIF、SVGの4形式。圧縮時には、元の画質をキープできる可逆圧縮と、圧縮率重視の非可逆圧縮を選択することが可能となっています。 使い方の説明はこれだけ。あと
データを圧縮転送してChromeを高速化する拡張機能「Data Compression Proxy」
AndroidとiOS版のChromeにはSPDYプロトコルですべてのHTTPトラフィックをGoogleのサーバーに転送することで、データ使用量を最大で50％削減してウェブブラウジングを高速化できる「データ圧縮と帯域幅管理機能」が備わっています。この帯域幅管理機能をPC版Chromeでも使えるようにして高速ブラウジングを実現するChrome拡張機能が「Data Compression Proxy」です。 Chrome ウェブストア - Data Compression Proxy https://chrome.google.com/webstore/detail/data-compression-proxy/ajfiodhbiellfpcjjedhmmmpeeaebmep インストールするには「無料」をクリック。 「追加」をクリック。 すると画面右上に緑色のマークが出現しており、アイコンを
JavaSriptとCSSの結合/圧縮ツール14
Robert Nyman氏が自身のブログにおいてTools for concatenating and minifying CSS and JavaScript files in different development environmentsのタイトルのもと、JavaScriptとCSSを結合して単一のファイルにまとめたり、それぞれをミニファイするための14のツールを紹介している。WebサイトやWebアプリケーション開発に利用できるツールのまとめとして興味深い。紹介されているツールは次のとおり。 PHP Minify JavaScriptおよびCSSのミニファイ、結合、Gzip圧縮、キャッシュ対応 Combine JavaScriptおよびCSSの圧縮、複数URL結合機能 SmartOptimizer オンデマンドでミニファイ、圧縮、キャッシュ、結合、組み込みを提供するためのライブラ
WordPress高速化ー「画像編」最適化サービス「Smush.it」やそのプラグインを利用
WordPressの高速化はなかなか手ごわいです。このブログのパフォーマンを大きく損なっている画像の重さを改善すべく、画像の最適化（圧縮）サービス「Smush.it」やそのWordpressのプラグイン「Smush.it」を利用してみます。 画像の最適化（圧縮）サービス「Smush.it」定評のある画像の最適化サービは様々ありますが、PNG画像を圧縮するのに適切と言われているYahoo!の「Smush.it」を利用してみました。 手順Yahoo! Smush.itへ行って、以下の画像をアップロードしてみます。 手順は以下ののように「UPLOADER」をクリックして「Select Files and Smushu」をクリックして画像をアップロードします。 結果は以下のように、約１４％の圧縮に成功。 それがこちらです。画質の劣化はほとんど感じることがありません。 このブログのページ[・・・am
web高速化のためのコーダー向け圧縮ツール・サービスまとめ | バシャログ。
ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点を当てて圧縮ツール・サービスをまとめてみます。 Javascriptの圧縮 /packer/ http://dean.edwards.name/packer/ とってもシンプルな圧縮サービス。オプションで難読化することもできます。 JavascriptとCSSの圧縮 Compress javascript and css http://compressor.ebiene.de/ こちらもシンプルな
ウェブサイトをgzip圧縮で高速化する
ウェブサイトをgzip圧縮を使って高速化するカスタマイズを紹介します。当サイトでもgzip圧縮を利用しています。 １．gzip圧縮によるウェブサイト高速化のイメージ gzip圧縮によるウェブサイト高速化のイメージをご覧ください。 （クリックすれば拡大します） クライアント（ブラウザ）から、あるウェブサイトの「index.html」にアクセスしたとき、リクエストを受信したサーバでは、HTTPリクエストの分析や、「index.html」の圧縮ファイル「index.html.gz」の有無などをチェックして、圧縮ファイルが返却可能であれば「index.html.gz」を返却します。 返却できない場合は通常の「index.html」をレスポンスで返却します。 圧縮ファイルを返却できれば、データの転送量を減らすことができるので、これによりウェブサイトの高速化につながります。 圧縮ファイルは受信したブラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webフォントをできるだけ軽く表示する圧縮の.htaccessや遅延ロードJSを作ってみた | 初代編集長ブログ―安田英久