PingdomGTmetrix、またはGoogle PageSpeed Insightsで「Combine external CSS(外部CSSを結合してください)」というような推奨メッセージが表示されることがあります。これは、WordPressサイトでよく見られる一般的なエラーで、通常、CDNやサブドメイン(外部ドメイン)から読み込んでいるCSSファイルが10件以上ある場合に表示されます。CSSファイルを結合するか、1つのリクエストで読み込むようにすることで解決できます。

Pingdomの外部CSSの結合を推奨するメッセージ
Pingdomの外部CSSの結合を推奨するメッセージ

まだHTTP/2に移行しておらず、HTTPを使用している場合は、以下の手順に従って外部CSSファイルを結合してください。なお、CSSの結合は、現在一般に非推奨とされています。Kinstaを含む多くのCDNサービスやホスティングサービスと同様に、ほぼすべてのブラウザがHTTP/2をサポートしています。

WordPressで外部CSSを結合する方法

外部CSSの結合を推奨するメッセージは、通常CDNを使用している場合に表示されます。これは、cdn.domain.comなどの外部ドメインでCSSファイルをホスティングしているためで、ウェブサーバー上のCSSファイルを結合することで解決できます。CSSファイルが結合されると、1回のリクエストで読み込まれるため、この警告が表示されなくなります。これを実行する手っ取り早い方法は、Frank Goossens氏が開発した無料プラグインAutoptimizeを使用することです。

Autoptimizeプラグイン
Autoptimizeプラグイン

このプラグインは176KBと軽量で、本記事執筆時点で100万以上のアクティブインストール、5つ星中4.7の評価を誇ります。スクリプトの結合、圧縮、期限切れヘッダー、スタイルをヘッダーに、スクリプトをフッターに移動する機能があります。

WordPressリポジトリからダウンロードするか、WordPress管理画面の「プラグイン」>新規追加」で検索してインストールします。有効化したら、「設定」の「Optimize CSS Code(CSSコードの最適化)」セクションのチェックを入れます。これでCSSファイルが最適化(結合)されます。CDNを使用している場合は、CDNのURLを「CDN Options」に貼り付けることで、CSSファイルがCDN上で1つのリクエストとして読み込まれます。

外部CSSファイルを結合
外部CSSファイルを結合

上記の設定を有効化すると、CSSファイルが1つの「autoptimize_xxxxx.css」ファイルにまとめられます。

結合されたCSSファイル
結合されたCSSファイル