住宅ローンをスピード完済した家

地球にやさしく貯金も増える暮らし

すぐできるブログの軽量化 画像圧縮率が高いツールと対策方法

[当ブログはアフィリエイト広告を利用中です]

ブログのSEO対策には主に、キーワード選定、見出しの使い方、内部および外部リンク、画像の取り扱い、表示速度、記事の質などがあります。

今回は、すぐにできる対策として、ブログの表示速度を改善するためにどうすればいいのか?
もっとも効果が出やすい手だて、画像の処理方法について一緒に見ていきましょう。

私はブログを始めて3年目、かろうじて中級者の仲間入り?をしたかどうかというレベルです。
中級者としてさらなるステップアップを目指し、わかったことや改善した点をシェアしていきたいと思います。

画像圧縮効果が高いツールはどれ?

サイトの軽量化を目指すなら、ブログに使用する画像ファイルの容量を小さくおさえることが重要です。

私は画像を圧縮・加工して、1枚あたり30kb前後にサイズダウンした画像を記事に使用します。

画像により元のバイト数にも差がありますが、加工後70kb以下を目安にして貼り付けています。私は基本的にブログの記事1ページあたり2枚の画像を配置しています。

本ブログでは、ウェブ上の無料ツールを使用して画像を圧縮し、はてなフォトライフ経由(さらに画質80%)で貼り付けています。

以前はパンダやゾウが目印の圧縮ツールを使っていましたが、圧縮率が70%程度で軽量化が足りてないと感じていました。
パンダやゾウはおなじみで、おすすめの無料オンライン画像圧縮ツールとしてよく紹介されていますよね。

Google提供のスクーシュも試してみましたが、私の場合はアンドロイド系のタブレットを使用しているせいなのか?ところどころ中国語?なのか日本語ではない漢字で表示されて(なにかのバグ?)うまく処理できませんでした。

ちなみにウーバーサジェストでも同様に謎の漢字表現が出現して意味不明な時があります。


パンダ TinyJPG – Compress WebP, PNG and JPEG images intelligently

ゾウ JPGイメージをオンラインで圧縮する

スクーシュ Squoosh


上記の3種類のツールの他にも試してみましたが、現在は大幅にファイルサイズを小さくできるツール「Bulk Resize Photos」に出会い、ブックマークして日々使用しています。

元の画像のファイルサイズが大きめのMBであっても、「Bulk Resize Photos」なら20~40KB程度まで加工してくれるので非常に助かっています。

サーモンサラダ付きパンケーキの一皿
色彩豊かなパンケーキの画像の例

一例として(上記のパンケーキの写真は)、1.2メガバイトの画像からリサイズして32.9キロバイトまで小さくなりました。

画像の寸法 640×400
画質 80%

私が設定している数値を参考にあげていますが、リサイズ方法やサイズ、画質のパーセンテージは、各自のニーズで自由に変えられます。


[画像サイズ変更] 無料ツール画像を圧縮する/画像のファイルサイズを小さくする 
Bulk Resize Photos - 画像サイズ変更


試しに同じ画像(さきほどのパンケーキ)をパンダの画像圧縮ツールを使って、加工前後の画像のバイト数を比較してみました。

  • TinyPNG(パンダ) 1.3MB → 471.8KB
  • Bulk Resize Photos 1.2MB → 33.66KB


やはりパンダでは私が目指す縮小サイズにはならず、「Bulk Resize Photos」の方が圧倒的に画像ファイルの容量を小さくできます。
(同じ画像で元の数値が1.2と1.3MBで表示されているのは微妙な誤差だと推察します)

パンダとゾウにもっと圧縮してほしいイメージ画
BulkResizeで1.5MB→41.4KB

ブログの容量・表示速度の改善

Googleの推奨としてはWebサイト1ページに使用されるデータ容量は1.6MB以内を目安としているそうです。

ページスピードインサイトにて、「◾過大なネットワーク ペイロードの回避」の項目を参照したところ、私のブログのトップページの合計サイズはモバイルで2964KiB(=3.035MB)だとわかりました。

とほほ、推奨を大きく上回るファイル容量でしたが、理想を目指して改善をはかりたいです。

ちなみにトップページのスコアはモバイル48、PC 78でした。


参考として記事ページも調べてみました。どのページも似たり寄ったりの数値だと判明しました。

犬が朝吐く 空腹や寒暖差による不調が原因かも 判断と回復方法 - 住宅ローンをスピード完済した家
2902KiB モバイル47 PC59

明日は我が身【高額請求】駐車場バーいくら?破損時の対応方法 - 住宅ローンをスピード完済した家
2825KiB モバイル52 PC70


モバイル50以上で及第点という見解もあります。
大幅な改善はすぐには難しいとしても、現状を把握(はあく)しておくことは大事ですよね。

[Googleによる表示速度計測ツール]
PageSpeed Insights


ブログの軽量化

画像ファイルのサイズダウン以外にもブログの軽量化のためにできることはあります。

[私が実行したこと]

  • トップページの表示記事数を減らす(一覧形式の場合)
  • サイドバーの中の不要な項目の削除
  • 成果の出ないアフィリエイト広告の削除
  • 不要なパーツの削除(はてなブックマークは残す)


[実行していないこと]

  • ブログカードを使わない
  • はてなスター非表示 軽量化になるならない賛否両論?
  • 技術的に高度な作業


知識を必要とする難しいことはさておき、簡単にできることは着手しておきたいですよね。
中級者になりかけの私による初歩的な内容でしたが、勉強中の誰かのお役に立ちますように…


[読んでほしい記事]
www.midoer.work
www.midoer.work