「CSSを圧縮してみて、ちょっと表示速度が速くなった気がするけどまだ気になるなあ。HTMLコードの圧縮ってできるかな。できるなら方法教えてほしいなあ。」
こんなお悩みにお答えします。
この記事でわかること
- HTMLコードの圧縮とは
- HTMLコードの圧縮はツールに任せよう
- HTML圧縮おススメツール4選
記事の信頼性
こんにちわ、Jouji(@jouji0720)です。
現在webライター4年目で、webライティングでご飯を食べています。
そんな僕が今回は、HTMLコードを圧縮する方法をご紹介します。
結論から言えば、あまり気にしなくてOKです。というのも記事を書いて世に出す方がよっぽどSEO的にも評価される可能性が高いから。もし記事の書き方を知りたい場合は、以下を参考に書いてみてください。
>>アフィリエイトで稼げるブログ記事の書き方【テンプレあります】
とはいえ、心配の下はつぶしておきたいもの。この記事を読むと、コードの圧縮の仕方がわかっちゃいます。ぜひ最後までお読みの上、一緒にやっていきましょう。
※もしHTML以外の表示速度を速めたい場合には、サイトの表示速度を爆速化する方法【はてなブログもOK】にて詳しく解説しています。参考にしてください。
【結論】HTMLコードの圧縮は、最後の一手と考えるべし
見出しの通りですね。冒頭でも言いましたが、HTMLコードのデータ量の大きさは、あまり気にする必要はありません。というのも大体10％くらいしか違いがないからです。
そこに力を注ぐよりも、記事を書いて積み上げた方が収益性が高いです。もしやりたい場合は、CSSやJavascriptなどの圧縮が終わったのちに最後の手としてやるようにしましょう。
HTMLコードの圧縮とは
HTMLコードの圧縮についてです。HTMLコードの圧縮とは、以下の通りです。HTML圧縮のメリット
HTML圧縮のメリットについては、以下の通りです
- 圧縮すると文章の見た目はそのままに、データ量が減る
- 軽いから読者のユーザビリティが高まる
- ユーザビリティが高まるから評価されるブログになる
読者は使い勝手がいいから使い続けられて、あなたはブログが評価されるからうれしいし、検索に上ると信頼されてGoogle先生もうれしい。まさに3点ヨシです。
HTML圧縮の有用性とは
HTMLコードの圧縮の有用性についてです。有用性は、約10％という効果が独自リサーチでわかっています。
文字数にもよりますが、多ければ多いほど有用性は高まります。というのも文字数が増えるとそれだけデータ量が増えるからです。
例えば以下は、当ブログのとある記事(4,500字)の圧縮前と圧縮後の対比です。
圧縮前は14.4KBだったのが、圧縮後には13.3KBになっています。画像では1.1KBの違いなので、そんなに違わないと思われるかもしれません。
しかし少しのデータの違いが、積みあがると大きな違いになります。とはいえ、HTMLの圧縮は最後の一押し的だったりするので、やらないよりはいいという感じでとらえた方がいいですね。
意外にHTMLまで圧縮する人は少ない
ブログの友達に聞いていて思うのが、HTMLの圧縮をしている人が少ないことです。
理由は以下の3つです。
- ブログサービスが圧縮に対応していない
- HTMLで編集するときに、読みにくい
- 成果があまりない
上記の理由からやらない人が多いのではないかなと。でも少ないながらも効果があるのでやらないよりはやる方がいいです。ですからやっておいた方がお得ですね。
HTMLコードの圧縮方法
HTMLコードの圧縮方法は2つあり、以下の通りです。
- 方法①手で消していく方法
- 方法②ツールを使って一気に圧縮する方法
結論から言いますと、ツールを使った方がいいですね。時間的にも無駄にならなくていいからです。なおミスが少ないのでいいです。
結構多いのが手でやっていると、今どこにいるのか迷子になることです。ツールを使うとそれがなくなるのでミスもしないしいいです。ツールを使うようにしましょう。
HTML圧縮おススメツール4選【使い方と圧縮結果付き】
- Compress HTML
- Minify HTML and any CSS or JS included in your markup
- online HTML compression tool
- HTML Minifier(Github製)
それぞれ解説します。
Compress HTML
HTML圧縮のおススメツールの1つ目は、Compress HTMLです。
Compress HTMLのすごいところは、HTMLコード内にJavascriptがあっても、HTMLだけを切り分けて圧縮してくれる点です。
Javascriptで書き出したところの動作トラブルが起こらないので、対応に追われる必要がなくブログの記事執筆に集中できます。
使い方は、以下の通りです。
- 圧縮したいコードをコピぺする
- [HTML圧縮する]をクリックする
以下は当ブログのある記事を実際にやってみた結果ですね。
Minify HTML and any CSS or JS included in your markup
HTML圧縮のおススメツールの2つ目は、Minify HTML and any CSS or JS included in your markupです。
このサイトのポイントは、シンプルで使いやすいところです。そのために初心者でも簡単に扱えます。
以下が、使い方の図解です。
- HTMLコードをペースト
- [minify]をクリックする
こちらもボタン一つで、できますね。
圧縮後にもとのHTMLが出てきませんので、どこがどうなったのかがわかりにくいのが難点です。注意が必要です。
なお以下は記事の圧縮量ですね。
>>Minify HTML and any CSS or JS included in your markup
online HTML compression tool
HTML圧縮のおススメツールの3つ目は、online HTML compression toolです。このツールのすごいところは、HTMLのコメントアウトを削除しない状態で圧縮できます。
そのため問題と考える方もいますが、後から見た時に説明をしやすいです。そのために、初心者向けにはちょうどいいツールです。
以下は、使い方の図解ですね。
- 圧縮したいHTMLコードを上段の空欄にペーストする
- [HTML圧縮]をクリック
- 下段の空欄に圧縮されたHTMLコードが出てくる
- コピーする
以下は、圧縮した結果になっています。
>>online HTML compression tool
HTML Minifier(Github製)
HTML圧縮のおススメツールの4つ目は、HTML Minifierです。。
このツールのすごいところは、圧縮のレベルが自身で細かく設定できるところです。そのために自分の感覚に合わせた圧縮ができます。
以下は、使い方の図解です。
以下は 、チェックする項目ですね。
- Collapse inline tag whitespace
- Collapse whitespace
- HTML5(html5の時)
- Minify CSS(html内にインライン化しているとき)
- Remove comments（<!—->でコメントを残したいときにはチェックはつけない）
これらにチェックを入れておくと、普通に圧縮できます。コメントとCSSに関してはhtml内にない場合もあるのでチェックを外すことも可能です。
以下は、使ってみた結果ですね。
まとめ｜HTMLコードの圧縮で他のサイトに差をつけよう
ここまで、HTMLコードを圧縮する方法について、お話ししてきました。
HTMLコードの圧縮って、冒頭でも言いましたが、ほとんどの人が効果の薄さから手を出しません。しかし、だからこそ差がつく場所でもあります。
時間ができた時に、やっておくのがいいですね。くれぐれも記事を書くより優先しないようにしましょう。
記事が書けないと本末転倒です。時間のある時にするようにしましょう。
今回は以上です。
次におすすめの記事は、この記事
記事を書くのは必須です。読んで、書いて積み上げをしましょう。
記事の書き方学びたいって人は、この記事がおすすめです。
もしほかの表示速度爆速化が知りたい場合は、こちらがおすすめです。
