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つのリクエストとして読み込まれます。
上記の設定を有効化すると、CSSファイルが1つの「autoptimize_xxxxx.css」ファイルにまとめられます。