書式
luaディレクティブは以下の形式で記述します。
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| cmd | 実行するluaディレクティブ名を指定します。 | スカラー | luaディレクティブ名を指定します。 |
| args | 実行するluaディレクティブのパラメータを指定します。 パラメータを取らないluaディレクティブの場合、argsノードの記述は不要です。 | シーケンス または マッピング | パラメータを指定します。 パラメータは指定するluaディレクティブによって異なります。 各luaディレクティブを参照してください。 |
| apply | luaディレクティブを適用するパス、または条件を指定します。 省略した場合は、global_excludeに指定されたパス以外の全てのコンテンツに 対して有効となります。 | マッピング | 以下の表を参照 |
| exclude | luaディレクティブの適用を除外するパス、または条件を指定します。 省略した場合は、global_excludeに指定されたパス以外の全てのコンテンツに 対して有効となります。 | マッピング | 以下の表を参照 |
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| path | パスを指定する場合に指定します。 | スカラー | パスを指定します。 正規表現を使用することもできます。 |
| if | 条件分岐する場合に指定します。 | スカラー | 条件分岐にはWordPressの関数名を指定します。 関数名を | で並記することで、OR条件を記述できます。 次のWordPressの関数に対応しています：is_404, is_front_page, is_page WordPressの関数以外に以下を指定することもできます。 is_kusanagi_mobile：モバイルデバイスからのアクセスかを判定します。 is_kusanagi_pc：PCブラウザからのアクセスかを判定します。 is_kusanagi_tablet：タブレットデバイスからのアクセスかを判定します。 |
例
lua:
body_filter:
- cmd: luaディレクティブ1
args:
- パラメータ1
- パラメータ2
apply:
path: ^/$
- cmd: luaディレクティブ2
args:
- パラメータ1
- パラメータ2
exclude:
if: is_front_page
詳細
add
HTTPヘッダの出力に追加を行います。
※注意事項※
WebサーバがApacheの場合、同一のHTTPヘッダを複数出力することができません。
最後に指定された値が使用されます。
ノード
header_filter
パラメータ
型
シーケンス
値
追加で出力したいHTTPヘッダを文字列形式で指定します。
複数のHTTPヘッダを記述することができます。
例
lua:
header_filter:
- cmd: add
args:
- 'Page-Speed-Technology: on'
remove
HTTPヘッダの出力から削除を行います。
※注意事項※
WebサーバがApacheの場合、使用できません。
ノード
header_filter
パラメータ
型
シーケンス
値
削除したいHTTPヘッダを以下の形式で指定します。
HTTPヘッダと値が完全一致したものが削除されます。
値を省略した場合は、値に関わらず指定したHTTPヘッダが削除されます。
複数のHTTPヘッダを記述することができます。
- HTTPヘッダ: 値
例
lua:
header_filter:
- cmd: remove
args:
- 'link: ; rel="https://api.w.org/"'
- 'x-pingback'
replace
HTTPヘッダの出力の置換を行います。
※注意事項※
WebサーバがApacheの場合、使用できません。
ノード
header_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| search | 置換元のHTTPヘッダを指定します。 | スカラー | 置換元のHTTPヘッダを指定します。値はシングルクォート(')で囲んでください。 |
| replacement | 置換先のHTTPヘッダを指定します。 | スカラー | 置換先のHTTPヘッダを指定します。値はシングルクォート(')で囲んでください。 |
例
lua:
header_filter:
- cmd: replace
args:
- search: 'X-MyHeader: original'
replacement: 'X-MyHeader: replaced'
- search: 'X-old-header: original'
replacement: 'X-new-header: replaced'
server push
指定したリソースをHTTP2 Pushで送信し、コンテンツの表示にかかる時間を短縮します。
通常、コンテンツを表示するために必要なリソースは、HTTPレスポンスボディを取得してその内容をパースするまでは分かりません。
server pushにリソースを指定することで、HTTPレスポンスボディと同時にリソースを受信することができます。
※注意事項※
HTTP2 Pushが使用できない環境では効果がありません。
(例えば、ブラウザがHTTP2非対応の場合、HTTPプロトコルの場合などです)
ノード
header_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| href | プリロードするリソースのURLを指定します。 | スカラー | プリロードするリソースのURLを指定します。 |
| media | メディアクエリを指定します。 | スカラー | メディアクエリを指定します。デフォルトは なし になります。 |
例
lua:
header_filter:
- cmd: server push
args:
- href: /wp-content/mu-plugins/pst/font/genericons-regular-webfont.ttf
set cookie for cdn
CDNよりコンテンツを配信している際、CDN経由でも最適化されたコンテンツを出し分けられるように、Cookieを設定します。
WEXAL® Page Speed Technologyによる最適化をCDNと組み合わせて行う際に指定してください。
※注意事項※
正しく動作させるには、両ノードに記述が必要です。
ノード
header_filter
body_filter
パラメータ
型
マッピング
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| domain | オリジナルのドメインを指定します。 | スカラー | オリジナルのドメインを指定します。 |
| external_url | オリジナルドメインのCookieを設定する、JavaScriptのURLを指定します。 | スカラー | オリジナルドメインのCookieを設定する、JavaScriptのURLを指定します。 |
例
lua:
header_filter:
- cmd: set cookie for cdn
args:
domain: wexal.jp
external_url: https://www.prime-strategy.co.jp/test.js?test=test
body_filter:
- cmd: set cookie for cdn
args:
domain: wexal.jp
external_url: https://www.prime-strategy.co.jp/test.js?test=test
preload
指定したリソースをプリロードに指定することで、コンテンツの表示にかかる時間を短縮します。
通常、コンテンツを表示するために必要なリソース(スクリプトやスタイルシートなど)は、HTTPレスポンスボディを取得して、その内容をパースするまでは分かりません。
コンテンツを表示するために必要なリソースをpreloadにリソースを指定することで、リソースを事前にロードできます。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| href | プリロードするリソースのURLを指定します。 | スカラー | プリロードするリソースのURLを指定します。 |
| media | メディアクエリを指定します。 | スカラー | メディアクエリを指定します。デフォルトは なし になります。 |
例
lua:
body_filter:
- cmd: preload
args:
- href: /wp-content/mu-plugins/pst/font/genericons-regular-webfont.ttf
shorten url
wp shorten urlを使用してください。
remove js
指定した外部スクリプトタグを削除し、ブラウザがロードするコンテンツを減らすことで表示にかかる時間を短縮します。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| needle | 削除したいスクリプトを指定します。 | スカラー | 削除したいスクリプトのニードルを指定します。正規表現を使用することもできます。 |
例
lua:
body_filter:
- cmd: remove js
args:
- needle: wp-embed
- needle: vk-all-in-one-expansion-unit/assets/js/all.min.js
remove inline js
指定したインラインスクリプトタグを削除し、ブラウザがロードするコンテンツを減らすことで表示にかかる時間を短縮します。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| needle | 削除したいインラインスクリプトを指定します。 | スカラー | 削除したいインラインスクリプトのニードルを指定します。正規表現を使用することもできます。 |
例
lua:
body_filter:
- cmd: remove inline js
args:
- needle: function heateorSssLoadEvent(e)
remove link
主に外部スタイルシートの呼び出しに使用されるlinkタグを削除し、ブラウザがロードするコンテンツを減らすことで表示にかかる時間を短縮します。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| needle | 削除したいlinkタグを指定します。 | スカラー | 削除したいlinkタグのニードルを指定します。正規表現を使用することもできます。 |
例
lua:
body_filter:
- cmd: remove link
args:
- needle: whats-new.css
remove inline css
指定したインラインスタイルシートタグを削除し、ブラウザがロードするコンテンツを減らすことで表示にかかる時間を短縮します。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| needle | 削除したいインラインスタイルシートを指定します。 | スカラー | 削除したいインラインスタイルシートのニードルを指定します。正規表現を使用することもできます。 |
例
lua:
body_filter:
- cmd: remove inline css
args
- needle: .heateor_sss_horizontal_sharing
remove meta
指定したmetaタグを削除し、ブラウザがロードするコンテンツを減らすことで、表示にかかる時間を短縮します。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| needle | 削除したいmetaタグを指定します。 | スカラー | 削除したいmetaタグのニードルを指定します。正規表現を使用することもできます。 |
例
lua:
body_filter:
- cmd: remove meta
args:
- needle: generator
insert script
インラインスクリプトの追加を行います。
remove jsディレクティブなどによりハンドルを解除した上で、テンプレートを編集することなく必要最低限のスクリプトを再登録することができます。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| script | 追加するインラインスクリプトを指定します。 | スカラー | 追加するインラインスクリプトを指定します。 |
| pos | 追加する位置を指定します。 | スカラー | 追加するインラインスクリプトを<head>に置く場合は<head>、</body>の前に置く場合は</body>を指定します。省略時は</head>です。 |
例
lua:
body_filter:
- cmd: insert script
args:
- script: '<script type="text/javascript">var vkExOpt = {"ajax_url":"https:\/\/www.wexal.jp\/wp-admin\/admin-ajax.php"};</script>'
pos: </body>
add css
スタイルシートの追加を行います。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| handle | 追加するスタイルシートのハンドル名を指定します。 | スカラー | 追加するスタイルシートのハンドル名を指定します。linkタグのidプロパティに使用します。省略した場合はなしです。 |
| src | スタイルシートファイルのパスを指定します。 | スカラー | スタイルシートファイルのパスを指定します。 |
| pos | スタイルシートを追加する位置を指定します。 | シーケンス | 追加するスタイルシートを<head>に置く場合は<head>、</body>の前に置く場合は</body>を指定します。省略時は</head>です。 |
| inline | 追加するスタイルシートをインライン形式に展開するかを指定します。 | シーケンス | インライン形式に展開するかを true または false で指定します。省略時は falseです。 |
| ver | クエリーストリングの最後にバージョン番号を付加するかを指定します。 | スカラー | クエリーストリングの最後にバージョン番号を付加するかを true または false で指定します。省略時はfalseです。 |
| media | スタイルシートを定義するメディアを指定します。 | スカラー | スタイルシートを定義するメディアを指定します。省略時はallです。 |
例
lua:
body_filter:
- cmd: add css
args:
- handle: button
src: /_wp/so-widgets-bundle/widgets/button/css/style.css
pos: <head>
inline: true
add js
スクリプトの追加を行います。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| sync | 追加するスクリプトの読み込み方法を指定します。 | スカラー | 追加するスクリプトを非同期で読み込み、非同期で実行する場合は、asyncを指定します。 追加するスクリプトを非同期で読み込み、HTMLのパースを完了した後に同期で実行する場合は、deferを指定します。 それ以外を指定した場合、または省略時は、同期読み込み、同期実行します。 |
| src | 追加するスクリプトのパスを指定します。 | スカラー | 追加するスクリプトのパスを指定します。 |
| pos | スクリプトを追加する位置を指定します。 | シーケンス | 追加するスクリプトを<head>に置く場合は<head>、</body>の前に置く場合は</body>を指定します。省略時は</head>です。 |
| inline | 追加するスクリプトをインラインスクリプトとして展開するかを指定します。 | シーケンス | インラインスクリプトとして展開するかを true または false で指定します。省略時は falseです。 |
| ver | クエリーストリングの最後にバージョン番号を付加するかを指定します。 | スカラー | クエリーストリングの最後にバージョン番号を付加するかを true または false で指定します。省略時はfalseです。 |
例
lua:
body_filter:
- cmd: add js
args:
- sync: defer
src: /wp-content/mu-plugins/pst/js/example.js
pos: </body>
inline: true
add link
外部リソースのリンクの追加を行います。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| rel | 追加する外部リソースの種類を指定します。 | スカラー | 追加する外部リソースのリンク種類を指定します。 |
| href | 追加する外部リソースのパスを指定します。 | スカラー | 追加する外部リソースのパスを指定します。 |
| pos | 外部リソースを追加する位置を指定します。 | シーケンス | 追加する外部リソースを<head>の直後に置く場合は<head>、</head>の前に置く場合は</head>を指定します。省略時は</head>です。 |
| as | 追加する外部リソースのコンテンツのタイプを指定します。 | スカラー | 追加する外部リソースのコンテンツのタイプを指定します。省略時はパスの拡張子から判断します。 |
例
lua:
body_filter:
- cmd: add link
args:
- rel: stylesheet
href: /_wp/so-widgets-bundle/widgets/button/css/style.css
pos: </head>
as: style
defer external js
外部スクリプトの実行をHTTPレスポンスボディのHTMLパース完了後まで遅延させることで、スクリプト実行によるコンテンツ表示にかかる時間を短縮できます。
コンテンツはHTMLパースが完了 (DOMContentLoaded) し、スタイルシートや画像などの読み込みが完了 (load) すると表示されます。
一般的に、スクリプトはHTMLパースで見付かると同時に実行され、スクリプトの実行が完了するまでHTMLパースは再開されません。
このディレクティブを指定することで、先にHTMLパースを完了させ、外部スクリプトの実行とスタイルシートや画像の読み込みを平行して行うことができます。
※注意事項※
スクリプトの処理によってコンテンツを生成している場合など、コンテンツの特性によっては逆にコンテンツ表示までの時間が遅くなる場合があります。
ノード
body_filter
パラメータ
なし
例
lua:
body_filter:
- cmd: defer external js
replace
Webサーバからクライアントへ送信するレスポンスボディに対して、文字列置換を行います。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| search | 置換元の文字列を指定します。 | スカラー | 置換元の文字列を指定します。 |
| replacement | 置換先の文字列を指定します。 | スカラー | 置換先の文字列を指定します。 |
| limit | 置換回数を指定します。 | スカラー | 置換回数を指定します。省略した場合、マッチした全ての置換元文字列を置換先文字列に置換します。 |
例
lua:
body_filter:
- cmd: replace
args:
- search: WordPress
replacement: PressWord
limit: 1
- search: Old Company Name
replacement: New Company Name
replace anything
Webサーバからクライアントへ送信するレスポンスボディに対して、正規表現による文字列置換を行います。
置換先文字列には後方参照($1、$2など)を含めることができます。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| pattern | 置換元の文字列の正規表現を指定します。 | スカラー | 置換元の文字列の正規表現を指定します。 |
| replacement | 置換先の文字列を指定します。 | スカラー | 置換先の文字列を指定します。後方参照($1、$2など)を含めることができます。 |
| limit | 置換回数を指定します。 | スカラー | 置換回数を指定します。省略した場合、マッチした全ての置換元文字列を置換先文字列で置換します。 |
| modifier | PCRE(Perl互換正規表現)のパターン修飾子を指定します。 | スカラー | PCRE(Perl互換正規表現)のパターン修飾子を指定します。省略した場合はなしです。 |
例
lua:
body_filter:
- cmd: replace anything
args:
- pattern: <(/?[^<>\s]+)(\s[^<>/]+)?(\s/)?>
replacement: <$1$2$3>
limit: 1
lazy youtube
コンテンツに埋め込んだYouTube動画のスクリプトを遅延実行させることで、コンテンツ表示にかかる時間を短縮できます。
遅延実行された埋め込みYouTube動画はコンテンツ内にサムネイルで表示され、サムネイルをクリックした際に動画がロードされるようになります。
ノード
body_filter
パラメータ
型
マッピング
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| mobile | モバイル表示時のサムネイルの解像度を指定します。 | スカラー | hq：480x360 mq：320x180 ''：120x90 sd：640x480 maxres：1920x1080 動画によっては全てのサイズのサムネイルがない場合があります。 デフォルトはmqです。 |
| pc | PC表示時のサムネイルの解像度を指定します。 | スカラー | mobileの値を参照 デフォルトはhqです。 |
| ratio | padding-bottomをパーセント(%)で指定します。 | スカラー | デフォルトは56.25です。 |
例
lua:
body_filter:
- cmd: lazy youtube
args:
mobile: mq
pc: mq
ratio: "56.25"
engagement delay
コンテンツに含まれるスクリプトのクロージャ、スクリプトの実行やスタイルシートのロードを、サイト訪問者のサイトへのエンゲージメントに応じで遅延させます。
エンゲージメントが低い (例えば初回訪問時) 間は遅延させることで、FCP (First Contentful Paint)の判定を高速にします。これにより「応答が速いサイトである」イメージを持たれ、ユーザーエクスペリエンスの向上が期待できます。
一方、エンゲージメントが高い (頻繁に訪問している、サイトを回遊している) 場合は遅延を徐々に減らし、即時実行に近づけます。応答速度に関するユーザーエクスペリエンスは減少しますが、サイト運営者が意図した通りの処理を提供することができます。
このディレクティブを使用することで、ユーザーが持つサイトへのエンゲージメントという軸で、ユーザーエクスペリエンスとサイト運営者が提供したいクオリティのバランスを取ることができます。
ノード
body_filter
パラメータ
型
マッピング
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| score | エンゲージメントスコアの目標値を指定します。 エンゲージメントスコアは、ユーザーがサイトを表示するたびに約100点上昇します。 また、ページ操作によっても点数が上昇します(後述のpscore参照)。 ユーザーのエンゲージメントスコアがこの目標値に近付くにつれて、ロード開始までの待ち時間が短くなります。また、この値を越えると遅延実行せず、即時実行します。 | スカラー | エンゲージメントスコアの目標値を指定します。デフォルトは250です。 |
| pscore | セッション単位のエンゲージメントスコアの目標値を指定します。 前述のエンゲージメントスコアの目標値(score)を越えていない場合でも、ページ操作によりセッション単位のエンゲージメントスコアの目標値を越えれば、待ち時間を無視してその時点でロードを開始します。 PCではmouse hoverイベントやスクロールイベント、モバイルではタップやスクロールイベントなどにより加算されます。 また、エンゲージメントスコアにもページ操作した分の点数が加算されます。 | スカラー | セッション単位のエンゲージメントスコアの目標を指定します。デフォルトは10です。 |
| high | ユーザーのエンゲージメントが高い際の、ロードを開始するタイミングを指定します。 | スカラー | ロードを開始するイベント名を指定します。デフォルトはDOMContentLoadedです。 |
| low | ユーザーのエンゲージメントが低い際の、ロードを開始するタイミングを指定します。 指定したタイミングから、後述の待ち時間(delay)を経過するとロードを開始します。 | スカラー | ロードを開始するイベント名を指定します。デフォルトはloadです。 |
| delay | ロード開始までの待ち時間の単位をミリ秒(ms)で指定します。 実際の待ち時間は、指定した待ち時間の単位と後述の割合(ratio)を掛けたものに対し、エンゲージメントスコアの目標値に対する現在のエンゲージメントスコアの割合をかけた値です。 | スカラー | ロード開始までの待ち時間の単位を指定します。デフォルトは1000です。 |
| ratio | モバイルで閲覧された際の、ロード開始までの待ち時間を変更する割合を指定します。 ユーザーのエンゲージメントが一番低い時、delayが1000、ratioが4であれば、PC閲覧時は1秒、モバイル閲覧時は4秒が待ち時間となります。 | スカラー | モバイルで閲覧された際の、ロード開始までの待ち時間を変更する割合を指定します。デフォルトは4です。 |
| max-age | ユーザーのエンゲージメントスコアの有効期限を秒(s)で指定します。 ユーザーが最後にサイトを訪問してからこの期間が経過するまでの間は、最後に記録したエンゲージメントスコアを使用します。それに従ってロード開始までの待ち時間を短縮します。 有効期限を過ぎてからユーザーがサイトを再度訪問した際は、エンゲージメントスコアは初期値に戻ります。そのため、ロード開始までの待ち時間も初回訪問時と同一になります。 | スカラー | ユーザーのエンゲージメントスコアの有効期限を指定します。デフォルトは777600 (9日) です。 |
| inline | engagement delayのスクリプトをインラインスクリプトとして展開するか、外部スクリプトとして読み込むかを指定します。 | スカラー | インラインスクリプトの場合はtrue、外部スクリプトの場合はfalseを指定します。デフォルトはfalseです。 |
| debug | デバッグ出力の有無を指定します。有効にするとブラウザのコンソールにデバッグした内容を出力します。 | スカラー | 有効の場合はtrue、無効の場合はfalseを指定します。デフォルトはfalseです。 |
| scripts | 遅延実行の対象にするクロージャやスクリプト、スタイルシートを指定します。 | シーケンス | 以下の表を参照 |
scriptsの値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| name | クロージャ/スクリプト/スタイルシート名を指定します。 | スカラー | クロージャ/スクリプト/スタイルシート名を指定します。このクロージャ/スクリプト/スタイルシート名は一意である必要があります。省略した場合は自動生成します。 |
| type | 種類を指定します。 | スカラー | closure：クロージャの場合に指定します。patternの指定が必要です。 inline js：インラインスクリプトの場合に指定します。needleの指定が必要です。 css：外部スタイルシートの場合に指定します。pathの指定が必要です。 js：外部スクリプトの場合に指定します。pathの指定が必要です。 優先実行させたい場合は、それぞれの末尾にxを追加します。（例：jsx） |
| pattern | クロージャをマッチさせるための正規表現を指定します。 クロージャの場合 (type: closure / closurex) では必須です。 | スカラー | クロージャをマッチさせるための正規表現を指定します。 |
| needle | インラインスクリプトをマッチさせるための正規表現を指定します。 インラインスクリプトの場合 (type: inline js / inline jsx) では必須です。 | スカラー | インラインスクリプトをマッチさせるための正規表現を指定します。 |
| path | スタイルシート/スクリプトのパスを指定します。 短縮URL (shorten url) をこのディレクティブより先に有効にしている場合は、それを加味したパスを記述する必要があります。 | スカラー | スタイルシート/スクリプトのパスを指定します。 |
| query | スタイルシート/スクリプトのパスにバージョン番号などのクエリーストリングが 含まれる場合、それらの処理方法を指定します。 | スカラー | 自動的に処理する場合はautoを指定します。指定しない場合は、クエリーストリングを付加しません。 デフォルトはautoです。 |
| sync | クロージャ/インラインスクリプト/スタイルシート/スクリプトの実行方法を指定します。 クロージャが外部スクリプトのjQueryに依存するなど、実行順番に依存関係がある場合、その逐次読み込むように指定できます。 | スカラー | 逐次実行する場合は一連のクロージャや外部スクリプトをsyncで指定し、順番に記述します。 逐次実行が不要な場合はasyncを指定します。デフォルトはsyncです。 |
| original | スタイルシートにwebfontが含まれる場合に、オリジナルのスタイルシートの絶対URLを指定します。戦略AI「David」がwebfontを考慮したconfigを生成します。手動で設定することも可能です。 | スカラー | オリジナルのスタイルシートの絶対URLを指定します。 |
| method | スタイルシートにwebfontが含まれる場合に指定します。戦略AI「David」がwebfontを考慮したconfigを生成します。手動で設定することも可能です。 | スカラー | webfontを指定します。 |
scriptsが読み込まれる順序
以下のグループの順で、scriptsに記載された順にロードを開始します。
- type に x が付いた、sync が async のもの
- type に x が付いた、sync が sync のもの
- type に x が付かない、sync が async のもの
- type に x が付かない、sync が sync のもの
例
lua:
body_filter:
- cmd: engagement delay
args:
score: 180
pscore: 10
high: body
low: load
delay: 1000
ratio: 5
max-age: 3600
inline: true
scripts:
- name: fa
type: css
path: /_wt/lightning/inc/font-awesome/versions/5.6.0/css/all.min.css
query: auto
- name: jq
type: jsx
path: /_wi/js/jquery/jquery.js
query: auto
sync: sync
- name: jm
type: jsx
path: /_wi/js/jquery/jquery-migrate.min.js
query: auto
sync: sync
- name: lm
type: js
path: /_wt/lightning/assets/js/lightning.min.js
query: auto
sync: async
lazy load
コンテンツに含まれる画像の読み込みを遅延します。
※script要素内のpicture/img/iframe/background-imageはlazy loadを行いません。
ノード
body_filter
パラメータ
型
マッピング
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| element | lazy loadの有効/無効を設定したいタグをs指定します。 | スカラー | picture/img/iframeを指定します。 |
| disable | elementで指定した要素について、lazy loadを無効にします。 | スカラー | trueまたはfalseを指定します。デフォルトはfalse(有効)です。 |
| skip | elementで指定した要素について、先頭から n 個に対してlazy loadを無効にします。 | スカラー | 数値を設定します。デフォルトはfalse(全て有効)です。 |
例
lua:
body_filter:
- cmd: lazy load
args:
- element: img
skip: 3
- element: picture
skip: 1
- element: iframe
disable: true
wp remove header
WordPressがheadタグ内に出力するハンドルを抑制し、ブラウザがロードするコンテンツを減らすことで表示にかかる時間を短縮します。
デフォルトでは、トラックバック許可の確認と以下のハンドルを抑制します。
※wpディレクティブのremove headerと同等の働きをします。
| フック | ハンドル名 | 優先度 |
|---|---|---|
| template_redirect | rest_output_link_header | 11 |
| template_redirect | wp_shortlink_header | 11 |
ノード
header_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| func_to_remove | 追加で抑制したいtemplate_redirectフックのハンドルを指定します。 | スカラー | 追加で抑制したいtemplate_redirectフックのハンドルを指定します。 |
| header | func_to_removeで指定したハンドルが出力するHTTPヘッダを指定します。 | スカラー | func_to_removeで指定したハンドルが出力するHTTPヘッダを指定します。 |
例
lua:
header_filter:
- cmd: wp remove header
args
- func_to_remove: pings_open
header: x-pingback
wp shorten url
WordPressの標準パスを短縮パスに置換し、URLを短縮します。WordPressはプロトコルから始まる絶対URLを出力しますが、これを短縮したパスに置換することでコンテンツサイズを削減し、コンテンツ表示にかかる時間を短縮します。
URLの短縮は WEXAL® Page Speed Technology 内部で動的に行うため、WordPressのテーマやプラグインなどの標準パスを書き換える必要はありません。
以下のようにパスを置換して短縮します。
※wpディレクティブのshorten urlと同等の働きをします。
| 標準パス | 短縮パス |
|---|---|
| /wp-content/uploads | /_wu |
| /wp-content/themes | /_wt |
| /wp-content/plugins | /_wp |
| /wp-includes | /_wi |
ノード
body_filter
パラメータ
なし
例
lua:
body_filter:
- cmd: wp shorten url
wp remove emoji
WordPressの絵文字用スタイルシートとスクリプトの出力を抑制し、ブラウザがロードするコンテンツを減らすことで、表示にかかる時間を短縮します。
デフォルトでは以下のアクションで出力される絵文字用スタイルシートとスクリプトを抑制します。
※wpディレクティブのremove emojiと同等の働きをします。
| フック | ハンドル名 | 優先度 |
|---|---|---|
| wp_head | print_emoji_detection_script | 7 |
| wp_print_styles | print_emoji_styles | 10 |
ノード
body_filter
パラメータ
なし
例
lua:
body_filter:
- cmd: wp remove emoji
wp opt genericons
WordPressが読み込むアイコンフォント「Genericons」に対する最適化を行います。
代替フォントを表示することで、フォントがブラウザにロードされるまでの間もコンテンツが表示されるようにします。
※wpディレクティブのopt genericonsと同等の働きをします。
ノード
body_filter
パラメータ
なし
例
lua:
body_filter:
- cmd: wp opt genericons
wp remove meta
WordPressが出力するmetaタグの出力を抑制し、ブラウザがロードするコンテンツ及びコンテンツサイズを減らすことで、表示にかかる時間を短縮します。
デフォルトでは以下のハンドルを抑制します。
※wpディレクティブのremove metaと同等の働きをします。
| フック | ハンドル名 | 優先度 |
|---|---|---|
| wp_head | feed_links | 2 |
| wp_head | feed_links_extra | 3 |
| wp_head | rsd_link | 10 |
| wp_head | wlwmanifest_link | 10 |
| wp_head | adjacent_posts_rel_link_wp_head | 10 |
| wp_head | rest_output_link_wp_head | 10 |
| wp_head | wp_oembed_add_discovery_links | 10 |
| wp_head | wp_oembed_add_host_js | 10 |
| wp_head | wp_shortlink_wp_head | 10 |
| wp_head | rel_canonical | 10 |
| wp_head | wp_generator | 10 |
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| func_to_remove | 追加で抑制したいwp_headフックのハンドル名を指定します。 | スカラー | 追加で抑制したいwp_headフックのハンドル名を指定します。 |
| meta | func_to_removeで指定したハンドルが出力する、metaタグのニードルを指定します。 | スカラー | func_to_removeで指定したハンドルが出力する、metaタグのニードルを指定します。 |
例
lua:
body_filter:
- cmd: wp remove meta
args
- func_to_remove: generator
meta: 'name="generator"'
wp remove wpcf7
WordPressのフォーム設置プラグイン「Contact Form 7」のスクリプトとスタイルシートの最適化を行います。
WordPressでContact Form 7を有効にしている場合、フォームがないページにおいてもContact Form 7のスクリプトとスタイルシートがロードされます。
このディレクティブを有効にすると、Contact Form 7のスクリプトとスタイルシートのロードを抑制し、ブラウザがロードするコンテンツを減らすことで表示にかかる時間を短縮します。
フォームがあるページではこれらのスクリプトとスタイルシートは必要です。そのため、フォームがあるページはexcludeに指定して除外してください。
※wpディレクティブのremove wpcf7と同等の働きをします。
ノード
body_filter
パラメータ
なし
例
lua:
body_filter:
- cmd: wp remove wpcf7
exclude:
if:
is_page: contactus
reduce script
全く同じスクリプトが複数読み込まれている場合、1つのみを残し、残りを除去します。
※wpディレクティブのreduce scriptと同等の働きをします。
ノード
body_filter
パラメータ
型
マッピング
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| apply_script | 適用するスクリプトのパスを指定します。 | スカラー | パスを指定します。正規表現を使用することもできます。デフォルトは . です。 |
| exclude_script | 適用外にするスクリプトのパスを指定します。 | スカラー | パスを指定します。正規表現を使用することもできます。デフォルトは false です。 |
例
lua:
body_filter:
- cmd: reduce script
args:
apply_script: jquery
normalize newlines
Windowsの改行コードCR+LFと、Macの改行コードCRを、LFに変換して改行コードを統一します。
※wpディレクティブの normalize newlinesと同等の働きをします。
ノード
body_filter
パラメータ
なし
例
lua:
body_filter:
- cmd: normalize newlines
lazy video
videoタグが読み込まれている場合、preload属性にnoneを指定して読み込みを遅らせます。
ノード
body_filter
パラメータ
なし
例
lua:
body_filter:
- cmd: lazy video
tidy
HTMLに必要なタグが欠損している場合、タグを補完します。
※tidyディレクティブはバックエンドがphp7/php-fpmの場合のみ有効です。hhvmの場合は無効になります。
ノード
body_filter
パラメータ
なし
例
lua:
body_filter:
- cmd: tidy
proxy
外部リソース(img, css, js)をローカルでプロキシすることで、外部リソースに対しても WEXAL® Page Speed Technology による最適化を有効にします。
ノード
body_filter
パラメータ
型
シーケンス
値
| ノード | 説明 | 型 | 値 |
|---|---|---|---|
| proxy-host | プロキシしたいホスト名を指定します。 | スカラー | ホスト名を指定します。 |
| element | プロキシしたい外部リソース(img/css/js) を指定します。 | スカラー | プロキシしたい外部リソース(img/css/js) を指定します。 |
| limit | elementで指定した要素について、先頭から n 個に対してプロキシします。-1を指定すると全てプロキシします。 | スカラー | 数値を設定します。デフォルトは-1です。 |
例
lua:
body_filter:
- cmd: proxy
args:
- proxy-host: b.st-hatena.com
target:
- element: img
limit: 10
- element: css
limit: 0
- element: js
limit: 0
split inline css webfont
インラインスタイルシートをまとめて外部スタイルシート化します。webfontが含まれる場合は、split_css_webfontと同様に切り出して遅延します。
※リソースの有効期限(Cache-Control: max-age)が設定されます。デフォルトは2hです。
ノード
body_filter
パラメータ
なし
例
lua:
body_filter:
- cmd: split inline css webfont
repair jquery
jQueryスクリプトの指定を正規化します。
ノード
body_filter
パラメータ
なし
例
lua:
body_filter:
- cmd: repair jquery
secure target blank
rel 属性を持たない target="_blank" 指定の a タグに、rel="noopener noreferrer" を追加します。これにより、パフォーマンス改善と target="_blank" がもつ脆弱性への対策が行えます。
ノード
body_filter
パラメータ
なし
例
lua:
body_filter:
- cmd: secure target blank