"> ">

イラストレーターみやびの漫画館 作品集 - 月の高いところのロゴマーク

今日のプリン言

謎のプリン語る。
一人書く人増えました。

CSS レンダリング ブロック対策(PHP使用)をする

2017年03月30日

みやびプリン 140 87

500 320

CSS レンダリング ブロック対策(PHP使用)をする - サムネイル

$yearTime){ $yearDif = floor(($timeNow - $articleModiTime) / $yearTime); $articleOldFlg = true; } if($articleOldFlg || $newArticleFlg){ ?>

0): ?>※この記事は年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

どうも、Swift制作が停滞気味のみやびです。

さて、今回のエントリーはけっこう切実。

最近流行りのページ表示速度の話。
正直どうでもいいとか思ってましたが、
さすがにGoogleさんの検索順位に影響でるってのがわかってきたら、
やらざるをえない。
仕事でもそうだが、当サイトでも、一年前あたりからいろいろ試行錯誤している。
Googleさんのスピードチェッカーは下記。
閲覧中のあなたもやってみましょう!

PageSpeed Insights

これで、80以上出せれば優秀で、数値の色が緑になる。
ちなみに対策前の当サイトは、パソコン:60あたり、モバイル:40後半
であった。
とりあえず、できることをやり、
(画像の圧縮をしっかりやったり、JSの読み込みをhtmlの最後にしたり、JSとCSSをSassにして一行に圧縮したり)
パソコン:80、モバイル:78
までいったが、限界が出てしまった。

そう、一番厄介なのは、ファーストビューのレンダリング時に、
レンダリングブロックしてしまう要因、
外部CSSの存在だ。
Googleさんは、これらはインラインCSSにするといいよ!
なんて言うわけよ。
んなもんやってられっか!
管理不可能になるわ!!

正直、どうしようもなくね?
なんて思って完全にあきらめてたんだけど、
プロとしてなんとかしようと、いろいろ考えた。

  • ・PHPをCSSとして、そこからインラインCSSを出力
    →システム作るの手間だし元のCSS編集から移すとか面倒。
  • ・というか、CSSを直接インラインに書く
    →CSS編集とかできんし、論外

まぁ、両者とも微妙。

そこでいろいろ考えてハイブリットな方法を思いついた。

PHP上で、CSSファイルを読み込み、インラインCSSとしてechoさせる!

これだ!
これなら、元のCSSの運用はなんも変えなくてもいいし、
管理もしやすい。
PHPスクリプトの書き方しだいでだいぶ楽にできる。

ってわけで、当サイトでやってみたやり方が下記。
まずはPHPスクリプト(例として、/common/css/css_include.phpとしている)

<?php /* CSSを読み込み、インライン出力する */

// CSSファイルと画像など用に変数を定義()
if(!isset($cssRoot)) {
  $cssRoot = 'common/';
}
if(!isset($cssFileName)) {
  $cssFileName = 'common';
}

// CSSファイルを読み込み
$cssFile = file_get_contents(dirname(__FILE__) . '/../../' . $cssRoot . 'css/' . $cssFileName . '.css');
if ($cssFile) {
  // CSSファイルを読み込めたら、インラインCSSとして出力
  // 画像のパスを、読み込んでいるhtmlからのパスに直す
  $cssFile = str_replace("(../images", "(/" . $cssRoot . "images", $cssFile);
  // インラインCSSとしてecho
  echo '<style type="text/css">
' . $cssFile . '
</style>';
}

んで、読み込み側のPHPの書き方が下記(/common/css/common.cssってCSSを読み込む場合)

<html>
<head>
<?php $cssRoot = 'common/';
$cssFileName = 'common';
include('/サーバーのドキュメントルート/common/css/css_includ.php'); ?>
</head>
<body>
~内容~
</body>
</html>

やってみた結果、

パソコン:94、モバイル:92!

となった。
まさかここまで跳ね上がるとは。

まぁ、今でもこんなどうしようもない部分に、口出すなよGめ、とか思ってますが、
うまくいったら嬉しいもんだ。

ちなみに、当サイトでは、CMS(Movable Type)を使ってるので、
こんな試行錯誤があったが、
Gulpってのを使えば、一元管理でhtml吐き出しができるので、
こんな工程はいらないらしい。
CMS使ってない時なんかは有効だと思う。
Gulpとは、Rubbyを使って、いろいろ管理とかファイル出力とか、一元的にやれたりする、
便利なスクリプトというかライブラリというか、らしい。
まだよくわからん。
Gulp、勉強せんとな・・・。
CMSとかいらなくなる時代も来るのかもしれない。

また余計な話が長くてすみません。
ではまた。

トラックバック(0)

トラックバックURL:

コメントする