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

アイキャッチ画像 ブログ

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

はてなブログ編集画面

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

すたーちゃん
すたーちゃん

なんだってー!?

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

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

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

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

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

測定結果は・・・

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

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

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

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

スポンサーリンク

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

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

検証に使う画像

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

検証用画像
検証用画像

サイズ:縦840ピクセル、横960ピクセル
保存形式:PNG
容量:317KB

この記事で表示している画像は
容量削減のためJPG形式で表示させています。

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

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

PNGそのままアップで254KB

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

すたーちゃん
すたーちゃん

はてなフォトライフはデフォルト設定だと
画像の長辺が800ピクセルになるように
自動的にリサイズされるよ

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

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

まずPNGooで画像を圧縮

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

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

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

サイズ:縦840ピクセル、横960ピクセル
保存形式:PNG
容量:317KB75KB

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

269KB

結果は269KB

すたーちゃん
すたーちゃん

圧縮する前より容量大きいじゃん!!

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

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

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

はてなフォトライフ画質設定

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

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

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

サイズ:縦840ピクセル、横960ピクセル
保存形式:JPG
容量:91KB

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

JPGをアップで151KB

151KB

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

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

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

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

すると・・・

低画質JPGアップで34KB

34KB!!

すたーちゃん
すたーちゃん

大幅な容量削減ができたね!

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

検証結果まとめ

検証1:PNG画像をそのままアップした場合の結果
254KB

検証2:PNG画像を圧縮してからアップした場合の結果
269KB

検証3:JPEG形式でアップした場合の結果
151KB

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

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

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

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

画像対策後の測定結果36点

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

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

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

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

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

すたーちゃん
すたーちゃん

超超遅い!!

だったものが

すたーちゃん
すたーちゃん

超遅い!

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

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

無料会員だと

・広告を削除できない

このため広告のせいで読み込み速度が遅くなるのを回避できない

・ブログトップに記事の概要を並べる方式にできない

無料会員だとブログトップに
最新記事の全文が表示されてしまうので
読み込みが遅くなりやすい。

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

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

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

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

おわり

コメント

タイトルとURLをコピーしました