「自分のWordPressサイト、なんだか表示が遅いな…」と感じていませんか？
サイトの表示速度は、訪問者の満足度だけでなく、Googleの検索順位（SEO）にも影響する非常に重要な要素です。表示が遅いだけで、訪問者はページを閉じてしまい、二度と戻ってきてくれないかもしれません。
この表示速度の低下は、実はCSSの読み込み方が原因の一つかもしれません。
この記事では、CSSの読み込み方を「プリロード（preload）」という方法に変えるだけで、サイトの表示速度を劇的に改善するテクニックを解説します。
そもそもCSSの「プリロード」とは？
「プリロード」とは、一言でいうと「先読み」のことです。
通常、ブラウザはWebページを上から順に読み込み、CSSファイルを見つけてからダウンロードを始めます。その間、ページの表示が一時的に止まってしまうことがあり、これが体感速度の低下につながります。この現象を「レンダリングブロック」と呼びます。
一方、プリロードを使うと、ブラウザに「このCSSファイルは後で絶対に必要になるから、今のうちに最優先で読み込んでおいて！」と指示できます。これにより、ページの表示を止めることなく裏側でダウンロードを進めてくれるため、レンダリングブロックを防ぎ、表示速度を向上させることができるのです。
WordPressでCSSをプリロードする方法
お使いのテーマのfunctions.phpに、以下のコードを追記してください。
既にあるadd_actionの部分は、ご自身の環境に合わせてハンドル名などを確認してください。
// スクリプトとスタイルの登録（この部分はご自身の環境に合わせてください）
add_action('wp_enqueue_scripts', function() {
// CSSファイルの読み込み
wp_enqueue_style(
'my-theme-style', // ハンドル名（CSSの管理名）
get_template_directory_uri() . '/css/main.min.css', // CSSファイルのパス
array(), // 依存関係
filemtime(get_template_directory() . '/css/main.min.css') // バージョン
);
});
/**
* 特定のCSSの<link>タグを変更してプリロードを有効にする
*
* @param string $tag 元の<link>タグのHTML
* @param string $handle スタイルのハンドル名
* @return string 変更後の<link>タグのHTML
*/
add_filter('style_loader_tag', function($tag, $handle) {
// 'my-theme-style'という名前のCSSだけを対象にする
if ('my-theme-style' === $handle) {
// rel="stylesheet" を rel="preload" に書き換え、必要な属性を追加する
$tag = str_replace(
"rel='stylesheet'",
"rel='preload' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"",
$tag
);
}
return $tag;
}, 10, 2);
コードの詳しい解説
なぜこのコードでCSSがプリロードされるのか、ポイントを解説します。
add_filter('style_loader_tag', ...)
WordPressがCSSを読み込むための<link>タグを出力する直前に割り込んで、その内容を書き換えるための「フィルターフック」という機能です。
if ('my-theme-style' === $handle)
サイトで読み込まれる全てのCSSにこの変更が適用されないよう、プリロードしたいCSS（今回はハンドル名が'my-theme-style'のもの）だけを対象に絞り込んでいます。
str_replace(...)
ここが書き換え処理の心臓部です。rel='stylesheet'という部分を、プリロードに必要な一式に丸ごと置換しています。
rel='preload'ブラウザに「このリソースを事前に読み込んでください」と指示します。as='style'プリロードするリソースの種類がスタイルシートであることを示します。これはpreloadを使う際に必須の属性です。onload="this.onload=null;this.rel='stylesheet'"これが非常に重要です。プリロードはあくまでファイルをダウンロードするだけで、そのままではCSSは適用されません。このonload属性は、「ファイルの読み込みが完了した時点で、rel属性をstylesheetに書き換えてね」というJavaScriptの命令です。これにより、ダウンロードが完了したCSSが初めてページに適用され、デザインが反映されます。
まとめ
CSSのプリロードは、レンダリングブロックを解消し、サイトの体感速度を向上させる効果的な手法です。特に、ページの表示速度に大きく影響する**LCP（Largest Contentful Paint）**の改善に繋がることが多く、SEOの観点からも非常に有効です。
