DESIGN NOTES
小さなお店のサイトを、軽く保つために決めている数字
表示が遅いサイトは、内容を読んでもらう前に閉じられてしまいます。とはいえ、速さの話は数字が多くて分かりにくいので、制作のときに決めている目安を書き出します。
まず、Googleが「良好」とする基準
Googleは、表示の体験を測る指標（Core Web Vitals）を3つ公開しています。
- LCP：ページの主役になる画像や見出しが表示されるまでの時間。2.5秒以内が良好
- INP：ボタンを押してから、画面が反応するまでの時間。200ミリ秒以内が良好
- CLS：読み込みの途中で、レイアウトがずれる量。0.1以下が良好
基準は見直されることがあるので、制作のたびに公式の説明で確かめています。
重くなる原因のほとんどは、画像です
文章はどれだけ書いても数十KBですが、写真は1枚で数MBになることがあります。次のように決めています。
- 画面に表示する大きさの、2倍の幅で書き出す。高精細な画面でもぼやけないための余裕で、全画面の背景でも1600px前後に収める
- JPEGなら画質は80前後。WebPなどの新しい形式が使えるなら、そちらにする
- 大きな写真でも、1枚200KB以内
このサイトのトップにある、切り替わるカードの背景画像は、1枚が50〜110KBほどです。文字を読みやすくするために暗く重ねている画像なので、細部の画質は必要ありませんでした。
日本語のフォントは、想像以上に重い
日本語の書体は文字数が多く、1つのファイルで数MBになることがあります。Google Fontsは、文字の範囲ごとに小さく分けて配信するので、そのページで使う文字の分だけが読み込まれます。それでも、太さを増やすたびに読み込みも増えます。
そこで、本文に使う太さは2〜3種類に絞ります。装飾に使う欧文の書体は、必要な太さ1つだけにします。このサイトの社名に使っている幅の広い書体も、欧文だけ、太さは1種類です。
ずれを防ぐには、大きさを先に決める
画像が表示された瞬間に、文章が押し下げられる。これが、CLSがいちばん悪くなる典型です。画像の幅と高さ（または縦横の比率）を、先に指定しておけば、その場所があらかじめ確保されるので、ずれません。
測り方
- PageSpeed Insightsで、スマホの結果を先に見る
- ただし、数字だけを追わない。実際のスマホで、電波の弱い場所でも開いてみて、待たされないかを確かめる
- 公開したあとも、画像を差し替えるたびに測り直す
軽くするために、写真を諦める必要はありません
大きさと形式を整えれば、印象を変えずに軽くできます。むしろ、写真が主役になる飲食店や、撮影の仕事のサイトこそ、ここを丁寧に詰める価値があります。