あなたのウェブサイトをモバイルで速くロードする方法(2024)
モバイルデバイスでのWebサイトのパフォーマンスは、デスクトップでのパフォーマンスよりも重要になりました。
これは、デスクトップを使用している人よりも、モバイルを使用してインターネットにアクセスしている人の方が多いためです。
による StatCounterの、世界中のインターネットユーザーの50%以上がモバイルデバイスを使用しています。 デスクトップを使用しているのは47%強です。
主にデスクトップ専用にサイトを最適化している場合、ビジネスの成功を損なうことになります。 モバイルは今まで以上に重要になっています。
モバイルでのサイトのパフォーマンスは非常に重要です SEOGoogleのアプローチは今 モバイルファーストインデックス作成。 これは、Googleがモバイル版のウェブサイトをインデックス作成とランキングに使用していることを意味します。
あなたのサイトがデスクトップで速く、モバイルで遅い場合、あなたのランキングはそれに苦しむでしょう。 モバイルでのサイトのパフォーマンスは、デスクトップでのパフォーマンスよりも重要です。
ウェブサイトのモバイルでの読み込みを高速化すると、SEOが向上し、バウンス率が低下し、コンバージョンが増加します。
しかし、モバイルでの速度のためにサイトを最適化することは、デスクトップでの速度のためにサイトを最適化することほど簡単ではありません。 ありがたいことに、この記事は、私がここにリストしたヒントに従うと、モバイルでのWebサイトの読み込みを高速化するのに役立ちます。
あなたのウェブサイトの速度をテストする
最初にすべきことは、モバイルでサイトの速度をテストすることです。 これにより、サイトの速度がどれだけ速いか、または遅いかが明確にわかります。
サイトがデスクトップで高速に読み込まれているからといって、モバイルで高速に読み込まれていることを保証するものではありません。 デスクトップではサイトが超高速で、モバイルでは超低速になる可能性があります。
沢山あります モバイルテストツール、しかし私はグーグルのを使用することを好む 自分のサイトをテストする モバイル速度テスト用。
訪問するだけ Google で考える サイトのURLを入力します。 あなたはあなたのサイトがどれくらい速いかをテストすることができるはずです。
私にとっては、3秒以内に読み込まれるサイトで十分です。 ただし、ThinkWithGoogleでは少なくとも2.4秒を推奨しています。
あなたのウェブサイトをモバイルで速くロードする方法
モバイルでサイトを高速化するためのベストプラクティスは次のとおりです。
レスポンシブテーマを使用する
レスポンシブテーマは、すべてのデバイスに合わせて調整されるテーマです。 つまり、ユーザーがデスクトップ、モバイル、またはタブレットから来た場合でも、テーマは、使用しているデバイスに適合するバージョンのWebサイトをユーザーに提供します。
デスクトップ版のウェブサイトをモバイルユーザーに提供すると、読み込み時間が遅くなります。 そして、それはユーザーエクスペリエンスにとってひどいものです。
レスポンシブテーマを使用することは非常に重要です。 これは、モバイルでの高速Webサイトの最初の基盤です。 選択できるレスポンシブテーマがいくつかあります。 私のリストを読んでください 最速で最高のWordPressテーマトップ10、そこにリストされているテーマはどれも十分に優れており、レスポンシブです。
高速ウェブホストを使用する
あなたのウェブホストはあなたのウェブサイトをスピードアップする上で最も重要な役割を果たします。 最新のホスティングテクノロジーを備えた非常に高速なウェブホストにより、モバイルでのウェブサイトの読み込みが速くなります。
低速のWebホストを使用している場合は、Webサイトをどのように最適化しても、大幅な改善が見られない場合があります。
私はお勧め 曇り して キンスタ 確立されたウェブサイトのため。 ターゲットトレンド Cloudwaysでホストされています。 初心者向けサイトをお勧めします お申し込み.
AMPを使用する
AMP(Accelerated Mobile Pages)は プロジェクト Google がモバイルのウェブサイトを高速化するために導入しました。
AMPはモバイルブラウジング用に最適化されており、Webサイトの読み込み時間を大幅に短縮するのに役立ちます。 それはまたすることができます リクエストの数を減らす ある研究によると77%以上。
AMPをインストールすると、AMPの使用を開始できます。 公式AMPプラグイン他にもAMPがあります プラグイン、あなたもそれらを使うことができます。
プラグインをアクティブ化すると、使用可能なXNUMXつのモードのいずれかを選択できます。 訪問者の大多数がモバイルから来ている場合は、移行モードまたは標準モードの使用を検討してください。 ただし、テーマはAMP互換である必要があります。
遅延読み込み画像
画像は、特にモバイルデバイスで、Webサイトの速度を低下させる可能性があります。 それらを処理する最良の方法は、ユーザーがスクロールしたときにそれらをロードすることです。 そうすれば、それらは必要なときにのみロードされるため、ロード時間にほとんどまたはまったく影響を与えません。
あなたがあなたのウェブサイトをテストしようとすると PageSpeedインサイト or Web.dev また、「オフスクリーン画像を延期する」ように警告されます。これは、画像の読み込み時間が遅くなっていることを意味するため、画像の読み込みを遅延することを検討する必要があります。
画像の読み込みを遅らせることは、ユーザーが画像にスクロールするまで画像の読み込みを遅らせることです。 これにより、速度を向上させることができます。
全 多くのプラグイン 遅延読み込みを処理します。 ほとんどのキャッシュプラグインと画像最適化プラグインには、遅延読み込みオプションがあります。
レンダリングをブロックするリソースを排除する
レンダリングブロックリソースを排除すると、モバイルでのWebサイトの読み込み時間を短縮できます。
通常、ユーザーがアクセスしたときにブラウザーがWebサイトを高速にレンダリングするのを困難にするJavaスクリプトとCSSがいくつかあります。 これは、ブラウザがサイトをユーザーに表示する前に、これらのファイルを停止して読み取る必要があるためです。
これらのリソースを排除すると、ロード時間を短縮できます。 レンダリングをブロックするリソースを排除するのに役立つAutoptimizeのようなプラグインがあります。
私はこれについて役立つ記事を持っています、あなたは読むべきです: WordPressでレンダリングブロックリソースを排除する方法.
未使用のCSSを削除する
未使用のCSSがたくさんあると、Webサイトの速度が低下する可能性があります。 未使用のCSSは、Webサイトのロードに必要のないCSSです。 ただし、それらが存在するため、ブラウザはそれらをダウンロード、解析、および処理する必要があります。
次のようなプラグインがあります Perfmatters して 資産クリーンアップ 未使用のCSSを削除するのに役立ちます。
私はこれについて簡単なガイドを書きました: WordPressで未使用のCSSとJSを削除する方法.
重要なCSSを生成する
クリティカル CSS は、スクロールせずに見えるコンテンツを簡単に抽出し、ユーザーに素早く表示するために使用されます。クリティカル CSS パスを設定すると、モバイルとデスクトップでの Web サイトの読み込み時間を短縮できます。
CriticallCSSの生成に役立つプラグインがあります。 WPロケットはそれを行うことができます、 LiteSpeedキャッシュ して WPPerformance 重要なCSSを生成することもできます。
優れたキャッシングシステムを持っている
キャッシングは、Webサイトを高速化するための非常に信頼性の高い方法です。 キャッシュされたコンテンツをモバイル訪問者に提供するには、効果的なキャッシュプラグインを使用する必要があります。 WPロケットは非常に効果的なプレミアムキャッシングプラグインです。 W3トータルキャッシュは、適切に構成されていれば非常に効果的です。
ブリッジ マネージドウェブホスティング会社 サーバーレベルのキャッシュを提供します。 あなたのウェブホストが同じものを提供しているかどうかを調べて、それが箱から出していない場合はあなたのサイトのためにアクティブ化するように彼らに依頼してください。
ホストにVarnishキャッシュのインストールとアクティブ化を要求できます。 Varnishキャッシュは、Webサイトを高速化することで知られています。
画像を最適化
必ず画像を圧縮してください。 画像をアップロードする前に、画像を完全に圧縮することをお勧めします。 ただし、次のような多くのプラグインがあります オプティモール WordPress内の画像を圧縮するのに役立つその他の機能。
WebP画像を提供すると、Webサイトの速度も向上します。 WebPはJPGやPNGよりも小さいため、速度が向上します。
WebP画像の変換と提供に役立つプラグインはたくさんあります。 オプティモールと 飛行画像 これを非常にうまく行うことができます。
コードを縮小
縮小化とは、Webサイトのコードを大きいサイズから小さいサイズに圧縮するプロセスです。 何も壊さない限り、小さいほど良いです。
JSとCSSの縮小を検討する必要があります。
ほとんどのキャッシングプラグインは縮小機能を提供します。 ただし、ミニファイはWebサイトを破壊することが知られているため、必ずステージングを使用してテストしてください。
リダイレクトを最小限に抑える
リダイレクトが多すぎると、特にモバイルでWebサイトの速度が低下する可能性があります。 サーバーの応答時間が遅くなる可能性があります。
リダイレクトが多すぎないことを確認してください。 もしそうなら、あなたができる限りそれらを減らします。
圧縮を有効にする
ファイルを圧縮して、モバイルでWebサイトを高速化します。 小さいものほど、サイトは速くなります。
GzipまたはBrotliは、Webサイトのファイルを圧縮することにより、Webサイトの速度を大幅に向上させることができます。 一般的に、BrotliはGzipよりも優れています。 しかし、それらのいずれも正常に動作します。 圧縮を有効にするには、Webホストに確認してください。
プラグインソリューションの方が適している場合は、圧縮を有効にするのに役立つプラグインもあります。
ページあたりのAdSenseの数を減らす
GoogleAdSenseは最も人気のあるもののXNUMXつです お金を稼ぐ方法ブログ、しかし、ウェブサイトの速度を大幅に低下させることも知られています。
私の観察によると、AdSenseを無効にすると、読み込み時間に非常に大きな違いがあることにすぐに気付くでしょう。
しかし、お金はスピードだけでなく非常に重要です。 したがって、妥協する必要があります。 3ページにXNUMXつの広告ユニットをお勧めします。 あなたがそれに固執するならば、あなたは大丈夫であるはずです。
一致したコンテンツユニットとページレベルの広告が、モバイルの読み込み時間に最も悪影響を与えることに気づきました。
CDNを使用する
A コンテンツ配信ネットワーク ウェブサイトの静的コピーを作成し、世界中のユーザーがウェブサイトにアクセスしようとしたときに、より近い場所からそのコピーを提供することで、ウェブサイトの速度を向上させることができます。
CDNを使用していない場合は、見逃していることになります。
チェックアウトします 最高のWordPressCDNプロバイダー.
システムスタックフォントを使用する
最近、私はこのウェブサイトのモバイルでの読み込み時間を短縮しようとしていました。 そこで、Googleフォントの使用をやめて、システムスタックを試してみることにしました。驚いたことに、速度が大幅に向上しました。
Googleフォントと素晴らしいフォントは素晴らしいですが、ウェブサイトの速度を低下させる可能性があります。 システムスタックを使用すると、ユーザーが使用しているデバイスのフォントが必要になるため、外部要求が行われないようにすることができます。
一部のテーマでは、システムスタックに簡単に変更できます。 システムスタックに切り替えるだけです。
新しいPHPバージョンを利用する
新しいPHPバージョンは、通常、古いバージョンよりも高速です。 最新のPHPバージョンまたはXNUMXつだけ古いバージョンを使用していることを確認する必要があります。
スピードだけでなく、 セキュリティ.