PHPでCSSやJavaScriptを縮小化するWordPressカスタマイズ方法

WEBサイトのCSSや、JavaScriptは、高速化の観点から、縮小化(余計な改行や スペース、コメントを取り除く)した方が良いとされています。

PageSpeed Insightsで、よく注意されるアレです。

PageSpeed Insightsでよく表示される改善点

ただ僕の場合、リソースを縮小化してしまうと、開発者ツールでデバッグがしづらいですし、不具合の原因にもなり得るため、あまり使用してきませんでした。高速化や、SEO的効果といっても、対応する面倒さ以上の効果もあまり感じないですし。

けれど、最近AMPなるものも出てきました。

これに対応させるには、CSSの総容量を50KBまでに抑える必要があります。今までは、CSSの総容量とかには、あまり気を遣う必要がなかったので、縮小化などは「まぁいいや」程度に思っていました。けれども、総容量に制限のあるAMPでは、なるべく多くのスタイルを書くとなると、縮小化は必要になってくるかもしれません(50KBあればかなり書けますが)。

なので、「何かCSSを縮小化するのに良いものはないか?」と探したら、CSSのみならず、JavaScriptやHTMLも縮小化することのできるライブラリ「PHP Function to Minify HTML, CSS and JavaScript」を見つけたので使い方などを紹介です。

スポンサーリンク
レクタングル(大)広告

主な手順

PHP Function to Minify HTML, CSS and JavaScriptを利用するには、以下の手順が必要です。

  • PHPファイルのダウンロード&設置
  • PHPファイルの読み込み
  • 縮小化関数を呼び出す

今回紹介するライブラリを利用することで、基本的にPHPコードで関数を呼び出すだけで、CSS、JavaScript、HTMLの縮小化をすることができます。

PHPファイルのダウンロード&設置

まずは、GitHubからPHPファイルをダウンロードします。

PHP Function to Minify HTML, CSS and JavaScript · GitHub

ダウンロードしたzipファイルを展開(解凍)すると「php-html-css-js-minifier.php」というファイルが出てきます。

php-html-css-js-minifier.php

これを、利用するPHPファイルと同じ階層のフォルダに置いてください。

PHPファイルの読み込み

あとは、PHPファイル内で、以下のようにライブラリを読み込みます。

//縮小化ライブラリの読み込み
require_once('php-html-css-js-minifier.php');

縮小化関数を呼び出す

    あとは、CSS、JavaScript、HTMLを以下のように関数を呼び出します。

    CSSの縮小化

    CSSファイルを読み込んで、縮小化してstyleタグ内に出力する方法は以下。

    <style type="text/css">
    <?php echo minify_css(file_get_contents('CSSファイルのパス')); ?>
    </style>

    ※見やすくするために、改行を入れています。

    JavaScriptの縮小化

    JavaScriptファイルを読み込んで、縮小化してscriptタグ内に出力する方法は以下。

    <script type="text/javascript">
    <?php echo minify_js(file_get_contents('JSファイルのパス')); ?>    
    </script>

    HTMLの縮小化

    一応、HTMLの縮小化方法は以下。

    echo minify_html(file_get_contents('HTMLファイルのパス'));

    WordPressのCSSを縮小化する

    例えば、WordpressでAMP用にstyle.cssファイルを縮小化するには以下のように行います(以下はTwenty Sixteenテーマでの例)。

    functions.phpでstyle.cssの読み込みを解除

    まずは、functions.phpで、ライブラリの読み込みと、style.cssの呼び出しを解除します。

    //縮小化ライブラリの読み込み
    require_once('php-html-css-js-minifier.php');
    
    //テーマが読み込むスタイルシートをキャンセル(Twenty Sixteenテーマの場合)
    function deregister_twentysixteen_style() {
        //指定するハンドル($handle、指定のためのIDみたいなもの)はテーマによって変わります
      wp_deregister_style('twentysixteen-style');
    }
    add_action( 'wp_enqueue_scripts', 'deregister_twentysixteen_style' );

    <head></head>内でstyleタグ内に縮小化したCSSを出力

    あとは、ヘッダーのheadタグ内で、style.cssを読み込んで、縮小化して出力します。

    <style amp-custom><?php
    require_once(ABSPATH . 'wp-admin/includes/file.php');//WP_Filesystemの使用
    if ( WP_Filesystem() ) {//WP_Filesystemの初期化
      global $wp_filesystem;//$wp_filesystemオブジェクトの呼び出し
      $css = null;
      //AMPスタイルの取得
      $css_file = get_template_directory().'/style.css';
      if ( file_exists($css_file) ) {
        $css = $wp_filesystem->get_contents($css_file);//ファイルの読み込み
      }
    
      //CSSの縮小化
      $css = minify_css($css);
    
      //全てのCSSの出力
      echo $css;
    }?></style>
    WordPressでファイルを読み込む場合は、file_get_contents()関数を利用すると、作法的に良くなさそうなので、WP_Filesystemオブジェクトからget_contents()メソッドで読み込んでいます。

    まとめ

    こんな感じで、GitHubで公開されているライブラリを使用することにより、単にコードを縮小化するだけなら、関数を一行書くだけで、手軽にできるようになっています。

    このライブラリを利用することで、自前で、Autoptimizeプラグインのような処理を書くこともできると思います。

    というわけで、「自前で動的にリソースを縮小化したい」とか「AMP用のCSSをなるべく縮小化して出力したい」なんて時には便利かと思います。

    サイト  PHP Function to Minify HTML, CSS and JavaScript

    スポンサーリンク
    レクタングル(大)広告
    レクタングル(大)広告

    スポンサーリンク

    『PHPでCSSやJavaScriptを縮小化するWordPressカスタマイズ方法』へのコメント

    1. 名前:2001Y 投稿日:2016/10/18(火) 00:07:00 ID:1ea7139c2

      こちらはSimplicityには実装されないのでしょうか。

    2. アバター画像 名前:わいひら 投稿日:2016/10/18(火) 12:15:09 ID:b35db8e67

      現在検討中です。

    3. 名前:2001Y 投稿日:2016/10/20(木) 00:40:27 ID:2f992ecd5

      現在検討中です。

      ありがとうございます!

    4. 名前:tasa 投稿日:2016/10/26(水) 01:07:09 ID:3a79a5d57

      こんにちは、
      Wordpress を利用しています tasa といいます。

      WordPress 用のフリーアドオン 『Easy Backup』 を公開しましたので
      その宣伝も兼ねて・・・、ではなくそれにかこつけてブログの宣伝に来ましたm(_ _)m。

      以下のリンクで公開してますので、ぜひ見に来てください。
      http://tenki.club/2016/10/post-131/

      ではでは。

    5. アバター画像 名前:わいひら 投稿日:2016/10/26(水) 22:55:27 ID:b633e7146

      こんにちは。
      ご紹介ありがとうございます。
      今度試しに使ってみたいと思います。

    6. 名前:izu 投稿日:2017/01/21(土) 19:34:32 ID:12041e263

      わいひら様。
      お忙しいところコメントにて失礼致します。

      何度読んでも微妙に理解ができないのですが、
      こちらの記事内容はAMP化対応にした記事ページのみへの縮小化方法と考えてよろしいのでしょうか?

      通常のページには適用させていないという解釈で間違いないでしょうか?

      お忙しいところ恐れ入りますm(__)m。

    7. アバター画像 名前:わいひら 投稿日:2017/01/21(土) 21:50:19 ID:a4e5bb32c

      コードを縮小させたいページであれば、通常ページで利用しても全然問題ありません。
      AMPページは、CSSのサイズに制限があるので、なるべく縮小化して掲載できるよう例として出しました。けれど、通常ページでも、多少のページ表示の高速化効果の恩恵はあるかと思います。