はてなブログが重い？もしかしたら画像をちゃんと圧縮できてないせいかも

こんにちは。slashです。
前回はワードプレスのブログ高速化について
書きました。

プラグインを使わずにブログ高速化！初心者でもできる方法でスピードアップ

今回もまたブログの高速化に関わる内容です。
特にはてなブログを利用されている方に
オススメの内容となっております。

私は当ブログ「すたーすらっしゅ」以外に
もう1つのブログ「ツクラーりずむ」を運営しております。

ツクラーりずむは、はてなブログで作成しており、
主に私が趣味でやっているRPGツクールMVでの
ゲーム制作ネタについて書いております。

今回はツクラーりずむでの
読み込み改善のためにやった事も交えて
はてなブログでのやらかしを書いてみようと思います。

知らずにやらかしていた、はてなブログを重くする要因

はてなフォトライフにPNGで画像を上げたら・・・

ブログを書く時に、
画像を載せるのは私を含め
多くのブロガーが当たり前のように
やっていることと思います。

私も画像をよく載せるので
ページ読み込みが重くなりすぎないよう、
画像を圧縮する等の対応は
できる限りやっております。

はてなブログの場合、
記事の編集画面で画像をアップすると
はてなフォトライフというサービスに
画像が保存されるようになっています。

ですが、このはてなフォトライフに
PNG形式の画像を保存すると
画像の容量が大きく増えてしまう場合があります！

そして、私はこの事に半年間以上も気づかずに
記事を書き続け、PNG形式の画像を
バンバンアップしておりました！

これはブログの読み込み速度にも
影響すると思いますし
ちょっと画像容量の対策を
しないといけないなと感じ、
はてなフォトライフに画像をアップした際の
容量について検証してみました。

ツクラーりずむの読み込み速度は？

まず、画像容量の対策をする前の
読み込み速度です。

速度の測定は前回の記事と同じく
Google PageSpeed Insightsを利用しました。

測定結果は・・・

モバイル：29点
パソコン：44点

当ブログと比較すると
モバイル、パソコンどちらも遅い！！

特にモバイルが29点と悲惨！！

確かに、自分自身でツクラーりずむに
アクセスしてみて
「読み込み遅っそい！！」
とは以前から感じていましたが
スコアが29点になるのも納得の遅さです。

はてなフォトライフについて検証

ではここからは、
はてなフォトライフに画像をアップした時に
容量がどう変わるか検証してみます。

検証に使う画像

今回はこちらの画像で検証します。
以前に私が描いた絵です。

検証1：PNG画像をそのままアップした場合

上記の317KBのPNG画像をそのまま
はてなフォトライフに保存した時の容量はコチラ

254KBです。
オリジナルよりも容量がダウンしていますが
これは画像サイズが800ピクセルに
自動的に縮小されたためと思われます。

検証2：PNG画像を圧縮してからアップした場合

実はこの検証2が一番重要なところで、
（悪い意味で）驚きの結果が得られました。

まずPNGooで画像を圧縮

PNGooというフリーソフトを使えば
PNG画像を簡単に圧縮することができます。

https://pngquant.org/
にアクセスすればフリーでダウンロードできます。

そして検証用の画像を圧縮したところ

容量を4分の1以下まで圧縮しました！
では、この圧縮した画像をはてなフォトライフにアップすると・・・

結果は269KB

なんと！
圧縮した画像を
はてなフォトライフにアップすると
圧縮する前よりも容量が増えてしまいました。

PNG画像圧縮の手間がムダどころか
若干逆効果になるという驚きの結果です。

ちなみにはてなフォトライフでは
画質を選択する事ができます。

画質を100から30まで落として再度アップしても
PNGには効果がないのか
容量は全く変わりませんでした。

検証3:JPEG形式でアップした場合

先ほどの検証用画像を
今度はJPEG形式保存し直します。

これをはてなフォトライフにアップすると・・・

151KB

PNG形式でアップした時に比べると
小さい容量になっていますが、
アップ前の91KBに比べると
容量が大きくなってしまいました。

検証4：画質を低めの設定でJPG形式をアップした場合

PNGの時ははてなフォトライフの画質設定は
無効になっていましたがJPGならどうでしょう？

はてなフォトライフ側の設定で
画質を100から50に落として
もう一度JPG形式画像をアップしました。

すると・・・

34KB！！

ようやくいいところまできました！
JPG画像なら、はてなフォトライフの
画質設定が有効なようです。

検証結果まとめ

結論
画像をJPG形式で保存し、
はてなフォトライフ側で画質を低めに設定して
アップすればちゃんと容量削減はできる！！

ツクラーりずむをもう一度測定

さて、以上の結論を踏まえ
ブログにアップした画像を圧縮し直し
さらにトップページに表示する記事数や
画像数を減らした結果、
その測定結果は・・・

モバイル：29点→36点
パソコン：44点→60点

両方ともに少しスコアが上がりました。

ただ、上がったと言っても
モバイルはまだまだ遅い部類です。

感想：無料会員だとやれる事が少ないか

今回もブログの高速化に成功はしたものの
特にモバイルについては

だったものが

になった程度の変化かと思います。

「ツクラーりずむ」をちょっと見て頂ければ
わかる人はわかると思いますが、
有料会員のはてなブログProではなく
無料会員アカウントで運営しています。

無料会員だと

などの制約があり、
どうしてもできない事が多いですね。

そもそも、はてなブログ自体が
重いとか言われているので
ワードプレスのブログに比べてしまうと
はてなブログは速度面ではかなり不利と
感じられました。

無料で手軽に始められ
機能も豊富なはてなブログですが
こういったデメリットがあると
いう事も頭に入れておくといいかもしれません。

画像については
今後はてなフォトライフには
なるべくPNG形式の画像を上げないように
気を付けていきたいと思います。

おわり