つなろっく

大学生つなの「イロトリドリでロックな毎日」ブログ

サイトが重いと感じたら、ページの表示速度をチェックして画像を最適化させよう

スポンサーリンク

f:id:pea-nut:20180614160105j:plain

おすっ!つなです_(:3 」∠)_

あなたのサイト表示速度は何秒?サイトが重いと感じたら、ページ読み込みの表示速度を計測してみましょう。

 はてなブログのデザインテーマを変更しました。

 

 

おしゃれにカスタマイズもできてとても気に入っているのですが、テーマを変更してからページの表示速度が遅いような気がして気になっています。

サイト表示速度は速い方がいい!

サイトの表示速度は、速い方がいいに決まっています!

Google検索では、ページの表示速度もサイト評価のひとつとしています。遅いよりは、表示速度が速い方がSEOに有利といえます。

 

ところで、あなたはクリックしてページが表示されるまでどれくらいの時間なら待てますか?

3秒でも長いと感じる人もいれば、10秒くらいはふつうに待てるという人まで、性格が表れますね。どれくらいの時間が待てるかで短期度チェックもできそう。

わたしは気長な方だと思うのですが、5秒待ってもページが表示されなければ「あれ?」と思い、10秒以上ぐるぐる状態なら「不具合が生じている」と感じてそのページを閉じてしまいます。

サイトの表示速度が遅いほど、ページを離れる人は増えます。

 

一般的に、読者が待てるページの読み込み時間は最大でも10秒と言われています。10秒を過ぎると、ほとんどの読者はそのページを離れてしまいます。

 

また一度でもそうした経験があると、そのサイトに対しての印象も下がります。検索で上位表示されることがあっても、同じサイトをクリックする確率はかなり低くなります。

 サイトのページ表示速度が遅くていいことはひとつもありません。

 

早速、サイトの表示速度を計測してみましょう。急げ~((((oノ´3`)ノ

サイトのページ速度を計測する方法

今回は無料で簡単に測定できるふたつのサイトで表示速度をチェックしてみます。

PageSpeed Insightsでサイト速度チェック

Googleが提供しているサイトの表示速度がチェックできるサイトです。

PageSpeed Insights

サイトURLを入力するだけで、無料で誰でも簡単に使えます。サイトの最適化を100点満点の数値で表してくれるのも、分かりやすくていいですね。

モバイル版、パソコン版の2パターンが一度にチェックできる優れものです。

つなろっくのサイト表示速度をチェックした結果はこちらです。

 

モバイル版81点!!

 f:id:pea-nut:20180613222521p:plain

 

パソコン版35点!!Σ(・ω・ノ)ノ!

あ・赤点・・・。

f:id:pea-nut:20180613222638p:plain

 パソコンとモバイルでこれほど差が出るものなのでしょうか_(:3 」∠)_

 

Googleアナリティクスのサイト速度チェック

Googleアナリティクスは無料で登録できて詳しいアクセス解析をしてくれるハイスペックなツールサイトです。

Googleアナリティクスなら、サイトの表示速度も簡単にチェックできます。

レポートから「行動」→「サイトの速度」をクリックします。

f:id:pea-nut:20180613223552p:plain

 

当サイトのサイト速度を調べた結果は、こちら。

 

f:id:pea-nut:20180613224057p:plain

平均読み込み時間・・・6.88秒

少し遅い気もしますが、許容範囲かな?

平均読み込み時間とは、リンクをクリックしてからページがすべて表示されるまでに要する時間になります。

数日後にほぼ同じ状態で測定しなおしてみると、平均読み込み時間は5.99秒でした。

数値に違いが出るのは、Googleアナリティクスのサイト速度が、サンプルページを使った計測方法をとっているからです。サンプルページは1%のみ。そのため、同じ条件でも計測する日によって平均読み込み時間は異なります。

そのため正確なサイト表示速度ではなく、参考速度になります。

週ごとに変動をチェックする感じがいいかもしれませんね。

改善点をチェックしてサイトを軽量化

 みなさんのサイトの表示速度はいかがでしたか? 

 PageSpeed Insightsではここを直すとサイトをもっと軽量化できるよという改善点を教えてくれます。

それが「最適化についての提案」↓です。

f:id:pea-nut:20180614223053p:plain

  • 画像を最適化する
  • ブラウザのキャッシュを活用する
  • スクロールせずに見えるコンテンツのレンダリングをブロックしているJaveScript/CSSを排除する
  • JavaScriptを縮小する
  • CSSを縮小する

以上の項目について「修正方法を表示」をクリックすると、それぞれ改善できる箇所が表示されます。

上に表示されている項目ほど、改善効果の高いものになります。赤点をもらった人は、そのまま放置せずにできるだけ早めに改善に取り組みましょう!

画像の最適化

サイトを軽量化するいちばんの方法は、画像データを圧縮することです。画像を最適化させるだけでも、サイトの表示速度はかなり軽量化できますよ。

 

でも、画像の最適化ってどうするの?

画像を圧縮?JavaScriptを縮小?

はてな?(。´・ω・)?

という人も安心してください。

PageSpeed Insightsでは、上で指摘された改善点について最適化されたものがダウンロードできます。

最適化されたファイルをダウンロード

 

↑画像の「このページ向けに最適化された画像、JavaScript、CSSリソースをダウンロードできます」のリンク部分をクリックして、ファイルをダウンロードします。

ファイルを開くとこんな感じで入っています。

f:id:pea-nut:20180614224621p:plain

JavaScriptやCSSは、テーマやアドセンス用のものもあり、いじらないほうがいいものもあるので、よくわからない人はスルーしても大丈夫です。

 

ここでは、画像の最適化をすすめていきます。

①ダウンロードした圧縮ファイルを展開します。

②ファイルから「image」ファイルを開きます。

③アップロードして画像ファイルを上書きします。

うまく上書きができない場合は、新しい画像をアップロードして記事内のリンクを直して、容量の大きいふるい画像を削除すればOK。