注目キーワード
  1. Photoshop
  2. Python
  3. Raspberry Pi
  4. Arduino

Webページ高速化~「Minify」を使ったテキストファイル圧縮方法

Webページ高速化するための方法として今回はテキストファイルの圧縮方法を紹介します。

テキストファイルの容量を小さくすることで表示速度を改善しましょう!

 

テキストファイルの圧縮

Webページ高速化手段の一つとしてテキストファイルを圧縮する方法があります。

テキストファイルを圧縮することでファイル容量を小さくすることができ

Webページ表示速度を速くなります。

 

ファイル圧縮はCSSファイルはもちろん、Javascriptファイル、HTMLファイルなども圧縮可能です。

今回はそんなテキストファイルを簡単に圧縮するMinifyを紹介します。

 

また、当サイトではCSS、Javascriptを最適化してWebページを高速化する方法を公開しているので

下記ページと合わせてご覧ください。

簡単にできるWebページ高速化~Javascript、CSS最適化方法

 

テキストファイルのMinify

Minify0

そもそもMinifyとは何か?を紹介します。

Minify(ミニファイ)とはソースコード内の改行やコメントを無くすことでファイル容量を減らすことです。

 

Minify化するとソースコード自体は見にくくなりますが、ファイル容量を減らすことができるのでWebページの高速化にも繋がります。

それでは各ファイル形式でのMinify化を紹介していきます。

 

CSSのMinify

まずはCSSファイルのMinify化について紹介します。

Minifyできるソフトウェアやオンラインサービスの中で簡単に圧縮できるサイトを紹介します。

 

Minify your CSS

 

このサイトを開くと以下の画面に切り替わります。

Minify

まず「Input CSS」に圧縮したいstyle.cssのソースコードをコピペします。

次に青色のボタンの「Minify」ボタンまたは、「Download as File」をクリックします。

Download as Fileを押すと、「Minify」と「ファイル保存」を一度にできるので

こちらをクリックしましょう。

Minify2

するとMinified OutputにMinify化されたソースコードが表示され

Minify化されたファイルを保存すれば完了です。

 

新しく作ったstyle.min.cssファイルからソースコードを確認してみるとわかりますが

空白部分がすべて詰まって表示されます。

Minify3

さらに、テキストファイルのサイズ容量を確認してみると

「114 KB」→「108 KB」

6 KB圧縮されていることが分かります。

 

圧縮してこれだけ?

と思うかもしれませんが、ブログテーマでは

CSSファイルを4、5つ使うのは一般的ですし、もしくはそれ以上使っています。

 

仮に5つのCSSファイルが「6 KB」ずつ圧縮されたとすると、合計で「30KB」

バイトで表すと30000バイト」ものデータを圧縮していることになり、かなり差が出ます。

Webページの表示速度を上げたいと考えた時、テキストファイルの圧縮も考慮してみましょう。

 

JavascriptのMinify

次にJavascriptファイルの圧縮方法を紹介します。

こちらの圧縮方法もMinifyが簡単にできるサイトで圧縮をします。

 

Minify your Javascript

 

このサイトを開くと以下の画面に切り替わります。

Minify JS1

こちらも同様に「Input Javascript」にソースコードをコピペして

Download as Fileをクリックすることでファイルを圧縮することができます。

 

HTMLのMinify

次にHTMLファイルの圧縮方法を紹介します。

こちらも同様にMinifyが簡単にできるサイトで圧縮をします。

Minify your HTML

 

このサイトを開くと以下の画面に切り替わります。

Minify HTML

こちらも同様に「Input HTML」をクリックして圧縮しましょう。

ただしHTMLファイルを圧縮すると、見ずらくなるため

HTMLファイルをテーマ作成後も変更する可能性がある場合は

圧縮を控えた方が良いと思います。

 

以上「Webページ高速化~「Minify」を使ったテキストファイル圧縮方法まとめ」でした。

プログラムの量が多くなるほどMinifyは効果を発揮します。

サイトも無料で簡単に使えるのでWebページを高速化させるなら知っておくべきですね。

 

お疲れ様でした。

Minify
学びに関する情報をチェック!