wpディレクティブ(2.5.4)

書式

wpディレクティブは以下の形式で記述します。

ノード 説明
cmd 実行するwpディレクティブ名を指定します。 スカラー wpディレクティブ名を指定します。
args 実行するwpディレクティブのパラメタを指定します。
パラメタを取らないwpディレクティブの場合は、argsノードの記述が不要です。
シーケンス または マッピング パラメタを指定します。
パラメタは指定したwpディレクティブにより異なります。
各wpディレクティブを参照してください。
apply wpディレクティブの適用するパス、または、条件を指定します。
省略した場合は、global_excludeに指定されたパス以外の全てのコンテンツに
対して有効となります。
マッピング 以下の表を参照
exclude wpディレクティブの適用を除外するパス、または、条件を指定します。
省略した場合は、global_excludeに指定されたパス以外の全てのコンテンツに
対して有効となります。
マッピング 以下の表を参照

apply/excludeの値

ノード 説明
path パスの場合に指定します。 スカラー パスを指定します。
正規表現を使用することもできます。
if 条件分岐の場合に指定します。 スカラー 条件分岐にはWordPressの関数名を指定します。関数名を | で並記することで、OR条件を記述できます。
WordPressの関数以外に以下を指定することができます。
is_kusanagi_mobile:モバイルデバイスからのアクセスかを判定します。
is_kusanagi_pc:PCブラウザからのアクセスかを判定します。
is_kusanagi_tablet:タブレットデバイスからのアクセスかを判定します。

wp:
  wexal_head:
  - cmd: wpディレクティブ1
    args:
    - パラメタ1
    - パラメタ2
    apply:
      path: ^/$
  - cmd: wpディレクティブ2
    args:
    - パラメタ1
    - パラメタ2
    exclude:
      if: is_front_page

詳細

preload

指定したリソースをプリロードに指定することで、コンテンツの表示にかかる時間を短縮します。
通常、コンテンツを表示するために必要なリソース(スクリプトやスタイルシートなど)は
HTTPレスポンスボディを取得して、その内容をパースするまでは分かりません。
コンテンツを表示するために必要なリソース(スクリプト、スタイルシートやWebフォントなど)をpreloadにリソースを指定することで、リソースを事前にロードできます。

ノード
wexal_init, wexal_head, wexal_footer, wexal_enqueue_opt, wexal_flush

パラメタ

シーケンス

ノード 説明
href プリロードするリソースのURLを指定します。 スカラー プリロードするリソースのURL指定します。
media メディアクエリを指定します。 スカラー メディアクエリを指定します。デフォルトは なし になります。

wp:
  wexal_head:
  - cmd: preload
    args:
    - href: /_wt/lightning/inc/font-awesome/versions/5.6.0/webfonts/fa-solid-900.woff2
    - href: /_wu/2019/08/img0-1024x640.jpg
      media: "max-width: 600px"

remove emoji

WordPressで絵文字用スタイルシートとスクリプトを出力するハンドルを抑制し、ブラウザがロードするコンテンツを減らすことで、表示にかかる時間を短縮します。
デフォルトで、以下のアクションで出力される絵文字スタイルとスクリプトを抑制します。

フック ハンドル名 優先度
wp_head print_emoji_detection_script 7
wp_print_styles print_emoji_styles 10

ノード
wexal_init, wexal_head, wexal_footer, wexal_enqueue_opt, wexal_flush

パラメタ
なし

wp:
  wexal_head:
  - cmd: remove emoji

remove meta

WordPressで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

ノード
wexal_init, wexal_head, wexal_footer, wexal_enqueue_opt, wexal_flush

パラメタ

シーケンス

ノード 説明
func_to_remove 追加で抑制したいwp_headフックのハンドルを指定します。 スカラー 追加で抑制したいwp_headフックのハンドルを指定します。
priority func_to_removeで指定したハンドルの、wp_headフックのプライオリティを指定します。 スカラー func_to_removeで指定したハンドルの、wp_headフックのプライオリティを指定します。

wp:
  wexal_head:
  - cmd: remove meta
    args
    - func_to_remove: generator
      priority: 10

remove header

WordPressでheadタグ内に出力するハンドルを抑制し、ブラウザがロードするコンテンツを減らすことで表示にかかる時間を短縮します。
デフォルトで、トラックバック許可の確認と以下のハンドルを抑制します。

フック ハンドル名 優先度
template_redirect rest_output_link_header 11
template_redirect wp_shortlink_header 11

ノード
wexal_init, wexal_head, wexal_footer, wexal_enqueue_opt, wexal_flush

パラメタ

シーケンス

ノード 説明
func_to_remove 追加で抑制したいremplate_redirectフックのハンドルを指定します。 スカラー 追加で抑制したいremplate_redirectフックのハンドルを指定します。
priority func_to_removeで指定したハンドルの、remplate_redirectフックのプライオリティを指定します。 スカラー func_to_removeで指定したハンドルの、remplate_redirectフックのプライオリティを指定します。

wp:
  wexal_head:
  - cmd: remove header
    args
    - func_to_remove: wp_shortlink_header
      priority: 11

remove js

WordPressに登録したスクリプトを解除し、ブラウザがロードするコンテンツを減らすことで表示にかかる時間を短縮します。
ノード
wexal_init, wexal_head, wexal_footer, wexal_enqueue_opt, wexal_flush
パラメタ

シーケンス

ノード 説明
handle 登録解除したいスクリプトのハンドル名を指定します。 スカラー 登録解除したいスクリプトのハンドル名を指定します。
wp:
  wexal_enqueue_opt:
  - cmd: remove js
    args
    - handle: wp-embed

add js

WordPressにwp_enqueue_script関数を用いてスクリプトを登録します。
remove jsディレクティブなどによりハンドルを解除した上で、テンプレートを編集することなく必要最低限のスクリプトを再登録することができます。

ノード
wexal_init, wexal_head, wexal_footer, wexal_enqueue_opt, wexal_flush

パラメタ

シーケンス

ノード 説明
handle 登録するスクリプトのハンドル名を指定します。 スカラー 登録するスクリプトのハンドル名を指定します。一意である必要があります。
src JavaScriptファイルへのパスを指定します。 スカラー JavaScriptファイルへのパスを指定します。
deps 登録するスクリプトが依存するハンドル名を指定します。 シーケンス 登録するスクリプトが依存するハンドル名を指定します。
複数のハンドルに依存する場合はシーケンスで記述します。省略時はなしです。
ver クエリーストリングの最後にバージョン番号を付加するかを指定します。 スカラー クエリーストリングの最後にバージョン番号を付加するかを true または false で指定します。省略時はfalseです。
in_footer 登録するスクリプトを挿入する位置を指定します。 スカラー 登録するスクリプトを<head>に置く場合は false 、</body>の前に置く場合は true を指定します。省略時はfalseです。

wp:
  wexal_enqueue_opt:
  - cmd: add js
    args
    - handle: user-sitejs
      src: /wp-content/plugins/myplugin/site.js
      deps: - jquery
      ver: false
      in_footer: true

remove css

WordPressに登録したスタイルシートを解除し、ブラウザがロードするコンテンツを減らすことで表示にかかる時間を短縮します。

ノード
wexal_init, wexal_head, wexal_footer, wexal_enqueue_opt, wexal_flush

パラメタ

シーケンス

ノード 説明
handle 登録解除したいスタイルシートのハンドル名を指定します。 スカラー 登録解除したいスタイルシートのハンドル名を指定します。

wp:
  wexal_enqueue_opt:
  - cmd: remove css
    args
    - handle: wp-block-library

add css

WordPressにwp_enqueue_style関数を用いてスタイルシートを登録します。
remove cssディレクティブなどによりハンドルを解除した上で、テンプレートを編集することなく必要最低限のスタイルシートを再登録することができます。

ノード
wexal_init, wexal_head, wexal_footer, wexal_enqueue_opt, wexal_flush

パラメタ

シーケンス

ノード 説明
handle 登録するスタイルシートのハンドル名を指定します。 スカラー 登録するスタイルシートのハンドル名を指定します。一意である必要があります。
src スタイルシートファイルへのパスを指定します。 スカラー スタイルシートファイルへのパスを指定します。
deps 登録するスタイルシートが依存するハンドル名を指定します。 シーケンス 登録するスタイルシートが依存するハンドル名を指定します。
複数のハンドルに依存する場合はシーケンスで記述します。省略時はなしです。
ver クエリーストリングの最後にバージョン番号を付加するかを指定します。 スカラー クエリーストリングの最後にバージョン番号を付加するかを true または false で指定します。省略時はfalseです。
in_footer 登録するスクリプトを挿入する位置を指定します。 スカラー 登録するスクリプトを<head>に置く場合は false 、</body>の前に置く場合は true を指定します。省略時はfalseです。

wp:
  wexal_enqueue_opt:
  - cmd: add css
    args
    - handle: user-font-awesome
      src: /wp-content/plugins/myplugin/font-awesome.css

remove hook

WordPressの特定のフックに登録されている関数を解除します。
登録された関数によりブラウザがロードするコンテンツを減らすことで表示にかかる時間を短縮します。

ノード
wexal_init, wexal_head, wexal_footer, wexal_enqueue_opt, wexal_flush

パラメタ

シーケンス

ノード 説明
tag 登録を解除する関数が登録されたフック名を指定します。 スカラー 登録を解除する関数が登録されたフック名を指定します。
func_to_remove 登録を解除する関数名を指定します。 スカラーまたはシーケンス 登録を解除する関数名を指定します。
登録を解除する関数がクラスメソッドの場合 (例えばプラグインのメソッド) は、クラス名とメソッド名をシーケンスで記述します。
priority func_to_removeで指定したハンドルの、wp_headフックのプライオリティを指定します。 スカラー func_to_removeで指定したハンドルの、wp_headフックのプライオリティを指定します。
is_object 登録を解除する関数がクラスメソッドかどうかを指定します。 スカラー 登録を解除する関数がクラスメソッドの場合 (例えばプラグインのメソッド) は true を指定します。省略時はfalseです。

wp:
  wexal_enqueue_opt:
  - cmd: remove hook
    args
    - tag: wp_footer
      func_to_remove: exUnit_print_fbId_script
    - tag: wp_footer
      func_to_remove:
      - WpSocialBookmarkingLight\Plugin
      - footer
      priority: 10
      is_object: true

opt genericons

Genericonsに対する最適化を行います。
代替フォントを表示することで、フォントがブラウザにロードされるまでの間もコンテンツを表示できるようにします。

ノード
wexal_init, wexal_head, wexal_footer, wexal_enqueue_opt, wexal_flush

パラメタ
なし

wp:
  wexal_enqueue_opt:
  - cmd: opt genericons

remove wpcf7

Contact Form 7のスクリプトとスタイルシートの最適化を行います。
WordPressでContact Form 7を有効化している場合、Contact FormがないページにおいてもContact Form 7のスクリプトとスタイルシートがロードされます。
この最適化では、Contact Form 7のスクリプトとスタイルシートのロードを抑制し、ブラウザがロードするコンテンツを減らすことで表示にかかる時間を短縮します。
Contact Formがあるページではこれらのスクリプトとスタイルシートは必要です。そのため、Contact Formがあるページをexcludeで指定して、ディレクティブの適用から除外してください。

ノード
wexal_init, wexal_head, wexal_footer, wexal_enqueue_opt, wexal_flush

パラメタ
なし

wp:
  wexal_enqueue_opt:
  - cmd: remove wpcf7
    exclude:
      if:
        is_page: contactus

server push external css

指定したスタイルシートをHTTP2 Pushにより送信することで、コンテンツの表示にかかる時間を短縮します。
通常、コンテンツを表示するために必要なスタイルシートは、HTTPレスポンスボディを取得してその内容をパースするまでは分かりません。
server push external cssにスタイルシートを指定することで、HTTPレスポンスボディと同時にスタイルシートを受信することができます。
※注意事項※
HTTP2 Pushが使用できない環境では効果がありません。
(例えば、ブラウザがHTTP2非対応の場合、HTTPプロトコルの場合などです)

ノード
wexal_flush

パラメタ
なし

wp:
  wexal_flush:
  - cmd: server push external css

shorten url

WordPressの標準パスを短縮パスと置換し、URLを短縮します。これによりURLを記述した部分のコンテンツサイズを削減し、コンテンツ表示にかかる時間を短縮します。
URLの短縮はPage Speed Technology内部で動的に行うため、WordPressのテーマやプラグインなどは標準パスから書き換える必要はありません。
以下のパスを置換します。

標準パス 短縮パス
/wp-content/uploads /_wu
/wp-content/themes /_wt
/wp-content/plugins /_wp
/wp-includes /_wi

ノード
wexal_flush

パラメタ
なし

wp:
  wexal_flush:
  - cmd: shorten url

defer external js

外部スクリプトの実行をHTTPレスポンスボディのHTMLパース完了後まで遅延させることで、スクリプト実行によるコンテンツ表示にかかる時間に対する影響を抑えます。
コンテンツ表示はHTMLパースが完了 (DOMContentLoaded) し、スタイルシートや画像などの読み込みが完了 (load) して表示されます。
一般的に、スクリプトはHTMLパースで見付かると同時に実行され、スクリプトの実行が完了するまでHTMLパースは再開されません。
本ディレクティブを指定することで、先にHTMLパースを完了させ、外部スクリプトの実行とスタイルシートや画像の読み込みを平行で行えるようにすることで、コンテンツ表示にかかる時間を短縮できます。
JavaScriptの処理によってコンテンツを生成している場合など、コンテンツの特性によっては逆に遅くなる場合があります。

ノード
wexal_flush

パラメタ

マッピング

ノード 説明
apply_script 適用する外部スクリプトのパスを指定します。 スカラー パスを指定します。正規表現を使用することもできます。デフォルトは . です。
exclude_script 適用外にする外部スクリプトのパスを指定します。 スカラー パスを指定します。正規表現を使用することもできます。

wp:
  wexal_flush:
  - cmd: defer external js
    args:
      apply_script: ^/_wt/

set cookie for cdn

CDNによりコンテンツを配信している際、CDN経由でも最適化されたコンテンツを出し分けられるようにCookieを設定します。
Page Speed Technologyによる最適化をCDNと組み合わせて行う際に指定してください。

ノード
wexal_flush

パラメタ

マッピング

ノード 説明
domain オリジナルのドメインを指定します。 スカラー オリジナルのドメイン
external_url オリジナルドメインのCookieを設定するJavaScriptへのURLを指定します。 スカラー オリジナルドメインのCookieを設定するJavaScriptへのURL

wp:
  wexal_flush:
  - cmd: set cookie for cdn
    args:
      domain: wexal.jp
      external_url: https://www.prime-strategy.co.jp/test.js?test=test

replace

WordPressの処理が完了し、phpからWebサーバへ送信するレスポンスボディに対して文字列置換の処理を行います。

ノード
wexal_flush

パラメタ

シーケンス

ノード 説明
search 置換元の文字列を指定します。 スカラー 置換元の文字列を指定します。
replacement 置換先の文字列を指定します。 スカラー 置換先の文字列を指定します。
limit 置換回数を指定します。 スカラー 置換回数を指定します。省略した場合、マッチした全ての置換元文字列を置換先文字列で置換します。

wp:
  wexal_flush:
  - cmd: replace
    args:
    - search: WordPress
      replacement: PressWord
      limit: 1
    - search: Old Company Name
      replacement: New Company Name

replace anything

WordPressの処理が完了し、phpからWebサーバへ送信するレスポンスボディに対して正規表現による文字列置換の処理を行います。

ノード
wexal_flush

パラメタ

シーケンス

ノード 説明
pattern 置換元の文字列の正規表現を指定します。 スカラー 置換元の文字列の正規表現を指定します。
replacement 置換先の文字列を指定します。 スカラー 置換先の文字列を指定します。後方参照($1、$2など)を含めることができます。
limit 置換回数を指定します。 スカラー 置換回数を指定します。省略した場合、マッチした全ての置換元文字列を置換先文字列で置換します。
modifier PCRE(Perl互換正規表現)のパターン修飾子を指定します。 スカラー PCRE(Perl互換正規表現)のパターン修飾子を指定します。パターン修飾子を指定する場合は、patternを必ずデリミタで囲んでください。省略した場合はなしです。

wp:
  wexal_flush:
  - cmd: replace anything
    args:
     - pattern: /<(/?[^<>\s]+)(\s[^<>/]+)?(\s/)?>/
       replacement: <$1$2$3>
       limit: 1
       modifier: i

lazy youtube

コンテンツに埋め込んだYouTube動画のスクリプトを遅延実行させることで、コンテンツ自体の表示にかかる時間に対する影響を抑えます。
遅延実行された埋め込みYouTube動画はコンテンツ内にサムネイル表示され、サムネイルをクリックした際に動画がロードされるようになります。

ノード
wexal_flush

パラメタ

マッピング

ノード 説明
mobile モバイル表示の際のサムネイルの解像度を指定します。 スカラー hq:480x360
mq:320x180
'':120x90
sd:640x480
maxres:1920x1080
なお、動画によっては全てのサイズのサムネイルがない場合があります。
デフォルトはmqです。
pc PC表示の際のサムネイルの解像度を指定します。 スカラー mobileの値を参照
デフォルトはhqです。
ratio padding-bottomをパーセント(%)で指定します。 スカラー デフォルトは56.25です。

wp:
  wexal_flush:
  - cmd: lazy youtube
    args:
      mobile: mq
      pc: mq
      ratio: "56.25"

engagement delay

コンテンツに含まれるスクリプトのクロージャ、スクリプトの実行やスタイルシートのロードを、サイト訪問者のサイトとのエンゲージメントに応じで遅延させます。
エンゲージメントが低い (例えば初回訪問時) 間は、遅延させることでコンテンツ自体の表示にかかる時間に対する影響を抑えます。
これにより、コンテンツ表示に関するユーザエクスペリエンスを向上できます。
一方、エンゲージメントが高い (頻繁に訪問している、サイトを回遊している) 場合は遅延を徐々に減らし、即時実行に近づけます。
コンテンツ表示に関するユーザエクスペリエンスは減少しますが、サイトの作成者が意図した処理を実行することができます。
このディレクティブを使用することで、ユーザエクスペリエンスとサイト製作者が意図した処理の実行を、ユーザのサイトとのエンゲージメントという軸でバランスすることができます。

ノード
wexal_flush

パラメタ

マッピング

ノード 説明
score 遅延実行しなくなるまでに必要なエンゲージメントスコアの目標値を指定します。
エンゲージメントスコアは、ユーザがサイトを表示するたびに約100点上昇します。
また、ページ操作によりpscoreの点数分上昇します。
ユーザのエンゲージメントスコアがこの目標値に近付くにつれて、遅延実行までの待ち時間が短くなります。また、この値を越えると遅延実行しなくなります。(即時実行)
スカラー エンゲージメントスコアの目標値。デフォルトは250です。
pscore ページ操作により上昇するエンゲージメントスコアの点数を指定します。
PCではmouse hoverイベント、スクロールイベントなどで、モバイルではタップやスクロールイベントなどにより加算されます。
スカラー エンゲージメントスコアの上昇値。デフォルトは10です。
high ユーザのエンゲージメントが高い際に、クロージャ、スクリプトの実行やスタイルシートのロードするタイミングを指定します。 スカラー クロージャ、スクリプトの実行やスタイルシートのロードするイベント名。デフォルトはDOMContentLoadedです。
low ユーザのエンゲージメントが低い際に、クロージャ、スクリプトやスタイルシートのロードを遅延実行する基準となるタイミングを指定します。
指定したタイミングから遅延実行の待ち時間を経過した時点で、クロージャ、スクリプトやスタイルシートのロードが実行されます。
スカラー クロージャを実行するイベント名。デフォルトはloadです。
delay クロージャ、スクリプトやスタイルシートのロードを遅延実行させるための待ち時間の単位をミリ秒(ms)で指定します。
実際の待ち時間は、指定した待ち時間の単位と後述の割合 (ratio) を掛けたものに対し、エンゲージメントスコアの目標値に対する現在のエンゲージメントスコアの割合をかけた値となります。
スカラー クロージャ、スクリプトやスタイルシートのロードを遅延実行させる待ち時間の単位。デフォルトは1000です。
ratio モバイル環境でクロージャ、スクリプトやスタイルシートのロードを遅延実行させる待ち時間の割合を指定します。 スカラー クロージャ、スクリプトやスタイルシートのロードを遅延実行させる待ち時間の割合。デフォルトは4です。
従って、モバイル環境では遅延実行の最大待ち時間は4000ミリ秒となります。
max-age ユーザのエンゲージメントスコアの有効期限を秒(s)で指定します。
ユーザが最後にサイトを訪問してからこの期間が経過するまでの間は、最後に記録したエンゲージメントスコアが有効となります。それに従って、遅延実行の待ち時間が短縮されます。
有効期限を過ぎてからユーザがサイトを再度訪問した際は、エンゲージメントスコアは初期値に戻ります。そのため、遅延実行の待ち時間も長くなります。
スカラー ユーザのエンゲージメントスコアの有効期限。デフォルトは777600 (9日) です。
inline engagement delayのスクリプトをインラインスクリプトに展開するか、外部スクリプトとして実行するかを指定します。 スカラー インラインスクリプトはtrue、外部スクリプトはfalseを指定します。デフォルトは外部スクリプトです。
debug デバッグ出力の有無を指定します。有効にするとブラウザのコンソールなどに出力します。 スカラー 有効はtrue、無効はfalseを指定します。デフォルトは無効です。
scripts 遅延実行の対象とするクロージャ、スクリプトやスタイルシートを指定します。順番に実行しなければならないクロージャ、スクリプトは順番に記述し、後述のsyncにsyncを指定することで逐次実行することができます。 シーケンス 以下の表を参照

scriptsの値

ノード 説明
name クロージャ/スクリプト/スタイルシート名を指定します。 スカラー クロージャ/スクリプト/スタイルシート名。このクロージャ/スクリプト/スタイルシート名は一意である必要があります。省略した場合は自動的に生成します。
type 種類を指定します。 スカラー closure:クロージャの場合に指定します。patternの指定が必要です。
inline js:インラインスクリプトの場合に指定します。needleの指定が必要です。
css:外部スタイルシートの場合ni指定します。pathの指定が必要です。
js:外部スクリプトの場合に指定します。pathの指定が必要です。
優先実行させたい場合は末尾にxを追加します。(例:jsx)
pattern クロージャをマッチさせるための正規表現を記述します。
クロージャの場合 (type: closure) では必須です。
スカラー 正規表現
needle インラインスクリプトをマッチさせるための正規表現を記述します。
インラインスクリプトの場合 (type: inline js) では必須です。
スカラー 正規表現
path 外部スタイルシート/スクリプトのパスを指定します。
短縮URL (shorten url) を有効にしている場合は、それを加味したパスを記述する必要があります。
スカラー 外部スタイルシート/スクリプトのパス。
query 外部スタイルシート/スクリプトのパスにバージョン番号などのクエリーストリングが
含まれる場合、それらの処理方法を指定します。
スカラー 自動的に処理する場合はautoを指定します。
指定しない場合は、クエリーストリングを付加しません。
デフォルトはautoです。
sync クロージャ、インラインスクリプト、外部スタイルシート/スクリプトの実行方法を指定します。
クロージャが外部スクリプトのjQueryに依存するなど、実行順番に依存関係がある際、その逐次実行するように指定できます。
スカラー 逐次実行する場合は一連のクロージャや外部スクリプトをsyncで指定して、順番に記述してください。
逐次実行が不要な場合はasyncを指定します。デフォルトはsyncです。
original cssにwebfontが含まれる場合に、オリジナルのcssの絶対URLを指定します。David君がwebfontを考慮したconfigを生成しますが、手動での設定も可能です。 スカラー オリジナルのcssの絶対URL
method cssにwebfontが含まれる場合に指定します。David君がwebfontを考慮したconfigを生成しますが、手動での設定も可能です。 スカラー webfont

wp:
  wexal_flush:
  - 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を行いません。

ノード
wexal_flush

パラメタ

マッピング

ノード 説明
element lazy loadを適用除外するタグを指定します。 スカラー picture/img/iframeのいずれかを指定します。
skip elementで指定した要素について、先頭から n 個に対してlazy loadを無効にします。 スカラー 数を指定します。デフォルトは、falseです(無効にしない)。
disable elementで指定した要素について、lazy loadを無効にします。 スカラー true/false。デフォルトは、falseです(つまり、有効)。

wp:
  wexal_flush:
  - cmd: lazy load
    args:
    - element: picture
      skip: 2
    - element: img
      skip: 3
    - element: iframe
      disable: true

reduce script

全く同じスクリプトが複数読み込まれている場合、1つのみを残し、残りを除去することで、スクリプトの読み込みを抑制します。

ノード
wexal_flush

パラメタ

マッピング

ノード 説明
apply_script 適用するスクリプトのパスを指定します。 スカラー パスを指定します。正規表現を使用することもできます。デフォルトは . です。
exclude_script 適用外にするスクリプトのパスを指定します。 スカラー パスを指定します。正規表現を使用することもできます。デフォルトは、falseです。

wp:
  wexal_flush:
  - cmd: reduce script
    args:
      apply_script: jquery

normalize newlines

Windowsの改行コードCR+LFと、Macの改行コードCRを、LFに変換します。

ノード
wexal_flush

パラメタ
なし

wp:
  wexal_flush:
  - cmd: normalize newlines

lazy video

videoタグが読み込まれている場合、preload属性にnoneを指定し、リソースの読み込みを遅らせます。

ノード
wexal_flush

パラメタ
なし

wp:
  wexal_flush:
  - cmd: lazy video

tidy

HTMLに必要なタグが欠損している場合、タグを補完します。
※tidyディレクティブはバックエンドがphp7/php-fpmの場合のみ有効です。hhvmの場合は無効になります。

ノード
body_filter

パラメタ
なし

wp:
  wexal_flush:
  - cmd: tidy

proxy

外部リソース(img, css, js)をローカルでプロキシすることで、外部リソースに対してもWEXALによる最適化を有効にできます。

ノード
wexal_flush

パラメタ

シーケンス

ノード 説明
proxy-host プロキシしたいホスト名を記述します。 スカラー ホスト名を指定します。
element elementで指定した要素について、プロキシします。 スカラー プロキシしたい外部リソース( img/css/js) を指定します。
limit elementで指定した要素について、先頭から n 個に対してプロキシします。-1を指定すると全てプロキシします。 スカラー 数値を設定します。デフォルトは-1です。

wp:
  wexal_flush:
  - 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

インラインcssをまとめて外部css化します。
その際にwebfontが含まれる場合は、split_css_webfontと同様に切り出して遅延します。
※リソースの有効期限(Cache-Control: max-age)が設定されています。デフォルトは2hです。

ノード
wexal_flush

パラメタ
なし

wp:
  wexal_flush:
  - cmd: split inline css webfont

repair jquery

jqueryスクリプトの指定を正規化します。

ノード
wexal_flush

パラメタ
なし

wp:
  wexal_flush:
  - cmd: repair jquery

secure target blank

rel 属性を持たない target="_blank" 指定の a タグに、rel="noopener noreferrer" を追加します。これにより、パフォーマンス改善と target="_blank" がもつ脆弱性への対策が行えます。

ノード
wexal_flush

パラメタ
なし

wp:
  wexal_flush:
  - cmd: secure target blank

link dns prefetch

linkタグのdns-prefetch属性やpreconnect属性を有効にすることで、外部リソースのDNSの名前解決を最適化します。

ノード
wexal_flush

パラメータ

シーケンス

ノード 説明
rel 属性を指定します。 スカラー dns-prefetchまたはpreconnectを指定します。
href 外部ドメイン名をURLで指定します。 スカラー 外部ドメイン名をURLで指定します。
pos 追加する位置を指定します。 スカラー 追加するインラインスクリプトを<head>に置くために<head>を指定します。

wp:
  wexal_flush:
  - cmd: link dns prefetch
    args:
    - rel: dns prefetch
      href: https://www.google.com/
      pos: <head>

link lcp preload

LCP(Largest Contentful Paint)の画像のpreloadを有効にすることで、ファーストビューの表示を最適化します。

ノード
wexal_flush

パラメータ

シーケンス

ノード 説明
rel preloadを指定します。 スカラー preloadを指定します。
element 要素名を指定します。 スカラー imgを指定します。
href リソースのURLを指定します。 スカラー リソースのURLを指定します。
srcset リソースのsrcsetを指定します。 スカラー リソースのsrcsetを指定します。省略可能です。
sizes リソースのsizesを指定します。 スカラー リソースのsizesを指定します。省略可能です。
as 要素の種類を指定します。 スカラー imageを指定します。
pos 追加する位置を指定します。 スカラー 追加するインラインスクリプトを<head>に置くために<head>を指定します。

wp:
  wexal_flush:
  - cmd: link lcp preload
    args:
    - rel: preload
      element: img
      href: https://www.wexal.jp/wp-content/uploads/2020/07/4a125c266368383c22b0e669d4b7894d.jpg
      as: image
      pos: <head>