SEOカフェ

〜 悩んだらコーヒーブレイクしたら良いと思うんだ〜

【表示速度改善】画像圧縮だけでもPage Speed Insightsのスコアが0から73まで上昇!

f:id:kiyopiko-business:20170222011017p:plain

表示速度が重要!

 

表示速度がスマホでは特に大事!

 

ユーザーのためには表示速度ぉ!!

 

やたら騒がれてますね。

 

 

表示速度

 

あんまり連発しすぎるとスパム扱いされちゃうかな(笑)

 

 

早く表示をさせることができればユーザーはスムーズに閲覧できるのでストレスフリーになります。

 

ストレスフリーということは、使いやすいうえ見やすいのでユーザーにとっては有益なのです。

 

だから表示速度は遅いよりは早いほうが良いとされています。

 

ユーザーは早く表示されることを望んでいる

私の知り合いで表示速度がまさかの0というスコアのサイトがあったんですよ!!

 

 

どうも宇野さん。
今日は何ですか?

 

今回はサイトの表示速度についてですね!

 

表示速度ですか。

 

表示速度が遅いと検索結果に影響するんじゃないか?といったことをどうしても気にしちゃいますしね。

 

ですねぇ〜

なかなか表示されないとすぐ「戻る」ボタン押しちゃいます。

 

そこなんですよ!!

 

すぐ戻る(離脱する)ことですか?

 

はい!

早く表示することはユーザーにとっても良いことだからです。

 

理由はあるんですか?

 

いろいろな背景はありますが、一番はどこでも気軽にスマホで検索できる世の中になったからでしょうね。

 

気軽に検索できることと表示速度って何が関係してるんですか?

 

気軽に検索できるということは、裏を返せばじっくり検索する環境ではないということです。

 

まぁちゃちゃっと調べたい時のが多いかもしれませんね。

あとは単純にネットサーフィン(笑)

 

『ちゃちゃっと調べたい』と言いましたね?

 

はい、言いました。

 

その『ちゃちゃっと調べたい』のに『表示が遅いサイト』だとどう感じます?

 

2秒待ってダメなら戻り(離脱し)ます。

 

ですよね?

Wi-Fi環境が優れてきているとはいえ、スマホはデスクトップPCと比べると通信も不安定なのでどうしても表示速度にムラが生じます。

 

まぁ電車の中とか人ごみの中では余計に感じますね。

 

そうなんです。

当然、本人が置かれている環境もありますが、サイトを運営する側も少しでも早く表示するサイトを心がけることが最終的にユーザーのためになるんです。

だからGoogleも「なるべく表示速度は早いほうが良い」と言っているんですね!

 

あぁ、なるほど!

 

Page Speed Insightsとは

 

表示速度のスコアを図る指標としてPage Speed Insightsというツールがあります。

 

 

「ウェブページのURLを入力」というところにURLを入れるんですよね。

 

そうです。

そこで表示された結果が入力したサイトの表示スコアとなるんです!

 

学校のテストみたいですね。

 

感覚としては合っていますよ。

スコアは高ければ高いほど優秀ということです。

ちなみに表示されたスコアに対して対処法も記載されるので、重宝するツールなんです!

 

へぇ〜

 

Page Speed Insightsのスコアが0でも対処すれば70は超える

知り合いのサイトでテストしてみたら

何と!

まさかの!

0点だったんです。

 

 

逆にすごいですね。

 

そうなんです。

特に「修正が必要」と記載している内容は、早急に対処が必要ですね!

 

画像とかけっこうやばそうですね。

 

画像を多用化しているサイトは修正画像がかなり多いですね。
ECサイトや大きめの画像を使用しているサイトは特に。

 

ほうほう。

 

基本は

・画像
・Javascript/css
・キャッシュ

の3点を対応すればスコアが大幅に改善されます。

 

どれくらい変わるんですかね〜。

 

サイトの内容によっても異なりますが、先ほどの友人のサイトは『画像だけの修正』だけでも最終的にPCスコアで73まで上がりました。

 

 

あれ?
さっきスマホは表示速度が大事って言ってませんでした?

 

はい、言いました。

 

スマホはどうなったんですか?

 

スマホの表示速度は0から61まで上がりましたね。

 

 

スマホのスコアのが低いじゃないですか(笑)

 

単純に『画像だけの圧縮』で・・・ということと、こちらのサイトはPCからのアクセスのほうが圧倒的に多いので取り急ぎPC優先という形になりました。

もちろんスマホの速度を改善する必要もありますけど、今回は『画像の圧縮だけ』の比較です。

 

わかりました。

でもあとは残っている項目を修正すれば向上はするってことですもんね!

 

そういうことになります!

 

Page Speed Insightsのスコアを手っ取り早く上げるには

スコアを上げるのは診断結果が表示された下のほうにダウンロードする項目があります!

 

 

クリックしてダウンロード後ファイルを開くとこんな感じになってます。

 

 

各項目が圧縮された状態です。

 

こちらをサイトに上書きをすればスコアは改善されます!

が、

注意点もあります。

 

場合によっては圧縮しすぎることによって画像が荒くなることがあります。

 

そんな時は画質を落とさず、しかもファイル名もそのまま上書きすればOKな便利なツールがあります。

 

画質はそのままでサイズだけ圧縮できるツール

オススメは2つあります。

 

1. TinyPng(巷ではパンダ)


 

メリット:20ファイルまとめて圧縮できファイル名も変わらない
デメリット:圧縮比率が弱いのでスコアが変わらない時がある

 

2. Compressor

 

 

メリット:かなりの圧縮比率!スコアはほぼ改善する
デメリット:1枚1枚の対応かつ出てくるファイル名が末尾に「_m-compressor」がついてしまう

 

Page Speed Insightsとパンダ、Compressorを使えば基本的に画像圧縮は問題ないはずです。

 

(現在のところ)表示速度は検索結果にそれほど影響ないとされています。

 

検索結果には影響ありませんが上位表示された際に表示速度が遅いと離脱の恐れがやはりあるのでスコアを高くしておいて損はないと思いますよ♪

 

はてなブログではどうすべきなのか

結論、はてなでもやったほうが良い。

 

 

あとになればなるほど、やばいみたいです。

 

こんなことを言いつつも、SEOカフェではまだ画像圧縮が終わってません(おい

 

理由は一斉置換できない(と思っている)から

 

Wordpressや通常のサーバーの場合、該当フォルダの画像を差し替えれば良いのですが

 

はてなはアップロードしたらURLが付与されてそれを当て込んでいるので面倒なんですよ。(違う?)

 

骨が折れるので空いている時間を見つけてチビチビやってます(笑)

 

なので進捗はまたご報告ってことで( ;´Д`)

 

スポンサーリンク