Smush、Hummingbird、The Hub を使用して WordPress サイトのパフォーマンスを最適化する

複数の WordPress サイトを管理している場合、個々のサイトにログインしてパフォーマンス設定を調整するのは面倒で時間がかかる場合があります。 Hub の [パフォーマンス] タブを使用すると、単一のタブから Hummingbird と Smush を使用してサイトのパフォーマンスを迅速に最適化および管理できます。

Hub は、1 か所から 1 つ以上の WordPress サイトを管理できる完全な WordPress 管理コンソールです。

Hub のダッシュボードはいくつかのタブに分かれており、サイト管理者は WordPress サイトを効果的に管理するために必要なすべての主要機能に素早くアクセスできます。

このチュートリアルでは、Hummingbird (速度最適化およびキャッシュ プラグイン) と Smush (受賞歴のある画像圧縮および最適化プラグイン) からの便利な「一目でわかる」データ、設定、情報を組み合わせた Hub の [パフォーマンス] タブに焦点を当てます。これにより、管理するすべての WordPress サイトのパフォーマンス設定を迅速かつ簡単に表示および調整できます。

このチュートリアルでは、ハブの [パフォーマンス] タブを最大限に活用する方法を説明します。 次の方法について説明します。

• Hub から WordPress サイトのパフォーマンスを設定および管理する
• ページ速度テストを実行する
• 速度テスト結果の分析
• サーバーの応答時間を監視する
• サイトの画像を管理および最適化する
• サイトの資産を管理および最適化する
• GZip 圧縮を管理する
• サイトのキャッシュを管理する
• 高度なツールの構成
• レポートの実行

Hub から WordPress サイトのパフォーマンスを設定および管理する

The Hub からサイトを管理するには、まずサイトに接続する必要があります。 これは、ハブ自体から自動的に行うことも、WPMU DEV ダッシュボード プラグインを使用してリモートで行うこともできます。

サイトに接続すると、ハブの管理コンソールから直接サイトを管理し、ログインできるようになります。

Hummingbird プラグインや Smush プラグインをサイトにインストールしてアクティブ化するまで、ハブの [パフォーマンス] タブはグレー表示 (非アクティブ) のままになります。

灰色の [パフォーマンス] タブをクリックすると、サイトで Hummingbird をアクティブにするよう促すスプラッシュ画面が表示されます。

[概要] > [推奨サービス]セクションからパフォーマンス モジュールをアクティブ化することもできます。

ハミングバードのモジュールをアクティブにすると、[パフォーマンス] タブ内のさまざまなパネルに重要な情報が自動的に表示されます。

応答時間などの一部のモジュールは、アクティブになるまで非アクティブのままです。 「パフォーマンス」タブ自体内でモジュールと Smush プラグインをアクティブ化できます。

または、The Hub の [プラグインとテーマ] タブから Smush などのプラグインを有効にすることもできます。

Hummingbird と Smush をアクティブ化すると、[パフォーマンス] タブに両方のプラグインの情報パネルが組み合わされて表示されます。

ハブの概要セクションからは、[パフォーマンス] タブに簡単にアクセスできます。 パネルをクリックすると、タブが表示されます。

The Hub で [パフォーマンス] タブをアクティブにする方法がわかったので、そのメイン パネルを見てみましょう。

ページ速度テストを実行する

[パフォーマンス] タブを使用すると、The Hub でサイトの Google Page Speed テストを実行できます。 複数の WordPress サイトを管理している場合、この機能はリアルタイムの節約になります。

[パフォーマンス]パネルで、[テストの実行]ボタンをクリックし、数秒待ちます。 これにより、サイトのデスクトップとモバイルの速度のテストが実行されます。

[パフォーマンス] パネルでサイトのデスクトップとモバイルの速度テストを実行します。

このパネルから、Hummingbird のドキュメントにアクセスし、その他のオプションを表示することもできます。

完了したページ速度テストの結果は、速度テスト パネルに表示されます。これについては、以下の次のセクションで説明します。

速度テスト結果の分析

速度テストパネルには 3 つのサブタブが含まれています。

• スコア指標– 色分けされたスコア (緑、黄、赤) と速度結果を含む、サイトの主要な速度テスト指標の「一目でわかる」スナップショットを取得します。
• 監査– 詳細なテスト結果を表示し、サイトのパフォーマンスを向上できる機会と領域を特定し、修正が必要な問題について項目別の推奨事項を取得します。
• 過去のフィールド データ– このセクションは確立されたサイトを対象としており、さまざまなデバイスやネットワーク条件における現実世界のユーザーからの匿名化されたパフォーマンス データに基づいて、特定の URL が時間の経過とともにどのようにパフォーマンスを行ったかに関する情報をまとめています。

このパネルでアクティブな項目をクリックすると、サイトの wp-admin に自動的に移動し、推奨される修正や改善を含む特定のセクションに直接移動します。

「速度テスト」パネルで、修正を含むパフォーマンス向上の推奨事項を確認してください。

スピード テストの指標について詳しくは、こちらをご覧ください。

サーバーの応答時間を監視する

[応答時間]パネルは、[パフォーマンス] タブで頻繁に参照するメイン パネルの 1 つです。

稼働時間監視機能からのデータが表示されます。 ここからサーバーの応答時間を監視し、サイトが稼働しているか、ダウンしているか、または動作が遅いかをすぐに知ることができます。

無料の電子ブック

収益性の高い Web 開発ビジネスへの段階的なロードマップ。 より多くのクライアントを獲得することから、狂ったようにスケールすることまで。

ダウンロード

この電子ブックをダウンロードすることにより、WPMU DEV から時折電子メールを受信することに同意します。
当社はあなたの電子メールを 100% プライベートに保ち、スパムを送信しません。

無料の電子ブック

次の WP サイトを滞りなく計画、構築、立ち上げます。 私たちのチェックリストにより、プロセスが簡単かつ再現可能になります。

ダウンロード

この電子ブックをダウンロードすることにより、WPMU DEV から時折電子メールを受信することに同意します。
当社はあなたの電子メールを 100% プライベートに保ち、スパムを送信しません。

さらに詳細な測定値を表示するには、平均応答時間の線のデータ ポイントまたはセクションの上にカーソルを置き、モジュールの見出しをクリックするか、 [詳細の表示]をクリックします。

「応答時間」パネルの詳細については、こちらをご覧ください。

サイトの画像を管理および最適化する

画像最適化パネルでは、Smush がサイトの画像をどのように圧縮および最適化しているかを確認できます。 また、サイトのすべての画像の一括最適化、遅延読み込みの有効化/無効化、 CDNの管理、プラグインの追加ツール設定へのアクセスなどのタスクを実行することもできます。

このパネルを表示するには、Smush がサイトにインストールされ、アクティブ化されている必要があります。

画像最適化モジュールについて詳しくは、こちらをご覧ください。

サイトの資産を管理および最適化する

アセット最適化パネルでは、Hummingbird からサイトの最適化されたアセットの概要を簡単に確認できます。

これには、 [設定]セクションで達成されたファイル サイズの合計削減量、現在最適化されているファイルの合計数、最適化されたアセットがDEV CDNから提供されているかどうか、および最適化されたファイルの種類が含まれます。

サイトの wp-admin の対応するハミングバード画面に直接移動するには、モジュールタイトル、 [合計削減]セクションの[詳細を表示]リンク、または [設定]セクションの歯車アイコンをクリックします。

資産の最適化設定について詳しくは、こちらをご覧ください。

GZip 圧縮を管理する

Gzip は、Web ページとスタイルシートを訪問者の Web ブラウザに送信する前に圧縮します。

このパネルでは、サイト上で現在どのコンテンツ タイプが Gzip で最適化されているか、またサイトがどのようなサーバー タイプで実行されているかをすぐに確認できます。

Hummingbird で別のサーバー タイプを設定するには、 [サーバー タイプ]セクションの歯車アイコンをクリックします。

Gzip オプションの構成について詳しくは、こちらをご覧ください。

サイトのキャッシュを管理する

キャッシュにより、訪問者のデバイスに一時データが保存されるため、ページの読み込み時間が短縮され、アセットを再読み込みする必要がなくなります。

Hummingbird では、サイト上でさまざまなタイプのキャッシュを構成できます。また、[キャッシュ] パネルでは、プラグインを使用してサイト上でどのキャッシュ オプションが構成されているかを確認できます。

これには、 [設定]セクションでファイルの種類ごとに設定されたブラウザー キャッシュの有効期限、ページ キャッシュ、Gravatar キャッシュ、RSS キャッシュ、および Hummingbird 経由でサイトで有効になっているその他の種類のキャッシュが含まれます。

[設定]セクションのパネル タイトルまたは歯車アイコンをクリックすると、サイトの wp-admin のハミングバード キャッシュ設定画面に直接移動できます。

[キャッシュのクリア]リンクをクリックして、ハブからサイト上のさまざまなキャッシュをクリアすることもできます。

これにより、さまざまなオプションを含むモーダル ウィンドウが表示されます。 クリアするキャッシュを選択し、ボタンをクリックします。

「キャッシュ」パネルの詳細については、こちらをご覧ください。

高度なツールの構成

Hummingbird の「高度なツール」セクションの使用方法について詳しく学習してください。

レポートの実行

レポートパネルを使用すると、サイトのパフォーマンスのステータスと応答時間のレポートをすばやく表示できます。

このパネルの項目をクリックすると、サイトの wp-admin の対応するレポート画面に直接移動し、そこでその機能のスケジュールを有効にしたり構成したりできます。

ハブからサイトのパフォーマンスを監視します

WPMU DEV の主な目標の 1 つは、ユーザーが WordPress サイト管理に迅速かつ簡単にアクセスできるように、The Hub の開発と改善を継続することです。

「パフォーマンス」タブも例外ではありません。 さまざまなサイトのパフォーマンスを一元的な場所から簡単かつ迅速に管理および監視できるため、時間を大幅に節約できるだけでなく、複数の WordPress サイトを管理している Web 開発者または代理店の場合は、ビジネスを拡大し、より多くの顧客にサービスを提供します。

[パフォーマンス] タブに固有の上記の機能に加えて、ハブはさまざまな言語に翻訳できるため、サイトのパフォーマンスを自分の言語で管理できることに注意してください (お使いの言語が現在利用できない場合は、お知らせください)心配しないでください - すぐにそうなります!)

ハブを使用すると、サイトのパフォーマンスを自分の言語で表示できます。

さらに、間もなく、The Hub を完全にホワイトラベル化し、請求書、独自のテンプレート、および選択したホストを備えたクライアントで The Hub を使用できるようになります。

最後に、Hummingbird プラグインと Smush プラグインで利用できる幅広い最適化機能を考慮すると、間もなく、好みの設定を保存して、好きなだけ新規および既存のサイトに一括適用できるようになります。

「パフォーマンス」タブの使用方法の詳細については、ドキュメントを参照してください。 また、The Hub とすべてのプラグインに関して私たちが取り組んでいるすべてのエキサイティングな開発を監視するには、ロードマップにアクセスしてください。

最後になりましたが、[パフォーマンス] タブの使用についてご質問がある場合、または WordPress 関連でサポートが必要な場合は、お気軽に 24 時間年中無休の専用サポート チームにお問い合わせください。 私たちは、お客様が管理するすべての WordPress サイトから可能な限り最高のパフォーマンスを引き出すお手伝いをしたいと考えています。 The Hub の [パフォーマンス] タブを使用すると、それが可能になります。

[編集者注: この投稿は元々 2020 年 10 月に公開され、正確性を期すために 2023 年 12 月に更新されました。

サイトの Hummingbird と Smush の設定を管理するために、The Hub のパフォーマンス タブを使用していますか? 以下のコメント欄であなたの考えや提案を共有してください。