Pingdom、GTmetrix、またはGoogle PageSpeed Insightsで「Combine external CSS(外部CSSを結合してください)」というような推奨メッセージが表示されることがあります。これは、WordPressサイトでよく見られる一般的なエラーで、通常、CDNやサブドメイン(外部ドメイン)から読み込んでいるCSSファイルが10件以上ある場合に表示されます。CSSファイルを結合するか、1つのリクエストで読み込むようにすることで解決できます。
![Pingdomの外部CSSの結合を推奨するメッセージ](https://kinsta.com/wp-content/uploads/2016/09/combine-external-css-warning-pingdom-1.png)
まだHTTP/2に移行しておらず、HTTPを使用している場合は、以下の手順に従って外部CSSファイルを結合してください。なお、CSSの結合は、現在一般に非推奨とされています。Kinstaを含む多くのCDNサービスやサーバーサービスと同様に、ほぼすべてのブラウザがHTTP/2をサポートしています。
WordPressで外部CSSを結合する方法
外部CSSの結合を推奨するメッセージは、通常CDNを使用している場合に表示されます。これは、cdn.domain.comなどの外部ドメインでCSSファイルをホスティングしているためで、ウェブサーバー上のCSSファイルを結合することで解決できます。CSSファイルが結合されると、1回のリクエストで読み込まれるため、この警告が表示されなくなります。これを実行する手っ取り早い方法は、Frank Goossens氏が開発した無料プラグインAutoptimizeを使用することです。
![Autoptimizeプラグイン](https://kinsta.com/wp-content/uploads/2016/09/autoptimize-1.jpg)
このプラグインは176KBと軽量で、本記事執筆時点で100万以上のアクティブインストール、5つ星中4.7の評価を誇ります。スクリプトの結合、圧縮、期限切れヘッダー、スタイルをヘッダーに、スクリプトをフッターに移動する機能があります。
WordPressリポジトリからダウンロードするか、WordPress管理画面の「プラグイン」>「新規追加」で検索してインストールします。有効化したら、「設定」の「Optimize CSS Code(CSSコードの最適化)」セクションのチェックを入れます。これでCSSファイルが最適化(結合)されます。CDNを使用している場合は、CDNのURLを「CDN Options」に貼り付けることで、CSSファイルがCDN上で1つのリクエストとして読み込まれます。
![外部CSSファイルを結合](https://kinsta.com/wp-content/uploads/2016/09/combine-external-css-files-1.png)
上記の設定を有効化すると、CSSファイルが1つの「autoptimize_xxxxx.css」ファイルにまとめられます。
![結合されたCSSファイル](https://kinsta.com/wp-content/uploads/2016/09/combined-css-files-1.png)