紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

HTMLコードを圧縮する方法【カスタマイズ初心者必見】

f:id:slash1196:20210704190427j:plain

f:id:slash1196:20200520205950j:plain

ブログ初心者

HTMLコードの圧縮の仕方を知りたいなあ。

最近サイトが重く感じるんだよなあ。

HTMLコードの圧縮って今まで考えたことなかったけど、そんなことできるのかな。

できるなら教えてほしいなあ。

 

こんなお悩みにお答えします。

 

  この記事でわかること

  • HTMLコードの圧縮とは
  • HTMLコードの圧縮はツールに任せよう 
  • HTML圧縮おススメツール4選

 

こんにちわ、紅蓮です。

 

ブログを書いていて、HTMLって圧縮可能なんだろうかと思ったことってありませんか?

 

今回は、HTMLコードを圧縮する方法のご紹介です。

 

この記事を読むと、HTMLコードの圧縮とは何かからコードの圧縮の仕方までまるっとすべてわかっちゃいます。

 

この記事を書く僕はブログ歴は3年目。

今ではアフィリエイトからの報酬が月3000円を超えました。

 

そんな僕もHTMLの圧縮ができないと思い込んでいたことがあったんです。

でもあるきっかけでそれを知り、今は快適なサイトになっています。

 

ぜひ最後までお読みくださいね。

 

では行ってみましょう。

Here We Go!!

 

 

HTMLコードの圧縮とは

f:id:slash1196:20210704190454j:plain

まずここでは、HTMLコードの圧縮とは何かという話をしていきましょう。

 

HTMLコードの圧縮とは、

HTMLコードに含まれる改行やコメントなどを削除することによって、ファイルサイズを軽量化し、最適化すること

を言います。

 

HTML圧縮のメリット

HTMLのメリットについてお話ししましょう。

 

メリットはやはり、読み込み速度の高速化によるユーザビリティの向上することですね。

 

HTMLを圧縮すると、改行コードやコメントなどがなくなり、全体的に詰まった感じになります。

 

今まであった改行部分がなくなりますので、読み込む場所も少なくなりますね。

 

読み込む場所が少なくなると、高速化になりサイトがサクサク動きますよね。

 

読者も読み込みが遅いよりも速いほうが好きなので、使い勝手もよくなりますよね。

 

またサイトのユーザビリティが上がると、直帰率や離脱率が下がり、滞在時間も増えるためにパフォーマンスも上がります。

 

すると結果的にSEO対策にもつながりますね。

 

HTML圧縮の有用性とは

よく聞かれるのが、HTMLコードの圧縮の有用性についてです。

文字数にもよるけれど文字が多ければ多いほど、有用性は高いと思われます。

 

というのも、行数が多くなっていくし、その分改行タグも多く使います。

データ量も膨れていきます。

 

以下は、当ブログのとある記事の圧縮前と、圧縮後の対比です。

f:id:slash1196:20210704171722j:plain

左:圧縮前(14.4KB) 右:圧縮後(13.3KB) →1.1KB減(7.6%減)

 

圧縮前は14.4KBだったのが、圧縮後には13.3KBになっていますね。

 

記事でいえば、1KBくらいですが、こういうちょっとした隙間がチリツモだったりします。

 

絶対にやっていたほうがいいと思います。

 

意外にHTMLまで圧縮する人は少ない

結構ブログを読んでいて思うのが、HTMLの圧縮をしている人が少ないように思います。

 

理由は以下の3つじゃないかと。

 

  • 理由①HTMLが圧縮できることを知らない
  • 理由②そもそも読みにくいのに圧縮して、自分も読みにくくなるのが嫌
  • 理由③やっても微々たるものだからやっても無駄

 

でも実際にやってみて、表示速度が速くなるのは本当です。

先ほども言ったようにちょっとでも軽いほうがいいのでやっておきましょう。

 

HTMLコードの圧縮はツールに任せよう

f:id:slash1196:20210704190527j:plain

実はHTMLコードの圧縮の仕方は、主に2つあります。 

 

  • 方法①手で隙間を消していく
  • 方法②ツールを使う

 

結論から言いますと、必ずツールを使うようにしましょう。

というのも時間と労力の対比効果がかなり悪いから。

 

確かに、手でもできるにはできるんです。

コメント部分と改行部分を詰めていくだけの作業なので。

 

でもやっているとわかるんですが、HTMLコードってとにかく小さくて見づらいです。

 

そのために、よくあったのが

「あれ?いまどこにいるんだろう」

という迷子の状態です。

 

そうなるともう一度最初からになりますよね。

 

その点、ツールを使うとボタン一つで出来上がりですよね。

 

浮いた時間で記事を書くこともできます。

ツールを使うようにしましょう。

 

HTML圧縮おススメツール4選【使い方と圧縮結果付き】

f:id:slash1196:20210704190718j:plain

では、HTML圧縮のおススメツールをお話していきましょう。

 

1.Compress HTML

1つ目は、compress HTMLですね。

 

Compress HTMLのすごいところは、HTMLコード内にJavascriptがあっても、HTMLだけを切り分けて圧縮してくれる点です。


Javascriptで書き出したところの動作トラブルが起こらないので、対応に追われる必要がなくブログの記事執筆に集中できますね。

 

以下は使い方図解ですね。

f:id:slash1196:20210704152322j:plain

操作も簡単で、貼り付けたら、Compress htmlを押すだけ。

 

以下は当ブログのある記事を実際にやってみた結果ですね。

f:id:slash1196:20210704152524j:plain

左:圧縮前(21.3KB) 右:圧縮後(20.1KB)→1.2KB減(5.63%減)


Compress HTMLへのアクセスはこちらから。

 

2.Minify HTML and any CSS or JS included in your markup

2つ目は、Minify HTML and any CSS or JS included in your markupですね。

 

このサイトのポイントは、めちゃめちゃシンプルなところですね。

そのために初心者でも簡単に扱えます。

 

いかが使い方の図解です。

f:id:slash1196:20210704153034j:plain

こちらもボタン一つで、できますね。

 

ただちょっと違いがあって、圧縮後にもとのHTMLが出てきませんのでそこだけは注意が必要ですね。

 

なお以下は記事の圧縮量ですね。

 

f:id:slash1196:20210704153234j:plain

左:圧縮前(21.9KB) 右:圧縮後(20.1KB) →1.8KB減(8.2%減)


Minify HTML and any CSS or JS included in your markupへのアクセスはこちらから。 

 

3.online HTML compression tool

3つ目は、online HTML compression toolですね。

こちらは、コメントを削除しない状態で圧縮できます。

 

そのため人によっては、問題と考える方もいますが、説明をつけたりすることができますね。

そのために、初心者向けにはちょうどいいサイトですね。

 

以下は使い方の図解ですね。

f:id:slash1196:20210704154539j:plain

上のほうにHTMLを入力して「HTML圧縮」をクリックしたら、下の部分に圧縮されたHTMLコードが出てくる仕組みになっていますね。

 

以下は、圧縮した結果になっています。

f:id:slash1196:20210704154810j:plain

左:圧縮前(21.3KB) 右:圧縮後(20.0KB) →1.3KB減(6.1%減)

online HTML compression toolへのアクセスはこちらから。

 

4.HTML Minifier(Github製)

4つ目は、HTML Minifierですね。

実はこれは、Google先生御用達のものだったりします。

 

特徴は圧縮のレベルが、自身で細かく設定できることですね。

 

以下が使い方の図解です。

f:id:slash1196:20210704163610j:plain
f:id:slash1196:20210704163619j:plain
f:id:slash1196:20210704163633j:plain
f:id:slash1196:20210704163645j:plain

以下は 、チェックする項目ですね。

 

  • Collapse inline tag whitespace
  • Collapse whitespace
  • HTML5(html5の時)
  • Minify CSS(html内にインライン化しているとき)
  • Remove comments(<!---->でコメントを残したいときにはチェックはつけない)

これらにチェックを入れておくと、普通に圧縮できますね。

 

コメントとCSSに関してはhtml内にない場合もあるのでチェックを外すことも可能です。

 

以下は、使ってみた結果ですね。

f:id:slash1196:20210704164518j:plain

左:圧縮前(21.3KB) 右:圧縮後(20.1KB)→1.2KB減(5.6%減)

HTML minifierへのアクセスはこちらから。

 

まとめ|みんなやらないhtmlを圧縮してサイトに差をつけよう

お疲れさまでした。

ここまでHTMLコードを圧縮する方法をお話ししてきました。

 

まとめると以下のようになります。

まとめ
  • HTMLコードの圧縮とは、HTMLコードに含まれる改行やコメントなどを削除することによって、ファイルサイズを軽量化し、最適化することをいう。
    • メリット、主に読み込み速度が速くなり、サイトのユーザビリティが上がること。
    • HTMLは文字数が多かったり改行が多かったりする人には特におすすめで、記事の量が多ければ多いほどやっておくといい。
    • でも以外にやっている人が少ないので、やっておいて損はない。
  • おススメのツールを使ってやってみるのがいいですね。

 

HTMLコードって多分圧縮されるのが少ないから、あまり目に入りにくいところなんですよね。

 

でもしっかりとやっておくことによって結構いい感じになります。

 

実は僕自身もHTMLを勉強するまでは圧縮できるなんて知りませんでした。

 

でも勉強してからは結構圧縮して、速度もいい感じに早まっています。

 

ですからぜひやってみるのがいいですね。

あなたのブログライフがよくなるために。

 

ってことで今回はこの辺で。

また次回に。