テケオは眠くても頑張るぞ!

何もかも面倒臭い。そんなテケオの生き方や考え方をつづるブログ

ブログのサムネイル画像をPNGからJPEG(jpg)+圧縮に変えた結果

f:id:tektekeo:20170907203823j:plain

少し前に google のPageSpeed Insightsでページの読み込みの早さを検証してみましたが、かなり悪い数値だったので、現在改善を施しています。

レスポンシブサイトに切り替えることによって、数値がかなり改善されましたが、それでもまだ低い状態です。

今回は今まで「PNG画像」だった部分を「JPEG画像を圧縮したもの」に差し替えて検証したので、その結果をご報告したいと思います。

 

この記事でやること

前回のエントリーでも画像の圧縮によってスピードが早くなるのではないかと、PNG画像を圧縮して検証してみましたが、PNG画像はアップロード時に容量が増えてしまうため、あまり意味がありませんでした。 

www.kouritsu30.com

 

今回は「はてなフォトライフ」から全ての画像データを抽出し、JPEG形式に変換したものを再アップロード、そこでページスピードの変化を見てみたいと思います。 

www.kouritsu30.com

 

結果 

※スマホページはレスポンシブサイトを適用

f:id:tektekeo:20170904174641p:plain
f:id:tektekeo:20170904174650p:plain
サムネ画像がPNG形式

f:id:tektekeo:20170908005302j:plain
f:id:tektekeo:20170908005305j:plain
サムネ画像をJPEG+圧縮したもの

それなりに効果はあった模様。

モバイルが「56から63(+7)」、パソコンが「66から77(+11)」と数値が改善されました。

今回サムネだけ変更したのは、

  • 「HOME」などの記事一覧がサムネ画像のみでなので、画像の差し替え効果がわかるという事
  • PCでいうサイドバーの画像が全てPNG画像であり、その部分を軽量化する事

この2点です。

実際の効果の検証+できる限り少ない画像の変更で効果を得られるページが多い(全ページサイドバーのサムネ画像が表示されるので)、サムネだけを変更しました。

個別記事では PNG 画像が沢山ありますが、全ての画像の差し替えが面倒くさかったので、ある程度検索流入があり、今後も期待のできるものだけを差し替えようと思っています。

過去記事でも述べたように、PNG画像の圧縮では効果がありませんでしたが、今回はJPEGを圧縮してアップロードしたので、きっちり効果があったと言えるでしょう。

※「はてなフォトライフの設定」→「圧縮率」を変更すれば、アップロード時にJPEG画像・・・・・・は圧縮してくれるので、自分で圧縮する手間が省けます。

www.kouritsu30.com

ちなみに

「サムネ画像を変更することによって効果があった」と結論付けていますが、記事一覧に表示されている画像は全て jpeg 画像に変換されたものを使っているらしい。*1

ただ、アップロードした時のPNG画像がバカでかいと結局は容量が大きくなりすぎるので、きっちりと圧縮してアップロードした方が良いと思っています。

今後の方針

基本的に今後の画像は全てJPEG形式にしたいと考えています。

そのためにPNG画像を毎回JPEG形式の画像に変換するのが面倒なので、そのためのターミナルコマンドで簡単に済ませれるようにしました。

具体的には特定フォルダ内に入れたもの全ての画像ををJPEG形式に変換、圧縮するといったものです。

1記事あたりにかかる時間を少なくしたいので、こういった工夫は大事ですね。

おまけ

遅くなる原因として「はてなスター」によるものが大きいと言われていたので、実際に試してみた。

f:id:tektekeo:20170908012839j:plain
f:id:tektekeo:20170908012836j:plain
スターのみを排除

f:id:tektekeo:20170908012830j:plain
f:id:tektekeo:20170908012833j:plain
スター削除+jQueryを使わない

スター排除によって、モバイル+1PC+3

jQueryも導入すると遅くなるので排除したパターンも試してみました。 

これによって、モバイル+1PC+1

これら2つを実行すると、モバイルが黄色に!

多少は効果がありますが、画像をJPEG+圧縮する方が圧倒的に効果がありました。

さらに、スターを排除してしまうと寂しいし、jQueryに依存しまくっているので、この2つは外さないで運営していきます。

つまり、モバイルは赤色でフィニッシュ。残念ですorz

大どんでん返しw

この記事でJPEG+圧縮で画像をアップロードする重要性は理解していただいたと思うが、一つ謝っておきます。

レスポンシブサイトにしません。

昨日の夜に、集めた情報を元に記事を作成した後、

画像を軽くて早くなるなら、はてなのスマホ用ページもそれなりに早くなるよな?どうなってるんだろう?

そう思って、レスポンシブから切り替えて測定して見ると...

f:id:tektekeo:20170908173121j:plain
f:id:tektekeo:20170908173135j:plain
はてなのスマホ用ページで測定(JPEG+圧縮画像に差し替え済み)

モバイルほとんど変わらんやん...

 

全然変わりませんでしたwなぜかパソコンが「77→74」と減少しているけど...

レスポンシブのレイアウト調整も面倒だったので、はてなのスマホページを使い続けたいと思いますw

GoogleのPageSpeed Insightsが何をみてどう評価しているのかわかりませんが、数値に振られ続けるのも大変でした。私個人の結論としては

  • 気に入ったレイアウトにする
  • 画像はJPEG+圧縮する

を押さえておけば良いと思ってます。

PageSpeed Insightsに振られすぎて結構疲れた...

まとめ

ブログの画像をPNG画像からJPEG画像を圧縮したものに差し替えたら、ページの読み込みが早くなった。

 

画像の容量を小さくしたので当然のことなのですが、面倒臭がってPNGでスクショしたものを、そのまま使っていたのはダメでした。

アップロードはJPEG画像を圧縮したものにしましょう。

より良いブログにするために努力は必要ですが、なるべく工数は減らしたいところです。

もっと良いコンテンツの記事を書き続けるために、やるべき事や面倒な事がどんどん増えている気もしますが、それらの作業をより効率よくできるように改善し続ける事も大切ですね。

今回の一連の流れを機に、CSSやJavaScriptの修正も行ってしばらくは記事に集中できる環境にしたいです。