【CSS】PHPでCSSファイルをインライン化するサンプル
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ファイルを用意しておいて読み込んだ方が良さげですね
ディスカッション
コメント一覧
まだ、コメントがありません