WEBサイトのCSSや、JavaScriptは、高速化の観点から、縮小化(余計な改行や スペース、コメントを取り除く)した方が良いとされています。
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ファイルをダウンロードします。
ダウンロードしたzipファイルを展開(解凍)すると「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>
まとめ
こんな感じで、GitHubで公開されているライブラリを使用することにより、単にコードを縮小化するだけなら、関数を一行書くだけで、手軽にできるようになっています。
このライブラリを利用することで、自前で、Autoptimizeプラグインのような処理を書くこともできると思います。
というわけで、「自前で動的にリソースを縮小化したい」とか「AMP用のCSSをなるべく縮小化して出力したい」なんて時には便利かと思います。
こちらはSimplicityには実装されないのでしょうか。