- 自分のウェブサイト、ブログが最近重い
- 何が原因で重くなっているのかを知りたい
という方にこの記事は適しています。
重くなっている原因の一つとして、画像の容量が大きいということがあります。
画像を保存する際に、JPG形式で保存するか、PNG形式で保存するか意識しましょう。
JPG画像とPNG画像は次のように使い分けると、容量を抑え、綺麗に表示することができます。
- 画像の色数が多い場合、JPG形式が適している
- 画像の色数が少ない場合、PNG形式が適している
※GIF形式でも保存できますが、優先度が低いためここでは省略します。
※ここで言う「適している」というのは画像の容量が極力小さいという意味です。画質に関してはPNG形式のほうが良いです。
これを後で知った私は、自分のブログの場合どれだけ読み込み速度が変わるのか検証しました。
【2018/12/20 追記】
はてなブロガーの方は、この記事は読まずに以下の記事を参考にしてください。
あらすじ
前回の記事を更新した後、スマホでブログを確認しながら、
「なんか読み込み遅いな～」
と感じてました。
前回の記事はこちら
「画像いっぱい貼ったし、そのせいで重くなったんだろうな」と思いつついろいろ調べていると、画像の特徴・保存形式によって容量が大きく変わることが発覚したので、ここに綴ります。
「そんなの常識でしょ」って思われるかもしれませんが、私の備忘録も兼ねて記事にします。
１．サイトが重い原因を知る
Test My Siteでモバイルサイトの診断をする
Test My SiteというGoogleのサービスを使用し、モバイルサイトの処理速度テストを行います。
- Test My Siteを開く
- 調べたいサイトのURLを空欄に入力し、「→」をクリックする
これだけで診断結果が出ます。
※診断は1分程度かかります
ちなみに、以下の点が診断によりわかります。
- 3G回線による読み込み時間（秒）
- 訪問者の推定離脱率（%）
- 同業種サイトの比較（特に良好～要改善）
- 修正により短縮できる読み込み時間（秒）
- 優先度の高い修正点
診断結果
私のブログトップページは次のような結果になりました。
- 3G回線による読み込み時間（秒）：6秒
- 訪問者の推定離脱率（%）：24%
- 同業種サイトの比較：普通
- 修正により短縮できる読み込み時間（秒）：5秒
- 優先度の高い修正点：1．画像を最適化する、2．レンダリングを妨げるJS、3.キャッシュ処理を活用する
読み込み時間6秒とありますが、自分でWi-Fi通信で読み込んだ時は10秒以上かかっていました。
優先度の高い修正点として、画像を最適化することが1位になっていたため、まずはここから手を付けました。
２．画像の保存形式による容量比較
色数が少ない画像
例えばこの画像
どちらかといえば色数が少ないため、理論上PNGのほうが適していると言えます。
実際の保存形式による容量の違いは、以下の通りです。
- JPG：123KB
- PNG：52KB
理論通り、PNGのほうが適しているという結果になりました。
色数が多い画像
続いて、こちらの画像
どちらかといえば色数が多いため、理論上JPGのほうが適していると言えます。
実際の保存形式による容量の違いは、以下の通りです。
- JPG：239KB
- PNG：403KB
理論通り、JPGのほうが適しているという結果になりました。
３．２に従い、画像を最適化する
もともと全ての画像をPNGのまま載せていたので、最適化しました。
容量の合計は次のように変化しました。
・編集前：2.22MB
・編集後：1.78MB
４．記事を編集する
元の画像を最適化した画像にすり替えました。
５．再びTest My Siteで診断する
さあ、気になる診断結果は・・・
- 3G回線による読み込み時間（秒）：6秒
- 訪問者の推定離脱率（%）：24%
- 同業種サイトの比較：普通
- 修正により短縮できる読み込み時間（秒）：5秒
- 優先度の高い修正点：1．画像を最適化する、2．レンダリングを妨げるJS、3.キャッシュ処理を活用する
あれ？
さっきと一緒じゃね？？？
いや、正直工程３の時点で嫌な予感はしたけどさ・・・
ということで、苦肉の策で画像の数を減らしました(´；ω；`)ｳｩｩ
（編集しながらこの記事を書いているため、正直焦ってます）
結局画像の数減らした
今度こそ・・・
- 3G回線による読み込み時間（秒）：6秒
- 訪問者の推定離脱率（%）：24%
- 同業種サイトの比較：普通
- 修正により短縮できる読み込み時間（秒）：5秒
- 優先度の高い修正点：1．画像を最適化する、2．レンダリングを妨げるJS、3.キャッシュ処理を活用する
一緒。
(´；ω；`)
まとめ
ネタ記事みたいになってしまいましたが、今回伝えたかったのはこれです！
画像を最適化する場合、
色数が少ない画像→png形式
色数が多い画像→jpg形式
に変換しましょう。
これから他の原因見つけて、少しでもストレスのないサイトに改善していきます。
(´；ω；`)ﾀｽｹﾃ
