mocharina*布あそび

3匹のモルモットと趣味のテニス、大好きなキルトや小物作りのあれこれを綴ったブログです。

サイトのページ表示速度・画像圧縮の比較・スマホでサイト画像の保存方法

こんにちは、モカリーナです。

 

きょうは、サイトのページ表示速度・画像圧縮・スマホでサイトの画像を保存する方法についてです。

 

ネットサーフィンをしていると、

「端末の読み込み時間を短くしましょう。」

とあったので何気に診断してみると、

なんとー⁉︎ ガーーーーン!!

 

読み込みスピードなんて、考えたことがなかった〜!

赤点です (T ^ T) 

写真を貼り付けるのが、怖くなっているモカリーナです。

 

 

サイトのページ表示速度

 

サイトのページ表示速度が遅いと、

 

  • 完全に表示されるまでに3秒以上かかると53%のユーザは直帰する
  • サイトのアクセス数が減少し、離脱率も上昇する
  • 顧客満足度が低下する

 

…などが書かれています。

 

速度が遅い原因
 

サイトの読み込みが遅くなる原因として、

  1. サイト内のコンテンツが重い
  2. CSSファイルが重い
  3. Javascriptを使用しているため重い

 

PageSpeed Insightsで診断
 

「PageSpeed Insights」で診断されたことはありますか?

 

診断してみて下さい ⬇︎

PageSpeed Insights

 

Scale:緑色  90~100(速い)黄色  50~89(平均)赤色  0~49(遅い)

 

診断結果が書かれています。

 

診断結果

 

実はPageSpeed Insightsは、パソコンとモバイルの2つの診断がのっています。

 

モカリーナの診断結果は、

パソコンは70点(普通)、モバイルは27点(遅い)

 

でも、モバイル診断は「エミュレート済み 3G での現在のページに関する Lighthouse 分析です。」となっています。

今、ほとんどのモバイルが4Gなので、心配することはないそうです。

 

ですが、今後のことを考えると、写真は画像圧縮した方がよさそうです。

 

画像圧縮の比較

 

モカリーナは作品をスマホで撮るのですが、

影が入るのでトリミングしてから使います。

スマホでご覧の方は、違いがあまり分からないかもしれません。

 

元の画像 (1.28Mb)

 

トリミング後 (918Kb) 

f:id:mocharina09:20181229183131j:image

 

トリミング後 70%画像圧縮 (334Kb)

f:id:mocharina09:20181229215445j:image

 

トリミング後 60%画像圧縮 (246Kb)

f:id:mocharina09:20181229215456j:image

 

トリミング後 40%画像圧縮 (115Kb)

f:id:mocharina09:20181229215502j:image

 

トリミング後 30%画像圧縮 (68Kb)

f:id:mocharina09:20181229215522j:image

 

 

※ひよこ・ペンギンのビーズの輝きに注目してください。

(ひよこの名札・ひよことペンギンのキーホルダーは娘作)

 

画像圧縮の30%はスマホでみると違いが分からない範囲内。

 

パソコン画面は画像圧縮の40%はあった方がいい気がします。

(調べたところサイト向きは125Kb位とありました。)

 

  • 元の写真        1.28Gb
  • トリミング後  918Kb
  • トリミング後 70%画像圧縮  334Kb
  • トリミング後 60%画像圧縮  246Kb
  • トリミング後 40%画像圧縮  115Kb
  • トリミング後 30%画像圧縮    68Kb 

 

スマホでサイト画像の保存方法

 

スマホでサイトの画像を保存する方法を調べました。(パソコン操作が苦手なため)

 

保存したいサイトの画像を長押しします。

iPhoneの場合「イメージを保存」を押します。

f:id:mocharina09:20181228140551j:image

 

ホーム・アプリ画面の「ギャラリー」に保存されています。

モカリーナのスマホでは「フォト」に入ってました。

 

今後の対策

 

モカリーナは過去記事に使用した写真を、全部は保存していません。

スマホから画像を保存し、画像圧縮したら何とか出来そうです。

 

125Kbに画像圧縮してみると、布の柄がボヤました。

布小物には最低でも250~350Kbにした方がよさそうです。

パソコン画面を確認しながら、やり直そうと思います。

 

200記事のうち20記事ほどやり直しましたが、

診断結果はさほど変わりませんでした。

 

今後は画像圧縮してから写真を貼って、

過去記事の写真は時間があるときにでも、またコツコツやり直そうと思います。

 

 

最後までお読みいただき、ありがとうございました。

 

モカリーナより♡

 

minne.com