【WordPress】CSSをインライン化（ソース内に展開）してみたけど効果はいかに！？

公開日：2019(令和元)年7月2日／最終更新日： 2019(令和元)年7月2日

通常WordPressで作るサイトはテーマのheader.phpにある以下のコードを使って

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" >

テーマフォルダ内のstyle.cssファイルを読み込む外部CSSという方法を使ってページにデザイン要素を追加しています。

これはWordPressのみならず、htmlで作成するサイトの前ページのデザインを共通にするためにも非常に合理的な方法なのですが、SEO的にはこれをページ内にそのまま記述することが望ましいなんて言われています（確信がありませんので「望ましいなんて言われてる」と表現しています）。

そこで今の形のまま各ページで外部CSSを展開して出力する方法がないかといろいろ調べたところ、非常に有用な記事がありました。以下のリンク先のページです。

JSやCSSファイルをインラインで出力（functions.php）

これに従ってコードをfunctions.phpへ追記することで、ソースを確認するときちんとインライン表示になっていました。

※以下のコードは備忘録としてコードを保存・表示させていただいております

/**
* CSSをインラインで追加
*/
function output_inline_style() {
// CSSスタイルファイルをキューに追加
wp_register_style( 'style', false );
wp_enqueue_style( 'style' );
// style.cssファイルを読み込み
$css = file_get_contents( get_stylesheet_uri(), true );
// インラインにCSSの内容を出力
wp_add_inline_style( 'style', $css );
}
add_action( 'wp_enqueue_scripts', 'output_inline_style' );

そしてこのコードを入れると今までの外部CSSを読み込むコードが不要になるので

<!-- link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" -->

とコメントアウトするか、この行を削除してしまえば処置は完了です。

また、通常のCSS以外に後から被せるCSSファイルがある場合には

**
* CSSをインラインで追加
*/
function output_inline_other_style() {
// CSSスタイルファイルをキューに追加
wp_register_style( 'other_style', false );
wp_enqueue_style( 'other_style' );
// style.cssファイルを読み込み
$css = file_get_contents( get_template_directory_uri() ?&gt;/別のCSSのファイル名と拡張子, true );
// インラインにCSSの内容を出力
wp_add_inline_style( 'other_style', $css );
}
add_action( 'wp_enqueue_scripts', 'output_inline_other_style' );

※関数名と「別のCSSのファイル名と拡張子」は適宜変更が必要
というコードを↑で追加したコードの下に追記すれば、その順で出力され、きちんと被せるCSSが後から適用されるようになります。

今回はこれを使ってこのサイトのCSSを試しにインライン化してみました。

結論としては・・・

サイトの表示が非常に非常に遅くなってしまいました

上のコードできちんとインライン出力されているのは確認しましたから、コード云々の問題ではないと思います。でも・・・通常３秒ルール前後で開いていたページがなんと８秒台。

これではいくらSEOにいいとされているとしても別の意味でマイナスになりかねない。

本当に有用なコードでしたが今回は使用を断念しました。

このサイトは完全オリジナルのテーマで稼働していますので、ひょっとすると別のテーマだったら効果があるのかも知れませんので、気になった方はやってみてください。