【高速化】外部CSS、外部JSをインライン化する

外部読み込みファイルをインライン化する

Googleさんに怒られたので思い切ってやってみたら
PageSpeed褒められた（やっつけ）
https://developers.google.com/speed/pagespeed/insights/

GTmetrixでもPage Load Timeが1.6秒→1.0秒に
https://gtmetrix.com

ついでにHTMLは圧縮しておきました。

余談ですが、HTMLの転送量は圧縮で
1,373KB →340KB
と約4分の1(画像込み)になりました！

CSS

index.php

    <?php
    // CSSインライン化
    echo '<style>';
    echo file_get_contents("/var/www/html/app/webroot/css/bootstrap.3.3.7.min.css") ."\n";
    echo file_get_contents("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css")."\n";
    echo file_get_contents("/var/www/html/app/webroot/css/front_custom.css")."\n";
    echo '</style>';
    ?>

JS

index.php

<?php
  // JSのインライン化
  echo '<script>';
  echo file_get_contents("/var/www/html/app/webroot/js/jquery-1.11.2.min.js") ."\n";
  echo file_get_contents("/var/www/html/app/webroot/js/bootstrap-3.3.4.min.js") ."\n";
  echo file_get_contents("/var/www/html/app/webroot/js/jquery.lazyload.min.js")."\n";
  echo '</script>';
?>
</body>
</html>

※HTML圧縮

.htacces、もしくはhttpd.confに下記を追加

httpd.conf

 <ifmodule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
 </ifmodule>