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

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

<img> や <video> 要素にwidthとheightを指定する

画像や動画に幅と高さを指定することで、ブラウザは事前にそのスペースを確保できます。これにより、ページの再描画やレイアウトのシフトが発生しにくくなり、ユーザー体験が向上します。

備考

レイアウトシフトについては、以下のドキュメントを参照ください。
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に比べてファイルサイズが小さいため、パフォーマンスが向上します。

備考

KurocoでWebpを利用する方法については、以下のドキュメントを参照ください。
画像の動的変換について

画像・SVGのサイズを圧縮する

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

SSGでページを生成する際、payloadを利用した処理を行う

静的サイトジェネレーター（SSG）を用いてページを生成すると、ページがプリレンダリングされるため、クライアント側のレンダリング負荷が減ります。Payloadを利用した処理を行うことで、必要なデータだけロードし、パフォーマンスを改善できます。

備考

payloadを利用してAPIリクエストを削減する処理については、以下のドキュメントを参照ください。
Nuxt.jsのSSGで、ページの生成時にAPIリクエストを減らす方法はありますか？

CDNキャッシュを利用する

CDNを使用すると、リソースをユーザーに近いサーバーから提供することができ、ロード時間を短縮します。また、CDNのキャッシュ機能を利用することで、更にパフォーマンスの向上が期待できます。

備考

CDNを利用したLCPのスコア改善については、以下のドキュメントを参照ください。
Kurocoで簡単にできるLCPのスコア改善

広告、SNSボタンといったサードパーティのJavaScriptを削減・非同期で読み込む

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

広告、<iframe>、動的なコンテンツの表示改善

これらの要素のサイズを指定することで、ブラウザは事前にスペースを確保でき、CLSを防ぐことができます。

備考

CLSのスコア改善については、以下のドキュメントを参照ください。
CLSスコアについて

リクエスト数を減らす

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