こんにちは。slashです。
前回はワードプレスのブログ高速化について
書きました。
プラグインを使わずにブログ高速化!初心者でもできる方法でスピードアップ
今回もまたブログの高速化に関わる内容です。
特にはてなブログを利用されている方に
オススメの内容となっております。
私は当ブログ「すたーすらっしゅ」以外に
もう1つのブログ「ツクラーりずむ」を運営しております。
ツクラーりずむは、はてなブログで作成しており、
主に私が趣味でやっているRPGツクールMVでの
ゲーム制作ネタについて書いております。
今回はツクラーりずむでの
読み込み改善のためにやった事も交えて
はてなブログでのやらかしを書いてみようと思います。
知らずにやらかしていた、はてなブログを重くする要因
はてなフォトライフにPNGで画像を上げたら・・・
ブログを書く時に、
画像を載せるのは私を含め
多くのブロガーが当たり前のように
やっていることと思います。
私も画像をよく載せるので
ページ読み込みが重くなりすぎないよう、
画像を圧縮する等の対応は
できる限りやっております。
はてなブログの場合、
記事の編集画面で画像をアップすると
はてなフォトライフというサービスに
画像が保存されるようになっています。
![はてなブログ編集画面](https://starslashblog.com/wp-content/uploads/2019/05/0503hatenaedit.jpg)
ですが、このはてなフォトライフに
PNG形式の画像を保存すると
画像の容量が大きく増えてしまう場合があります!
![すたーちゃん](https://starslashblog.com/wp-content/uploads/2019/04/fukidashi-star3.png)
なんだってー!?
そして、私はこの事に半年間以上も気づかずに
記事を書き続け、PNG形式の画像を
バンバンアップしておりました!
これはブログの読み込み速度にも
影響すると思いますし
ちょっと画像容量の対策を
しないといけないなと感じ、
はてなフォトライフに画像をアップした際の
容量について検証してみました。
ツクラーりずむの読み込み速度は?
まず、画像容量の対策をする前の
読み込み速度です。
速度の測定は前回の記事と同じく
Google PageSpeed Insightsを利用しました。
測定結果は・・・
モバイル:29点
パソコン:44点
当ブログと比較すると
モバイル、パソコンどちらも遅い!!
特にモバイルが29点と悲惨!!
確かに、自分自身でツクラーりずむに
アクセスしてみて
「読み込み遅っそい!!」
とは以前から感じていましたが
スコアが29点になるのも納得の遅さです。
はてなフォトライフについて検証
ではここからは、
はてなフォトライフに画像をアップした時に
容量がどう変わるか検証してみます。
検証に使う画像
今回はこちらの画像で検証します。
以前に私が描いた絵です。
![検証用画像](https://starslashblog.com/wp-content/uploads/2019/05/otenki-display.jpg)
サイズ:縦840ピクセル、横960ピクセル
保存形式:PNG
容量:317KB
検証1:PNG画像をそのままアップした場合
上記の317KBのPNG画像をそのまま
はてなフォトライフに保存した時の容量はコチラ
![PNGそのままアップで254KB](https://starslashblog.com/wp-content/uploads/2019/05/0503-otenkipng254KB.jpg)
254KBです。
オリジナルよりも容量がダウンしていますが
これは画像サイズが800ピクセルに
自動的に縮小されたためと思われます。
![すたーちゃん](https://starslashblog.com/wp-content/uploads/2019/04/fukidashi-star1.png)
はてなフォトライフはデフォルト設定だと
画像の長辺が800ピクセルになるように
自動的にリサイズされるよ
検証2:PNG画像を圧縮してからアップした場合
実はこの検証2が一番重要なところで、
(悪い意味で)驚きの結果が得られました。
まずPNGooで画像を圧縮
PNGooというフリーソフトを使えば
PNG画像を簡単に圧縮することができます。
https://pngquant.org/
にアクセスすればフリーでダウンロードできます。
そして検証用の画像を圧縮したところ
サイズ:縦840ピクセル、横960ピクセル
保存形式:PNG
容量:317KB→75KB
容量を4分の1以下まで圧縮しました!
では、この圧縮した画像をはてなフォトライフにアップすると・・・
![269KB](https://starslashblog.com/wp-content/uploads/2019/05/0503-otenkipng269KB-1.jpg)
結果は269KB
![すたーちゃん](https://starslashblog.com/wp-content/uploads/2019/04/fukidashi-star3.png)
圧縮する前より容量大きいじゃん!!
なんと!
圧縮した画像を
はてなフォトライフにアップすると
圧縮する前よりも容量が増えてしまいました。
PNG画像圧縮の手間がムダどころか
若干逆効果になるという驚きの結果です。
ちなみにはてなフォトライフでは
画質を選択する事ができます。
![はてなフォトライフ画質設定](https://starslashblog.com/wp-content/uploads/2019/05/0503-hatenagashitu-1.jpg)
画質を100から30まで落として再度アップしても
PNGには効果がないのか
容量は全く変わりませんでした。
検証3:JPEG形式でアップした場合
先ほどの検証用画像を
今度はJPEG形式保存し直します。
サイズ:縦840ピクセル、横960ピクセル
保存形式:JPG
容量:91KB
これをはてなフォトライフにアップすると・・・
![JPGをアップで151KB](https://starslashblog.com/wp-content/uploads/2019/05/0503-otenkijpg151KB.jpg)
151KB
PNG形式でアップした時に比べると
小さい容量になっていますが、
アップ前の91KBに比べると
容量が大きくなってしまいました。
検証4:画質を低めの設定でJPG形式をアップした場合
PNGの時ははてなフォトライフの画質設定は
無効になっていましたがJPGならどうでしょう?
はてなフォトライフ側の設定で
画質を100から50に落として
もう一度JPG形式画像をアップしました。
すると・・・
![低画質JPGアップで34KB](https://starslashblog.com/wp-content/uploads/2019/05/0503-otenkijpg34KB.jpg)
34KB!!
![すたーちゃん](https://starslashblog.com/wp-content/uploads/2019/04/fukidashi-star1.png)
大幅な容量削減ができたね!
ようやくいいところまできました!
JPG画像なら、はてなフォトライフの
画質設定が有効なようです。
検証結果まとめ
検証1:PNG画像をそのままアップした場合の結果
254KB
検証2:PNG画像を圧縮してからアップした場合の結果
269KB
検証3:JPEG形式でアップした場合の結果
151KB
検証4:画質を低めの設定でJPG形式をアップした場合
34KB
結論
画像をJPG形式で保存し、
はてなフォトライフ側で画質を低めに設定して
アップすればちゃんと容量削減はできる!!
ツクラーりずむをもう一度測定
さて、以上の結論を踏まえ
ブログにアップした画像を圧縮し直し
さらにトップページに表示する記事数や
画像数を減らした結果、
その測定結果は・・・
![画像対策後の測定結果36点](https://starslashblog.com/wp-content/uploads/2019/05/0503-hatena36pt.jpg)
モバイル:29点→36点
パソコン:44点→60点
両方ともに少しスコアが上がりました。
ただ、上がったと言っても
モバイルはまだまだ遅い部類です。
感想:無料会員だとやれる事が少ないか
今回もブログの高速化に成功はしたものの
特にモバイルについては
![すたーちゃん](https://starslashblog.com/wp-content/uploads/2019/04/fukidashi-star3.png)
超超遅い!!
だったものが
![すたーちゃん](https://starslashblog.com/wp-content/uploads/2019/04/fukidashi-star3.png)
超遅い!
になった程度の変化かと思います。
「ツクラーりずむ」をちょっと見て頂ければ
わかる人はわかると思いますが、
有料会員のはてなブログProではなく
無料会員アカウントで運営しています。
無料会員だと
・広告を削除できない
このため広告のせいで読み込み速度が遅くなるのを回避できない
・ブログトップに記事の概要を並べる方式にできない
無料会員だとブログトップに
最新記事の全文が表示されてしまうので
読み込みが遅くなりやすい。
などの制約があり、
どうしてもできない事が多いですね。
そもそも、はてなブログ自体が
重いとか言われているので
ワードプレスのブログに比べてしまうと
はてなブログは速度面ではかなり不利と
感じられました。
無料で手軽に始められ
機能も豊富なはてなブログですが
こういったデメリットがあると
いう事も頭に入れておくといいかもしれません。
画像については
今後はてなフォトライフには
なるべくPNG形式の画像を上げないように
気を付けていきたいと思います。
おわり
コメント