30
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-08-29

#外部読み込みファイルをインライン化する
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>
30
34
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?