モバイルでウェブサイトの読み込みを高速化する方法 (2022)

モバイル デバイスでの Web サイトのパフォーマンスは、デスクトップでのパフォーマンスよりも重要になっています。

これは、デスクトップを使用しているユーザーよりもモバイルを使用してインターネットにアクセスしているユーザーの方が多いためです。

StatCounter によると、世界中のインターネット ユーザーの 50% 以上がモバイル デバイスを使用しています。 一方、デスクトップを使用しているのは 47% 強にすぎません。

主にデスクトップ専用にサイトを最適化している場合、ビジネスの成功を損なっています。 モバイルはこれまで以上に重要になっています。

モバイルでのサイトのパフォーマンスは、SEO にとって非常に重要です。 Google のアプローチは現在、モバイル ファースト インデックスです。 これは、Google がウェブサイトのモバイル バージョンをインデックス作成とランキングに使用することを意味します。

あなたのサイトがデスクトップでは速く、モバイルでは遅い場合、ランキングは低下します。 モバイルでのサイトのパフォーマンスは、デスクトップでのパフォーマンスよりも重要です。

モバイルでのウェブサイトの読み込みを高速化すると、SEO が改善され、直帰率が低下し、コンバージョンが増加します。

しかし、モバイルでの速度のためにサイトを最適化することは、デスクトップでの速度のためにサイトを最適化するほど簡単ではありません。 ありがたいことに、ここに挙げたヒントに従えば、この記事はモバイルでの Web サイトの読み込みを高速化するのに役立ちます。

ウェブサイトの速度をテストする

最初にすべきことは、モバイルでサイトの速度をテストすることです。 これにより、サイトの速度や速度が明確になります。

デスクトップでサイトの読み込みが速いからといって、モバイルでの読み込みが速いとは限りません。 デスクトップではサイトが超高速でも、モバイルでは超低速になる可能性があります。

多くのモバイル テスト ツールがありますが、モバイル速度テストには Google の Test My Site を使用することを好みます。

ThinkWithGoogle にアクセスして、サイトの URL を入力するだけです。 サイトの速度をテストできるはずです。

私にとっては、3 秒以内に読み込まれるサイトで十分です。 ただし、Think With Google は少なくとも 2.4 秒を推奨しています。

モバイルでウェブサイトの読み込みを高速化する方法

モバイルでサイトを高速化するためのベスト プラクティスは次のとおりです。

レスポンシブ テーマを使用する

レスポンシブ テーマは、すべてのデバイスに適合するように調整されるテーマです。 これは、ユーザーがデスクトップ、モバイル、またはタブレットからアクセスした場合でも、テーマは、使用しているデバイスに適したバージョンの Web サイトを提供することを意味します。

ウェブサイトのデスクトップ バージョンをモバイル ユーザーに提供すると、読み込み時間が遅くなります。 そして、それはユーザーエクスペリエンスにとってひどいものです.

レスポンシブ テーマを使用することは非常に重要です。 これは、モバイルで高速な Web サイトを作成するための最初の基盤です。 選択できるレスポンシブ テーマがいくつかあります。 トップ10の最速かつ最高のWordPressテーマのリストを読んでください。そこにリストされているテーマはどれも十分に優れており、反応が良い.

高速なウェブ ホストを使用する

ウェブホストは、ウェブサイトの高速化において最も重要な役割を果たします。 最新のホスティング技術を備えた非常に高速な Web ホストにより、モバイルでの Web サイトの読み込みが高速になります。

Web ホストの速度が遅い場合、Web サイトをどのように最適化しても、大幅な改善が見られない場合があります。

確立されたウェブサイトには Cloudways と Kinsta をお勧めします。 TargetTrend は Cloudways でホストされています。 初心者サイトには、Bluehost をお勧めします。

AMP を使用する

Accelerated Mobile Pages (AMP) は、モバイルでウェブサイトを高速化するための Google によるプロジェクトです。

AMP はモバイル ブラウジング用に最適化されており、Web サイトの読み込み時間を大幅に短縮できます。 また、調査によると、リクエストの数を 77% 以上削減できます。

公式の AMP プラグインをインストールすることで、AMP を使い始めることができます。 他にも AMP プラグインがあり、それらも使用できます。

プラグインを有効にすると、利用可能な 3 つのモードのいずれかを選択できます。 訪問者の大部分がモバイルから来ている場合は、移行モードまたは標準モードの使用を検討してください。 ただし、テーマは AMP 互換である必要があります。

画像の遅延読み込み

画像は Web サイトの速度を低下させる可能性があり、特にモバイル デバイスでは顕著です。 それらを処理する最善の方法は、ユーザーがスクロールしたときにそれらをロードすることです。 そうすれば、必要なときにのみ読み込まれるため、読み込み時間にほとんど、またはまったく影響しません。

PageSpeed Insight または Web.dev で Web サイトをテストしようとして、「画面外の画像を延期する」ように警告された場合は、画像によって読み込み時間が遅くなっていることを意味し、遅延読み込みを検討する必要があります。

画像の遅延読み込みとは、ユーザーがスクロールするまで画像の読み込みを遅らせることです。 これにより、速度が向上します。

遅延読み込みを処理するプラグインは多数あります。 ほとんどのキャッシュ プラグインと画像最適化プラグインには、遅延読み込みオプションがあります。

レンダリングをブロックするリソースを排除する

レンダリングをブロックするリソースを排除すると、モバイルでの Web サイトの読み込み時間を短縮できます。

通常、ユーザーがアクセスしたときにブラウザーが Web サイトを高速にレンダリングするのを困難にする Java スクリプトと CSS がいくつかあります。 これは、ブラウザがサイトをユーザーに表示する前に、これらのファイルを停止して読み取る必要があるためです。

これらのリソースを削除すると、ロード時間が短縮されます。 レンダリングをブロックするリソースを排除するのに役立つ Autoptimize などのプラグインがあります。

これについては役立つ記事がありますので、こちらをお読みください: WordPress でレンダリングをブロックするリソースを削除する方法。

未使用の CSS を削除する

未使用の CSS がたくさんあると、Web サイトの速度が低下する可能性があります。 未使用の CSS は、Web サイトの読み込みに不要な CSS です。 しかし、それらが存在するため、ブラウザはそれらをダウンロード、解析、および処理する必要があります。

未使用の CSS を削除するのに役立つ Perfmatters や Asset CleanUp などのプラグインがあります。

これに関する簡単なガイドを書きました: WordPress で未使用の CSS と JS を削除する方法。

重要な CSS を生成する

重要な CSS を使用して、スクロールせずに見えるコンテンツを簡単に抽出して、ユーザーにすばやく表示します。 クリティカルな CSS パスがあると、モバイルとデスクトップでの Web サイトの読み込み時間が短縮されます。

Criticall CSS の生成に役立つプラグインがあります。 WP Rocket はそれを行うことができ、LiteSpeed Cache と WP Performance は重要な CSS を生成することもできます。

優れたキャッシュシステムを持っている

キャッシュは、Web サイトを高速化するための非常に信頼できる方法です。 モバイル訪問者にキャッシュされたコンテンツを提供するには、効果的なキャッシュ プラグインを使用する必要があります。 WP ロケットは、非常に効果的なプレミアム キャッシュ プラグインです。 W3 合計キャッシュは、適切に構成されていれば非常に効果的です。

ほとんどのマネージド Web ホスティング会社は、サーバー レベルのキャッシュを提供しています。 ウェブホストが同じものを提供しているかどうかを確認し、サイトがすぐに使用できるものでない場合は、サイトでアクティブ化するように依頼してください.

ホストに Varnish キャッシュのインストールと有効化をリクエストできます。 Varnish キャッシュは、Web サイトの高速化で知られています。

画像を最適化する

画像は必ず圧縮してください。 アップロードする前に画像を完全に圧縮することを好みます。 ただし、WordPress 内で画像を圧縮するのに役立つ optimole などのプラグインが多数あります。

WebP 画像を提供すると、Web サイトの速度も向上します。 WebP は JPG や PNG よりもサイズが小さいため、速度が向上します。

WebP 画像の変換と提供に役立つ多くのプラグインがあります。 最適化された飛行画像は、これを非常にうまく行うことができます。

コードを縮小する

縮小化とは、Web サイトのコードを大きいサイズから小さいサイズに圧縮するプロセスです。 壊れない程度であれば小さいほど良いです。

JS と CSS を縮小することを検討する必要があります。

ほとんどのキャッシュ プラグインは縮小機能を提供します。 ただし、縮小すると Web サイトが壊れることが知られているため、必ずステージングを使用してテストしてください。

リダイレクトを最小限に抑える

リダイレクトが多すぎると、特にモバイルでウェブサイトの速度が低下する可能性があります。 サーバーの応答時間が遅くなる可能性があります。

リダイレクトが多すぎないことを確認してください。 もしそうなら、それらをできるだけ減らしてください。

圧縮を有効にする

ファイルを圧縮して、モバイルでウェブサイトを高速化します。 小さいほど、サイトは高速になります。

Gzip または Brotli は、Web サイトのファイルを圧縮することで、Web サイトの速度を大幅に向上させることができます。 一般的に、Brotli は Gzip より優れています。 しかし、それらのどれもうまく機能します。 圧縮を有効にするには、Web ホストに確認してください。

プラグイン ソリューションの方が適している場合は、圧縮を有効にするのに役立つプラグインもあります。

ページあたりの AdSense の数を減らす

Google AdSense は、ブログで収益を上げる最も一般的な方法の 1 つですが、ウェブサイトの速度が大幅に低下することも知られています。

私の観察によると、AdSense を無効にすると、読み込み時間に非常に大きな違いがあることがすぐにわかります。

しかし、お金はスピードと同様に非常に重要です。 したがって、妥協点に到達する必要があります。 Google では、1 ページあたり 3 つの広告ユニットを推奨しています。 それさえ守れば、きっと大丈夫。

関連コンテンツ ユニットとページ単位の広告が、モバイルの読み込み時間に最も悪影響を及ぼしていることに気付きました。

CDN を使用する

コンテンツ配信ネットワークは、Web サイトの静的コピーを作成し、世界中のユーザーが Web サイトにアクセスしようとしたときに、より近い場所からそれらを提供することで、Web サイトの速度を向上させるのに役立ちます。

CDN を使用していない場合は、チャンスを逃しています。

最高の WordPress CDN プロバイダーをチェックしてください。

システム スタック フォントを使用する

最近、モバイルでこのウェブサイトの読み込み時間を高速化しようとしていました。 そこで、Google フォントの使用をやめてシステム スタックを試してみたところ、驚くべきことに速度が大幅に向上しました。

Google フォントと素晴らしいフォントは素晴らしいですが、ウェブサイトの速度が遅くなる可能性があります。 システムスタックを使用すると、ユーザーが使用しているデバイスのフォントが必要になるため、外部要求が行われないことが保証されます。

一部のテーマでは、システム スタックへの変更が容易になります。 システムスタックに切り替えるだけです。

新しい PHP バージョンを使用する

新しい PHP バージョンは通常、古いバージョンよりも高速です。 最新の PHP バージョンまたは 1 つ前のバージョンを使用していることを確認する必要があります。

スピードだけでなく、セキュリティも万全です。