ブログを軽量化する為に画像を全て貼り替えてみた!有効な手段とは?

何でも書きますがブログアクセスアップの仕方(主にFC2ブログ)を模索したり、気になったニュースに対してコメントします!

 

ブログを軽量化する為に画像を全て貼り替えてみた!有効な手段とは?

久しぶりの更新となりました。

今回は画像についてのお話です。実を言うと今まで画像の整理を行っていました。

具体的に言うと今までアップロードした画像を全てリサイズや軽量化を行い過去記事に貼ってあった画像を全て貼り替えました。

それに伴い元々アップロードしてあった画像は全て削除しました。インデックスされた画像は元記事が無くても画像そのものを消さないといつまでも検索エンジン上に残ってしまうからです。

過去記事の画像は全部で440枚程あったので非常に骨の折れる作業でした(^_^;

なぜこの様な作業を行ったのかというと読み込み速度を上げる為です。

画像の軽量化について

 

読み込み速度はSEO的に重要と言われていますが実際に検索順位にどこまで影響しているのか分からない部分はあります。ネット上で調べても検索順位に影響があるという記事もあれば影響が無いという記事もあります。ただ1つ言える事は読者にとっては速いに越した事はないという事です。実際に私がサイトを開く場合もあまりにも重ければイライラして閉じる事がよくあるからです。

当ブログの場合は「PageSpeed Insights」で測定したところモバイルでは30点台でした。

スコアを悪くしている1番の原因は画像でした。画像を貼り替えた結果、ページにもよりますがモバイルで50~60点台まで回復する事が出来ました。
(下画像参照)

PageSpeed Insightsのモバイルでのスコア

※トップページでのスコアです!

ちなみにモバイルで70点以上はかなりハードルが高いと思います!

まだまだ改善の余地はありますが(広告等)今回は画像に焦点を当てます。

アプリで軽量化してみた!

画像に関して画質を選ぶか軽さを選ぶかとても悩ましいところですが私の場合は画質を選んだ結果読み込み速度が遅くなるという結果になってしまいました。前にこちらの記事「ブログに画像をキレイにはみ出さずに貼る方法を紹介します!」でも話しましたが画像をキレイに貼るにはサムネイルを使用すれば確かに画質を落とさずに貼れますがやっぱり重いです。

画像を軽くする手段として一般的には圧縮ソフトを使用するとは思いますが私の場合は「PCを開きたくない派」なので何か良いアプリはないか?と探したところ良いアプリがあったので紹介します。

Android端末限定のお話になってしまいますが「Resize Pro」というアプリです。このアプリの良いところはリサイズする際に画質も調整出来る部分です。
(下画像参照)

画質の調整画面

画質と容量を比較してみる!

百聞は一見にしかずなので実際の画像で比較します!

細かい文字が入った画像が1番分かりやすいと思ったのでFC2ブログの公式テンプレートのHTML編集画面で比較します!

【画像①】:加工内容

元画像【307KB (1600 x 1304)】
  ↓
サムネイルで横幅600に指定

 

【画像①】

サムネイルの横幅600にした場合

これはリサイズをせずに元画像【307KB (1600 x 1304)】から横幅600でサムネイルにした画像です。容量も307KBのままです。これが最も重く最も画質が良いので基準にして比較します!

まずFC2ブログのアプリで縮小してみます!

【画像②】:加工内容

元画像【307KB (1600 x 1304)】
 ↓
FC2ブログのアプリで幅600にリサイズ
 ↓
【78KB (600 x 489)】

【画像②】

FC2ブログで縮小した画像

容量はかなり落ちていますけど画質がクソですよね?これが気に入らなかったので今まではサムネイルを使用していました。

続いて「Resize Pro」で加工した画像です。

【画像③】:加工内容

元画像【307KB (1600 x 1304)】
  ↓
「Resize Pro」で横幅600にリサイズ:画質は100(最高)で設定
  ↓
【81KB (600 x 489)】

【画像③】

「Resize Pro」で幅600で加工した画像

【画像②】と比べるかなり良いですよね?おまけに容量もそれ程差がありません。細かい文字があまりない画像であれば幅600のリサイズでも結構いけます。ちなみに1番上の「PageSpeed Insights」の画像はこのアプリで幅600にリサイズしそのまま貼った物です。

ただ今回の様に細かい文字が入った画像ではまだ見づらいのでもう少し画質を上げます。

【画像④】:加工内容

元画像【307KB (1600 x 1304)】
  ↓
「Resize Pro」で横幅900にリサイズ:画質は100(最高)で設定
  ↓
【149KB (900 x 733)】
  ↓
サムネイルで横幅600に指定

【画像④】

「Resize Pro」で幅900で加工した画像

こうやって比べると【画像①】【画像④】はそれ程画質は変わらないのに容量が【307KB 】から【149KB 】へと軽量化出来ています。この様に画質と容量を見比べながら最適化する事が出来ます。

もっとシンプルな画像であれば画質を落として更に軽量化することも可能です。

この様にしていく事によって画像を全体的に軽量化する事が出来ました。

ブログパーツにも気を配る!

 

個々の画像を最適化する事によりこれだけでもだいぶ軽くなりますがもう1つ気を配らないといけない物があります。それは画像が絡んだブログパーツです。主に最新記事、人気記事、関連記事等です。

これらにサムネイル画像を入れるとかなり重くなります。1番手っ取り早いのは画像を入れない事ですがやはり殺風景になりますのでついつい入れたくなるものです。ここでの対策法としてアイキャッチ画像には軽い物を選ぶ事です。

極端な例えですが1つのページ内にブログパーツだけで仮に20枚もの画像がある場合1枚につき50KB軽い物を選ぶだけで1MBも軽くなります。なので記事内に複数の画像を使用している場合はブログパーツに直結するアイキャッチ画像は軽い物を選ぶべきです。

またほとんどのブログパーツは表示させる画像数(記事数)も調整は出来るのでもし重くなるのなら表示させる数を絞るのも1つの手段です。

Rankletの画像は重い!

余談ですが当ブログのプラグインにある人気記事で使用しているブログパーツ「無料で人気ページランキング Ranklet」にサムネイル画像を入れるとクソ重いです。何もしないと画像の容量がそのまま取り込まれるので注意が必要です。

対策としてこういう記事「ランキングを表示できるRankletで指定したサイズの画像を表示させる方法」がありましたが私にはよく分からなかったのでRankletのサムネイル画像は消しました(>_<)

まとめ

 

サイトを重くする原因は色々とあるとは思いますが特にブログの場合は画像が大きく占めていると思います。

【画像からサイトを軽量化するポイントとして】

①圧縮ソフトやアプリを使用して極力画質を落とさずに容量を落とす

②アイキャッチ画像は記事内の画像からなるべく容量が少ない物を選ぶ

③ページ内に表示する画像の数を調整する

本当は全て行う事が望ましいですが特に①を行う為に過去記事の画像を貼り替えるのはとても大変です。貼り替えを行いたくない場合は②③を行うだけでもかなり軽く出来ます。

もし「PageSpeed Insights」で50点を切る様ならすぐに改善した方がいいと思います。また私の体感だと20点を切る様なら重いというレベルを超えて読もうという気になれないレベルなのでかなりの重症だと思います。

1度「PageSpeed Insights」でチェックしてみてはいかがでしょうか?

アクセスアップ・ブログ豆知識の目次はこちら
関連記事


 アクセスアップ豆知識

8 Comments

がちょー  

更新、お疲れさまでーす。。

黒猫さま、こんにちわ。
おお~、久々の更新でありましたね☆

ブログを軽量化する為に画像を全て貼り替えたのでしたか
私も以前失敗というか、大きい容量の写真をブログに貼ったままでありましたよ。
わたしもせっかくだから、黒猫さまのマネをして画像を小さいものに変えてみますねv-291

2017/10/22 (Sun) 14:42 | EDIT | REPLY |   

黒猫  

がちょーさんへ

もう貼り替えは2度とやりたくないです(^_^;
やっぱり重いとすぐに閉じられてしまう可能性があるので思い切って全部貼り替えました(^_^;

2017/10/22 (Sun) 14:50 | REPLY |   

Ran Ran  

おお。

ものすごい作業量でしたね。

しかし、技術レベルが高すぎて、話についていけません(笑)

私のブログもものすごく重いのはわかっているんですが・・・・・・直し方がわからないんですよね。そんな時間もないし。。

勉強になりました。

2017/10/23 (Mon) 02:07 | REPLY |   

黒猫  

Ran Ranさんへ

Ran Ranさんのブログは50~60点台でした。
画像そのものはそれ程重くない感じです。
1番足を引っ張っているのは1番上のAdSense広告の様ですね(^_^;
ただこの点数ならまだ許容範囲だと思うので原因だけは頭の片隅にでも入れておいて下さい(^^)

2017/10/23 (Mon) 06:12 | REPLY |   

がちょー  

こんばんわ♪

重いとすぐに閉じられてしまう可能性があるのですか!
確かに、おっしゃる通り いつまでも画面が出てこないと閉じてしまいますよ

今回もブログのことを勉強させていただきましたよv-290
ありがとうございまーす。。

あ、マグロ 大変に美味しかったでありました(*^-^*)//



2017/10/24 (Tue) 21:27 | EDIT | REPLY |   

黒猫  

がちょーさんへ

たまにすごく重いサイトありますからね(^-^;
特に私の場合だと画像をたくさん貼る場合があるので気を付けます(^-^;

マグロたくさん食べたいです(^^)

2017/10/24 (Tue) 21:49 | REPLY |   

えいしん  

軽量化!グッジョブ!ですね。

えいしんです。

兎に角、「重たい」事は、何についても、「マイナス」
だと思います。
私のPCも、とっても「重く」、起動してから、ヤフーを開くまで、結構、「時間が
かかります」!(;笑)。
勿論、「1時間」とかでは無いですが、「イライラする」位の時間です(;笑)。

確かに、何時までもメイン画面が開かないと、イライラして、閉じてしまうかも、ですね!

それでは、お疲れさまでした。

2017/10/25 (Wed) 03:38 | REPLY |   

黒猫  

えいしんさんへ

私のPCも重くて起動すらしたくないレベルです(^-^;なのであまり使っていません(^-^;

タブレットもかなりヤバいのでやっといい感じの新型が発売されるので年が明けたら買い替える予定です(^^)

2017/10/25 (Wed) 06:17 | REPLY |   

Leave a comment