※この記事は7年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。
どうも、Swift制作が停滞気味のみやびです。
さて、今回のエントリーはけっこう切実。
最近流行りのページ表示速度の話。
正直どうでもいいとか思ってましたが、
さすがにGoogleさんの検索順位に影響でるってのがわかってきたら、
やらざるをえない。
仕事でもそうだが、当サイトでも、一年前あたりからいろいろ試行錯誤している。
Googleさんのスピードチェッカーは下記。
閲覧中のあなたもやってみましょう！
これで、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とかいらなくなる時代も来るのかもしれない。
また余計な話が長くてすみません。
ではまた。
コメントする