wpディレクティブ（2.5.4）

書式

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

apply/excludeの値

例

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

パラメタ

型

シーケンス

値

例

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

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

パラメタ
なし

例

wp:
  wexal_head:
  - cmd: remove emoji

remove meta

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

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

パラメタ

型

シーケンス

値

例

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

remove header

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

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

パラメタ

型

シーケンス

値

例

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
パラメタ

型

シーケンス

値

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

パラメタ

型

シーケンス

値

例

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

パラメタ

型

シーケンス

値

例

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

パラメタ

型

シーケンス

値

例

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

パラメタ

型

シーケンス

値

例

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のテーマやプラグインなどは標準パスから書き換える必要はありません。
以下のパスを置換します。

ノード
wexal_flush

パラメタ
なし

例

wp:
  wexal_flush:
  - cmd: shorten url

defer external js

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

ノード
wexal_flush

パラメタ

型

マッピング

値

例

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

set cookie for cdn

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

ノード
wexal_flush

パラメタ

型

マッピング

値

例

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

パラメタ

型

シーケンス

値

例

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

パラメタ

型

シーケンス

値

例

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

パラメタ

型

マッピング

値

例

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

engagement delay

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

ノード
wexal_flush

パラメタ

型

マッピング

値

scriptsの値

例

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

パラメタ

型

マッピング

値

例

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

reduce script

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

ノード
wexal_flush

パラメタ

型

マッピング

値

例

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

パラメタ

型

シーケンス

値

例

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

パラメータ

型

シーケンス

値

例

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

パラメータ

型

シーケンス

値

例

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>