ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

HTMLやCSS、JavaScript、画像を圧縮して表示速度をアップさせる

HTMLや画像、CSS、JavaScriptなどのファイルを圧縮して表示速度を挙げるためのオンラインツールや、アプリケーションです。

ウェブサイトの表示速度を向上させる簡単な方法として、画像の圧縮が定番でしたが、HTMLやCSS、JavaScriptなどのファイルも圧縮させて表示速度を向上させます。

Gruntを使う方法もありますが、今回はオンラインツールや、プラグイン、アプリケーションなどを誰でも簡単にファイルを圧縮させる方法をご紹介します。

CSSファイルの圧縮

CSSの改行やインデント、メモなどを自動で削除して、ファイルサイズを圧縮します。
CSSの圧縮には「CSS Compressor」がお薦めです。

圧縮率を4段階で設定でき、圧縮された状態やファイルサイズなども画面上で表示してくれます。

使い方は、CSSコードをコピペして「Compress」ボタンを押すだけ。後は圧縮レベルを変更したり、オプションを変更したりしてお好みのCSSに圧縮します。

CSS-Compressor

オプションでショートハンドの設定や、タイムスタンプの記述も可能です。

CSS Compressor

JavaScriptの圧縮

CSS同様にJavaScriptの改行やインデント、結合などを自動的におこなってくれます。

CSS CompressorのJavaScriptバージョン「JavaScript Compressor」がお薦めです。使い方は「CSS Compressor」と同じです。

JavaScript-Compressor

CSSとは異なり、圧縮によりJavaScriptが正常に動作しないこともあるので、圧縮と動作確認をしながらお試しください。

JavaScript Compressor

HTMLの圧縮

CSS、JavaScript同様にHTMLの改行や空白改行、インデントを削除することでファイルサイズを圧縮できます。

WordPressのHTMLを圧縮する方法

プラグイン「Autoptimize」を使って圧縮します。AutoptimizeはCSSや、JavaScriptの単純圧縮も可能です。

Autoptimize

Autoptimizeの使い方

設定は簡単で、チェックを入れるだけです。

htmlのコメントを残す場合は「Keep HTML Code」にチェックを入れてください。
JavaScript、CSSも圧縮する場合は、JavaScript、CSSにもチェックを入れてください。

設定後には「Save Changes and Empty Cache」ボタンを押してください。

autoptimize

ページの表示が崩れたり、JavaScriptの動作がおかしい場合

JavaScript、CSSの圧縮にチェックを入れた場合、表示が崩れたり、動作がおかしくなることがあります。
その場合は、CSSとJavaScriptの圧縮チェックを外すと正常に表示されます。

Movable TypeのHTMLを圧縮する方法

プラグイン「compress modifier」を使います。空白、改行を3段階のレベルで削除できます。
Movable Typeは空白改行が大量に書きだされるので必須のプラグインです。

compress modifier

compress modifierの使い方

ダウンロードしたプラグインをプラグインディレクトリにアップロードして、有効化してください。

モディファイア「compress」をテンプレートの圧縮したい箇所に記述します。
ページ全体を圧縮することもできますし、フッター箇所だけを圧縮するなどの部分的な圧縮も可能です。

圧縮レベルは3段階で「compress=”1″」(1~3を指定)を使って圧縮レベルを指定します。
ページ全体をレベル2で圧縮する場合は下記になります。

<mt:Unless compress="2">

//ここにHTMLコード

</mt:unless>

読み込むモジュールを圧縮することもできます。
読み込んだモジュールを圧縮する場合は下記になります。

<$mt:Include module="モジュール名" compress="3" $>

モジュール化したヘッダー、フッターのみを圧縮したい場合などに使えます。

オンラインツールでHTMLを圧縮

オンラインでHTMLを圧縮する場合は日本語も対応している「Compress My Code」がお薦めです。

Compress My Code

HTMLコードをコピペして、Compressボタンを押すだけです。
オプションでコメントを残すこともできます。

Compression_M

JPG画像ファイルの圧縮

画像ファイルが大量に圧縮する場合は、ローカルで圧縮した方が効率的です。
JPG画像の圧縮にはフリーのアプリケーション「Caesium(セシウム)」がお薦めです。

Windows、Macバージョンもあります。

caesium_compressed

画像の品質(圧縮率)や、圧縮率のプレビュー、サイズの変更、PngからJpgへのファイル変換の他、設定でExifなどのメタデータを削除することも可能です。

操作も簡単で、ファイルをドラッグアンドドロップして、品質と出力先を設定して「圧縮開始」ボタンを押すだけです。

Caesium

PNG画像ファイルの圧縮

Pngファイルの圧縮にはフリーのアプリケーション「PNG Gauntlet」がお薦めです。

Windows、Macバージョンもあります。

pnggauntlet

PNGの圧縮率を7段階で調整できます。圧縮率を高めると動作が重くなりますが約50%ほどの圧縮も可能です。

PNG Gauntlet

Windowsの場合は「NET Framework 4」のインストールが必要になります。ほとんどのWindowsにはインストールされていると思います。

ロッシー圧縮(非可逆圧縮)、ロスレス圧縮(可逆圧縮)とは?

画像の圧縮に限らず、動画や音楽ファイルの圧縮形式には、可逆圧縮と非可逆圧縮があります。

ロッシー圧縮(非可逆圧縮)とは

画像ファイルを劣化させることで、ファイルサイズを小さくする圧縮方法です。

圧縮率が高くなるほどファイルサイズは小さくなりますが画像は劣化するので、劣化が目立たない圧縮率で画像を圧縮させます。そもそもJpgファイル自体が圧縮されたファイルです。

PhotoShopのウェブ用の画像ファイル出力は非可逆圧縮での出力になります。音楽ではmp3やWMAなどが非可逆圧縮になります。

ロスレス圧縮(可逆圧縮)とは

画像ファイルを劣化させること無くファイルサイズを圧縮する方法です。圧縮サイズは非可逆圧縮には劣りますが、画像の劣化がほぼ無いのが特徴です。

PNGファイルは可逆圧縮方式の画像ファイルになります。音楽ではFLACなどが可逆圧縮になります。

WordPressのプラグインで画像ファイルを圧縮する

WordPressのロスレス圧縮のプラグインとしては「EWWW Image Optimizer」と「TinyPNG」のどちらかがお薦めです。

EWWW Image Optimizer

メディア追加の際に画像を圧縮してくれます。既にアップロードした画像ファイルに関しても圧縮してくれます。

昔は画像ファイル追加する時に時間がかかることがありましたが、現在はスムーズに画像ファイルを追加することができます。

EWWW Image Optimizer

TinyPNG

オンラインのPNG圧縮サービスとして人気があり、PhotoShopのプラグインも有料ですがリリースされています。

プラグインを無料で利用する場合は1ヶ月500枚までの制限があります。一枚の画像でもサムネイルも生成されるので、画像をよく使うウェブサイトや更新頻度が高いウェブサイトは気をつけてください。

TinyPing wordpress Pulgin

Movable Typeの機能、プラグインで画像ファイルを圧縮する

Movable Typeの場合、サーバーのモジュールで「GD」または「Image Magic」「Imager」「NetPBM」などのイメージドライバーがインストールされていれば環境変数の設定でJpg、Pngを非可逆圧縮できます。

Movable Typeの環境変数で画像を圧縮する方法

「mt-config.cgi」の最後あたりに下記のコードを記述します。

ImageQualityJpeg 50
ImageQualityPng 9

ImageQualityJpeg

Jpg画像の圧縮率を「0~100」で設定できます。

ImageQualityPng

Png画像の圧縮率を「0~9」で設定できます。

MovabletypeはGDとImage Magicがインストールされている場合は「Image Magic」が初期設定値になります。

GDの方がメモリの消費量が少なく、圧縮率が高ければImageMagicの圧縮した画像とほぼ同様のクオリティから、GDの利用をお薦めします。
イメージドライバーでGDを使う場合は「mt-config.cgi」に下記のコードを記述します。

ImageDriver GD

プラグイン「ImageUploadUtility」で画像を圧縮する

Movable Typeの画像プラグインでは「ImageUploadUtility」がお薦めですが、商用利用の場合は有料となっています。

プラグインが動作するには「GD」または「Image Magic」どちらかのイメージドライバーがサーバーにインストールされている必要があります。

プラグインの機能には、画像のサイズ変更や、圧縮率、Exif情報の削除、日本語ファイル名を半角英数に自動変更など、必要な機能が揃っています。

ImageUploadUtility

ウェブページの表示速度を調べる

HTML、CSS、JavaScript、画像の圧縮ができたら、ウェブページの表示速度を調べてください。

PageSpeed Insights

PageSpeed-Insights

Googleが提供している表示速度を計測するツールです。
計測後に最適化箇所のアドバイスと、最適化された画像やCSS、JavaScriptの提供までしてくれます。

PageSpeed Insights

GTmetrix

定番のページ表示速度計測サイトです。
計測後にどの部分がボトルネックになっているかをグラフで表示してくれます。

GTmetrix

GTmetrix

Pingdom

Pingdomが提供しているウェブページの表示速度計測ツールです。
計測履歴が残るので、表示速度改善の効果が分かります。

Website speed test

Pingdom

Site24x7

Site24x7が提供しているページ表示速度ツールです。
計測ロケーションを変更することができます。ロケーションには「Tokyo-JP」もあります。

Website-Monitoring

Site24x7

今回は簡単なHTML圧縮、画像圧縮を使って、ウェブページの表示速度を改善する方法をご紹介しました。

表示計測すると数値が表示されるので、ついついのめり込んで表示速度に取り組んでしまいますね。

新しい記事

東京のWEB制作会社イッティ