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

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

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

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

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

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

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