資産のクリーンアップ プロ
なに？ 資産のクリーンアップ プロ？
Asset Cleanup Pro は、最適化ツールボックスである WordPress プラグインです。ウェブサイトを最小レベルまで最適化できる機能が多数含まれています。 Hummingbird や Autoptimize など、より使いやすい同様のツールはありますが、いずれも Asset Cleanup Pro の機能を備えていません。
オプションはたくさんありますが、ここではそれについて説明します。実際のユーザー ガイドは提供しませんが、代わりに主な機能を示す優れたビデオ ガイドがあります。も読むことができます アセットクリーンアップのユーザードキュメント したがって、書き直す意味はありません。ただし、機能の概要と、Web サイトを高速化するために何をすべきかを書面で説明します。
重要なことは、ワンクリックでサイト全体の最適化を設定でき、ページごとにプログラムを最適化できることを知っておくことです。ここで本領を発揮します。特定のページで使用していないスクリプトをアンロードできるため、ページ全体の重量が軽減されます。
最適化するときは、 Chrome シークレット モード 変更するたびにキャッシュをクリアします。これにより、ブラウザに Web サイトの最新バージョンが表示されます。ログイン時にウェブサイトをチェックすることも忘れないでください 外 ワードプレスの。キャッシュは、完全にログアウトした場合にのみ有効になる場合があります。 Asset Cleanup Pro が何かをキャッシュしているのにそれが表示されない場合は、一部のコードが壊れていることに気づかない可能性があります。
コントロール 読み込み中
Asset Cleanup Pro は適切な最適化の鍵です
ウェブサイトのコントロールを取り戻す
なに？ 資産のクリーンアップ プロ？
Asset Cleanup Pro は、最適化ツールボックスである WordPress プラグインです。ウェブサイトを最小レベルまで最適化できる機能が多数含まれています。 Hummingbird や Autoptimize など、より使いやすい同様のツールはありますが、いずれも Asset Cleanup Pro の機能を備えていません。
オプションはたくさんありますが、ここではそれについて説明します。実際のユーザー ガイドは提供しませんが、代わりに主な機能を示す優れたビデオ ガイドがあります。も読むことができます アセットクリーンアップのユーザードキュメント したがって、書き直す意味はありません。ただし、機能の概要と、Web サイトを高速化するために何をすべきかを書面で説明します。
重要なことは、ワンクリックでサイト全体の最適化を設定でき、ページごとにプログラムを最適化できることを知っておくことです。ここで本領を発揮します。特定のページで使用していないスクリプトをアンロードできるため、ページ全体の重量が軽減されます。
最適化するときは、 Chrome シークレット モード 変更するたびにキャッシュをクリアします。これにより、ブラウザに Web サイトの最新バージョンが表示されます。ログイン時にウェブサイトをチェックすることも忘れないでください 外 ワードプレスの。キャッシュは、完全にログアウトした場合にのみ有効になる場合があります。 Asset Cleanup Pro が何かをキャッシュしているのにそれが表示されない場合は、一部のコードが壊れていることに気づかない可能性があります。
Asset Cleanup Pro は、最適化ツールボックスである WordPress プラグインです。ウェブサイトを最小レベルまで最適化できる機能が多数含まれています。
Hummingbird や Autoptimize など、より使いやすい同様のツールはありますが、どれも優れた機能を備えていません。 アセット クリーンアップ プロ もっている。
オプションはたくさんありますが、ここではそれについて説明します。実際のユーザー ガイドは提供しませんが、代わりに主な機能を示す優れたビデオ ガイドがあります。も読むことができます アセットクリーンアップのユーザードキュメント したがって、書き直す意味はありません。ただし、機能の概要と、Web サイトを高速化するために何をすべきかを書面で説明します。
重要なことは、ワンクリックでサイト全体の最適化を設定でき、ページごとにプログラムを最適化できることを知っておくことです。ここで本領を発揮します。特定のページで使用していないスクリプトをアンロードできるため、ページ全体の重量が軽減されます。
最適化するときは、 Chrome シークレット モード 変更するたびにキャッシュをクリアします。これにより、ブラウザに Web サイトの最新バージョンが表示されます。
ログイン時にウェブサイトをチェックすることも忘れないでください 外 ワードプレスの。キャッシュは、完全にログアウトした場合にのみ有効になる場合があります。 Asset Cleanup Pro が何かをキャッシュしているのにそれが表示されない場合は、一部のコードが壊れていることに気づかない可能性があります。
の特徴と利点 アセット クリーンアップ プロ
方法 最適化する あなたのウェブサイト
あなたのウェブサイトをもう一度見てみましょう
まず最初にやるべきことは、論理的に考察することです。残しておきたい、または省略したい特定の機能はありますか?ページ上で実行されている必要のないプラグインはありますか?
ください 例
お問い合わせフォームは一般的なものです。多くの人はフッターにそれらを配置したり、あちこちに点在させたりしています。これは本当に必要ですか?誰かがあなたに連絡すると、連絡先ページに移動します。フッターに問い合わせフォームを使用する人は非常にまれですが、なぜそこにあるのでしょうか?
お問い合わせフォームのスクリプトは非常に重く、通常は 50kb ～ 80kb で、CSS が満載です。フッター内の小さなフォームにより、ページが読み込まれるたびにページにこれらのスクリプトが強制的に読み込まれます。連絡先フォームを 1 つの論理ページに配置し、その 1 ページに連絡先スクリプトのみを読み込む方がよいのではないでしょうか?
最適化とはそういうものです。 Asset Cleanup Pro を使用すると、「お問い合わせ' ページを開き、その 1 ページを除いてサイト全体でお問い合わせフォーム スクリプトをアンロードします。お問い合わせフォームをより論理的に再配置することで、ページの重さが 50 ～ 80 kb 節約されました。
できますか これを行う すべてのスクリプトを使用しますか?
はい、かなりです。ブランド化にも非常に便利です。多くの場合、ページ速度は Web サイトの要素を少し減らすことを意味します。ただし、あなたのブランドは、Web サイトの外観や機能によって決まる場合があります。したがって、ブランディングを念頭に置いてウェブサイトの構造を考えてください。このページのような、より基本的なページを作成してから、私のブランドのように全体にブランドを配置したページを作成します。 ホームページ.
ランディング ページが最適化されていれば、本当に重要なのはそれだけです。ページ速度のためにブランドを決して犠牲にしないでください。ウェブサイトをどんどん削っていくと、見栄えが悪くなるだけです。 Google Insights で 90% を超えるのはデスクトップではかなり簡単ですが、モバイルでは話が異なります。データはシミュレートされた 4G ネットワーク速度に依存しているため、基準はさらに厳しくなります。それに執着しないでください。読み込みが速く、モバイルスコアが 70 台であれば、すべて問題ありません。ちなみに、この記事の執筆時点におけるモバイルでの世界平均スコアは 38% です。
CSS / JSの遅延とプリロード
コードの延期とは、プロセスの後半でコードをロードすることを意味します。プリロードまたは非同期とは、他のファイルと一緒にできるだけ早い機会にロードすることを意味します。非同期読み込みでは、ブラウザーは他のファイルと並行してファイルを処理し、レンダリングのブロックを回避します。延期すると、ロードプロセスが終了するまでまったくロードされません。
取得するため ある ページ速度スコアが高く、読み込み時間が速い場合は、すぐに必要でないスクリプトの読み込みを延期する必要があります。注目するのは「スクロールせずに見える範囲」 コンテンツ。つまり、最初にページをロードしたときに表示される内容です。フッターやページのさらに下の画像には何も読み込む必要はなく、上部のコンテンツのみを読み込むだけです。
表示されているものをロードする必要があるとは限らないため、ここが混乱を招く可能性があります。たとえば、別のファイルに依存する特定の JS ルーチンが存在する場合があります。これは、子 JS サブルーチンが機能するためには、「親」JS ファイルをロードする必要があることを意味します。 Google Insights レポートでよく出てくるのは、 JQUERY ファイル。これは、他の多くの JS ファイルが動作するために依存するフレームワーク ファイルです。アンロードしてみることもできますが、エラーが発生する可能性が高くなります。私のアドバイスは、これをロードしておいて、多くの頭痛の種を避けることです。ロード中でも高スコアを獲得できます。
プリロードにも同様の問題があります。ファイルが非レンダリング ブロックとして読み込まれるのは素晴らしいことですが、ここで重要なのは、ファイルが他のファイルと並行してダウンロードされるということです。これは特に JS ファイルに当てはまり、いくつかの問題が発生する可能性があります。これも依存関係が原因です。子スクリプトのダウンロードが開始される前に親 JS ファイルのダウンロードが完了していない場合、子スクリプトは機能できず、エラーが発生します。
CSS ファイルについても同じことが言えますが、コアエラーが発生するのではなく、レイアウトの問題が発生します。ほとんどのテーマにはコア「モジュール」ファイルがあり、Web サイトの構成要素である CSS コードのほとんどが含まれています。エラーを避けるために、このファイルはロードされたままにしておく必要があります。 レイアウト変更 問題があり、通常はかなり大きくなります。ここで重要な CSS とプリロードが必要になりますが、それについては後で説明します。 ラピッドロード ページ。
したがって、ビデオを見てからページごとに移動し、ボックスにチェックを入れて、各ページからファイルを延期するか事前にロードする必要があります。まったくロードする必要のないものである場合は、ボックスにチェックを入れてサイト全体でアンロードすると、すべてのページでアンロードされます。一度に 1 つまたは 2 つのコードのみを実行し、キャッシュをクリアして確認してください。やりすぎて壊れた場合、どれが Web サイトを壊したかを確認するのは、ちょっとした探偵作業になります。
最適化の基本
Asset Cleanup Pro を使用してロード順序を変更することは、Web サイトを最適化するための基本の 1 つです。ただし、これはページ速度プロセスの中で最も時間がかかる段階です。良いヒントは、テーマ ファイルに取り組む前にプラグインを操作することです。ページ上にどのようなプラグインが読み込まれているかが分かりやすく、そのファイルが必要かどうか判断しやすいためです。一部のテーマ関数はわかりにくい場合があり、テーマ ファイルが最も多くのエラーを引き起こすことがよくあります。 1 つの重要なページを除いて、Web サイト全体で何かをロードする必要はないかもしれません。また、アイコンがロードされていない、カルーセルが欠落しているなどを見落としがちです。
だから何 したほうがいい する？
前述したように、最適化には多くの段階があり、これが最初の段階です。幸いなことに、それは最も複雑でもあります。プラグインが必要な場所にのみロードされ、すべてが機能することに満足したら、新しいサイトのバックアップを作成します。次に、次のことを行います ページ速度 テストしてスコアを取得し、それをメモし、インサイト レポートで気になる別の段階にジャンプします。画像の最適化を試してみるか、 プラグインオーガナイザー モバイルに重いコンテンツをロードしている場合のトリック。
JS ファイルを延期するときに特に役立つもう 1 つの小さなヒントは、Chrome ウィンドウを右クリックして [検査] をクリックすることです。これにより、画面に読み込まれているすべてのコードを示すウィンドウが表示されます。次に、Web ページを更新します。 Chrome コード ウィンドウの上部近くに、十字の付いた小さな赤いアイコンが表示されたら、それをクリックします。これにより、ページ上のエラーが通知されます。エラーの内容を確認し、ページ上のファイル名と照合してください。最後に行ったことをリセットします (または、JQUERY の延期を試みた場合は停止します)。 Web ページを更新して、エラーが解消されたかどうかを確認します。それがなくなった場合は、その特定のファイルを延期すべきではないことがわかります。
一度にすべてをやろうとしないでください。アセット クリーンアップのユーザー インターフェイスに慣れたら、プラグインを実行してからテーマ自体を実行して、徐々に慣れてください。
コア機能のアンロード
ビデオの冒頭で、ホストが WordPress のコア機能を削除することについて話していることがわかります。これは他では見られない Asset Cleanup Pro の属性の 1 つであるため、これには特に注意してください。これにより、Web サイトの重量を大幅に削減できる未使用のコア コードを削除できます。
WordPress は非常に大きいので、WordPress が提供するすべてのものを必要とすることはほとんどありません。そのため、それを削減しましょう。 Asset Cleanup Pro を使用すると、プラグイン管理エリアに移動し、小さなトグル スイッチで機能をオフまたはオンにするだけなので、このプロセスが非常に簡単になります。コーディングは必要ありません。
何をするのか それぞれの特徴 する？
フォントの読み込みについては、次のステップに進みます。 OMGF ページ。サーバーへのフォントのダウンロードが完了したら、Asset Cleanup Pro を介して Google Fonts へのすべての発信呼び出しをブロックできます。 [詳細]をクリックしてボックスにチェックを入れるだけです。見た目がひどいデフォルトのシステムフォントしか読み込まれないので、まだ実行しないでください。
フォントに関する簡単なヒント
テーマのオプションでは、使用するフォントの種類をできるだけ少なくします。見出しなどに異なるフォントの太さを使用できますが、異なるタイプを使用しないでください。フォント スタイル ファイルは大きいため、ソリッド フォントを 1 つ選択すると、見た目に一貫性があるだけでなく、速度も大幅に向上します。
ほとんどの人は XML-RPC ピンバック サービスを無効にすることができます。これにより、Web サイトへの攻撃に対するいくつかの扉も閉ざされます。外部ブログ サービス、Jetpack を使用している場合、またはサイトにアプリが接続されている場合は、無効にすることはできません。ただし、これを持っていない場合は、無効にしてください。
コメントは一目瞭然です。使用しない場合は無効にしてください。その場合は、ロードしたままにしてください。 EMOJI と Dashicon についても同じことが言えます。 Elementor や WP-Bakery などのページビルダーを使用している場合は、Gutenberg も無効にしてください。これにより、不要なコードが大量に読み込まれます。ページビルダーがそれを処理します。
HTML ソース コードをクリーンアップすると、それらをほとんどすべて取り除くことができます。ページには手順が記載されているので、どの機能も使用していないことを確認するために読んでください。
使用している場合 Kinstaまたはその他のウェブホスト Cloudflare を使用すると、あなたは しないでください CDN サービスを有効にします。 CDN はすでにこれを処理しているため、有効にするとエラーが発生します。別の CDN を使用している場合は、ここに CDN アドレスを入力します。これにより、Asset Cleanup Pro がセットアップ内の正しい場所からファイルを提供できるようになります。
資産のクリーンアップ – ビデオを見る
おかげ WPLL コミュニティ ビデオ用
Asset Cleanup Pro を使いやすくなりましたか?
いつでも、Asset Cleanup Pro に戻って最適化することができます。セッション中に最適化をテストするのは良いことです。そうすれば、特定の作業がうまくいったら、作業を中止して、後で作業に戻ることができます。新しいプラグインを追加するたびに、ロードしたい方法でその特定のプラグインを最適化することができます。
アセット クリーンアップ プロ それ自体は慣れるまでにそれほど時間はかかりません。混乱を招く可能性があるのは、このすべての遅延/事前ロードのビジネスです。一歩間違えると機能が壊れる可能性があるため、行った変更を簡単に覚えられるように、常に小さな単位で実行してください。
進捗に満足したら、次の段階に進みます。
次に進む準備はできていますか?
ステップ 4: 画像の最適化
ページをスリム化しましょう!
方法 最適化する あなたのウェブサイト
あなたのウェブサイトをもう一度見てみましょう
まず最初にやるべきことは、論理的に考察することです。残しておきたい、または省略したい特定の機能はありますか?ページ上で実行されている必要のないプラグインはありますか?
ください 例
お問い合わせフォームは一般的なものです。多くの人はフッターにそれらを配置したり、あちこちに点在させたりしています。これは本当に必要ですか?誰かがあなたに連絡すると、連絡先ページに移動します。フッターに問い合わせフォームを使用する人は非常にまれですが、なぜそこにあるのでしょうか?
お問い合わせフォームのスクリプトは非常に重く、通常は 50kb ～ 80kb で、CSS が満載です。フッター内の小さなフォームにより、ページが読み込まれるたびにページにこれらのスクリプトが強制的に読み込まれます。連絡先フォームを 1 つの論理ページに配置し、その 1 ページに連絡先スクリプトのみを読み込む方がよいのではないでしょうか?
最適化とはそういうものです。 Asset Cleanup Pro を使用すると、「お問い合わせ」ページに移動して、その 1 ページを除いてサイト全体でお問い合わせフォーム スクリプトをアンロードできます。お問い合わせフォームをより論理的に再配置することで、ページの重さが 50 ～ 80 kb 節約されました。
できますか これを行う すべてのスクリプトを使用しますか?
はい、かなりです。ブランド化にも非常に便利です。多くの場合、ページ速度は Web サイトの要素を少し減らすことを意味します。ただし、あなたのブランドは、Web サイトの外観や機能によって決まる場合があります。したがって、ブランディングを念頭に置いてウェブサイトの構造を考えてください。このページのような、より基本的なページを作成してから、私のブランドのように全体にブランドを配置したページを作成します。 ホームページ.
ランディング ページが最適化されていれば、本当に重要なのはそれだけです。ページ速度のためにブランドを決して犠牲にしないでください。ウェブサイトをどんどん削っていくと、見栄えが悪くなるだけです。 Google Insights で 90% を超えるのはデスクトップではかなり簡単ですが、モバイルでは話が異なります。データはシミュレートされた 4G ネットワーク速度に依存しているため、基準はさらに厳しくなります。それに執着しないでください。読み込みが速く、モバイルスコアが 70 台であれば、すべて問題ありません。ちなみに、この記事の執筆時点におけるモバイルでの世界平均スコアは 38% です。
CSS / JSの遅延とプリロード
コードの延期とは、プロセスの後半でコードをロードすることを意味します。プリロードまたは非同期とは、他のファイルと一緒にできるだけ早い機会にロードすることを意味します。非同期読み込みでは、ブラウザーは他のファイルと並行してファイルを処理し、レンダリングのブロックを回避します。延期すると、ロードプロセスが終了するまでまったくロードされません。
を取得するには 優れたページ速度スコアと速い読み込み時間、すぐには必要ないスクリプトの読み込みを延期する必要があります。あなたが注目するのは「スクロールせずに見える範囲」のコンテンツです。つまり、最初にページをロードしたときに表示される内容です。フッターやページのさらに下の画像には何も読み込む必要はなく、上部のコンテンツのみを読み込むだけです。
表示されているものをロードする必要があるとは限らないため、ここが混乱を招く可能性があります。たとえば、別のファイルに依存する特定の JS ルーチンが存在する場合があります。これは、子 JS サブルーチンが機能するためには、「親」JS ファイルをロードする必要があることを意味します。 Google Insights レポートでよく出てくるのは、 JQUERY ファイル。これは、他の多くの JS ファイルが動作するために依存するフレームワーク ファイルです。アンロードしてみることもできますが、エラーが発生する可能性が高くなります。私のアドバイスは、これをロードしておいて、多くの頭痛の種を避けることです。ロード中でも高スコアを獲得できます。
プリロードにも同様の問題があります。ファイルが非レンダリング ブロックとして読み込まれるのは素晴らしいことですが、ここで重要なのは、ファイルが他のファイルと並行してダウンロードされるということです。これは特に JS ファイルに当てはまり、いくつかの問題が発生する可能性があります。これも依存関係が原因です。子スクリプトのダウンロードが開始される前に親 JS ファイルのダウンロードが完了していない場合、子スクリプトは機能できず、エラーが発生します。
CSS ファイルについても同じことが言えますが、コアエラーが発生するのではなく、レイアウトの問題が発生します。ほとんどのテーマにはコア「モジュール」ファイルがあり、Web サイトの構成要素である CSS コードのほとんどが含まれています。このファイルは、エラーやレイアウトのシフトの問題を避けるためにロードされたままにしておく必要があり、通常は非常に大きくなります。ここで重要な CSS とプリロードが必要になりますが、それについては後で説明します。 ラピッドロード ページ。
したがって、ビデオを見てからページごとに移動し、ボックスにチェックを入れて、各ページからファイルを延期するか事前にロードする必要があります。まったくロードする必要のないものである場合は、ボックスにチェックを入れてサイト全体でアンロードすると、すべてのページでアンロードされます。一度に 1 つまたは 2 つのコードのみを実行し、キャッシュをクリアして確認してください。やりすぎて壊れた場合、どれが Web サイトを壊したかを確認するのは、ちょっとした探偵作業になります。
最適化の基本
Asset Cleanup Pro を使用してロード順序を変更することは、Web サイトを最適化するための基本の 1 つです。ただし、これはページ速度プロセスの中で最も時間がかかる段階です。良いヒントは、テーマ ファイルに取り組む前にプラグインを操作することです。ページ上にどのようなプラグインが読み込まれているかが分かりやすく、そのファイルが必要かどうか判断しやすいためです。一部のテーマ関数はわかりにくい場合があり、テーマ ファイルが最も多くのエラーを引き起こすことがよくあります。 1 つの重要なページを除いて、Web サイト全体で何かをロードする必要はないかもしれません。また、アイコンがロードされていない、カルーセルが欠落しているなどを見落としがちです。
だから何 したほうがいい する？
前述したように、最適化には多くの段階があり、これが最初の段階です。幸いなことに、それは最も複雑でもあります。プラグインが必要な場所にのみロードされ、すべてが機能することに満足したら、新しいサイトのバックアップを作成します。次に、次のことを行います ページ速度テストでスコアを取得する、それをメモし、インサイト レポートで気になる別の段階にジャンプします。モバイルでコンテンツの読み込みが重い場合は、画像の最適化やプラグイン オーガナイザーのトリックを試してみてください。
JS ファイルを延期するときに特に役立つもう 1 つの小さなヒントは、Chrome ウィンドウを右クリックして [検査] をクリックすることです。これにより、画面に読み込まれているすべてのコードを示すウィンドウが表示されます。次に、Web ページを更新します。 Chrome コード ウィンドウの上部近くに、十字の付いた小さな赤いアイコンが表示されたら、それをクリックします。これにより、ページ上のエラーが通知されます。エラーの内容を確認し、ページ上のファイル名と照合してください。最後に行ったことをリセットします (または、JQUERY の延期を試みた場合は停止します)。 Web ページを更新して、エラーが解消されたかどうかを確認します。それがなくなった場合は、その特定のファイルを延期すべきではないことがわかります。
一度にすべてをやろうとしないでください。アセット クリーンアップのユーザー インターフェイスに慣れたら、プラグインを実行してからテーマ自体を実行して、徐々に慣れてください。
コア機能のアンロード
ビデオの冒頭で、ホストが WordPress のコア機能を削除することについて話していることがわかります。これは他では見られない Asset Cleanup Pro の属性の 1 つであるため、これには特に注意してください。これにより、Web サイトの重量を大幅に削減できる未使用のコア コードを削除できます。
WordPress は非常に大きいので、WordPress が提供するすべてのものを必要とすることはほとんどありません。そのため、それを削減しましょう。 Asset Cleanup Pro を使用すると、プラグイン管理エリアに移動し、小さなトグル スイッチで機能をオフまたはオンにするだけなので、このプロセスが非常に簡単になります。コーディングは必要ありません。
何をするのか それぞれの特徴 する？
フォントの読み込みについては、次のステップに進みます。 OMGF ページ。サーバーへのフォントのダウンロードが完了したら、Asset Cleanup Pro を介して Google Fonts へのすべての発信呼び出しをブロックできます。 [詳細]をクリックしてボックスにチェックを入れるだけです。見た目がひどいデフォルトのシステムフォントしか読み込まれないので、まだ実行しないでください。
フォントに関する簡単なヒント
テーマのオプションでは、使用するフォントの種類をできるだけ少なくします。見出しなどに異なるフォントの太さを使用できますが、異なるタイプを使用しないでください。フォント スタイル ファイルは大きいため、ソリッド フォントを 1 つ選択すると、見た目に一貫性があるだけでなく、速度も大幅に向上します。
ほとんどの人は XML-RPC ピンバック サービスを無効にすることができます。これにより、Web サイトへの攻撃に対するいくつかの扉も閉ざされます。外部ブログ サービス、Jetpack を使用している場合、またはサイトにアプリが接続されている場合は、無効にすることはできません。ただし、これを持っていない場合は、無効にしてください。
コメントは一目瞭然です。使用しない場合は無効にしてください。その場合は、ロードしたままにしてください。 EMOJI と Dashicon についても同じことが言えます。 Elementor や WP-Bakery などのページビルダーを使用している場合は、Gutenberg も無効にしてください。これにより、不要なコードが大量に読み込まれます。ページビルダーがそれを処理します。
HTML ソース コードをクリーンアップすると、それらをほとんどすべて取り除くことができます。ページには手順が記載されているので、どの機能も使用していないことを確認するために読んでください。
Kinstaまたは実際にCloudflareで他のウェブホストを使用している場合は、 しないでください CDN サービスを有効にします。 CDN はすでにこれを処理しているため、有効にするとエラーが発生します。別の CDN を使用している場合は、ここに CDN アドレスを入力します。これにより、Asset Cleanup Pro がセットアップ内の正しい場所からファイルを提供できるようになります。
資産のクリーンアップ – ビデオを見る
おかげ WPLL コミュニティ ビデオ用
Asset Cleanup Pro を使いやすくなりましたか?
いつでも、Asset Cleanup Pro に戻って最適化することができます。セッション中に最適化をテストするのは良いことです。そうすれば、特定の作業がうまくいったら、作業を中止して、後で作業に戻ることができます。新しいプラグインを追加するたびに、ロードしたい方法でその特定のプラグインを最適化することができます。
アセット クリーンアップ プロ それ自体は慣れるまでにそれほど時間はかかりません。混乱を招く可能性があるのは、このすべての遅延/事前ロードのビジネスです。一歩間違えると機能が壊れる可能性があるため、行った変更を簡単に覚えられるように、常に小さな単位で実行してください。
進捗に満足したら、次の段階に進みます。
次に進む準備はできていますか?
ステップ 4: 画像の最適化
ページをスリム化しましょう!
方法 最適化する あなたのウェブサイト
あなたのウェブサイトをもう一度見てみましょう
まず最初にやるべきことは、論理的に考察することです。残しておきたい、または省略したい特定の機能はありますか?ページ上で実行されている必要のないプラグインはありますか?
ください 例
お問い合わせフォームは一般的なものです。多くの人はフッターにそれらを配置したり、あちこちに点在させたりしています。これは本当に必要ですか?誰かがあなたに連絡すると、連絡先ページに移動します。フッターに問い合わせフォームを使用する人は非常にまれですが、なぜそこにあるのでしょうか?
お問い合わせフォームのスクリプトは非常に重く、通常は 50kb ～ 80kb で、CSS が満載です。フッター内の小さなフォームにより、ページが読み込まれるたびにページにこれらのスクリプトが強制的に読み込まれます。連絡先フォームを 1 つの論理ページに配置し、その 1 ページに連絡先スクリプトのみを読み込む方がよいのではないでしょうか?
最適化とはそういうものです。 Asset Cleanup Pro を使用すると、「お問い合わせ」ページに移動して、その 1 ページを除いてサイト全体でお問い合わせフォーム スクリプトをアンロードできます。お問い合わせフォームをより論理的に再配置することで、ページの重さが 50 ～ 80 kb 節約されました。
できますか これを行う すべてのスクリプトを使用しますか?
はい、かなりです。ブランド化にも非常に便利です。多くの場合、ページ速度は Web サイトの要素を少し減らすことを意味します。ただし、あなたのブランドは、Web サイトの外観や機能によって決まる場合があります。したがって、ブランディングを念頭に置いてウェブサイトの構造を考えてください。私のような、より基本的なページを作成する ホームページそして、私のようなブランドを全面に盛り込んだものを作成します。 私たちについて ページ。
ランディング ページが最適化されていれば、本当に重要なのはそれだけです。ページ速度のためにブランドを決して犠牲にしないでください。ウェブサイトをどんどん削っていくと、見栄えが悪くなるだけです。 Google Insights で 90% を超えるのはデスクトップではかなり簡単ですが、モバイルでは話が異なります。データはシミュレートされた 4G ネットワーク速度に依存しているため、基準はさらに厳しくなります。それに執着しないでください。読み込みが速く、モバイルスコアが 70 台であれば、すべて問題ありません。ちなみに、この記事の執筆時点におけるモバイルでの世界平均スコアは 38% です。
CSS / JSの遅延とプリロード
コードの延期とは、プロセスの後半でコードをロードすることを意味します。プリロードまたは非同期とは、他のファイルと一緒にできるだけ早い機会にロードすることを意味します。非同期読み込みでは、ブラウザーは他のファイルと並行してファイルを処理し、レンダリングのブロックを回避します。延期すると、ロードプロセスが終了するまでまったくロードされません。
良好なページ速度スコアと高速な読み込み時間を得るには、すぐには必要でないスクリプトの読み込みを延期する必要があります。あなたが注目するのは「スクロールせずに見える範囲」のコンテンツです。つまり、最初にページをロードしたときに表示される内容です。フッターやページのさらに下の画像には何も読み込む必要はなく、上部のコンテンツのみを読み込むだけです。
表示されているものをロードする必要があるとは限らないため、ここが混乱を招く可能性があります。たとえば、別のファイルに依存する特定の JS ルーチンが存在する場合があります。これは、子 JS サブルーチンが機能するためには、「親」JS ファイルをロードする必要があることを意味します。 Google Insights レポートでよく出てくるのは、 JQUERY ファイル。これは、他の多くの JS ファイルが動作するために依存するフレームワーク ファイルです。アンロードしてみることもできますが、エラーが発生する可能性が高くなります。私のアドバイスは、これをロードしておいて、多くの頭痛の種を避けることです。ロード中でも高スコアを獲得できます。
プリロードにも同様の問題があります。ファイルが非レンダリング ブロックとして読み込まれるのは素晴らしいことですが、ここで重要なのは、ファイルが他のファイルと並行してダウンロードされるということです。これは特に JS ファイルに当てはまり、いくつかの問題が発生する可能性があります。これも依存関係が原因です。子スクリプトのダウンロードが開始される前に親 JS ファイルのダウンロードが完了していない場合、子スクリプトは機能できず、エラーが発生します。
CSS ファイルについても同じことが言えますが、コアエラーが発生するのではなく、レイアウトの問題が発生します。ほとんどのテーマにはコア「モジュール」ファイルがあり、Web サイトの構成要素である CSS コードのほとんどが含まれています。このファイルは、エラーやレイアウトのシフトの問題を避けるためにロードされたままにしておく必要があり、通常は非常に大きくなります。ここで重要な CSS とプリロードが必要になりますが、それについては後で説明します。 ラピッドロード ページ。
したがって、ビデオを見てからページごとに移動し、ボックスにチェックを入れて、各ページからファイルを延期するか事前にロードする必要があります。まったくロードする必要のないものである場合は、ボックスにチェックを入れてサイト全体でアンロードすると、すべてのページでアンロードされます。一度に 1 つまたは 2 つのコードのみを実行し、キャッシュをクリアして確認してください。やりすぎて壊れた場合、どれが Web サイトを壊したかを確認するのは、ちょっとした探偵作業になります。
最適化の基本
Asset Cleanup Pro を使用してロード順序を変更することは、Web サイトを最適化するための基本の 1 つです。ただし、これはページ速度プロセスの中で最も時間がかかる段階です。良いヒントは、テーマ ファイルに取り組む前にプラグインを操作することです。ページ上にどのようなプラグインが読み込まれているかが分かりやすく、そのファイルが必要かどうか判断しやすいためです。一部のテーマ関数はわかりにくい場合があり、テーマ ファイルが最も多くのエラーを引き起こすことがよくあります。 1 つの重要なページを除いて、Web サイト全体で何かをロードする必要はないかもしれません。また、アイコンがロードされていない、カルーセルが欠落しているなどを見落としがちです。
だから何 したほうがいい する？
前述したように、最適化には多くの段階があり、これが最初の段階です。幸いなことに、それは最も複雑でもあります。プラグインが必要な場所にのみロードされ、すべてが機能することに満足したら、新しいサイトのバックアップを作成します。次に、ページ速度テストを実行してスコアを取得し、それをメモし、インサイト レポートで気になる別の段階にジャンプします。モバイルでコンテンツの読み込みが重い場合は、画像の最適化やプラグイン オーガナイザーのトリックを試してみてください。
JS ファイルを延期するときに特に役立つもう 1 つの小さなヒントは、Chrome ウィンドウを右クリックして [検査] をクリックすることです。これにより、画面に読み込まれているすべてのコードを示すウィンドウが表示されます。次に、Web ページを更新します。 Chrome コード ウィンドウの上部近くに、十字の付いた小さな赤いアイコンが表示されたら、それをクリックします。これにより、ページ上のエラーが通知されます。エラーの内容を確認し、ページ上のファイル名と照合してください。最後に行ったことをリセットします (または、JQUERY の延期を試みた場合は停止します)。 Web ページを更新して、エラーが解消されたかどうかを確認します。それがなくなった場合は、その特定のファイルを延期すべきではないことがわかります。
一度にすべてをやろうとしないでください。アセット クリーンアップのユーザー インターフェイスに慣れたら、プラグインを実行してからテーマ自体を実行して、徐々に慣れてください。
コア機能のアンロード
ビデオの冒頭で、ホストが WordPress のコア機能を削除することについて話していることがわかります。これは他では見られない Asset Cleanup Pro の属性の 1 つであるため、これには特に注意してください。これにより、Web サイトの重量を大幅に削減できる未使用のコア コードを削除できます。
WordPress は非常に大きいので、WordPress が提供するすべてのものを必要とすることはほとんどありません。そのため、それを削減しましょう。 Asset Cleanup Pro を使用すると、プラグイン管理エリアに移動し、小さなトグル スイッチで機能をオフまたはオンにするだけなので、このプロセスが非常に簡単になります。コーディングは必要ありません。
何をするのか それぞれの特徴 する？
フォントの読み込みについては、次のステップに進みます。 OMGF ページ。サーバーへのフォントのダウンロードが完了したら、Asset Cleanup Pro を介して Google Fonts へのすべての発信呼び出しをブロックできます。 [詳細]をクリックしてボックスにチェックを入れるだけです。見た目がひどいデフォルトのシステムフォントしか読み込まれないので、まだ実行しないでください。
フォントに関する簡単なヒント
テーマのオプションでは、使用するフォントの種類をできるだけ少なくします。見出しなどに異なるフォントの太さを使用できますが、異なるタイプを使用しないでください。フォント スタイル ファイルは大きいため、ソリッド フォントを 1 つ選択すると、見た目に一貫性があるだけでなく、速度も大幅に向上します。
ほとんどの人は XML-RPC ピンバック サービスを無効にすることができます。これにより、Web サイトへの攻撃に対するいくつかの扉も閉ざされます。外部ブログ サービス、Jetpack を使用している場合、またはサイトにアプリが接続されている場合は、無効にすることはできません。ただし、これを持っていない場合は、無効にしてください。
コメントは一目瞭然です。使用しない場合は無効にしてください。その場合は、ロードしたままにしてください。 EMOJI と Dashicon についても同じことが言えます。 Elementor や WP-Bakery などのページビルダーを使用している場合は、Gutenberg も無効にしてください。これにより、不要なコードが大量に読み込まれます。ページビルダーがそれを処理します。
HTML ソース コードをクリーンアップすると、それらをほとんどすべて取り除くことができます。ページには手順が記載されているので、どの機能も使用していないことを確認するために読んでください。
Kinstaまたは実際にCloudflareで他のウェブホストを使用している場合は、 しないでください CDN サービスを有効にします。 CDN はすでにこれを処理しているため、有効にするとエラーが発生します。別の CDN を使用している場合は、ここに CDN アドレスを入力します。これにより、Asset Cleanup Pro がセットアップ内の正しい場所からファイルを提供できるようになります。
資産のクリーンアップ – ビデオを見る
おかげ WPLL コミュニティ ビデオ用
Asset Cleanup Pro を使いやすくなりましたか?
いつでも、Asset Cleanup Pro に戻って最適化することができます。セッション中に最適化をテストするのは良いことです。そうすれば、特定の作業がうまくいったら、作業を中止して、後で作業に戻ることができます。新しいプラグインを追加するたびに、ロードしたい方法でその特定のプラグインを最適化することができます。
アセット クリーンアップ プロ それ自体は慣れるまでにそれほど時間はかかりません。混乱を招く可能性があるのは、このすべての遅延/事前ロードのビジネスです。一歩間違えると機能が壊れる可能性があるため、行った変更を簡単に覚えられるように、常に小さな単位で実行してください。
進捗に満足したら、次の段階に進みます。
次に進む準備はできていますか?
ステップ 4: 画像の最適化
ページをスリム化しましょう!
最適化する あなたのウェブサイト
あなたのウェブサイトをもう一度見てください
まず最初にやるべきことは、論理的に考察することです。残しておきたい、または省略したい特定の機能はありますか?ページ上で実行されている必要のないプラグインはありますか?
ください 例
お問い合わせフォームは一般的なものです。多くの人はフッターにそれらを配置したり、あちこちに点在させたりしています。これは本当に必要ですか?誰かがあなたに連絡すると、連絡先ページに移動します。フッターに問い合わせフォームを使用する人は非常にまれですが、なぜそこにあるのでしょうか?
お問い合わせフォームのスクリプトは非常に重く、通常は 50kb ～ 80kb で、CSS が満載です。フッター内の小さなフォームにより、ページが読み込まれるたびにページにこれらのスクリプトが強制的に読み込まれます。連絡先フォームを 1 つの論理ページに配置し、その 1 ページに連絡先スクリプトのみを読み込む方がよいのではないでしょうか?
最適化とはそういうものです。 Asset Cleanup Pro を使用すると、「お問い合わせ」ページに移動して、その 1 ページを除いてサイト全体でお問い合わせフォーム スクリプトをアンロードできます。お問い合わせフォームをより論理的に再配置することで、ページの重さが 50 ～ 80 kb 節約されました。
できますか これを行う すべてのスクリプトを使用しますか?
はい、かなりです。ブランド化にも非常に便利です。多くの場合、ページ速度は Web サイトの要素を少し減らすことを意味します。ただし、あなたのブランドは、Web サイトの外観や機能によって決まる場合があります。したがって、ブランディングを念頭に置いてウェブサイトの構造を考えてください。私のような、より基本的なページを作成する ホームページそして、私のようなブランドを全面に盛り込んだものを作成します。 私たちについて ページ。
ランディング ページが最適化されていれば、本当に重要なのはそれだけです。ページ速度のためにブランドを決して犠牲にしないでください。ウェブサイトをどんどん削っていくと、見栄えが悪くなるだけです。 Google Insights で 90% を超えるのはデスクトップではかなり簡単ですが、モバイルでは話が異なります。データはシミュレートされた 4G ネットワーク速度に依存しているため、基準はさらに厳しくなります。それに執着しないでください。読み込みが速く、モバイルスコアが 70 台であれば、すべて問題ありません。ちなみに、この記事の執筆時点におけるモバイルでの世界平均スコアは 38% です。
CSS / JSの遅延とプリロード
コードの延期とは、プロセスの後半でコードをロードすることを意味します。プリロードまたは非同期とは、他のファイルと一緒にできるだけ早い機会にロードすることを意味します。非同期読み込みでは、ブラウザーは他のファイルと並行してファイルを処理し、レンダリングのブロックを回避します。延期すると、ロードプロセスが終了するまでまったくロードされません。
良好なページ速度スコアと高速な読み込み時間を得るには、すぐには必要でないスクリプトの読み込みを延期する必要があります。あなたが注目するのは「スクロールせずに見える範囲」のコンテンツです。つまり、最初にページをロードしたときに表示される内容です。フッターやページのさらに下の画像には何も読み込む必要はなく、上部のコンテンツのみを読み込むだけです。
表示されているものをロードする必要があるとは限らないため、ここが混乱を招く可能性があります。たとえば、別のファイルに依存する特定の JS ルーチンが存在する場合があります。これは、子 JS サブルーチンが機能するためには、「親」JS ファイルをロードする必要があることを意味します。 Google Insights レポートでよく出てくるのは、 JQUERY ファイル。これは、他の多くの JS ファイルが動作するために依存するフレームワーク ファイルです。アンロードしてみることもできますが、エラーが発生する可能性が高くなります。私のアドバイスは、これをロードしておいて、多くの頭痛の種を避けることです。ロード中でも高スコアを獲得できます。
プリロードにも同様の問題があります。ファイルが非レンダリング ブロックとして読み込まれるのは素晴らしいことですが、ここで重要なのは、ファイルが他のファイルと並行してダウンロードされるということです。これは特に JS ファイルに当てはまり、いくつかの問題が発生する可能性があります。これも依存関係が原因です。子スクリプトのダウンロードが開始される前に親 JS ファイルのダウンロードが完了していない場合、子スクリプトは機能できず、エラーが発生します。
CSS ファイルについても同じことが言えますが、コアエラーが発生するのではなく、レイアウトの問題が発生します。ほとんどのテーマにはコア「モジュール」ファイルがあり、Web サイトの構成要素である CSS コードのほとんどが含まれています。このファイルは、エラーやレイアウトのシフトの問題を避けるためにロードされたままにしておく必要があり、通常は非常に大きくなります。ここで重要な CSS とプリロードが必要になりますが、それについては後で説明します。 ラピッドロード ページ。
したがって、ビデオを見てからページごとに移動し、ボックスにチェックを入れて、各ページからファイルを延期するか事前にロードする必要があります。まったくロードする必要のないものである場合は、ボックスにチェックを入れてサイト全体でアンロードすると、すべてのページでアンロードされます。一度に 1 つまたは 2 つのコードのみを実行し、キャッシュをクリアして確認してください。やりすぎて壊れた場合、どれが Web サイトを壊したかを確認するのは、ちょっとした探偵作業になります。
最適化の基本
Asset Cleanup Pro を使用してロード順序を変更することは、Web サイトを最適化するための基本の 1 つです。ただし、これはページ速度プロセスの中で最も時間がかかる段階です。良いヒントは、テーマ ファイルに取り組む前にプラグインを操作することです。ページ上にどのようなプラグインが読み込まれているかが分かりやすく、そのファイルが必要かどうか判断しやすいためです。一部のテーマ関数はわかりにくい場合があり、テーマ ファイルが最も多くのエラーを引き起こすことがよくあります。 1 つの重要なページを除いて、Web サイト全体で何かをロードする必要はないかもしれません。また、アイコンがロードされていない、カルーセルが欠落しているなどを見落としがちです。
だから何 したほうがいい する？
前述したように、最適化には多くの段階があり、これが最初の段階です。幸いなことに、それは最も複雑でもあります。プラグインが必要な場所にのみロードされ、すべてが機能することに満足したら、新しいサイトのバックアップを作成します。次に、ページ速度テストを実行してスコアを取得し、それをメモし、インサイト レポートで気になる別の段階にジャンプします。モバイルでコンテンツの読み込みが重い場合は、画像の最適化やプラグイン オーガナイザーのトリックを試してみてください。
JS ファイルを延期するときに特に役立つもう 1 つの小さなヒントは、Chrome ウィンドウを右クリックして [検査] をクリックすることです。これにより、画面に読み込まれているすべてのコードを示すウィンドウが表示されます。次に、Web ページを更新します。 Chrome コード ウィンドウの上部近くに、十字の付いた小さな赤いアイコンが表示されたら、それをクリックします。これにより、ページ上のエラーが通知されます。エラーの内容を確認し、ページ上のファイル名と照合してください。最後に行ったことをリセットします (または、JQUERY の延期を試みた場合は停止します)。 Web ページを更新して、エラーが解消されたかどうかを確認します。それがなくなった場合は、その特定のファイルを延期すべきではないことがわかります。
一度にすべてをやろうとしないでください。アセット クリーンアップのユーザー インターフェイスに慣れたら、プラグインを実行してからテーマ自体を実行して、徐々に慣れてください。
コア機能のアンロード
ビデオの冒頭で、ホストが WordPress のコア機能を削除することについて話していることがわかります。これは他では見られない Asset Cleanup Pro の属性の 1 つであるため、これには特に注意してください。これにより、Web サイトの重量を大幅に削減できる未使用のコア コードを削除できます。
WordPress は非常に大きいので、WordPress が提供するすべてのものを必要とすることはほとんどありません。そのため、それを削減しましょう。 Asset Cleanup Pro を使用すると、プラグイン管理エリアに移動し、小さなトグル スイッチで機能をオフまたはオンにするだけなので、このプロセスが非常に簡単になります。コーディングは必要ありません。
何をするのか それぞれの特徴 する？
フォントの読み込みについては、次のステップに進みます。 OMGF ページ。サーバーへのフォントのダウンロードが完了したら、Asset Cleanup Pro を介して Google Fonts へのすべての発信呼び出しをブロックできます。 [詳細]をクリックしてボックスにチェックを入れるだけです。見た目がひどいデフォルトのシステムフォントしか読み込まれないので、まだ実行しないでください。
フォントに関する簡単なヒント
テーマのオプションでは、使用するフォントの種類をできるだけ少なくします。見出しなどに異なるフォントの太さを使用できますが、異なるタイプを使用しないでください。フォント スタイル ファイルは大きいため、ソリッド フォントを 1 つ選択すると、見た目に一貫性があるだけでなく、速度も大幅に向上します。
ほとんどの人は XML-RPC ピンバック サービスを無効にすることができます。これにより、Web サイトへの攻撃に対するいくつかの扉も閉ざされます。外部ブログ サービス、Jetpack を使用している場合、またはサイトにアプリが接続されている場合は、無効にすることはできません。ただし、これを持っていない場合は、無効にしてください。
コメントは一目瞭然です。使用しない場合は無効にしてください。その場合は、ロードしたままにしてください。 EMOJI と Dashicon についても同じことが言えます。 Elementor や WP-Bakery などのページビルダーを使用している場合は、Gutenberg も無効にしてください。これにより、不要なコードが大量に読み込まれます。ページビルダーがそれを処理します。
HTML ソース コードをクリーンアップすると、それらをほとんどすべて取り除くことができます。ページには手順が記載されているので、どの機能も使用していないことを確認するために読んでください。
Kinstaまたは実際にCloudflareで他のウェブホストを使用している場合は、 しないでください CDN サービスを有効にします。 CDN はすでにこれを処理しているため、有効にするとエラーが発生します。別の CDN を使用している場合は、ここに CDN アドレスを入力します。これにより、Asset Cleanup Pro がセットアップ内の正しい場所からファイルを提供できるようになります。
資産のクリーンアップ – ビデオを見る
おかげ WPLL コミュニティ ビデオ用
アセット クリーンアップ プロが気に入っていますか?
いつでも、Asset Cleanup Pro に戻って最適化することができます。セッション中に最適化をテストするのは良いことです。そうすれば、特定の作業がうまくいったら、作業を中止して、後で作業に戻ることができます。新しいプラグインを追加するたびに、ロードしたい方法でその特定のプラグインを最適化することができます。
アセット クリーンアップ プロ それ自体は慣れるまでにそれほど時間はかかりません。混乱を招く可能性があるのは、このすべての遅延/事前ロードのビジネスです。一歩間違えると機能が壊れる可能性があるため、行った変更を簡単に覚えられるように、常に小さな単位で実行してください。
進捗に満足したら、次の段階に進みます。
次に進む準備はできていますか?
ステップ 4: 画像の最適化
ページをスリム化しましょう!