Joomlaのプログレッシブ Lazy Loading

Joomla!で優れたコンテンツを作成することは一つのことですが、アクセス可能にすることは別のことです。 Lazy loading は、ワークフローを変更することなく両方を組み合わせた解決策の一つです。プログレッシブな lazy loadingを使用すると、必要な場合にのみ画像が読み込まれます。リーダーがウェブページ上の画像に到達しない場合、画像はダウンロードされません。現在、 lazy loading もJoomla!で利用可能です。

lazy loadingの利点は多く、ページの読み込みが速くなり、ユーザーエクスペリエンスが向上し、SEOスコアが向上し、ローエンドデバイスや低速のインターネットアクセスのユーザーにとってアクセスしやすくなります。数週間前、私たちはWordPressでの基本的なlazy loadingレシピの改善を発表しました。今日は、Joomla!でも同様のことを発表しますが、その前に、Joomla!でプログレッシブlazy loading

Joomla!で Lazy Loading を有効にする

Lazy loadingはSpeed Cache拡張機能の一部です。lazy loadingを有効にするのはスイッチを入れるのと同じくらい簡単です。ただし、Joomla!のSpeed Cacheには、lazy loading

あなたのJoomla!ブログでlazy loadingを構成するには、Speed Cacheダッシュボードに移動してください。そこから、設定ボタンをクリックして、全く新しいSpeed Cache設定ページに移動します。

lazy loading の設定は、パラメータ タブにあります。そこに移動するか、最新の検索機能を使用して、lazy loading の設定を探します。 lazy loading を有効にするには、lazy loading オプションをオンにするだけです。そうするとすぐに、Speed Cache は、ウェブサイトに合わせて lazy loading をカスタマイズするための新しいオプションを表示します。

Joomla! で画像を遅延読み込みから除外する

最初の2つのフィールドを使用すると、アイコンや小さなロゴなど、非常に小さい画像を lazy loading から除外できます。これにより、Joomla!ブログの読み込み時間に実際に影響を与える画像に対してのみ lazy loading を有効にすることが有用です。このため、 lazy loading が効果的でなくならないように、非常に小さい画像のみを除外するようにしてください。.

ただし、場合によっては、Joomla! の投稿またはページ全体を遅延読み込みから除外（または含める）したいことがあります。これを行う理由はさまざまであり、合理的なものもあります。たとえば、含まれるメディアがコンテンツに不可欠である場合などです。以下の 2 つのフィールドは、この効果のために使用されます。.

最初のフィールドでは、特定のページのみで lazy loading を有効にすることができます。また、2番目のフィールドでは、コンテンツの選択に対してのみ lazy loading を無効にすることができます。どちらの場合も、ワイルドカードを使用できます。アスタリスク記号を使用して、類似の名前のJoomla! 投稿またはページのセットに lazy loading を適用します。変更を保存して lazy loadingを有効にします。 lazy loading は、Joomla! ブログで自動的に有効になります。.

Joomla! でのプログレッシブ遅延読み込みの仕組み

Lazy loading は、必要に応じてコンテンツを提供します。通常、ページはテキストと画像の組み合わせで構成されています。メディアのダウンロードは、特に低スペックのモバイルデバイスや低速のインターネット接続の場合、テキストのダウンロードよりも時間がかかります。Joomla!ブログは、モバイルデバイスやインターネット接続を魔法のように高速化することはできませんが、次の最善策として、ユーザーエクスペリエンスを向上させることができます。.

lazy loading が実際に意味するのは、ブラウザが最初にテキストを読み込むということです。これは通常、Joomla!ブログの不可欠な部分です。テキストはサイズもはるかに小さいため、より速く読み込まれ、読者は続きを読むことができます。スクロールダウンして画像が表示されると、 lazy loading が画像をダウンロードして表示します。.

実際には、画像の読み込みにまだ時間がかかることがあります。したがって、プログレッシブ画像の遅延読み込みは、画像の小さなバージョン（幅20px、4色、数KB）を自動的に作成し、それを元のサイズに拡大してぼかします。その効果は、画像がまだダウンロードされていることを示すフルサイズの画像のぼやけたバージョンです。遅延読み込みが画像のダウンロードを終了すると、Joomla!はぼやけた画像をフル画像に置き換えます。.

プログレッシブ lazy loading は、 lazy loadingで自動的に有効になります。つまり、追加の変更をする必要はありません。最高の点は、画像の小さなバージョンのみを使用することで、プログレッシブ lazy loading がJoomla!のストレージ容量にほとんどオーバーヘッドを追加しないことです。.

Joomla!ギャラリーでのLazy Loading

Lazy loading は区別しません。 Speed Cacheの lazy loading は、 Droppics ギャラリーなどのギャラリーを含む任意の画像に対して機能します。通常の画像と同様に、 Speed Cache はギャラリー内の画像の小さなバージョンを拡大してぼかします。ユーザーが下にスクロールすると、 lazy loading がフルサイズの画像をダウンロードします。.

何よりも、 Speed Cacheの lazy loading は、あなたの作業の流れを妨げません。代わりに、 lazy loading をあなたのプロセスに注入します。Joomla!のブログのどこにでも画像やギャラリーを挿入するだけで、 Speed Cache は、主にあなたの設定によって除外されたテキストや小さな画像を除いたメインコンテンツがロードされた後、AJAXを使用して1つずつ画像を遅延ロードします。.

画面の高さに基づくスマート Lazy Loading

Lazy loading はスクロールと画面の高さに関するものです。 Speed Cacheの lazy loading は、現在の画面の高さ（ビューポートに基づく）にのみ適用され、次の画面をプリロードするという点で非常に賢いものです。したがって、接続が高速であるか、ゆっくりとスクロールする場合、Joomlaウェブサイトで lazy loading が有効になっていることさえ気づかないでしょう。.

さらに、この画面の高さに基づく lazy loading は、例えばアンカーへのリンクの場合など、ページの真ん中であっても、現在の画面の高さにのみ適用されます。次に、 lazy loading は、スクロールアップまたはスクロールダウンすると適用されます。.

Joomla SEOと Lazy Loading

lazy loading は、 Speed Cache で使用され、SEOに影響を与えません。実際、Googleボットなどのコンテンツをクロールする検索エンジンは、利点のみを確認します。

• ページの読み込み時間が大幅に改善されます;
• 代替テキスト、画像タイトル、説明を含むすべての画像コンテンツは、 lazy loadingなしですぐに読み込まれます。
• 画像のキャプションも、ページが最初にレンダリングされるときに読み込まれます。.

プログレッシブ lazy loading は、視覚的な手がかりを追加することでメディアを表示することとダウンロードを遅らせることの妥協点です。同時に、 lazy loading は、あなたのJoomla!ブログをより速く、より心地よい体験にします。優れたコンテンツを共有することに境界はなく、Joomla!でのプログレッシブ lazy loading により、アクセス可能にすることにも境界はありません。.

もちろん、Speed Cache には、サイトを高速化し、次のレベルに引き上げることができる、本当に優れたキャッシュモジュール など、他にも多くの素晴らしいツールが用意されていることを覚えておくことができます。

Joomla用のSpeed Cacheを確認してください:  https://www.joomunited.com/products/speed-cache