みなみ風の吹く裏庭で。

旅行やグルメや好きなもの

ブログに載せる写真の圧縮①~表示スピードが遅いと起こるデメリットとページスピードインサイトしてみた結果。

「サイトをスピーディーに表示するために、記事内の画像は圧縮した方がいい」というのはよく目にしますが、

「やらねばだわぁ~~アハ」なんて思いつつも、ほっぽらかしていました。

 

しかし先日、たつとら様の記事を読んで、本当にこれはやらねばならん!とカツを入れられました。

 

www.tatsublo.net

(勝手に引用すみません。不都合あれば教えてください~(>o<)

私よりもずっと詳しいのでぜひのぞいてみて下さい!

 

 

目次

 

 

表示スピードが遅いと起こるデメリットとは??

①ネット検索で上がってこない

 

「今日、私たちは2018年7月からページスピードがモバイル検索のランキング要因になることを発表しました。」~グーグルさんの言葉より~

 

要するに、遅いと誰かがネット検索した時に、1・2ページ目とか目立つところにはおいてあげられません、ということですね。

 

 

②直帰率の上昇

〇上位50サイトに絞って平均値を求めたところ、データサイズは約1.2MB

〇読み込み時間が3秒を超えるとPVがガクンと下がり、直帰率が急増した

〇読み込みにかかる時間が2秒以内だと直帰率は9%だが、3秒から直帰率が大きく増え、5秒だと38%に達してしまった。 

ページ読み込みは「2秒以内」に - 3秒待てないモバイルユーザー、画像圧縮で表示速度改善を | Beyond(ビヨンド)より引用

 

2秒以上かかると、これは見ないで別のページ見よう!ってなってユーザーは帰っちゃうわけですね。たしかに、「おそいなぁ、読み込み」と戻るボタンやスワイプをした覚えは一度や二度ではありません。

 

 

 

自分のサイトの表示速度を把握してみよう

ではでは、まずは自分のページがどれくらいの速さで表示されるかを確認しておきたいです。

 

PageSpeed Insights

 

このサイトに、URLを打ち込むだけで簡単に診断してくれます。グーグル提供なので安心。

もしかして、めちゃんこ速かったりすれば、何にも対策しなくていいということもあります(^^)

 

 

<結果……>

スピードインサイト

なぜか画像が悪いですが、とりあえずは「遅いぞ」ってことはわかります。

 

 『おたく、遅いですよ』とグーグルさんからはっきりと言われています。

グーグルさんは、割と歯に衣着せぬタイプですからね。

 

 

しかもこれはまだいい方です。

「今のは練習。良くなるかもしれないし」と思って、もう一回してみたら、「28」になっていました。通信状態などでも10くらいはすぐに数値に変化が出るようです。

ちなみにパソコンの方は、60くらいだったと思います。

 

 

〇 「改善できる項目」をみてみる


2番以外一つも意味が分かりません。

 

2番はたつとらさんの、写真の容量を減らそう!ってことですよね?

苦労して1秒しか短くならないの?!いや、一枚につきってこと?!

 

順番的には1番から取り組んだ方が効率が良いってことなのでしょうか…。

 

 

〇「診断」とはなんぞや、だが見てみる…

「改善できる項目」と「診断」の違いがまずわかりません。

そしてその「診断」について、わかる項目は一つもありませんでした。

 

(-人-)ナームー

 

とりあえず、上の4つが危険マークみたいになってるので、それが足かせになっているのだろうと思います。

しかし、「改善できる項目」に載っていないということは、「改善できない」のか…「改善できる項目」を改善することでつられて改善するものなのか……

困ったサル

「……。」

 

 

画像の圧縮以外にもやらなければならないことがたくさんあるような気がしてきました。 

 

 

ブログの画像圧縮の必要性

とりあえず、「改善できる項目」の2番手である「適切なサイズの画像」を張ることは、重要度で言えば上みたいなので、必要性があります。

 

 また、写真は毎回張るので、遅くなればなるほど面倒になるもののひとつであると思われるわけです。文字を替える、とかなら一気にできそうだけど、写真の張り替え、は一気にできない感があります。

 

〇自分のアップしている写真…IPHONEで撮った写真

〇アップ方法…携帯のはてなアプリから編集で入れている

 

文字は、パソコンで書いています。

写真は携帯からが楽ちんなのでいつもそうしています。

 

 

〇IPHONEの写真の大きさは?

どれくらいかな~と思ってみてみると…

なんとだいたい1枚につき1MB~6MBでした。

 

ええ~~!!

たつとらさんが100kb以下でいい、って言ってたのに、10~60倍のものを何枚も載せていた?!

 

 

ちなみに、『MB(メガバイト)』とはなんぞや?という方は、下の引用を参考になさってください。

そもそも「バイト(Byte)」とは?

コンピュータで扱われるデータの量(サイズ)の大きさを表す単位として「バイト」が使われています。

半角英数文字1文字のデータ量が「1バイト」であるとされています。

1024バイト=1キロバイト、1024キロバイト=1メガバイト、1024メガバイトが1ギガバイト、というように大きさによって単位が変わっていきます。

1ギガバイト(GB)はメガバイト(MB)ではどれくらい?

 

ただ、近年のハードディスク等では、1キロバイト=1000バイトで計算している場合もあります。

~おさらい~
1KB(キロバイト)=1024バイト
1MB(メガバイト)=1024KB(約100万バイト)
1GB(ギガバイト)=1024MB(約10億バイト)
1TB(テラバイト)=1024GB(約1兆バイト)

1ギガバイト(GB)はメガバイト(MB)に換算すると何MB?|エンジョイ!マガジンより

 

基本的には、素人は1000単位で考えるのでよさそうですね。 

 

 

恐ろしくなり、自分のブログを開いて、試しに数枚コピーして携帯に保存してみました。

 

そして、また容量を確認すると……2MB位だった写真が、600KB位になっていました。…アレレ。

 

なんと、はてなブログには、勝手に画像をリサイズする機能が加わっているそうです。(はてなブログから編集では長辺1024pixelに。)

参考:はてなブログ、自動リサイズの画質を調整するには? - ブログのCSS

 

 でも、600KBでも大きすぎますよね。やはり何かしらの手を自分で打たないとだめなようです!

 

 


編集後記

数日前から取り組んでいた記事なのですが、訳が分からず、頭がこんがらがって気持ちが悪くなってきました。

とりあえず今回はここまでにして、次回に実際どうやっていくのかを考えていきたいと思います。ではっ。

 

 

 

続き。実際にどうやるか実践編↓

www.minamiuraniwa.com