1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【備忘録】ページの表示スピードが遅い原因の見つけ方(PageSpeed Insightsの見方)

Last updated at Posted at 2020-10-24

#本稿について
ポートフォリオサイトを作成し公開したあと、ページの読み込みに時間がかかっていたため、
ずっと理由がわからず悩んでおりました。
原因がわかれば努力はできるが、原因がわからなかったためです。
その原因を調べるのに、有効だったツールの見方、原因の見つけ方を残しておきます。
(2020年10月24日時点)

原因を見つけてトライ&エラーしていきましょう

#PageSpeed Insightsとは
モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。
PageSpeed Insights:https://developers.google.com/speed/docs/insights/about?hl=ja
スクリーンショット 2020-10-24 20.08.56.png

とは言われてもピンと来ない。。。

##使い方
###計測
ひとまず、上の検索バーに計測したいページのURLを入力して、分析してください。
成功するとこのような画面になります。スコアについてはよく変動します。
低いからといって、落ち込むのは必要ないようです。
スクリーンショット 2020-10-24 20.12.26.png

####失敗すると
こんな画面が表示されます。ひとまず、自分のブラウザからサイトにアクセスできるなら測定できるはずです。
私はサイトが重いためか、よくエラーが表示されます、、、
スクリーンショット 2020-10-24 20.11.42.png

###読み方
####ラボデータ
詳細は右側のタグをクリックすると、説明が出てきます。
計測するごとにスコアが変わります。また、項目が増えたりすることもあるので、詳細を確認して見てください。
スクリーンショット 2020-10-24 20.17.17.png

####改善できる項目
ここが一番大切です。処理に時間がかかる要素が表示されます。
サイトによって問題点が異なるので、アプローチ方法が変わりますが、
私のPFサイトは、画像の容量が重くて、遅くなっていました。
(当時のスクショをとっていなかったため割愛させていただきます)

画像はできれば、jpeg形式で保存し、100kb以下にした方が良いそうです。
スクリーンショット 2020-10-24 20.29.54.png

スクリーンショット 2020-10-24 20.24.32.png

####診断
自分は最初、改善できる項目しか見ていなかったのですが、私のPFサイトにおいては、診断がかなり重要でした.
スクリーンショット 2020-10-24 20.30.06.png

今回の結果をみるとCSSファイルの読み込みに9.9秒かかっているので、CSSの何かの処理が時間を使っていることがわかります。
なおここも割と変わります、何度か計測して頻出する項目にあたりをつけて原因を見つけて行くのが良いかと思います。
スクリーンショット 2020-10-24 20.32.39.png

以上です。ありがとうございました。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?