---
title: Webサイトのパフォーマンス改善について
category: kuroco
weight: 1
---

## Webサイトのパフォーマンス改善について

### `<img>` や `<video>` 要素にwidthとheightを指定する
画像や動画に幅と高さを指定することで、ブラウザは事前にそのスペースを確保できます。これにより、ページの再描画やレイアウトのシフトが発生しにくくなり、ユーザー体験が向上します。
:::info
レイアウトシフトについては、以下のドキュメントを参照ください。  
[CLSスコアについて](/ja/docs/tutorials/core-web-vitals-with-kuroco/#clsスコア)  
:::

### ファーストビューの範囲外にある `<img>` や `<iframe>` 要素のloading属性にlazyを追加する
ページのロード時間を短縮するために、'loading="lazy"'を使用してファーストビューの範囲外の画像の遅延読み込みが行えるようになります。これにより、ユーザーがスクロールして初めて見る部分の画像の読み込みが行われます。

### Webフォントの読み込みを最適化する
Webフォントを利用する場合、ロード時間が長くなる可能性があります。これを防ぐために、'rel="preload"'を使用してフォントの読み込みを最適化し、必要なテキストだけを表示するためにフォントのサブセット化を行うと良いでしょう。

### JavaScriptはbodyの末尾で読み込む
JavaScriptをbodyの末尾で読み込むことで、HTMLとCSSが先に読み込まれ、ユーザーに早くコンテンツを表示できます。

### HTML、CSS、JSをminify化する
Minify化することで、不要な空白やコメントを削除し、ファイルサイズを削減することができます。これにより、読み込み速度が向上し、パフォーマンスが改善されます。

### 画像はwebpなどの次世代画像フォーマットを使う
WebPなどの次世代画像形式は、JPEGやPNGに比べてファイルサイズが小さいため、パフォーマンスが向上します。
:::info
KurocoでWebpを利用する方法については、以下のドキュメントを参照ください。  
[画像の動的変換について](/ja/docs/reference/api-convert-image/)  
:::

### 画像・SVGのサイズを圧縮する
画像やSVGのサイズを圧縮することで、ファイルサイズが削減され、ロード時間が短縮されます。

### SSGでページを生成する際、payloadを利用した処理を行う
静的サイトジェネレーター（SSG）を用いてページを生成すると、ページがプリレンダリングされるため、クライアント側のレンダリング負荷が減ります。Payloadを利用した処理を行うことで、必要なデータだけロードし、パフォーマンスを改善できます。
:::info
payloadを利用してAPIリクエストを削減する処理については、以下のドキュメントを参照ください。  
[Nuxt.jsのSSGで、ページの生成時にAPIリクエストを減らす方法はありますか？](/ja/docs/faq/can-i-use-nuxt-js-ssg-to-reduce-api-calls/)  
:::

### CDNキャッシュを利用する
CDNを使用すると、リソースをユーザーに近いサーバーから提供することができ、ロード時間を短縮します。また、CDNのキャッシュ機能を利用することで、更にパフォーマンスの向上が期待できます。
:::info
CDNを利用したLCPのスコア改善については、以下のドキュメントを参照ください。  
[Kurocoで簡単にできるLCPのスコア改善](/ja/docs/tutorials/core-web-vitals-with-kuroco/#lcpスコア)  
:::

### 広告、SNSボタンといったサードパーティのJavaScriptを削減・非同期で読み込む
サードパーティのJavaScriptは、ロード時間の増加やパフォーマンスの低下を引き起こす可能性があります。これを削減し、非同期で読み込むことで、パフォーマンスを改善します。

### 広告、`<iframe>`、動的なコンテンツの表示改善
これらの要素のサイズを指定することで、ブラウザは事前にスペースを確保でき、CLSを防ぐことができます。
:::info
CLSのスコア改善については、以下のドキュメントを参照ください。  
[CLSスコアについて](/ja/docs/tutorials/core-web-vitals-with-kuroco/#clsスコア)  
:::

### リクエスト数を減らす
リクエスト数を減らすことで、サーバーへの負荷を減らし、ページのロード時間を短縮します。
CSSやJavaScriptファイルの結合、スプライト画像の使用などにより実現可能です。