Render Faster

説明

このプラグインは WordPress テーマのページ描画を最適化します。

機能

• loading="lazy" または loading="eager" を画像に追加します。
• defer または async 属性をスクリプトに追加します。
• スタイルシートに rel="preload" を追加します。古いブラウザの後方互換も利用可能です。
• 埋め込み(twitter, instagram) のヘルパースクリプトを除去し、ユーザーの操作を待ってから読み込みます。

上記のすべては選択可能で、許可リストをカスタマイズすることができます。

ケース1. 画像の読み込み

もしヘッダーロゴ (.custom-logo) と投稿のサムネイル (.post-feature-image) がファーストビューにあるために先に読み込まれて欲しいとしましょう。

設定画面の優先度高セクションにcustom-logo,post-feature-imageを入力してください。

ケース2. deferを停止

JavaScriptの遅延読み込みはしばしばサイトを壊すことがあります。たとえば、スクリプトが読み込み直後になにか処理を行うような書き方をされていた場合、エラーになることがあります。

<script id="some-script-js" src="somescript.js" defer></script>
<script>
new SomeScript();
</script>

これを避けるためには、some-script のようなハンドル名を設定画面の拒否リストに追加してください。

一般的に、WordPressで読み込まれるJavaScriptは WordPress コア、プラグイン、テーマ、あなたの書いたカスタムコードなどから読み込まれます。

JavaScript の読み込みを最適化するには、トライアンドエラーでアプローチするのが良いでしょう。

ケース3. クリティカルCSS

rel="preload" attributes makes your stylesheets loaded asynchrounsely, but FOUC(Flush of Unstyled Content) happens.

これを避けるためにはクリティカル CSS を設定画面の拒否リストに追加してください。クリティカルCSSは一般的にテーマのメインスタイルシートです。