WordPressウェブサイトのパフォーマンスを最適化する方法

WordPressのパフォーマンス最適化に関しては、次のような方法がある。

テーマをインストールし、コンテンツを入力する

WordPressの新規インストールでテーマを設定する際、通常はダミーのコンテンツをインポートします。このコンテンツは、サイトを素早く立ち上げ、どのように構築され設定されているかを理解するためのものです。このコンテンツには、すぐに削除する可能性のある多くの画像、ページ、投稿、商品が含まれているため、パフォーマンスの最適化はされていません。したがって、このステップではサイトのパフォーマンスを測定する必要はありません。

テーマをインストールした後、ウェブサイトの各セクションを閲覧し、実際の画像、商品、投稿、ページを入力する必要があります。これにより、すべての古いデータが削除され、将来の訪問者のためのサイトが準備されます。この段階では、ウェブサイトのスピードとパフォーマンスを確保するために、以下の推奨事項に重点を置く必要があります：

1. SSL証明書の確認 ウェブサイトに有効なSSL証明書があることを確認してください。これは、ウェブサイトのパフォーマンスとセキュリティにとって非常に重要です。まだの場合は、ホスティングプロバイダーにお問い合わせください。
2. 最適化された画像 アップロードする前に、すべての画像を最適化し、適切な画像サイズを使用してください。詳細はステップ3を参照してください。
3. バーチャル・コンテンツの画像を置き換える バーチャルコンテンツ内の画像は、必ずご自身の画像に置き換えてください。バーチャル・イメージの一部は当社のサーバーから読み込まれ、サイトの速度を低下させる可能性があります。
4. ページ内容の簡素化 スライダー、アニメーション、回転、商品などを多用した複雑なページの作成は避けましょう。ページ要素が増えるたびに複雑さが増し、DOMサイズも大きくなり、パフォーマンスの問題につながります。ページをシンプルに保ち、不要な要素を減らしましょう。

サーバーの応答時間のチェックと最適化

ウェブホスティングサーバーが高速で信頼できることを確認することは、ウェブサイトのパフォーマンスに不可欠です。プラグインがインストールされていない新規インストールでは、サーバーの応答時間は次の間である必要があります。 0.5～1.2秒ここだけの話サーバーの応答時間を測定し、最適化する方法をいくつかご紹介します：

1. テストページの選択 サーバーの応答時間はページによって異なる場合があります。通常、ショッピングカートのページでテストします。このページには追加の要素がなく、キャッシュプラグイン（有効になっている場合）が影響しないからです。
2. WebPageTestを使ったテスト インタビュー ウェブページテストをクリックし、サーバーの応答時間テストを実行します。サーバーのレスポンスタイムが"滝「図中の最初のリクエスト。

3. サーバー設定の確認と最適化 リソースのロード時間を短縮するために、サーバーでGZIP圧縮が有効になっていることを確認してください。これは ギフト・オブ・スピード プローブ GZIP圧縮正しく動作しているかどうか。有効になっていない場合は、ホスティングプロバイダにお問い合わせください。

テーマのパフォーマンス設定

私たちのテーマのデフォルト設定は、ほとんどの機能をサポートするために非常に最適化されています。しかし、不要な機能がある場合は、パフォーマンスを向上させるためにそれらを無効にすることができます。以下は、インストール後すぐに設定できるオプションです：

1. Gutenbergスタイルの無効化 ElementorやWPBakeryページビルダーを主に使用している場合は、GutenbergのCSSとJSファイルをすべて無効にすることができます：
   • に移動する：テーマ設定 -> パフォーマンス -> カスケーディングスタイルシート
   • 選択する：Gutenbergスタイルの無効化
2. フォント表示の設定 パフォーマンスを向上させるために、Googleフォントとアイコンの フォント表示 に設定します。 スワップ::
   • に移動する：テーマ設定 -> パフォーマンス -> フォントとアイコン
   • セッティングフォント表示 によって スワップ
   • 詳細は以下を参照のこと。 グーグルドキュメント
3. 遅延ロードの有効化 ページに大量の画像がある場合は、遅延読み込みを有効にしてページサイズを小さくすることができます：
   • に移動する：テーマ設定 -> パフォーマンス -> ロード遅延
   • イネーブル遅延ローディング(このオプションは常にオンになっているわけではありませんが、画像が多い場合に便利です）
4. WPBakeryページビルダーの最適化 WPBakeryページビルダーを使用している場合、使用していないウィジェットを無効にすることでCSSサイズを小さくすることができます：
   • に移動する：ダッシュボード -> WoodMart -> ツール -> WPBakery CSSジェネレータ
   • 無効化：不要なウィジェット
5. スクロール時の回転の初期化 初期画面にないすべての回転要素については、「スクロール時に回転を初期化する」オプションを有効にすることを推奨する：
   • これにより、JSの初期実行時間が短縮され、ページの読み込み速度が向上する。

6. AJAXメニューのドロップダウンを有効にする
   • トレール::外装状態 -> メニュー
   • リグHTMLブロックを持つすべてのドロップダウンメニューでAJAXメニューオプションを有効にすると、最初のページロード時のDOMサイズが小さくなり、パフォーマンスが向上します。

これらのオプションを設定することで、ページサイズを10-40%小さくすることが可能です。オプションの有効・無効を切り替えた後は、問題がないことを確認するため、必ずすべてを再確認してください。

画像の最適化ステップ

大きく、最適化されておらず、不適切なサイズの画像は、ページの読み込みが遅くなる主な原因の1つです。通常、画像はページの総重量の50-80%を占めています。画像を最適化し、その数を減らすことで、ページの読み込み速度とコアウェブメトリクスのスコアを大幅に改善することができます。以下に、具体的な最適化の手順を示します：

1. 画像サイズのコントロール
   • 推奨サイズすべての画像は、100～200KBの間に収める必要があります。商品画像と投稿画像の平均サイズは50～150KBです。ヒーローセクションとスライダー用の大きな画像は150～200KBでも構いませんが、それを超えないようにしてください。

2. オンラインツールで画像を最適化
   • 推奨ツール写真をアップロードする前に タイニーPNG などのオンラインツールを使って圧縮することができます。画像をウェブサイトにアップロードし、最適化された画像をダウンロードするだけです。
3. 画像自動最適化プラグインをインストールする
   • 推奨プラグイン手動で画像を最適化したくない場合は、以下のような自動最適化プラグインをインストールしてください。 イマジファイ.このプラグインは、画像を圧縮するだけでなく、より小さなWEBP形式に変換し、さらに画像の重量20-40%を削減します。

4. 画像サイズの設定
   • ショップページの商品画像を通して インストルメントパネル -> 外装状態 -> カスタマイズ -> WooCommerce -> 製品写真 画像サイズを設定する。
   • ブログ記事画像を通して インストルメントパネル -> セットアップ -> メディア 画像サイズを設定する。
   • ページ固有要素: WPBakeryやElementorなどのページビルダーを使用してページを編集する際に、バナー、インフォボックス、ギャラリーなどの要素の画像サイズを設定します。

主な提言

• アップロード前にすべての画像を最適化するアップロードする前に、画像がツールで圧縮され、リサイズされていることを確認してください。
• WEBPフォーマットを有効にするImagifyプラグインで画像をWEBP形式に変換することで、さらに画像サイズを小さくすることができます。
• グラフィック要素の多用は避けるページ上の画像の数を最小限にし、過度なスライダー、アニメーション、回転を避ける。

WP Rocket Cacheプラグインをインストールする

キャッシュプラグインは、サーバーの応答時間を大幅に短縮し、ページをほぼ瞬時に読み込むことができるため、WordPressウェブサイトにとって非常に重要です。私たちは、プレミアムで使いやすいキャッシュとパフォーマンス最適化プラグイン、WP Rocketをお勧めします。WP Rocketは有料のプラグインですが、その効果は目を見張るものがあります。予算に余裕がある場合は、Autoptimize、W3 Total Cache、WP Super Cacheのような無料の代替プラグインを試してみてください。

WP Rocketプラグインの設定

WP Rocketプラグインを有効にした後、最適なパフォーマンスを確保するために、以下の手順に従って設定してください：

1. ファイルの最適化
   • CSSの最小化このオプションを有効にすると、CSSファイルが圧縮され、サイズが小さくなります。Googleのページ速度スコアは向上しますが、Optimise CSS deliveryとRemove unused CSSオプションは、ページ読み込み時にスタイルのちらつきを引き起こす可能性があるため、通常はこれらのオプションを有効にしません。
   • JSの最小化と遅延ロードJSのファイルサイズを小さくするには、JavaScriptの最小化オプションを有効にします。JSの実行を遅らせることは、初期ロード時間を短縮するための良いオプションです。しかし、スクリプトによっては、ユーザが操作を開始する前にロードが遅延する場合があるため、重要な JS ファイルは例外リストに追加する必要があります。このリストは、WoodMart バージョン 7.0 で自動的に設定されます。

2. キャッシュ設定
   • モバイルデバイス用にキャッシュファイルを分離モバイルDOM最適化オプションを使用している場合は、この機能を有効にして、モバイルデバイス用に別のキャッシュファイルを作成することをお勧めします。
   • URLをキャッシュしない: 詳細ルールで、ウィッシュリストや比較ページなど、キャッシュされるべきでないページURLを追加します。マイアカウント、カート、チェックアウトなどのデフォルトのWooCommerceページはすでにキャッシュから除外されています。

さらなる最適化のための提言

• CDNの利用コンテンツ・デリバリー・ネットワーク（CDN）を設定することで、世界中の訪問者のロードスピードを劇的に改善することができます。ロード時間が大幅に短縮されます。

サンプル構成

以下は、高速なロード時間と高いGoogle Page Speedスコアを達成するのに役立った設定のサンプルです：

• WP Rocket -> 設定 -> ファイルの最適化CSSとJSの最小化を有効にし、JSファイルの読み込みを遅らせます。
• WP Rocket -> 設定 -> キャッシュモバイルデバイス用にキャッシュファイルを分離。
• WP Rocket -> 設定 -> 詳細ルールウィッシュリストと比較ページの URL を Never Cache リストに追加します。

Googleページスピード警告を修正する方法

グーグルページスピードレポートは、ウェブサイトごとに異なる要因に基づいて特定の警告を表示します。私たちのプロジェクトで最も一般的な警告とその修正方法をご紹介します。

1.レンダリングブロックリソースの排除

これは、WordPressウェブサイトで最も一般的な警告の1つです。ページのヘッダーにあるリソースが多いほど、レンダリングブロックが長くなります。一般的に、これらのリソースにはCSSファイル、JSファイル、フォント（Google Fontsなど）が含まれます。レンダリングブロック時間を短縮するための手順をいくつかご紹介します：

• Gutenbergスタイルの無効化Gutenbergエディターを使用していない場合は、スタイルを無効にして不要なCSSファイルを減らすことができます（上記のステップ2を参照）。
• Googleフォントの重複を避けるGoogleフォントが1つのソースからのみ読み込まれるようにしてください。例えば、GoogleフォントがテーマとElementorを通して読み込まれている場合、Elementorのサイト設定でフォント設定をリセットすることができます。

• 不要なGoogleフォントを無効にするGoogleフォントが不要な場合は、テーマ設定で無効にするか、サーバーからダウンロードして読み込むことができます。
• 不要なCSSファイルを減らす例えば、Font AwesomeアイコンのCSSファイルは、ページ上で不必要に読み込まれる可能性があります。アイコンライブラリ全体を使用するのではなく、単一のSVGアイコンを使用するようにしてください。

2.使わないJavaScriptを減らす

この警告に注意し、読み込まれたすべてのJSファイル、特にサードパーティプラグインのスクリプトファイルをチェックしてください。例

• 使用していないプラグインをアンインストールするSlider Revolutionプラグインを使用していない場合は、単純にアンインストールしてください。特定のページでのみ使用されている場合は、グローバルローディング機能を無効にすることができます。
• より軽い代替品の使用例えば、重いスライダー・プラグインの代わりに、WoodMart付属の軽量スライダーを使う。

3.サーバーの初期応答時間の短縮

サーバーの初期応答時間が長すぎると、ウェブサイトのパフォーマンスに影響を与える可能性があります。これは以下の手順で最適化できます：

• キャッシュ・プラグインの使用WP Rocketのようなキャッシュプラグインをインストールすることで、サーバーの応答時間を大幅に短縮することができます。
• トラブルシューティングレスポンスタイムが 2秒。問題の根本的な原因は、以下のテストによって特定することができる：
  • すべての外部プラグインを無効にして応答時間を測定し、問題の原因となっているプラグインを見つけるために1つずつ有効にしてください。
  • デフォルトのWordPressテーマでテストし、WoodMartテーマのレスポンスタイムと比較してください。デフォルトのテーマの方がレスポンスタイムが大幅に短い場合は、テーマの問題かもしれません。
  • すべてのプラグインを無効にし、デフォルトのテーマを使用した後でもレスポンスタイムが長すぎる場合は、以下のリンクを参照することをお勧めします。しんたくとうちサーバーの設定やパフォーマンスに問題がある可能性があります。

概要

この記事では、WordPressウェブサイトのパフォーマンスを最適化する方法について詳しく説明します。 これらの最適化ステップにより、ウェブサイトの読み込み速度とユーザー体験を大幅に改善することができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み