Webサイトをブラウザに表示するためには、Webサーバに『Webサイトを構成する
、などを格納したフォルダ』がアップロードされていて、且つ、このWebサーバに対して『Webサイトのデータを下さいという要求』を送る必要があります。
この要求のことを『HTTPリクエスト』といいます。
Webサイトを構成するファイル数が多い程、『HTTPリクエスト』は増えブラウザでの表示（パソコンや携帯の画面への出力）に時間がかかってしまいます。
そこで今回は、プラグインなどでファイル数が非常に増えてしまうWordPressで複数のcssファイル、jsファイルを結合（単一ファイル化＝1つのファイルにする）することで、HTTPリクエストを削減し、WordPressの処理を高速化することを目指します。
HTTPリクエストの削減にはファイルの結合の他にも
- CSSスプライト
- Webフォント
- DataURI
などの手法があります。
Cドライブ直下にXAMPPを置き、その中のhtdocsの中にWordPressをインストールしていて、今回は『twentyfourteen』というテーマを使ってます。
C:\xampp\htdocs\wordpress\wp-content\themes\twentyfourteen
css、jsファイルをグループ分け
- <head>に配置 ⇒
『First View（ファーストビュー）』または『Above The Hold』ともいうコンテンツに必要なリソース（ファイル）。 - </body>に配置 ⇒
ページがブラウザに読み込まれてから動作して欲しいリソース（ファイル）。
サイト全体を通して共通なリソース（ファイル）。
キューイング(WordPressに登録) されているリソース（css、jsファイル）のハンドル名を調べる
functions.phpに以下記載
functions.php
/**
* Make the list of enqueued resources
**/
function my_get_dependency( $dependency ) {
$dep = " ";
/* $dependencyが_WP_Dependencyクラスを基にしたオブジェクト、または_WP_Dependencyクラスをその親クラスの1つとしている場合
例：$dependency = new _WP_Dependency( )
例：interface test {
public function A( );
}
class _WP_Dependency implements test {
public function A ( ) {
print "A";
}
}
$dependency = new _WP_Dependency( ); */
if ( is_a( $dependency, "_WP_Dependency" ) ) {
/* $dependencyオブジェクトからhandleプロパティ( $handle )にアクセス
プロパティは_WP_Dependencyクラスのもの（ wordpressのwp-includesフォルダの中のclass.wp-dependencies.phpファイル424行目あたりから）
$dep .= "$dependency->handle"; は $dep = $dep. "$dependency->handle"; に同じ*/
$dep .= "$dependency->handle";
/* $dependencyオブジェクトからdepsプロパティ( $deps = array( ? ) )にアクセス
array( )にはキューイング(WordPressに登録) されているcss、jsファイルの情報が入ってる、たぶん。ファイルによって情報が変わるので『?』としてます。
implode( )で$dependency->depsの要素（配列）を『" "』文字列を挿み1つの文字列に */
$dep .= " [" . implode( " ", $dependency->deps ) . "]";
/* $dependencyオブジェクトからsrcプロパティ( $src )にアクセス */
$dep .= " '$dependency->src'";
/* $dependencyオブジェクトからverプロパティ( $ver )にアクセス */
$dep .= " '$dependency->ver'";
/* $dependencyオブジェクトからargsプロパティ( $args = null )にアクセス */
$dep .= " '$dependency->args'";
/* $dependencyオブジェクトからextraプロパティ( $extra = array( ? ) )にアクセス
implode( )で$dependency->extraの要素（配列）を『" "』文字列を挿み1つの文字列に */
$dep .= " (" . implode( " ", $dependency->extra ) . ")";
}
return "$dep\n";
}
function my_style_queues( ) {
// global変数$wp_stylesを関数内で使えるようにする
global $wp_styles;
echo "<!-- WP_Dependencies for styles\n";
/* $wp_stylesオブジェクトからqueueプロパティ（ $queue = array( ? ) ）にアクセス
プロパティはWP_Dependenciesクラスのもの（ wordpressのwp-includesフォルダの中のclass.wp-dependencies.phpファイル13行目あたりから）
foreach( )で$wp_styles->queueの要素（配列）の値を$valに代入し、
『$wp_stylesオブジェクトからregisteredプロパティ（ $resitered = array( ? ) ）にアクセスしたもの（ 配列registeredに$valが入る ）を引数としたmy_get_dependency( )関数の結果を表示する処理』をしたら、$valに次の値を代入し『$valの値以外同上の処理』の処理をするの流れを$wp_styles->queueの要素が無くなるまで繰り返す */
foreach ( $wp_styles->queue as $val ) {
echo my_get_dependency( $wp_styles->registered[ $val ] );
}
echo "-->\n";
}
/* wp_print_stylesにmy_style_queues( )をフック、$priority = 9999で関数実行の優先順序を決定。数字が小さいほど優先されます。 */
add_action( 'wp_print_styles', 'my_style_queues', 9999 );
function my_script_queues( ) {
global $wp_scripts;
echo "<!-- WP_Dependencies for scripts\n";
foreach ( $wp_scripts->queue as $val ) {
echo my_get_dependency( $wp_scripts->registered[ $val ] );
}
echo "-->\n";
}
add_action( 'wp_print_scripts', 'my_script_queues', 9999 );
⇩ キューについて（キューイングについて見つかりませんでしたので。）
キュー（ queue ）
待ち行列とも呼ぶ。主にOSが行うジョブの制御や、プリンターのスプーラーなどで利用される、キューを管理する機能をキューイングという。
エンキュー（ enqueue ）
デキュー（ dequeue ）
ページを表示し、HTML ソースから以下のようなコメントを抜き出します。
<!-- WP_Dependencies for styles
ハンドル名 [依存するハンドル名...] 'パス' 'バージョン' '属性' (付加情報...)
...
-->
<!-- WP_Dependencies for scripts
ハンドル名 [依存するハンドル名...] 'パス' 'バージョン' '属性' (付加情報...)
...
-->
- ハンドル名 ⇒
wp_enqueue_style( )、wp_enqueue_script( ) でキューに挿入されるリソース（ファイル）のハンドル名。 - 依存するハンドル名 ⇒
先立って読み込んでおくべきリソース（ファイル）のハンドル名が上位から順に並びます。 - パス ⇒
wp_register_style()、wp_register_script() で登録されたリソース（ファイル）へのパスです。 - バージョン ⇒
登録時に指定されたバージョン文字列です。 - 属性 ⇒
css の場合はメディアタイプが表示されます。同一タイプであれば結合が可能です。 - 付加情報 ⇒
css であれば IE 用の条件付コメントがここに表示されます。js の場合、1 (true) が立っていればフッターで読み込まれることを示します。
ハンドル名 jquery（ jQuery本体 ） には パス が表示されず、『jquery-core』 と 『jquery-migrate』 への依存が指定されています。それぞれのパスは次の通りです。
- jquery-core ⇒ wp-includes/js/jquery/jquery.js
- jquery-migrate ⇒ wp-includes/js/jquery/jquery-migrate.min.js
パスが空のハンドル名が出てきたら、 Handles and Their Script Paths Registered by WordPress で調べられます。
minifyのインストールと基本設定
下記サイトでダウンロード、解凍し『min』フォルダを wp-content の直下に配置。
キャッシュ保存用フォルダの設定
『min』フォルダの中に『cache』フォルダを作成したら、min/config.phpの55行目あたりに『$min_cachePath = dirname(__FILE__) . '/cache';』と記述。
config.php
/**
* For best performance, specify your temp directory here. Otherwise Minify
* will have to load extra code to guess. Some examples below:
*/
//$min_cachePath = 'c:\\WINDOWS\\Temp';
//$min_cachePath = '/tmp';
//$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());
// ⇩書き足すとこ
$min_cachePath = dirname(__FILE__) . '/cache';
/**
キャッシュの有効期限
ブラウザやプロキシー・サーバーに保持させるキャッシュ期間を変更。min/config.phpの105行目あたりデフォルトで『$min_serveOptions['maxAge'] = 1800;』となっているのを『$min_serveOptions['maxAge'] = 2592000; /* one month */』に書き換えます。
config,php
/**
* Cache-Control: max-age value sent to browser (in seconds). After this period,
* the browser will send another conditional GET. Use a longer period for lower
* traffic but you may want to shorten this before making changes if it's crucial
* those changes are seen immediately.
*
* Note: Despite this setting, if you include a number at the end of the
* querystring, maxAge will be set to one year. E.g. /min/f=hello.css&123456
*/
// ⇩書き換えるとこ
$min_serveOptions['maxAge'] = 2592000; /* one month */
groupsConfig.php に結合対象のファイルをグループとして登録する
結合対象の css と js を、サイト共通のファイル・グループとして min/groupsConfig.php に登録します。条件付きコメントで読み込まれる IE 用 css は含まないよう注意してください。
今回は、<head>に置く 『site-css 』と 『site-js』 をグループとして登録しました。
グループは幾つでも定義する事ができます。
min/groupsConfig.phpの14行目あたりの『return array(
// 'js' => array('//js/file1.js', '//js/file2.js'),
// 'css' => array('//css/file1.css', '//css/file2.css'),
);』を書き換えます。
groupsConfig.php
/**
* Groups configuration for default Minify implementation
* @package Minify
*/
/**
* You may wish to use the Minify URI Builder app to suggest
* changes. http://yourdomain/min/builder/
*
* See http://code.google.com/p/minify/wiki/CustomSource for other ideas
**/
// ⇩ここから書き換え
return array(
// 'css' => array('//css/file1.css', '//css/file2.css'),
'site-css' => array(
'//wp-content/themes/twentyfourteen/genericons/genericons.css',
'//wp-content/themes/twentyfourteen/style.css',
'//wp-content/plugins/meteor-slides/css/meteor-slides.css',
'//wp-content/plugins/jquery-smooth-scroll/css/jss-style.min.css',
),
// 'js' => array('//js/file1.js', '//js/file2.js'),
'site-js' => array(
'//wp-includes/js/jquery/jquery.js',
'//wp-includes/js/jquery/jquery-migrate.min.js',
'//wp-content/plugins/meteor-slides/js/jquery.cycle.all.js',
'//wp-content/plugins/meteor-slides/js/jquery.metadata.v2.js',
'//wp-content/plugins/meteor-slides/js/jquery.touchwipe.1.1.1.js',
'//wp-content/plugins/meteor-slides/js/slideshow.js',
'//wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js',
'//wp-content/themes/twentyfourteen/js/functions.js',
),
);
（コメント以外の）先頭の // は minify 独自の表記法で、ドキュメント・ルート（今回はhttp://localhost/wordpress/）を表します。
今回デフォルトのjQuery本体（『jquery.js』） を結合対象にしていますが、CDN を使いたい場合には外してください。
functions.php でグループ化した各リソースをキューから削除する
結合対象の各ファイルをキューから削除するコードを追加します。同時にこれらと依存関係のある IE 用 css も解除しておきます。
functions.php
/**
* Dequeue resources
**/
function my_dequeue_styles() {
wp_dequeue_style( 'genericons' );
wp_dequeue_style( 'twentyfourteen-style' );
wp_dequeue_style( 'twentyfourteen-ie' );
wp_dequeue_style( 'meteor-slides' );
wp_dequeue_style( 'blogsynthesis-scroll-to-top-style' );
}
add_action( 'wp_print_styles', 'my_dequeue_styles' );
function my_dequeue_scripts( ) {
wp_dequeue_script( 'jquery' );
wp_dequeue_script( 'jquery-cycle' );
wp_dequeue_script( 'jquery-metadata' );
wp_dequeue_script( 'jquery-touchwipe' );
wp_dequeue_script( 'meteorslides-script' );
wp_dequeue_script( 'twentyfourteen-script' );
wp_dequeue_script( 'blogsynthesis-scroll-to-top-script' );
}
add_action( 'wp_print_scripts', 'my_dequeue_scripts' );
functions.php でグループをキューに登録する
ポイントは IE 用 css の再挿入です。wp_enqueue_scripts() と wp_print_styles() とでは、後者の方が後に実行されるため、ハンドル名を変えて再登録します。
functions.php
/**
* Eequeue resources
**/
function my_enqueue_styles( ) {
wp_enqueue_style( 'site-css', site_url( ) . '/wp-content/min/?g=site-css', array( ), '1.0' );
wp_enqueue_style( 'my-enqueue-ie', get_template_directory_uri( ) . '/css/ie.css', array( 'site-css' ) );
wp_style_add_data( 'my-enqueue-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
jsの挿入（ site-js ）
今回 site-js はに配置するので、wp_enqueue_script( ) の5番目の引数 $in_footer には false を設定します。
functions.php
function my_enqueue_scripts( ) {
wp_enqueue_script( 'site-js', site_url( ) . '/wp-content/min/?g=site-js', array( ), '1.0', false );
// site.jsにmeteorslidessettingsオブジェクトの値（arrayの中身）を渡す
wp_localize_script( 'site-js', 'meteorslidessettings', array(
"meteorslideshowspeed" => "2000",
"meteorslideshowduration" => "5000",
"meteorslideshowheight" => "200",
"meteorslideshowwidth" => "940",
"meteorslideshowtransition" => "fade",
) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
wp_localize_script($handle, $object_name, $data);
動的なオプション値を外部スクリプトに渡す
$name（string） （必須） ⇒ 値を使用するスクリプトをハンドル名で設定。wp_enqueue_scriptで定義した名前です。
$object_name（string） （必須） ⇒ 任意のオブジェクト名を設定。
$data（array） （必須） ⇒ スクリプトに渡す値を配列で設定。
functions.php
function my_enqueue_scripts( ) {
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', array( ), '1.11.0', false );
wp_enqueue_script( 'site-js', site_url( ) . '/wp-content/min/?g=site-js', array( 'jquery' ), '1.0', false );
// site.jsにmeteorslidessettingsオブジェクトの値（arrayの中身）を渡す
wp_localize_script( 'site-js', 'meteorslidessettings', array(
"meteorslideshowspeed" => "2000",
"meteorslideshowduration" => "5000",
"meteorslideshowheight" => "200",
"meteorslideshowwidth" => "940",
"meteorslideshowtransition" => "fade",
) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
結合できてない、していないファイルをプラグインで結合する
WordPressのプラグインAutoptimize で残りのファイルを結合し、 </body>直前に配置。
読み込みに先立って実行されるべきファイル（ <head>内に置きたいファイル ）は除外(今回は『googleapis』,『site-js』,『meteorslides』)。
functions.php
/*
* Autoptimize filter: Exclude js files
* @see: /wp-content/plugins/autoptimize/autoptimize_helper.php_example
*/
function my_jsexclude( $exclude ) {
return "googleapis,site-js,meteorslides," . $exclude;
}
add_filter( 'autoptimize_filter_js_exclude', 'my_jsexclude', 10, 1 );
⇩ ここまでの手順、詳しくは下記サイトへ
GradeAの先行くWordPress高速化 – 必ず結果の出る実践的HTTPリクエスト削減法 | ゆっくりと
今回はこのへんで。
