MEDIOCRITY BLOG

【2016年9月ブログ開設〜】月間7万PV達成!!サラリーマンやりながらブログを書く『サラリーマンブロガー』です。MacとiPhoneをこよなく愛します。Hulu&NetFlix&AmazonPrimeで海外ドラマを観る休日は最高!!

ブログ100記事書いたが、画像圧縮しないと大変なことになる話

f:id:Mediocrity:20161126190430p:plain

とうとう100記事を突破しました!しかし、わたしは、大変なことを怠っていました!!

そう。【画像圧縮】です。

今までは、サイズ合わせや文字入れなどは気を使っていたのですが全く画像圧縮をしていませんでした!でも100記事を超えると、なんか自分のブログが最初の時と比べ、

『あれっ!!なんかこの記事若干読み込みスピード遅くないかい??』
『おい!読み込み遅いぞ!っと自分のブログなのに、なんだこのクソブログは????wとなりそうです。』

みたいな感じに考えるようになりました!画像圧縮の必要性自体は知っていましたが、初めのうちは特に意識していなかったのです。

なんとなく『やったほうがいいんだろうけど、なんか面倒くさいしなぁ!!』と後回しでした。それが、間違いの始まりだったんです…そんな話です。w

スポンサーリンク


画像圧縮の必要性

まずは、画像圧縮しないとサイト(ブログ)の読み込みに時間が掛かるようになるそうです。そして、サイト(ブログ)の高速化が必要な理由は下記のように書いてました。

サイトを高速化する理由
Googleではページスピードが検索の1%に影響している。
ユーザーがページ表示に待てるのは2秒まで。
3秒以上かかると40%以上のユーザーは離脱する。
フォーチュン500の企業のサイトは平均で表示に7秒以上かかっている。
表示が1秒遅れるごとにコンバージョン率は7%落ちる。
表示が1秒遅れるごとに顧客満足度は16%落ちる。
速いサイトはインフラと公開にかかるコストを50%かそれ以上削減する。
出典:https://www.suzukikenichi.com/blog/website-performance-optimization/

みなさん、ユーザーが待てる時間は2秒ですよ!!!!そして、表示が遅れるほど顧客満足度が低下します!よく意識高い系サラリーマンが言うヤツです、

『おいっ!!このアジェンダに対するアウトプットさぁ、うちらの事業スキームとちょっと方向性違うじゃん。』
『こんなんじゃCS(Customer Satisfaction)が低下するぞ!!!』

のCS(顧客満足度)です!w

『こりゃいかんぜよ!』ってことで、次からわたしが行ったことについて説明します。

※SEO的にどうかはよく分かりませんが、とりあえず、私としては、表示が遅いと『別のページでもいいや!』って戻るボタン押しちゃうので、『画像圧縮』は必須だと思いました!!

現状の表示速度

Googleが提供しているサービスの『PageSpeed Insights』で現状の表示速度を測定してみました。

f:id:Mediocrity:20161126161041p:plain
f:id:Mediocrity:20161126161056p:plain

パソコンで『48』、モバイルで『47』この数字がどうなのかは詳しく分かりませんが取り敢えず赤字なのでヤバイんでしょう!

画像圧縮の手順

すでに100記事も書いてしまっていたので、まずは全画像の取得からやってます。これからブログ始めますって方は②から見て下さい!

①はてなブログの全画像バックアップ

『SiteSucker』というソフトでバックアップします。

わたしの場合は、100記事時点で約320枚の画像ファイルをアップしてました。

詳しくは別記事で説明します。
参考▶後日作成予定。

②画像の圧縮作業

わたしの場合、画像はPNG形式で扱ってますので、『TinyPNG』が一番簡単でした!
参照:TinyPNG – Compress PNG images while preserving transparency

操作方法はめちゃくちゃ簡単です。

サイトにアクセスしたら、真ん中のボタンをクリック。そして、圧縮したい画像を選択。それだけ!!

f:id:Mediocrity:20161126182707p:plain
f:id:Mediocrity:20161126182659p:plain

これで、1MBの画像が200KBぐらいに圧縮されます。ホント軽くなりますっ。

③全画像の差し替え作業

大変です…。地獄です…。心が折れました…。まだ差し替え作業全部終わってません。ものすごい時間が掛かる作業です。約320枚分の画像を1つ1つ間違わないように差し替えを行わなくてはならず、ものすごい『作業感』。

ホントに、最初から画像圧縮しておけば、こんなに大変な苦労をしなかったのにと後悔&後悔。

改善後の表示速度

f:id:Mediocrity:20161126161102p:plain
f:id:Mediocrity:20161126161049p:plain

まだ、志半ばですが、改善はしてましたね。

パソコンで『63』、モバイルで『54』

改善効果はパソコンが『15』改善!!モバイルが『7』改善!!

さいごに

ブログに貼る画像は必ず圧縮してから貼りましょう!!!

以上。