HivePressで構築されたディレクトリまたはマーケットプレイスのWebサイトを高速化する方法

今日、ウェブサイトの読み込み速度と全体的なパフォーマンスは、優れたユーザーエクスペリエンスと検索エンジンのランキングにとって非常に重要です。 最近Googleは、ウェブサイトがランキングシグナルブーストの対象となるかどうかを判断するために、視覚的安定性スコアやページ読み込み時間などのコアウェブバイタルの測定を開始すると発表しました。 また、読み込み時間が長いページでは、バウンス率が高くなり、ページの平均滞在時間が短くなる傾向があります。

このチュートリアルでは、キャッシュを設定し、スタイルとスクリプトを最適化し、メディアコンテンツを最適化することにより、Webサイトのパフォーマンスを急上昇させる方法について説明します。 LiteSpeed Cacheプラグインを使用します。これは、ウェブサイトを高速化するための多数のツールと機能を備えたオールインワンのウェブサイトアクセラレータソリューションです。

テストの目的で、HivePressといくつかの拡張機能で構築されたWordPressディレクトリWebサイトを、デフォルトのListingHiveテーマとともに使用します。 ただし、WebサイトがHivePressプラグインで構築されていない場合は、他のWordPressを利用したWebサイトでも同じ手順を実行できます。

それでは、LiteSpeedキャッシュのインストールから始めましょう。

LiteSpeedキャッシュのインストール

まず、LiteSpeedCacheプラグインをインストールする必要があります。 [プラグイン]>[新規追加]セクションに移動すると、WordPressダッシュボードから直接簡単に実行できます。 検索バーから検索し、インストールして続行します。 インストールが完了したら、「アクティブ化」ボタンをクリックしてプラグインを有効にします。

インストールしてアクティブ化したら、Webサイトの最適化を開始できます。 まず、基本的なキャッシュ設定を見ていきましょう。

キャッシュの最適化

基本的なキャッシュ設定を調整するには、 [LiteSpeedキャッシュ]>[キャッシュ]ページに移動します。 このページにはさまざまなセクションがありますが、ここでは最も重要な設定についてのみ説明します。

キャッシュ設定

ここでは、ログインしているユーザーとRESTAPIリクエストのキャッシュを無効にすることを強くお勧めします。 これは、HivePressプラグインが正しく機能するために必要です。 オプションを有効または無効にした後は、変更を保存することを忘れないでください。

オブジェクトキャッシュ

次に、オブジェクトキャッシュを有効にします。 [オブジェクト]セクションに移動して、サイトでオブジェクトキャッシュが使用可能かどうかを確認します。 接続テストは「合格」と表示されます。 その場合、オブジェクトキャッシュを有効にできます。これにより、重複するデータベースクエリをキャッシュすることで、Webサイトのパフォーマンスが大幅に向上します。

WebサイトがOpenLiteSpeedサーバーに基づいているか、ホスティングプロバイダーがオブジェクトキャッシュをサポートしている場合は、接続テストに問題なく合格するはずです。

ブラウザキャッシュ

最後に、[ブラウザキャッシュ]セクションに移動して、有効になっていることを確認します。 これにより、スタイル、スクリプト、画像などのすべての静的コンテンツがユーザーのブラウザにキャッシュされます。

ページの最適化

次のステップは、スタイル、スクリプト、およびフォントを最適化するために、 [LiteSpeedキャッシュ]>[ページの最適化]セクションに移動することです。

CSSの最適化

CSS設定セクションから始めましょう。 ここでは、 CSSMinifyとCSSCombineの設定をオンにすることをお勧めします。

• CSSミニファイ–このオプションを有効にすると、余分な空白文字、改行文字、その他の不要または冗長なデータはすべて、Webサイトのスタイルに影響を与えることなくCSSファイルから自動的に削除されます。
• CSS結合–これを有効にすると、すべての個別のCSSファイルが単一のCSSファイルにマージされます。 このように、ブラウザは各CSSファイルを個別に要求するのではなく、単一のファイル要求を送信し、HTTP要求の数を減らします。

フォントの最適化

サイトでGoogleFontsを使用している場合、フォントの読み込みを最適化するためのオプションがいくつかあります。 同じCSS設定セクションで、下にスクロールして[フォント表示の最適化]オプションを[スワップ]に設定すると、カスタムフォントが完全にダウンロードされるまで、フォールバックフォントを使用してテキストが表示されます。

[スワップ]オプションを設定したら、同じページ内の[最適化]セクションに移動し、[ Googleフォントを非同期にロード]オプションをオンにして、ページのレンダリング中にバックグラウンドでGoogleフォントをロードします。

JS最適化

次に、 JS設定セクションに移動してJavaScriptファイルを最適化します。 ここでは、CSS設定と同じ手順に従うことをお勧めします。 JSMinifyおよびJSCombineオプションを有効にするだけで、JSファイルも縮小されて1つのファイルにマージされます。

本当に違いを生むことができるLoadJSDeferredオプションもあります。 この設定を有効にすると、ブラウザがページレイアウトとスタイルをレンダリングしている間、スクリプトがバックグラウンドで読み込まれます。 スクリプトはHTMLよりも「重い」ことが多いため、最初のページレンダリングに必要のないスクリプトのロードと実行は延期され、後でロードされる可能性があります。 これにより、訪問者はほぼ即座にWebサイトを使用できます。

このオプションをオンにした後、ページがレンダリングされる前に一部のスクリプトをロードする必要がある場合があるため、Webサイトのフロントエンドが壊れていないことを確認してください。

メディアの最適化

最後に、メディアコンテンツを最適化する必要があります。 多くの場合、画像はWebページのコンテンツサイズの約半分を占めるため、すべての画像をWebP形式（他の形式よりも平均30％小さい）に変換すると、ページの読み込み速度が大幅に向上します。

LiteSpeedキャッシュ>画像の最適化>設定セクションで、 WebPバージョンの作成と画像WebP置換設定を有効にすることにより、Webサイト画像をWebP形式に変換できます。

これらのオプションをチェックした後、 [画像の最適化の概要]セクションに移動してドメインキーを取得し、画像の最適化スコアが100％に達するまで[最適化リクエストの送信]ボタンをクリックして画像を最適化します。

また、ウェブサイトに埋め込みがある場合（YouTube動画、Instagramの投稿、ツイートなど）、最初のページレンダリングではなく、ユーザーが下にスクロールしたときにのみ埋め込みコンテンツを読み込むことをお勧めします。 これにより、最初のページのレンダリングがはるかに高速になり、ブラウザのメモリ使用量が削減されます。

[LiteSpeedキャッシュ]>[ページの最適化]>[メディア設定]セクションに移動し、[遅延読み込みIframe ]オプションを有効にします。

まとめ

以下は、このチュートリアルの手順に従ってWebサイトのパフォーマンスを最適化した後の、モバイルデバイスとデスクトップデバイスでのGooglePageSpeedの結果のスクリーンショットです。

それでおしまい！ HivePress （またはその他のWordPressベースのソリューション）を使用してディレクトリまたはマーケットプレイスのWebサイトを構築した場合は、同じ手順に従って、キャッシュを設定し、スタイル、スクリプト、フォント、および画像や埋め込みなどのメディアコンテンツを最適化できます。 その結果、Google PageSpeedで高得点を獲得し（したがって、SEOランキングを上げる） 、Webサイトの全体的なユーザーエクスペリエンスを向上させることができます。

さらに、次の記事を確認してください。

• 最高のWordPressディレクトリプラグイン
• 人気のWordPressディレクトリテーマ
• WordPressリストWebサイトを作成する際の間違い