見やすいブログにするために画像の◯◯は必須!しかも簡単!【もっとはやく知りたかったノウハウ】

Pocket

この記事を読むと、スマホでのブログの表示速度を速くする、ある方法がわかります。ブログに興味をもってくれた読者をのがさないために、とても重要なことです。

スマホでのブログの表示速度を計測するサイトでいろいろなブログを検証していたら、あることが分かりました。

そしてその問題を解決する簡単な方法もシェアします。

今までと同じ=以前より悪くなっている

昨日の記事で、スマホでの表示時間を計測できるというお話をしました。

スマホサイトの表示が遅くて読者を逃していませんか?離脱の測定サイトでびっくり

ほんの一週間ほどのあいだに接続条件が3Gから4Gにグレードアップしていて、

3Gだったら『良好』な表示速度だった僕のサイトが、4Gでは『遅い』と言われてしまいました。実際の表示速度は短くなっているのにもかかわらず!です。

つまり、周囲がどんどん素早い表示になっているのに、自分だけ以前と変わらなかったらそれは悪くなっているのと同じ、ということですね。

悔しいのと面白いのとで、このサイトでいろいろなブログを検証してみました。

すごいブログは表示がはやい

超有名なマナブさんのmanablogは超速でした。

さすがです!

クロネコ屋さんのクロネコ屋の超ブログ術はこんな感じ。

みなさん、すごいなぁ!!

ここで僕はちょっと考えました。

「有名だけど画像が多いブログってどうなんだ? 案外表示速度が遅いんじゃないか?」

そこで参考にさせていただいたのがヒトデさんのhitodeblog

う……すごい! ヒトデさんのブログはめちゃくちゃ画像、というか図解説明が多くて分かりやすいんですよね。

それで2秒台……。判定は『遅い』となっていますが、2秒以内だと『平均』となるようです。

なんですかねこれ。コンマ◯秒とかで判定ってオリンピックですか笑

しょぼいブログは遅い

そこではた、と気が付きました。

逆に人気のないブログは遅いのか?

ということで実際に試してみました。

失礼ながら明らかにブログ初心者さんとおぼしき方のブログのドメインで検索すると……こんな結果になってしまうブログもありました!!

なんか日本語がおかしいですが、要するに『問題が発生して計測ができません』という結果ですね。

どうやって改善したらいい?

昨日の記事にも書きましたが、Google先生は

「きみのブログは表示速度遅いよ!」

とキツいお達しをするだけでなく、改善案も提示してくれています。こんな感じです。

CSSを軽量化する

軽量化とは、ファイルの実行に必要のないすべてのデータをコードファイルから取り除くことです。これによって反応時間が短くなり、帯域幅コストも減少します。

ひとつだけではなく、いくつもあって、今回僕が注目したのはこちら!

適切なサイズの画像を使用するーーという方法です。

というか、要するに『大きすぎる画像は小さくしましょうね』ということですよね^^

CSSをいじるのはまだちょっと勇気が……とためらう方にも試していただけるからです。

しかも超簡単な方法です。

ブログに貼る画像で実際に検証してみました

しかし、『大きすぎる画像は小さくしましょうね』といっても、小さくて見にくくなっちゃったらダメじゃん!

……という反論もありそうです。実際、僕がそうでした。

しかしよく調べてみると、

画像が表示されている大きさと容量は別物!
ということが分かりました。つまり画像の容量を軽くすればいい、ということなんですね!

インターネットの仕事をしている限り、Google先生の言うことは無視できません

ブログの表示速度に関わるのであれば、これは気にするべきことですよね。

しかも、大量の画像をブログに貼り付けてしまったあとでは改善するのが大変そうです。

ぜひあなたも今のうちに対処しておいてくださいね。

画像の軽量化を実際に検証してみました!

まず、僕がいつもお世話になっているいらすとやさんで画像をいただいてきます。

容量が違う3枚を貼り付けてみますのでご覧ください。表示サイズはすべて同じ257x300です。

いかがでしょうか。

なにか違いが分かりますか?
.
.
.
.
.
.
.
.
.
.
.
.

じつはこの3枚、こんな感じにそれぞれ違う画像なんです。

  • 最初の画像 いらすとやさんのイラストを右クリック『リンク先を別名で保存』で保存。347KB。
  • 真ん中の画像 いらすとやさんのイラストを画面キャプチャーで保存。211KB。
  • 最後の画像 最初の画像を軽量化。16KB。
最初と最後の画像では、容量はじつに約22分の1になっています。

やり方は簡単

画像の軽量化、つまり『リサイズ』は非常に簡単にできます。

こちらのサイトがオススメ。

BULKRESIZE

『ここに画像をドラッグ&ドロップ!または画像を選択します』とわかりやすーくなっています。

ぜひ使ってみてくださいね!