絵文字の無効化 #
WordPressがデフォルトで読み込む絵文字サポート用のJavaScriptやスタイルシートを無効化するオプションです。この設定を有効にすると、古いブラウザ向けの絵文字表示用スクリプトの読み込みが停止され、サイトのパフォーマンス向上に寄与します
埋め込みを無効にする #
設定を有効にすると、WordPressのデフォルト機能である oEmbed（外部サイトの埋め込み機能）が無効になります。（oEmbedは、WordPressが外部サイトのURLを貼るだけで、自動的にコンテンツを埋め込む機能です。たとえば、YouTubeやTwitter（X）のURLを投稿に貼ると、自動で動画プレーヤーやツイートが埋め込まれる仕組みです。）
- サイトのパフォーマンスを向上させたい → 有効化すべき
- ブログ記事や投稿でYouTube・Twitterの埋め込みをよく使う → 無効のままにするのが良い
Google Fontsを無効にする #
議論の余地がある設定。デザイン思想で設定は変わる。
notoがwin標準になったことも一考の余地あり。
- デザインを重視するなら → 無効（Google Fontsを使用）
- 速度やプライバシーを重視するなら → 有効（Google Fontsをブロック）
もしパフォーマンスやプライバシーを気にしつつフォントを使いたいなら、Google Fontsを無効にしてカスタムフォントをアップロードするのが最適解！
「Disable Google Fonts」を有効にしてもカスタムフォントを使う方法 #
Google Fontsを使わずにカスタムフォントを利用したい場合は、フォントファイルを手動でアップロードすればOK。
カスタムフォントの設定手順（Bricksの場合） #
- Bricksのカスタムフォント機能を使ってアップロードしたフォントを設定
- Google Fontsからフォントをダウンロード（Google Fonts）
- WordPressのメディアライブラリにフォントをアップロード
遅延読み込みの無効化 #
Lazy Loadingとは、ページを開いたときに すぐに表示される画像だけを読み込み、スクロールしたときに見える範囲の画像を後から読み込む仕組みです。
- 画像が多く、サイトの速度を最適化したい → 無効のまま（Lazy Loadを有効）
- ファーストビュー画像を即時表示したい → Lazy Loadを無効にせず、特定の画像だけ遅延読み込みをオフにする
- 画像が少なく、すべてすぐに表示したい → 有効にしてもOK
基本的には Lazy Loadingを無効にしないほうが、パフォーマンスやSEO的に有利 ですが、ファーストビューの画像だけ適切に制御するのがベストな方法です！
Lazy Loadingを無効にせず、ファーストビュー画像だけ即時読み込みする方法 #
WordPressやBricksでは、ファーストビューの画像（LCP画像）だけ 遅延読み込みしない設定 も可能です。
Bricksでは、画像ブロックの設定から 「Lazy Load: Off」 を選択すれば、その画像だけ即時表示できます。
jQuery migrateの無効化 #
jQuery Migrateは、古いバージョンのjQueryを使っているテーマやプラグインの互換性を保つためのスクリプト です。WordPressでは、jQueryがアップデートされると古いコードが動かなくなる可能性があるため、「jQuery Migrate」を使って古いコードとの互換性を維持しています。
- 新しいテーマやプラグインなら → 有効にしてもOK（パフォーマンス向上）
- 古いプラグインやテーマを使っているなら → 無効のままが安全
- 不安ならステージング環境でテストしてから適用するのがベスト！
不要なスクリプトを削減して速度を向上させたいなら有効にするのが良いですが、問題が起こる可能性があるので、事前にテストすることを強く推奨します！
何年から「新しいテーマ」と言える？
- 2021年以降にリリースされたテーマ → 基本的に「新しいテーマ」と考えてOK
- 2019～2020年のテーマ → 更新が頻繁なら「新しいテーマ」扱い
- 2018年以前のテーマ → 大幅アップデートがなければ「古いテーマ」扱い
ポイント: リリース時期だけでなく、「最近のアップデートがあるか」 を確認するのが大事！
クエリのループをキャッシュする #
✅ おすすめ設定：基本的には「有効」にする（デフォルト） #
→ パフォーマンス向上とサーバー負荷軽減のため、有効が推奨
❌ 無効にすべきケース #
- 頻繁に更新されるデータ（最新投稿・リアルタイム情報）を扱う場合
- ユーザーごとに異なる情報を表示する場合（会員サイト・ダッシュボードなど）
- キャッシュプラグインで既に最適化されている場合
⚡ 結論: #
ほとんどのサイトでは 「Cache Query Loops」を有効にした方がパフォーマンス向上につながる が、リアルタイムデータや個別情報を扱う場合は無効にするのがベスト。
サイトによる設定例 #
| サイトのタイプ | Cache Query Loops 設定 |
|---|---|
| ブログ（投稿リストあり） | 有効（定期的に更新されるが、リアルタイム性は不要） |
| ニュースサイト（最新記事が重要） | 無効（最新情報の即時反映が必要） |
| WooCommerce（商品一覧） | 有効（商品データの頻繁な更新がない場合） |
| 会員サイト（ユーザーごとに異なるデータ） | 無効（個別データがキャッシュされると問題） |
| 静的サイト（投稿リストをあまり変更しない） | 有効（パフォーマンス向上） |
クラスの連結を無効にする #
通常、Bricksでは複数のクラスを一つの要素に適用し、スタイルを効率的に管理できます。通常、Bricksは一つの要素にクラスを複数使うので「エレメントとグローバルクラスの連結を無効にする」は無効（デフォルト）でOK 。
特別な理由がなければ、無効のままのほうがクラスを効率よく使え、CSSの管理もしやすくなる。
CSS読み込み方法 #
Bricks Builder のデフォルトの CSS Loading Method が「Inline（インライン）」なのは、テーマの構造をシンプルにする意図があるかもしれません。ただし、ほとんどのケースでは「External File（外部ファイル）」の方がパフォーマンスに優れています。
「Inline（インライン）」のメリット・デメリット #
✅ メリット:
- 外部リクエスト（HTTPリクエスト）が減るため、非常に軽量なページではパフォーマンスが向上することがある
- ローカル環境や開発環境でのデバッグがしやすい
❌ デメリット:
- CSSがページごとに埋め込まれるため、キャッシュが効きにくくなる
- ページのHTMLサイズが増大し、大規模サイトでは遅くなる可能性がある
「External File（外部ファイル）」のメリット・デメリット #
✅ メリット:
- CSSがキャッシュされ、ページ間で再利用されるため、サイト全体の読み込みが速くなる
- HTMLファイルが軽量化される
❌ デメリット:
- 初回ロード時にCSSファイルのリクエストが発生する（ただし、CDNを利用すれば問題なし）
結論：どちらを選ぶべきか？ #
💡 基本的には「External File（外部ファイル）」を推奨
- 理由: キャッシュの活用により、ページの読み込み速度が向上するため
- 例外: 極端にシンプルなページ（1ページ完結のLPなど）では、「Inline（インライン）」も検討可能
最適な設定を決めるには、Google PageSpeed Insights やブラウザのデベロッパーツール（F12 → Network タブ）で実際の読み込み速度をテストするとよいでしょう。
Cascade layer #
@layer は、CSS の カスケードレイヤー（Cascade Layers） という新しい仕組みを使って、スタイルの優先順位を制御する ためのルールです。
💡 これまでの CSS の問題点 #
通常、CSS の優先順位（カスケード）は、
- 後から書かれたスタイルが優先される
- 詳細度（Specificity）が高いスタイルが優先される
!importantを使うと強制的に優先される
しかし、これでは 外部ライブラリの CSS やカスタム CSS の影響を受けやすく、管理が難しくなることがあります。
→ そこで @layer を使うと、スタイルの適用順を明確に指定できる ようになります！
Bricks Builder で @layer を使う意味 #
Bricks のデフォルトスタイルを @layer bricks-default にラップすることで、Bricks のCSSを他のカスタムスタイルよりも適切な優先順位で適用できる ようになります。
例えば、Bricks のボタンスタイルがあっても、カスタム CSS を @layer components に書けば簡単に上書きできます：
cssコピーする編集する@layer components {
.button {
background: red; /* Bricks のデフォルト青色ボタンを赤に変更 */
}
}👉 カスタムCSSをよく書く人、Tailwindを使う人 → 有効化がおすすめ！
👉 特にスタイルの競合に困ってない人 → そのままでOK！
🚀 迷ったら「有効」にしておいて、問題がなければそのままでOK！
