フロントエンド実装で画面表示を高速化する方法
フロントエンド実装で画面表示を高速化する方法
magazine >

フロントエンド実装で画面表示を高速化する方法

時計
2025/7/19

Webサイトの表示速度は、ユーザー体験に直結する重要な要素です。ページの読み込みが遅いと、ユーザーはストレスを感じてサイトから離脱してしまい、それはコンバージョン率の低下やSEO評価の悪化に繋がります。

一般的に、Webページの表示時間は2秒以内が理想とされており、これを過ぎると離脱率が急激に高まると言われています。

開発者にとっては些細な遅延に思えても、ユーザーにとってはサイトを乗り換える十分な理由になり得ます。

本記事では、フロントエンドの領域で実装可能な、Webサイトの表示速度を0.1秒でも向上させるための具体的なパフォーマンスチューニング手法を解説します。

フロントエンドで実践できる高速化手法

フロントエンドエンジニアが実装段階で取り組める表示速度の改善策は多岐にわたります。以下に主要な手法をリストアップします。

画像の最適化

・画像の遅延読み込み (loading=”lazy”)

・次世代フォーマット画像 (WebP, AVIF) とベクター画像 (SVG) の活用

・picture タグによるレスポンシブ画像の出し分け

レンダリングの最適化

・content-visibility プロパティによるレンダリングの遅延

リソース読み込みの最適化

・JavaScriptファイルの読み込み位置の調整

・必要なCSSのみの読み込み

・Webフォントの適切な利用とサブセット化

WordPress特有の最適化

・wp-block-library の読み込み停止（必要な場合のみ）

・ヘッドレスCMS化の検討

その他

・リソースのgzip/Brotli圧縮（バックエンドとの連携）

これらの手法について、すでに知っている項目は飛ばし、特に気になる点から確認してみてください。

特にcontent-visibilityやWebフォントのサブセット化は、比較的新しい、あるいは見落とされがちな手法ですが、パフォーマンスに大きな影響を与える可能性があります。

1. 画像の遅延読み込み (loading=”lazy”)

スクロールしなければ見えない位置（オフスクリーン）にある画像の読み込みを後回しにする手法です。これにより、ページの初期表示に必要なデータ転送量を削減し、表示速度を大幅に改善できます。

実装は非常に簡単で、imgタグやiframeタグにloading=”lazy”属性を追加するだけです。

<img decoding="async" src="image.webp" alt="画像の説明" loading="lazy" width="800" height="450">

ポイントloading="lazy" を使用する際は、widthとheight属性を明記することが強く推奨されます。これにより、画像が読み込まれる前にレイアウト上の領域が確保され、後から画像が表示されることによるレイアウトのズレ（CLS: Cumulative Layout Shift）を防ぐことができます。
注意点ファーストビュー（ページを開いて最初に表示される領域）にある画像には適用しないでください。重要な画像の表示が逆に遅れてしまう可能性があります。

2. 次世代フォーマット画像とベクター画像の活用

画質を維持しつつファイルサイズを大幅に削減できる画像フォーマットの採用は、高速化の基本です。

WebP, AVIF:
JPEGやPNGに比べて圧縮率が非常に高い次世代フォーマットです。
特に写真のような複雑な画像に適しています。Googleが提供するSquooshなどのツールを使えば、画質とファイルサイズのバランスを確認しながら簡単に変換できます。ただし、過度な圧縮は画質の劣化を招くため、デザイナーと相談しながら最適な圧縮率を決定することが重要です。

SVG:
ロゴやアイコンなど、単純な図形や線で構成される画像に最適です。ベクター形式であるため、どれだけ拡大・縮小しても画質が劣化せず、ファイルサイズも非常に小さいという利点があります。

もし、画像をWebPに変更したい場合は、Googleが提供しているsquooshを利用するようにしましょう。

3. picture タグによるレスポンシブ画像の出し分け

display: none;でPC用とスマートフォン用の画像を切り替える方法は、非表示にしている画像もバックグラウンドで読み込んでしまうため、非効率です。

pictureタグを使用すれば、ブラウザの表示領域（ビューポート）に応じて最適な画像のみを読み込ませることができます。

<picture>
  <source media="(min-width: 768px)" srcset="pc-image.webp">
  <img decoding="async" src="sp-image.webp" alt="画像の説明">
</picture>

この例では、画面幅が768px以上の場合はpc-image.webpが、それ以外の場合はsp-image.webpが読み込まれます。

4. content-visibility プロパティによるレンダリングの遅延

content-visibilityは、要素が画面外にある間、その要素のレンダリング（描画処理）をスキップするCSSプロパティです。これにより、ブラウザは初期表示に関係ない部分の描画処理を後回しにできるため、表示開始までの時間を短縮できます。

.heavy-section {
  content-visibility: auto;
  contain-intrinsic-size: 300px 800px; /* 高さ 幅 (autoも可) */
}


contain-intrinsic-sizeの重要性:
content-visibility: auto; を指定した要素は、画面外では高さと幅が0になります。そのため、スクロールした際に突然コンテンツが出現し、スクロールバーがガタつく原因となります。contain-intrinsic-sizeで要素のだいたいのサイズをあらかじめブラウザに伝えておくことで、この問題を軽減し、CLSの悪化を防ぎます。

注意点このプロパティは比較的新しく、主要なブラウザでのサポートは進んでいますが、一部古いブラウザでは対応していません（ただし、未対応ブラウザでは無視されるだけなので、大きな問題にはなりにくいです）。PageSpeed InsightsでCLSのスコアが悪化していないか確認しながら導入しましょう。

5. JavaScriptファイルの読み込み位置の調整

HTMLは基本的に上から順に解析・実行されます。タグ内で大きなJavaScriptファイルを読み込むと、そのダウンロードと実行が完了するまでページのレンダリングがブロックされ、画面表示が遅れる原因となります。

特別な理由がない限り、JavaScriptの

ただし、jQueryのように他のスクリプトから依存されているライブラリは、依存するスクリプトより先に読み込む必要があるため、配置場所には注意が必要です。

6. 必要なCSSのみを読み込む

サイト全体で使われる巨大な単一のCSSファイルは、未使用のスタイル定義を大量に含んでいることが多く、読み込みと解析のオーバーヘッドが大きくなります。

対策：
ページごとにCSSを分割する: そのページでしか使わないスタイルは別のファイルに分離し、必要なページでのみ読み込むようにします。

共通CSS（common.css）を見直す:
全ページ共通のCSSファイルにも、特定のページ群でしか使わないスタイルが混在していないか確認し、適宜分割を検討します。

これにより、各ページが必要とする最小限のCSSのみを読み込むことになり、レンダリング開始までの時間を短縮できます。

7. Webフォントの適切な利用とサブセット化

Noto Sans JPなどの日本語Webフォントは、収録されている文字数が多いためファイルサイズが非常に大きくなりがちで、表示速度に深刻な影響を与えることがあります。
対策：
使用を最小限にする: OS標準のフォント（デバイスフォント）で代替できないか検討します。

font-weightを絞る: 使用しない太さ（font-weight）のフォントファイルは読み込まないようにします。

サブセット化を行う:
サイト内で使用する文字だけを抽出した、軽量なフォントファイル（サブセット）を作成する手法です。これにより、ファイルサイズを劇的に削減できます。専用のツールやサービスを利用して作成が可能です。

使用率の多いNoto Sans JPのサブセットなどは、下記サイトなどを探して、そのまま使用することを検討しても良いと思います

Noto Sans JPのサブセット

8. WordPress特有の最適化

wp-block-libraryの読み込み停止
WordPressのブロックエディタ（Gutenberg）を使用していない場合（例：クラシックエディタやカスタムフィールドを主に使用している場合）、ブロックエディタ用のCSS（wp-block-library/style.min.css）は不要です。functions.phpに以下のコードを追記することで、このCSSの読み込みを停止できます。

// ブロックエディタ用のCSSを読み込まない
add_action( 'wp_enqueue_scripts', 'remove_block_library_style' );
function remove_block_library_style() {
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
}


ヘッドレスCMS化の検討：
これは大規模な改修になりますが、表示速度を極限まで追求する選択肢の一つです。WordPressをAPIサーバーとしてのみ利用し、フロントエンドをNext.jsやAstroなどのモダンなフレームワークで静的サイト生成（SSG）する構成です。これにより、サーバー側での動的なHTML生成が不要になり、非常に高速なページ表示が可能になります。

まとめ

フロントエンドにおける表示速度の高速化は、地道な改善の積み重ねです。まずはお手軽に実施できる以下の項目から試してみてはいかがでしょうか。

・画像の遅延読み込み

・pictureタグによる画像の出し分け

・JavaScriptの読み込み位置の変更

そして、より高い効果が期待できる以下の項目にもぜひ挑戦してみてください。

・画像のWebP化

・不要なCSSの読み込み停止

・Webフォントのサブセット化

・content-visibilityの活用

これらの施策を適用し、Google PageSpeed Insightsなどのツールでパフォーマンスを計測・評価しながら、ユーザーにとって快適なWebサイトを目指しましょう。

関連記事