TCDテーマのメインビジュアル遅延を解消する方法

はじめに

TCDテーマを利用したWordPressサイトでは、トップページを開いた際にメインビジュアル（ヘッダースライダー）が一瞬真っ白になり、チラついて表示される現象がしばしば発生します。 これはテーマ特有の実装に起因する問題で、サイトの第一印象を大きく損ねる要因となります。

本記事では、原因の技術的背景を整理しつつ、PHPとCSSを調整することで遅延を解消する方法を解説します。

DOM構築とは？

Webブラウザはページを読み込む際、以下の順序で処理を進めます。

1. HTMLを解析し、DOM（Document Object Model）を構築
   DOMとは、HTML要素をツリー構造に変換したデータモデル。この段階では「要素の枠組み」が揃うだけで、画像やCSSは完全に反映されていません。
2. CSSの適用・レンダリング
   スタイルが反映され、ページの見た目が整い始めます。
3. JavaScriptの実行
   DOM構築後にJSが動き、動的処理やライブラリの初期化が走ります。

TCDテーマのスライダーは背景画像をCSSで指定し、さらにJavaScriptのslick.jsで初期化後に表示する構造です。 そのため、DOM構築直後に「空のdiv」が表示され、JSが背景を反映するまで真っ白な領域が生じます。

改善方法

1. PHP調整（header-content.php）

template-parts/header-content.php を子テーマにコピーし、最初のスライドにだけ静的な<img>を追加します。

<div class="p-header-slider__item p-header-slider__item<?php echo $i; ?>" 
     style="background-image: url(<?php echo esc_attr( wp_get_attachment_url( $image ) ); ?>);">
  <?php if ( $i === 1 ) : ?>
    <img src="<?php echo esc_url( wp_get_attachment_url( $image ) ); ?>" 
         alt="<?php bloginfo('name'); ?>" 
         class="slider-fallback">
  <?php endif; ?>
  <div class="p-header-slider__item-inner">
    ...
  </div>
</div>

2. CSS調整

.slider-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* テキストより背面に配置 */
}

これで、JSが走る前でも1枚目の画像が静的に表示され、真っ白状態が解消されます。

さらなる高速化のポイント

• ページキャッシュの導入
  LiteSpeed Cache / WP Rocket / WP Super Cache などを利用することで、サーバー応答時間を短縮できます。
• 画像最適化
  EWWW Image Optimizer でWebP変換・圧縮を実施。メインビジュアルは横幅1920px以内にリサイズするだけでも効果的です。

まとめ

• TCDテーマのスライダーはDOM構築後にJSで背景を当てるため、一瞬真っ白になる。
• 解決策は、header-content.php に静的<img>を追加し、CSSで背景扱いにすること。
• さらにキャッシュ・画像最適化を併用すれば、表示速度が大幅に改善する。