本稿について
ポートフォリオサイトを作成し公開したあと、ページの読み込みに時間がかかっていたため、
ずっと理由がわからず悩んでおりました。
原因がわかれば努力はできるが、原因がわからなかったためです。
その原因を調べるのに、有効だったツールの見方、原因の見つけ方を残しておきます。
（2020年10月24日時点）
原因を見つけてトライ&エラーしていきましょう
PageSpeed Insightsとは
モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。
PageSpeed Insights:https://developers.google.com/speed/docs/insights/about?hl=ja
とは言われてもピンと来ない。。。
使い方
計測
ひとまず、上の検索バーに計測したいページのURLを入力して、分析してください。
成功するとこのような画面になります。スコアについてはよく変動します。
低いからといって、落ち込むのは必要ないようです。
失敗すると
こんな画面が表示されます。ひとまず、自分のブラウザからサイトにアクセスできるなら測定できるはずです。
私はサイトが重いためか、よくエラーが表示されます、、、
読み方
ラボデータ
詳細は右側のタグをクリックすると、説明が出てきます。
計測するごとにスコアが変わります。また、項目が増えたりすることもあるので、詳細を確認して見てください。
改善できる項目
ここが一番大切です。処理に時間がかかる要素が表示されます。
サイトによって問題点が異なるので、アプローチ方法が変わりますが、
私のPFサイトは、画像の容量が重くて、遅くなっていました。
（当時のスクショをとっていなかったため割愛させていただきます）
画像はできれば、jpeg形式で保存し、100kb以下にした方が良いそうです。
診断
自分は最初、改善できる項目しか見ていなかったのですが、私のPFサイトにおいては、診断がかなり重要でした.
今回の結果をみるとCSSファイルの読み込みに9.9秒かかっているので、CSSの何かの処理が時間を使っていることがわかります。
なおここも割と変わります、何度か計測して頻出する項目にあたりをつけて原因を見つけて行くのが良いかと思います。
以上です。ありがとうございました。