遅延読み込みを使用して完璧なモバイル速度の結果を得る方法

あなたのサイトは Google モバイル サイトの速度テストに合格していますか? いいえ？ 遅延読み込み画像を見たいと思うかもしれません。

Web サイトのパフォーマンスは非常に重要です。 ブログやウェブサイトの読み込みが遅いと、ユーザー エクスペリエンスに悪影響を及ぼします。

サイトが読み込まれるまで 5 秒も 10 秒も待つ人はいません。 インターネット速度またはダウンロード速度は高速である必要があります。 遅いウェブサイトは直帰率を上げ、コンバージョン率を下げます。

サイトの Web サイトの速度テストを行う場合、通常、デスクトップの速度は問題ありません。 しかし、あなたのページはモバイル速度テストでどのように機能しますか?

モバイル ユーザー向けの準備

ほとんどのブログおよび Web サイト プログラムは、デスクトップでの表示用に適切に構築されています。

レスポンシブ デザインを使用してモバイル バージョンを提供しています。

これは実用的なソリューションですが、重大な欠点があります。

サイトがレスポンシブであれば、モバイル デバイスでも動作します。

ただし、画像のファイル サイズはデスクトップ用であるため、モバイル サイトの速度ははるかに遅くなります。

Google Pagespeed Insights のテストを行うと、結果は合理的で、デスクトップでは緑になりますが、モバイル バージョンでは次のようになります。

ウェブサイトの訪問者の半分、またはそれ以上がモバイル デバイスを使用していることを考えると、ページの読み込み時間とモバイルの速度を改善する必要があります。

Google は、モバイル ファースト インデックスをランキング要素として使用する方向に進んでいます。

パフォーマンスの監視に使用できる無料の Web サイト速度テスト サービスが多数あります。

ただし、すべての速度テスト アプリがモバイル サイトの速度を測定するわけではありません。 そのため、デスクトップ サイトのページ速度が向上したからといって安心しないでください。

WebpageTest ではさまざまなモバイル バージョンを選択できるため、Google の代替手段となります。

デバイスのインターネット接続速度は非常に遅いため、常にモバイル バージョンを確認できることを確認してください。

結果が満足できない場合は、やらなければならないことがあります。

モバイルのパフォーマンスをどのように向上させますか?

デスクトップとモバイルの両方で、多くの要因がサイト速度の低下に寄与しています。

Javascript および CSS ファイルは、ロードが早すぎてレンダリングをブロックする可能性があります。 WordPress を使用している場合は、キャッシュ プラグインを使用して簡単に修正できます。

Web ホストに問題があり、TTFB (Time To First Byte) が 0.5 秒を少し上回っている可能性があります。

ただし、ほとんどのホストは、この時間を 10 ～ 20% 上回っているだけであり、これは大きな問題ではありません。

最大の問題は、ほとんどの場合、画像と iframe です。 画像を投稿に追加する場合、画像はモバイル用に圧縮、サイズ変更、またはフォーマットされません。

プラグインを使用して支援できます。 Smush は、アップロード時に画像を圧縮するための人気のあるプラグインです。 その結果、デスクトップ バージョンは少し改善されますが、モバイル バージョンは改善されません。

モバイルでページの読み込み時間を改善するには、はるかに小さな画像を提供する必要があります。 しかし、これには多くの作業が伴います。

最近まで、最善の解決策は、サイトの別のモバイル バージョンを用意するか、AMP ページを使用することでした。 いずれにせよ、既存のサイトのすべての画像を次世代の画像に置き換える必要がありました。

サイトの規模にもよりますが、どちらのソリューションに関連する作業にも数週間から数か月かかる場合があります。

ほとんどのサイト所有者にとって、Intersection Observer API や img src、data src 属性、class lazy、img タグ、img クラスについて知らなければ、新しいモバイル サイトを構築することはできません。

それに直面しよう。 それはすべて難しすぎて時間がかかります。

詳細:お問い合わせフォームとコメントのスパムを停止する方法

遅延読み込み動作の適用

幸いなことに、モバイル ページの読み込み時間を簡単に修正する方法があります。 答えは、すべての画像を遅延ロードすることです。

遅延読み込みは、読者が必要とするまで画像の配信を遅らせます。 読者が Web ページをスクロールすると、表示可能な範囲より下の画像が表示されなくなります。

そうすることで、ページの初期読み込み時間は、熱心な読み込みの時間から大幅に短縮されます。 ブログやウェブサイトに遅延読み込みを追加するためのプラグインやソリューションは数多くあります。

遅延負荷テストの実行

ここ数週間、私はモバイル サイトを魅力的にする新しい方法のベータ テストを行ってきました。

コンテンツ配信ネットワーク、遅延読み込み、遅延オフスクリーン イメージについて聞いたことがあるかもしれません。

まだお持ちでない場合は、ページが読み込まれたとき、およびユーザーがページを下にスクロールしたときにのみ画像を提供する要素です。 Medium などのサイトでこれが実際に行われているのを見たことがあるかもしれません。

初めてサイトにアクセスすると、画像が一瞬ぼやけて表示されます。 これらはプレースホルダー イメージと呼ばれます。

すると一瞬で画像が鮮明に浮かび上がります。

これは実行中の遅延読み込みです。 ユーザーがページを下にスクロールしても、画像は必要になるまで読み込まれません。

これにより、特にモバイル デバイスでページが非常に高速に動作します。 レイジー ローダーは、Web ページ上の任意の数の画像に適用できます。

しかし、このソリューションにはまだ 1 つの要素が欠けています。 画像は次世代フォーマットではありません。

幸いなことに、現在は解決策があるため、すべての画像を置き換える必要はありません。 Optimole は、多くの面倒な作業を行う WordPress プラグインです。

画像を遅延読み込みするだけでなく、画像を次世代画像を配信する新しい画像 URL に置き換えます。

その上、その場で画像のサイズを変更します。

Optimole をテストする

私は多くのテストを行い、ページをチェックするたびに、Google モバイル速度テストで非常に高いスコアを獲得しました.

私のテストの 1 つは、10 個の大きな圧縮されていないサイズのない画像を含む全幅の Web ページを使用したものでした。

言い換えれば、ページに大きな画像の山を平手打ちして公開しただけです。 (画像は、Pixabay の厚意により提供されたため、クリエイティブ コモンズへの帰属は必要ありませんでした。)

ページが大きすぎて、画像を表示できませんでした。 ということで、動画で紹介します。

Google でページをテストしたところ、これが結果でした。

すべての画像のサイズを考えると、驚くことではありません。

次に、Optimole をアクティブにしました。 以下で使用した設定を確認できます。 それはあなたがしなければならないすべてです。

それで、結果はどうでしたか？

デスクトップとしては満点。

モバイルの場合、ほぼ完璧なスコアです。

GTmetrix では、スコアは再び完璧に近づきました。

これらは、高解像度の巨大な画像でいっぱいのページの実際の結果であることを忘れないでください.

プラグインをインストールして API キーを取得するのに数分しかかからず、設定を有効にするのに数秒しかかかりませんでした。

そのため、5 分もかからずに、ほぼ完璧なモバイル ページとサイトを作成することができました。

オプティモールの詳細

実際のプラグインの動作を確認するには、CodeinWP Web サイトにアクセスしてください。 Optimole で実行されているため、サイトの速度でテストを実行できます。

Optimole の Web サイトにアクセスして、サイトを確認できます。

[私のサイトを確認] ボタンをクリックして、サイトの URL を入力します。 すべての画像のリストと、ウェブサイトで節約できる金額が表示されます。

小規模なサイトの場合は、プラグインの無料バージョンを利用できます。 ただし、大規模なサイトがある場合は、プレミアム オプションを検討することをお勧めします。

この記事を読むのに、モバイル ユーザー向けに Web サイトを超高速で実行するのにかかる時間よりも長い時間がかかりました。 何を求めている？

より遅延読み込みの代替手段

Nextgen イメージの CDN 配信を設定したくない場合は、使用できる無料のオプションが多数あります。

WordPress にはデフォルトで遅延読み込みが組み込まれています。 ただし、それがどのように機能するかをほとんど制御できません。 通常は、パフォーマンスを微調整できるようにプラグインを使用することをお勧めします。

Smush は人気のある無料の WordPress プラグインで、メディア ライブラリに画像をロードするときに画像を削減します。

ただし、遅延読み込みを有効にするオプションがあります。 私は自分のサイトでいくつか試してみましたが、問題なく動作します。 オプションを有効にするだけで完了です。

A3 Lazy Load も無料のプラグインです。 このサイトを含め、多くのサイトで長い間使用してきました。

私が気に入っているのは、多くのオプションを絞り込むことができることです。 ウィジェットを除外するオプションがあり、一部のテーマでジャンプの問題が解決されます。

BJ Lazy Load は長い間存在しています。 90,000 人以上のユーザーがいます。 ただし、しばらく更新されていません。

Lazy Load は 60,000 回のインストール実績を持つ無料のプラグインです。 これは、サイトの速度を最適化するためのオールインワン ソリューションである WP Rocket の無料コンポーネントです。

最後のプラグインの 1 つは、ビデオの Lazy Load です。 サイトにたくさんの Youtube ビデオがある場合に使用するのに適したツールです。

なんという選択でしょう！ これで、遅いモバイル Web サイトを作成する理由はまったくありません。

注：私はこの製品とは何の関係もありません。 私の Optimole レビューは、ユーザーとしての私の経験に基づいています。

詳細:無料のウェブサイト チェッカーと SEO ツール