サイトが重い原因は、ほとんどが画像です。難しい技術を覚えなくても、HTMLとCSSだけでできることが5つあります。まずはここから手を付けてください。
1. 画像のファイルサイズを小さくする
いちばん効きます。スマホで撮った写真は3〜5MBありますが、Web用なら200KB以下で十分に見られます。
- 大きすぎる画像は、表示する大きさに合わせて縮小する（幅1600pxあれば大抵足りる）
- 圧縮ツールで軽くする
- 写真はWebP形式にすると、同じ見た目でさらに小さくなる
2. 画像にloading=“lazy”を付ける
スクロールしないと見えない画像を、見えるまで読み込まないようにする指定です。属性を1つ足すだけで効きます。
<img src="gallery1.jpg" alt="雪の中のシマエナガ" loading="lazy">ページの下のほうにある画像が多いほど、効果が大きくなります。
3. 画像にwidthとheightを書く
読み込み中に場所を取っておくための指定です。書いておかないと、画像が読み込まれた瞬間に下の文章がガタッとずれます。
<img src="shima.png" alt="シマエナガ" width="800" height="600">img {
width: 100%;
height: auto;
}HTMLの数値は縦横の比率を伝えるためのもの。CSS側でwidth: 100%とheight: autoにしておけば、レイアウトは崩れません。
4. Webフォントを絞る
Google Fontsなどの見た目のよいフォントは、1書体ごとにファイルを読み込みます。特に日本語フォントは容量が大きく、数百KBから数MBになることもあります。
- 使うのは1〜2書体まで
- 太さ（ウェイト）も使うものだけ選ぶ（400と700だけ、など）
- 見出しだけWebフォント、本文は端末標準のフォント、という使い分けも有効
5. 読み込む順番を整える
CSSは<head>、JavaScriptは</body>の直前（またはdefer付き）が基本です。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 中身 -->
<script src="script.js" defer></script>
</body>deferは「HTMLを読み終えてから実行する」という指定です。これがないと、JavaScriptの読み込みでページの表示が止まってしまいます。
測り方——PageSpeed Insights
推測ではなく、実際に測ります。公開中のURLを入れるだけで、スマホとパソコンそれぞれの点数と改善案が無料で出ます。
出てくる用語のうち、初心者が気にすればよいのは2つだけです。
| 指標 | 意味 | 効く対策 |
|---|---|---|
| LCP | いちばん大きな要素が表示されるまでの時間 | 画像を軽くする |
| CLS | 読み込み中にレイアウトがずれた量 | 画像にwidth・heightを書く |
順番としては、画像から
やることが多く見えますが、優先度ははっきりしています。
- 画像を軽くする——効果の8割はここ
- loading=“lazy”とwidth・height——属性を足すだけ
- フォントを絞る——書体を減らす
- defer——1語足す
上から順に手を付ければ、たいていのサイトは十分に速くなります。
まとめ
- 表示が遅い原因の大半は画像。軽くするのがいちばん効く
loading="lazy"は画面外の画像だけに。widthとheightでガタつきを防ぐ- PageSpeed Insightsで測って、出てきた改善項目を上から直す
速いサイトは、それだけで「ちゃんと作られている」と伝わります。