プラグイン 主催者
プラグイン オーガナイザーでページ速度が向上
プラグインオーガナイザー WordPress にとって非常に便利なプラグインです。プラグインに関しては、レスポンシブデザインが黎明期にあった2012年に書かれたものなので非常に古いです。ただし、このプラグインは時の試練に耐え、Elementor、DIVI、WP Bakery などのページ ビルダーで構築された Web サイトを支援する非常に優れたトリックの基礎を提供します。
プラグインが行うことは、ページへのプラグインの読み込みを停止することです。これが非常にうまく機能するのは、デバイスごとのプラグインの読み込みも停止できることです。モバイルの速度はデスクトップの速度よりもはるかに遅いため、これは非常に便利です。また、プラグインがモバイル デバイスの制限されたレイアウトには適合しないが、デスクトップ レイアウトには適合する場合にも役立ちます。
モバイル デバイスでの JS 負荷の高いプラグインの読み込みを制限すると、パフォーマンスに大きな違いが生じる可能性があります。 ページスピードスコア。しかし、このプラグインを特別なものにしているのは読み込みを制限するだけではありません。また、 HTML スニペット プラグイン。 2 つを一緒に使用すると、選択的に読み込むことができます コンテンツ デスクトップでは使用できますが、モバイルでは省略します。
これはコンテンツの電球の瞬間であり、ページビルダーでモバイルでビデオを非表示にしていると、Lighthouse によるビデオのレポートが停止されます。モバイルでビデオを非表示にしている場合は、モバイルのスコアを確認してください。動画はまだモバイル レポートで報告されていますか?その場合は、以下で修正方法を説明します。
隠蔽 それとも読み込み中?
モバイルデバイスの選択的読み込み
モバイルの読み込み速度を向上させる
プラグイン 主催者 ページ速度の向上
プラグインオーガナイザー WordPress にとって非常に便利なプラグインです。プラグインに関しては、レスポンシブデザインが黎明期にあった2012年に書かれたものなので非常に古いです。ただし、このプラグインは時の試練に耐え、Elementor、DIVI、WP Bakery などのページ ビルダーで構築された Web サイトを支援する非常に優れたトリックの基礎を提供します。
プラグインが行うことは、ページへのプラグインの読み込みを停止することです。これが非常にうまく機能するのは、デバイスごとのプラグインの読み込みも停止できることです。モバイルの速度はデスクトップの速度よりもはるかに遅いため、これは非常に便利です。また、プラグインがモバイル デバイスの制限されたレイアウトには適合しないが、デスクトップ レイアウトには適合する場合にも役立ちます。
モバイル デバイスでの JS 負荷の高いプラグインの読み込みを制限すると、ページ速度スコアに大きな違いが生じる可能性があります。しかし、このプラグインを特別なものにしているのは読み込みを制限するだけではありません。また、 HTML スニペット プラグイン。 2 つを一緒に使用すると、デスクトップではコンテンツを選択的にロードし、モバイルでは除外することができます。
これはコンテンツの電球の瞬間であり、ページビルダーでモバイルでビデオを非表示にしていると、Lighthouse によるビデオのレポートが停止されます。モバイルでビデオを非表示にしている場合は、モバイルのスコアを確認してください。動画はまだモバイル レポートで報告されていますか?その場合は、以下で修正方法を説明します。
プラグインオーガナイザー WordPress にとって非常に便利なプラグインです。プラグインに関しては、レスポンシブデザインが黎明期にあった2012年に書かれたものなので非常に古いです。
ただし、このプラグインは時の試練に耐え、Elementor、DIVI、WP Bakery などのページ ビルダーで構築された Web サイトを支援する非常に優れたトリックの基礎を提供します。
プラグインが行うことは、ページへのプラグインの読み込みを停止することです。これが非常にうまく機能するのは、デバイスごとのプラグインの読み込みも停止できることです。モバイルの速度はデスクトップの速度よりもはるかに遅いため、これは非常に便利です。また、プラグインがモバイル デバイスの制限されたレイアウトには適合しないが、デスクトップ レイアウトには適合する場合にも役立ちます。
モバイル デバイスでの JS 負荷の高いプラグインの読み込みを制限すると、ページ速度スコアに大きな違いが生じる可能性があります。しかし、このプラグインを特別なものにしているのは読み込みを制限するだけではありません。また、 HTML スニペット プラグイン。 2 つを一緒に使用すると、デスクトップではコンテンツを選択的にロードし、モバイルでは除外することができます。
これはコンテンツの電球の瞬間であり、ページビルダーでモバイルでビデオを非表示にしていると、Lighthouse によるビデオのレポートが停止されます。モバイルでビデオを非表示にしている場合は、モバイルのスコアを確認してください。動画はまだモバイル レポートで報告されていますか?その場合は、以下で修正方法を説明します。
選択的に プラグインをロードする
これは 方法 モバイルの読み込みを高速化
プラグイン オーガナイザーの使用
まず最初にやるべきことは、 プラグイン オーガナイザーをインストールする そしてそれをアクティブ化します。これを完了したら、プラグイン設定ページに移動します。 ワードプレス ダッシュボード
の 最も重要な もの
設定で「選択的読み込み」を確認してください そして 「選択的モバイル読み込み」がオンになっています。これにより、さまざまなデバイスにさまざまなプラグインをロードする制御が可能になります。次に、プラグイン設定の「グローバル設定」に移動すると、サイト全体でロード/アンロードするプラグインを確認できます。それぞれをクリックするだけで、緑が「オン」、赤が「オフ」になります。
ここで注意すべき点は、「プラットフォーム」と書かれているところです。これをクリックして、標準 (デスクトップ) またはモバイルに移動できます。 「モバイル」をクリックし、モバイルのみでの読み込みをオフにするようにプラグインを個別に設定します。
次に、各ページを個別に編集して一番下まで右にスクロールすると、多数の緑色のバーが表示されます。それがプラグインオーガナイザーです。ここでは、そのページでのみロード/アンロードするようにプラグインを設定できます。以前にグローバルでオフにしたものは赤色になります。ロードが許可されているものは緑色になります。緑色のバーをクリックするだけでそのページのオン/オフを切り替えます。モバイルでプラグインをオフにするには、プラットフォームを「モバイル」に変更することを忘れないでください。これは、視覚的な目的のみでそのページにロードしたいいくつかの大きなプラグインがある可能性があるブランディング/ランディング ページに最適です。
慣れるのは非常に簡単で、どのプラグインを、どこに、どのデバイスにロードするかを完全に制御できます。
HTML スニペットとの結合
ページ ビルダーは、ページを簡単にデザインできるため、優れています。ほとんどの Web サイトは、Elementor、DIVI、または WP Bakery を使用して構築されています。ただし、それらすべてに問題があり、これによりモバイルの読み込みが大幅に遅くなります。これは、ページのコンテンツと、それをモバイルに読み込むことに関係しています。デザイナーがビデオを作成したり、デスクトップ デバイスのみを対象とした大きな画像を作成したりする場合があります。すべてのページビルダーには、これを非表示にするオプションがあります。だからあなたはそれを隠します。これにより、モバイルでも表示されなくなります。モバイル ページにはビデオがないため、これによりモバイル ページの重量が軽減されるはずです。右？
間違っている！
ページビルダーはコンテンツを単に「非表示」にするだけです。非表示とロードはまったく異なるものです。デスクトップにビデオを読み込んでいて、モバイルでは非表示に設定している場合は、ページ速度テストを行ってください。モバイル ページのレポートでは、ページ上のどこかにビデオが表示されますか?もしそうなら、まだ読み込み中なので、モバイルでのページ速度と全体的な読み込み時間に非常に悪影響を及ぼします。
ここで HTML スニペットが登場します。非表示にしても読み込みは停止されません。ただし、HTML スニペットでプラグイン オーガナイザーを使用すると、これが可能になります。
どうすればいいですか これを行う?
Plugin Organizer がインストールされている場合は、インストールしてください HTML スニペット。次に、HTML スニペット プラグイン設定に移動し、[新しいスニペットを追加] をクリックします。ここから、ビデオの HTML コード、またはモバイルにロードしたくないその他のコンテンツを入力します。多くのページビルダーには、ビデオを挿入するだけのビデオ モジュールがあるため、プラグインなしで生の HTML でビデオを表示したい場合は、以下のコードのバリエーションを使用します。
Youtubeビデオプレーヤー
<iframe width=”100%” height=”auto” src=”ユーチューブのURL”frameborder=”0″allowfullscreen>
自己ホスト型ビデオプレーヤー
URL をビデオの独自の URL に忘れずに変更してください。サイズ寸法「100%」および「auto」を使用すると、ビデオ コンテナが Web サイトに応答できるようになります。ビデオに必要な特定のサイズがある場合は、その値を必要なサイズに置き換えるだけです。
スニペットを保存します。保存したら、既存のビデオを取り出すだけです 外 ページ自体の、そして 交換する HTML スニペットが新しいビデオ用に提供したショートコードを使用します。さあ、ロードしてください。すべてがうまくいけば、ビデオがデスクトップに表示されます。 そして 携帯。
最後のステップは、コンテンツがあるページで、コンテンツがあるページの一番下までスクロールし、プラグイン オーガナイザーを無効にすることです。 モバイルで。もう一度携帯電話を確認してください。ビデオはそこにあるべきではありません。次に、キャッシュをクリアして、もう一度ページ速度テストを実行します。ビデオがデスクトップには読み込まれていますが、モバイル レポートには表示されなくなっていることを確認してください。ページがはるかに軽くなり、完全に読み込まれる時間が短縮されました。
さらに前進
HTML スニペットには、姉妹プラグインと呼ばれるプラグインもあります。 PHP スニペット。このプラグインは HTML スニペットとまったく同じように機能するため、これをインストールして、コンテンツをデスクトップにロードせずにモバイルのみに表示するようにすることもできます。
上記で説明したのとまったく同じ手順に従うだけです。ただし、今回はデスクトップでコンテンツを無効にし、「標準」の読み込みでコンテンツを無効にし、「モバイル」で有効にするだけです。両方と プラグインがインストールされている 設計とパフォーマンスに完全な柔軟性が得られます。ページビルダーがすべてをロードして非表示にすることなく、特定のモバイルおよびデスクトップコンテンツを含めることができます。
他にどこで役に立ちますか?
私は通常、モバイル コンテンツでのみ使用し、モバイル スコアを向上させるために大量のコンテンツの読み込みを制限します。
どうですか スクリプト?
質問してよかったです！これは、Plugin Organizer が本当に役立つもう 1 つの機能です。 Slider Revolution のような多くのプラグインにはモバイル機能を無効にする機能がありますが、実際にすべてを無効にするわけではなく、不要なスクリプトが読み込まれることになります。 Slider Revolution はスライダー自体をロードしません。ただし、WordPress は引き続きスクリプト自体を読み込みます。これは、モバイル デバイスでこれらのスクリプトを完全に無効にして、読み込み時間を大幅に節約し、ページ速度を向上させる唯一の簡単な方法です。
スピードアップ 携帯
プラグインの使用法
まず最初にやるべきことは、 プラグイン オーガナイザーをインストールする そしてそれをアクティブ化します。これを完了したら、WordPress ダッシュボードのプラグイン設定ページに移動します。
の 最も重要な もの
設定で「選択的読み込み」を確認してください そして 「選択的モバイル読み込み」がオンになっています。これにより、さまざまなデバイスにさまざまなプラグインをロードする制御が可能になります。次に、プラグイン設定の「グローバル設定」に移動すると、サイト全体でロード/アンロードするプラグインを確認できます。それぞれをクリックするだけで、緑が「オン」、赤が「オフ」になります。
ここで注意すべき点は、「プラットフォーム」と書かれているところです。これをクリックして、標準 (デスクトップ) またはモバイルに移動できます。 「モバイル」をクリックし、モバイルのみでの読み込みをオフにするようにプラグインを個別に設定します。
次に、各ページを個別に編集して一番下まで右にスクロールすると、多数の緑色のバーが表示されます。それがプラグインオーガナイザーです。ここでは、そのページでのみロード/アンロードするようにプラグインを設定できます。以前にグローバルでオフにしたものは赤色になります。ロードが許可されているものは緑色になります。緑色のバーをクリックするだけでそのページのオン/オフを切り替えます。モバイルでプラグインをオフにするには、プラットフォームを「モバイル」に変更することを忘れないでください。これは、視覚的な目的のみでそのページにロードしたいいくつかの大きなプラグインがある可能性があるブランディング/ランディング ページに最適です。
慣れるのは非常に簡単で、どのプラグインを、どこに、どのデバイスにロードするかを完全に制御できます。
HTML スニペット
ページ ビルダーは、ページを簡単にデザインできるため、優れています。ほとんどの Web サイトは、Elementor、DIVI、または WP Bakery を使用して構築されています。ただし、それらすべてに問題があり、これによりモバイルの読み込みが大幅に遅くなります。これは、ページのコンテンツと、それをモバイルに読み込むことに関係しています。デザイナーがビデオを作成したり、デスクトップ デバイスのみを対象とした大きな画像を作成したりする場合があります。すべてのページビルダーには、これを非表示にするオプションがあります。だからあなたはそれを隠します。これにより、モバイルでも表示されなくなります。モバイル ページにはビデオがないため、これによりモバイル ページの重量が軽減されるはずです。右？
間違っている！
ページビルダーはコンテンツを単に「非表示」にするだけです。非表示とロードはまったく異なるものです。デスクトップにビデオを読み込んでいて、モバイルでは非表示に設定している場合は、ページ速度テストを行ってください。モバイル ページのレポートでは、ページ上のどこかにビデオが表示されますか?もしそうなら、まだ読み込み中なので、モバイルでのページ速度と全体的な読み込み時間に非常に悪影響を及ぼします。
ここで HTML スニペットが登場します。非表示にしても読み込みは停止されません。ただし、HTML スニペットでプラグイン オーガナイザーを使用すると、これが可能になります。
どうすればいいですか これを行う?
Plugin Organizer がインストールされている場合は、インストールしてください HTML スニペット。次に、HTML スニペット プラグイン設定に移動し、[新しいスニペットを追加] をクリックします。ここから、ビデオの HTML コード、またはモバイルにロードしたくないその他のコンテンツを入力します。多くのページビルダーには、ビデオを挿入するだけのビデオ モジュールがあるため、プラグインなしで生の HTML でビデオを表示したい場合は、以下のコードのバリエーションを使用します。
Youtubeビデオプレーヤー
<iframe width=”100%” height=”auto” src=”ユーチューブのURL”frameborder=”0″allowfullscreen>
自己ホスト型ビデオプレーヤー
URL をビデオの独自の URL に忘れずに変更してください。サイズ寸法「100%」および「auto」を使用すると、ビデオ コンテナが Web サイトに応答できるようになります。ビデオに必要な特定のサイズがある場合は、その値を必要なサイズに置き換えるだけです。
スニペットを保存します。保存したら、既存のビデオを取り出すだけです 外 ページ自体の、そして 交換する HTML スニペットが新しいビデオ用に提供したショートコードを使用します。さあ、ロードしてください。すべてがうまくいけば、ビデオがデスクトップに表示されます。 そして 携帯。
最後のステップは、コンテンツがあるページで、コンテンツがあるページの一番下までスクロールし、プラグイン オーガナイザーを無効にすることです。 モバイルで。もう一度携帯電話を確認してください。ビデオはそこにあるべきではありません。次に、キャッシュをクリアして、もう一度ページ速度テストを実行します。ビデオがデスクトップには読み込まれていますが、モバイル レポートには表示されなくなっていることを確認してください。ページがはるかに軽くなり、完全に読み込まれる時間が短縮されました。
もっと遠く行く
HTML スニペットには、姉妹プラグインと呼ばれるプラグインもあります。 PHP スニペット。このプラグインは HTML スニペットとまったく同じように機能するため、これをインストールして、コンテンツをデスクトップにロードせずにモバイルのみに表示するようにすることもできます。
上記で説明したのとまったく同じ手順に従うだけです。ただし、今回はデスクトップでコンテンツを無効にし、「標準」の読み込みでコンテンツを無効にし、「モバイル」で有効にするだけです。両方のプラグインをインストールすると、完全な設計とパフォーマンスの柔軟性が得られます。ページビルダーがすべてをロードして非表示にすることなく、特定のモバイルおよびデスクトップコンテンツを含めることができます。
他に何か？
私は通常、モバイル コンテンツでのみ使用し、モバイル スコアを向上させるために大量のコンテンツの読み込みを制限します。
どうですか スクリプト?
質問してよかったです！これは、Plugin Organizer が本当に役立つもう 1 つの機能です。 Slider Revolution のような多くのプラグインにはモバイル機能を無効にする機能がありますが、実際にすべてを無効にするわけではなく、不要なスクリプトが読み込まれることになります。 Slider Revolution はスライダー自体をロードしません。ただし、WordPress は引き続きスクリプト自体を読み込みます。これは、モバイル デバイスでこれらのスクリプトを完全に無効にして、読み込み時間を大幅に節約し、ページ速度を向上させる唯一の簡単な方法です。
プラグイン オーガナイザー – 完成しました!
ステップ 7: フォントの読み込み
フォントの問題も解決！