DiviでPerfmattersプラグインを設定するには?

  

4
トピックスターター

こんにちは!

を使っている。 パーフマターズ WPプラグイン(LOVE IT!) DiviテーマDiviにはいくつかのパフォーマンスオプションが組み込まれています(Divi >> Theme Options >> Performance)。

これらのDiviの設定がPerfmattersの機能と衝突する可能性はないだろうか?

Diviのオプションは以下の通り:

  • 動的モジュールフレームワーク
  • ダイナミックCSS
  • ダイナミック・アイコン
  • ダイナミック・スタイルシートをインラインで読み込む
  • クリティカルCSS
  • 限界しきい値の高さ
  • ダイナミックJavaScriptライブラリ
  • WordPress絵文字を無効にする
  • GutenbergブロックのCSSを延期する
  • Googleフォントの読み込みを改善
  • jQueryとjQuery Migrateを延期する

これらのオプションをどのように設定すれば、コンフリクトを起こさずに最適なパフォーマンスを確保できますか?

ありがとう!

2件の回答
3

こんにちは!

まずはこの記事を読んでほしい: https://onlinemediamasters.com/perfmatters-settings/

では、これを読んでください: https://www.elegantthemes.com/blog/divi-resources/divi-speed-optimization

テストし、比較し、最後にこのYouTubeビデオ(2時間以上)を見る:

...そして最後に-この記事も興味深い-再びDiviのパフォーマンスについて: https://onlinemediamasters.com/divi-slow-loading-website/

幸運を祈る!

乾杯、ミク

 

2

PerfmattersをDiviと併用することで、パフォーマンスを大幅に向上させることができる。

ただし、コンフリクトを避けるために慎重に設定する必要がある機能もある。

以下は私の考え+セッティングだ:

1.動的モジュールフレームワーク

  • 何をするのか? ページで使用されているDiviモジュールのみを読み込み、肥大化を抑える。
  • 対立の可能性 ありません。Perfmattersには同様の機能はありません。
  • 推薦する: Diviでこの機能を有効にすると、作業効率が向上します。

2.ダイナミックCSS

  • 何をするのか? ページに必要なCSSだけを動的に生成して読み込みます。
  • 対立の可能性 ありません。PerfmattersはDivi固有のCSS読み込みを妨げません。
  • 推薦する: DiviでダイナミックCSSを有効にする。

3.ダイナミックアイコン

  • 何をするのか? ページで使用されているアイコンフォントのみを読み込みます。
  • 対立の可能性 ありません。Perfmattersはアイコンフォントの動作を管理しません。
  • 推薦する: Diviでこの機能を有効にすると、アイコンのフォントロードを最小限に抑えることができます。

4.ダイナミック・スタイルシートをインラインで読み込む

  • 何をするのか? 外部スタイルシートを使用する代わりに、動的スタイルをインラインで読み込みます。
  • 対立の可能性 ありません。Perfmattersはインラインスタイルを直接扱いません。
  • 推薦する: このオプションをテストしてください。小さなCSSの場合はパフォーマンスを向上させることができますが、インラインスタイルが広範囲に及ぶ場合はパフォーマンスが低下する可能性があります。

5.クリティカルCSS

  • 何をするのか? フォールドより上のコンテンツに重要なCSSを生成し、ロードします。
  • 対立の可能性 ありません。PerfmattersはクリティカルなCSSを生成しません。
  • 推薦する: Diviで有効にするとレンダリングが速くなります。

6.限界しきい値の高さ

  • 何をするのか? 重要なCSS生成のためのビューポートの高さを設定する。
  • 対立の可能性 いない。
  • 推薦する: レイアウトに応じてこの設定を調整してください。Perfmattersとは重複しません。

7.ダイナミックJavaScriptライブラリ

  • 何をするのか? 必要なJavaScriptライブラリのみをロードします。
  • 対立の可能性 Perfmatters の Script Manager は、同じライブラリを手動で無効にすると競合する可能性があります。
  • 推薦する: Diviでは有効にするが、Perfmattersでは必要な場合を除き、手動でのスクリプト制御は避ける。

8.WordPress絵文字を無効にする(OSやブラウザでは読み込まれます)

  • 何をするのか? WordPressが絵文字関連のスクリプトやスタイルを読み込まないようにする。
  • 対立の可能性 Perfmattersも同じオプションを提供している。
  • 推薦する: このオプションはDiviまたはPerfmattersのどちらかで使用します。

9.GutenbergブロックのCSSを延期する

  • 何をするのか? Gutenberg ブロック CSS の読み込みを延期する。
  • 対立の可能性 PerfmattersはGutenberg CSSを延期することもできる。
  • 推薦する: このオプションはDiviまたはPerfmattersのどちらかで使用します。

10.Googleフォントの読み込みを改善

  • 何をするのか? リクエストを結合または延期することで、Google Fontsのロード方法を最適化します。
  • 対立の可能性 Perfmattersも同様のGoogle Fonts最適化を提供している。
  • 推薦する: DiviまたはPerfmattersのいずれかで使用します。両方試してみて、どちらがより効果的か確認してください。

11.jQueryとjQuery Migrateを延期する

  • 何をするのか? jQueryとそのmigrateスクリプトのロードを延期する。
  • 対立の可能性 Perfmattersも同様の機能を提供している。
  • 推薦する: DiviまたはPerfmattersのどちらかで使用します。jQueryを延期すると、プラグインやカスタムスクリプトとの互換性に問題が生じる可能性があるため、慎重にテストしてください。

一般的な推奨事項

  • オーバーラップ機能はDiviかPerfmattersのどちらかで使用する。
  • テスト、テスト、テスト: などのツールを使用する。 グーグル・ページスピード・インサイト または GTメトリックス パフォーマンスを監視する。
  • そして最も重要なこと!Perfmattersのスクリプト・マネージャーを使ってください: Diviにはない、スクリプトやスタイルの正確なコントロールが可能だ!

乾杯 madb 🙂 🙂 .

共有: