【CSS】PHPでCSSファイルをインライン化するサンプル

2018年3月7日CSS, PHPWEBサイト高速化

gooleのサイトテスト「PageSpeed Insights」にて最適化項目となる「「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」」の対策として簡単なCSSファイルのインライン化を行うサンプルコードです

変数$cssに入れてをhead内で召喚

$css = '<style type="text/css">'.file_get_contents('main.css').'</style>';

head内に直接記述する

<html><head><title>PHPでCSSファイルをインライン化</title>

<style type="text/css"><?php file_get_contents('main.css'); ?></style>

</head><body></body></html>

複数のCSSファイルを結合してインライン化

少なければ単純に2回読む

$css = '<style type="text/css">
'.file_get_contents('main.css').'
'.file_get_contents('sub.css').'
</style>';
$css = file_get_contents('main.css').file_get_contents('sub.css');
$css = '<style type="text/css">'.$css.'</style>';

多ければforeach()で回す?

CSSを圧縮してインライン化

改行消しなど簡単なCSS縮小ならPHPでも可能だと思いますが、アクセスがある度に処理してたらあれなので、やはり圧縮後のCSSファイルを用意しておいて読み込んだ方が良さげですね

2018年3月7日CSS, PHPWEBサイト高速化

Posted by Yousuke.U