ぬるま湯デザイン塾 – 公式ブログ

みなさんこんにちは！
新潟から平原です＾＾

さて、
今週は「サイトの表示スピード」について。

「なんかちょっとサイトが遅いな…」と思ったことありませんか？
でも、その“遅い”って、体感でしかないですよね。

じゃあ、実際どのくらいかかってるのか？  

実は”計測”することができるんです。

ということで今回は、表示スピードを“数字で見る”方法を
サクッとご紹介です。

PageSpeed Insights

Googleの公式の無料ツール。

サイトはこちら▶︎

URLを入れるだけで、スマホとPCそれぞれで
ページの読み込み速度をスコア化してくれる
というスグレモノ。

100点満点で表示されます。

大事な指標はコレ↓

◆LCP

「一番大きなコンテンツ（画像や見出し）が表示されるまでの時間」

ページを開いたとき、
最も“目立つエリア”がどれだけ早く出てくるかを示す指標です。

ファーストビューで写真がドンとあるサイトなら、
その画像が出るまでの時間がここに反映されます。

理想は2.5秒以内。

ここが遅いと、「なかなか開かないな…」と思われやすい。

◆FCP

「最初の何かしらのコンテンツが表示されるまでの時間」

真っ白な画面から、文字・画像・背景などが
“初めて”表示されるまでのスピードです。

“動き出しの早さ”というイメージですね。

これが早ければ、
「あ、読み込み始まったな」と感じてもらえるので、
ユーザーの離脱も減ります。

理想は1.8秒以内。

◆CLS

「表示中にどれくらい画面がズレたか」

よくあるのが、ページ読み込み中にボタンがズレたり、
クリックしようとした場所が一瞬で動いてしまう…あれです。

これは見た目の問題だけでなく、
操作ミスやストレスの原因にもなるので、意外と重要。

数値が0に近いほど安定した表示ができていて、
0.1未満なら優秀。

このPageSpeed Insights、点数だけじゃなくて、
「どこが重たいか」「どこを直すのか」
も教えてくれるので、めちゃくちゃ便利。

せっかく頑張って作ったサイトでも、
「遅いな…」で帰られちゃうのはもったいない。

まずは現状を知るところから。

体感じゃなく、数字で見る。
それだけで、一歩前進です＾＾

他にも計測ツールはありますが、
まずはPageSpeed Insightsがおすすめ。

車のスピード違反は怒られちゃうけど
サイトのスピード違反は褒められる

って話です。

みんなでスピード違反していきましょう。笑

平原は今から免許更新に行ってきますw