3. スマートフォンでもPCでも、Webサイトをコンパクトにするための項目

スマートフォンでもPCでも、Webサイトをコンパクトにするための項目

スマートフォンでもPCでも、Webサイトをコンパクトにするための項目
LTEがでてきてネットは高速になりつつあるけど、まだまだ第3世代の人たちもいるし、CPUの性能もあるので、 スマートフォンでサイトを閲覧するためにも、Webアプリのためにも、 Webサイトの軽量化についてまとめてみました。

HTMLを圧縮・軽量

HTML Compressor – Reduce the size of HTML, CSS, JavaScript, PHP and Smarty code.

CSSを圧縮・軽量

Code Beautifier: CSS Formatter and Optimiser

他のツール

JavaScriptを圧縮・軽量・難読化

Online YUI Compressor

他のツール

jsとcssをgzip圧縮

freefielder.jpさんいわく、ファイルサイズが4分の1以下になるらしい。 システム部分も関わってきますが、かなり縮小されるので、かなり重い場合など、挑戦してみましょう。 JavaScriptファイルをgzip圧縮して設置してみる。 – freefielder.jp

pngを劣化なしに軽量化する

CSSspriteなどのpngを軽くすることができます。 でも大幅に軽量化されるわけではないので、 なるべくgifやjpgなどで元々軽くした方がいいと思います。 OptiPNG Home Page PNGGauntletやmacで使えるImageOptimとかもありますが、OptiPNGが一番使える気がします。 使い方は、フリーランス プログラマー アキのサイトさんが詳しく説明してくれています。 OptiPNG(PNG画像の容量[ファイルサイズ]をを小さくする) インストール ガイド

JPEGMiniでjpgを軽量化する

jpgも軽くできるみたいですね。 JPEGmini – Your Photos on a Diet! Macだと有料版アプリが一番使いやすそうです。 Webサイト版もMacでも無料アプリ版があります。 Webサイト版は1枚ずつアップロードして圧縮されたものをダウンロードする形式みたいです。 サインアップすれば複数枚アップロードできて、尚且つフォルダでまとめることもできました。 Macの無料アプリのLite版は1日回数限定のようです。

Base64エンコード

Base64エンコードし、文字列として画像を認識させます。 ファイルサイズ自体は重くなってしまうのですが、 画像ファイルを用意しないので、HTTPリクエストが減ります。 スマートフォンサイトに活かされそうです。 上記OptiPNGとJPEGMiniなどと併用すればいいかもです。 Base64エンコード化は、こちらのサイトが便利です。

アイコンの文字化

ちょっとしたアイコンを画像ではなく、文字で表示できるようにできます。 単色アイコンならだいたいが網羅されてる気がします。 ほしいアイコンを選択して一括ダウンロードするだけで使えます。

IcoMoon App

最後に

サイトはいくら軽くても悪いことはないですよね。 スマートフォンも性能があがれば不要なことになるのでしょうかね。

Related Posts