はたらきアリ新聞~会社員×副業で生き抜く時代~

会社員が抱える悩みを解決するためのブログ

はたらきアリ新聞

【年収別】会社員の給料明細
【良いとこどり】会社員×副業
【スマホ1台】会社員が取り組む副業とは?
【忘れてはいけない】会社員の確定申告

【はてなブログ】読込速度を高速化するために画像をすべて圧縮して検証

スポンサーリンク

スポンサーリンク

f:id:finana:20190611215611j:plain

 こんばんわ。はたらきアリです。@hatarakiari0818

 

ブログをカスタマイズにはまり、

 

好きなものを好きなだけ取り込んだブログが今のサイトなのですが、

 

結果的にめちゃめちゃ重いサイトになってしまったことを記事に取り上げました。

www.worker-ant0818.work

 

サイトの高速化にはいろいろな方法があります。

 

  1. 画像を圧縮して張り付ける
  2. 「設定」➡「詳細設定」のheadに要素を追加で無駄な呼び出しをしていないか?
  3. 「設定」➡「詳細設定」のAMPにチェックが入っているか?
  4. カスタマイズした結果、HTMLやCSSで不要なものはないか?
  5. コメント欄が必要か?
  6. サイドバーのメニューは適切か?

 

などが高速化の方法として有効なのですが、そのなかでもダントツで1の画像を圧縮して張り付けることがとても重要です。

 

むしろすべての画像を圧縮できた時点で高速化のために出来ることを8割は達成していることになります。

 

※私のサイトは画像をオリジナルで貼ってしまっているため、サイトスピードが最悪です。

f:id:finana:20190611013750p:plain

90記事あるサイトですが、これをすべて圧縮したらどのように改善できるのか検証していきます。

 

画像の圧縮方法はこちら

 

I ♡ IMG

 

画像を圧縮して張り付ける方法はオンラインサイトを利用したり、オフラインでソフトをダウンロードしたりと方法はいくらでもあります。

 

私の場合はこちらのサイトを愛用しています⇓

www.iloveimg.com

このサイトはオンラインで画像を圧縮する機能があります。

動きは高速で、圧縮したい画像をドロップするだけで一瞬で画像が圧縮してくれるのです!

 

圧縮した画像をダウンロードすれば、すぐに画像を貼り付けることができます。

このサイトは圧縮以外にも多くの機能を備えています。

  1. 圧縮
  2. サイズ変更
  3. 切り抜き
  4. JPGに変換
  5. JPGから変換
  6. 写真エディター
  7. 透かし画像
  8. ミームジェネレーター
  9. 画像の回転

 

など無料サイトなのに、この充実した機能の数々は素晴らしすぎます。

 

ブログ作成のときは欠かすことが出来ないサイトとして毎日愛用しています。

 

はてなフォトライフ

 

さて、はてなブログユーザーは避けて通れないのが画像をアップロードするときは強制的にはてなフォトライフになるということです。

 

ブログを書くのにすべて用意してくれているのがはてなブログの良いところなのですが、少し問題ありです。

 

というのも、どういう訳かはてなフォトライフにアップロードすると画像が大きくなるのです。

 

それでは本末転倒なので、少しアップロードの時に工夫をしましょう。

 

①「はてなフォトライフ」➡「設定」で以下のページを確認します。

②画質を【70】に変更

③この内容に変更する

f:id:finana:20190611224726p:plain

と設定を変更してください。

 

こうすればアップロード時にサイズが大きくなるという意味不明な現象は少しマシになります。

 

ちなみに私は70をお勧めします。

70程度なら画像がオリジナルのまま見えるギリギリのラインと思っています。

 

はてなブログにおける画像圧縮に関しては、この手順で行うことで私のサイトを改善していきました。

 

画像をすべて圧縮した結果

 

 私はこの記事で91記事目でした。

 

それまでにアップロードした画像については以下の通りです。

 

  • 枚数  :177枚
  • データ量:27.9MB

 

それをすべて圧縮した結果、以下のようになりました。

 

  • 枚数  :177枚
  • データ量:10.2MB

 

全て入れ替えました。

 

とんでもなく気の長くなる作業でした。。。

 

 そして気になる結果です。

(モバイル版)

f:id:finana:20190612045731p:plain

(PC版)

f:id:finana:20190612045742p:plain

 

えぇ~~~!モバイル版点数変わってないやん!!

 

PC版は画像残していなかったのですが、改善されています。

確か30点台だったと記憶しています。

 

モバイル版が点数に変動がなかったのかは理由はよく分かりません。

 

他のサイトでも点数を調べてみます。

 

アップロードした容量は明らかに少なくなったので、軽くなっているはずなのですが。

 

継続調査ということで今日は一旦検証終了です!

 

 

※追記

その後、サイトのHTMLやCSSの順番を並び替えをして、上から順になるようにしました。

余計な外部リンクを徹底的に取り除くなど対策を試みましたが、点数は変わらず。

 

変わったのは私の体感速度だけどいまいち、検証結果を数的に証明するに至りませんでした。

しかし、ながら物理的に時間がかかる作業を取り除いていったので、処理効率は上がっているはずなのですが。

 

今のモバイル25点、パソコン55点前後で推移しております。

 

 

⇩このサイトにおける【ZENO-TEAL】カスタマイズを総まとめした記事はこちら

www.worker-ant0818.work