Lazy-load
lazysizes JavaScriptライブラリを使用して、画像とiframeの遅延読み込みを有効にし、ページ読み込みパフォーマンスを向上させます。
lazy
インストール
composer require 'drupal/lazy:^4.0'
composer require 'drupal/lazy:8.x-3.16'
概要
Lazy-loadモジュールは、Drupalにおける画像とiframeの遅延読み込みのための包括的なソリューションを提供します。画面外の画像やiframeの読み込みをビューポートに入る直前まで遅延させることで、初期ページ読み込み時間を大幅に短縮し、帯域幅の使用量を削減します。
このモジュールは複数の統合方法をサポートしています：フォーマット済みテキストフィールド内のインライン画像とiframe用のテキストフィルター、画像フィールド用のフィールドフォーマッター設定、Viewsのカスタムフィールドフォーマッターです。高性能なlazysizes JavaScriptライブラリを使用しており、可視性の変化を自動検出するSEOフレンドリーな遅延読み込みを提供します。
主な機能には、picture/srcsetを使用したレスポンシブ画像のサポート、loading="lazy"属性によるネイティブブラウザ遅延読み込みのフォールバック、オプションのdata URI埋め込みによるプレースホルダー画像、CSSトランジションエフェクト、AMPページでの自動無効化、柔軟なパスベースの可視性制御が含まれます。
Features
- lazysizes JavaScriptライブラリを使用して画像とiframeを遅延読み込みし、高性能でSEOフレンドリーな読み込みを実現
- 設定可能なテキストフィルターを介して、フォーマット済みテキストフィールド内のインライン画像とiframeをサポート
- Image、Responsive Image、Colorbox、Media Thumbnailを含む画像フィールドフォーマッターと統合
- Viewsで使用するための専用のImage (Lazy-load)およびResponsive image (Lazy-load)フィールドフォーマッターを提供
- JavaScriptの代替としてloading="lazy"属性によるネイティブブラウザ遅延読み込みをサポート
- インラインbase64プレースホルダー用のオプションのdata URI埋め込みによるプレースホルダー画像を許可
- スムーズな画像読み込みアニメーション用のCSSトランジションエフェクトを提供
- AMPページで遅延読み込みを自動的に無効化
- 特定のページで遅延読み込みを有効/無効にするパスベースの可視性制御を提供
- blur-up、object-fit、video-embedなどを含む拡張機能用の24のlazysizesプラグインをサポート
- 設定可能なスキップクラスを追加することで要素が遅延読み込みをスキップすることを許可
- フィールドフォーマッター、CSSスタイル、設定のテーマ/モジュールカスタマイズ用の複数のhookを提供
Use Cases
画像の多いページの読み込みパフォーマンス向上
ギャラリー、ポートフォリオ、商品リストなど、多くの画像を含むコンテンツタイプの画像フィールドで遅延読み込みを有効にします。これにより、ユーザーがスクロールするまで画面外の画像の読み込みを遅延させ、初期ページ読み込み時間と帯域幅の使用量を大幅に削減します。
埋め込み動画とiframeの遅延読み込み
本文フィールドで使用されるテキストフォーマットに対して、iframeサポート付きの遅延読み込みテキストフィルターを有効にします。これにより、埋め込まれたYouTube動画、地図、その他のiframeコンテンツの読み込みをユーザーがスクロールするまで遅延させ、特に複数の埋め込み動画があるページで初期パフォーマンスを向上させます。
プレースホルダー画像を使用した体感パフォーマンスの向上
実際の画像が読み込まれる間、プレースホルダー画像（小さな透明GIFやぼかした低解像度版など）を表示するよう設定します。これによりレイアウトシフトを防ぎ、コンテンツが読み込まれていることを視覚的にフィードバックします。data URIオプションを使用して小さなプレースホルダーをHTMLに直接埋め込みます。
遅延読み込み画像付きViews
Views表示で専用のImage (Lazy-load)またはResponsive image (Lazy-load)フィールドフォーマッターを使用します。これらのフォーマッターはサードパーティ設定を構成せずに自動的に遅延読み込みを有効にし、多くの画像を表示するViewsに遅延読み込みを簡単に追加できます。
特定のページでの遅延読み込み無効化
可視性設定を使用して、遅延読み込みが不要または問題を引き起こす可能性のあるページ（RSSフィード、印刷用ページ、ファーストビューですぐに読み込む必要がある画像があるページなど）で遅延読み込みを無効にします。
モダンブラウザ向けネイティブ遅延読み込み
「ネイティブ遅延読み込みを優先」オプションを有効にして、サポートするブラウザでブラウザ組み込みの遅延読み込み機能（loading="lazy"属性）を使用します。これによりJavaScriptなしで遅延読み込みが提供され、サポートされるブラウザでより良いパフォーマンスが得られる可能性があります。
Tips
- モジュール設定のプレビュータブを使用して遅延読み込みが正しく動作していることをテストしてください。スペーサーを過ぎてスクロールするとプレビュー画像が読み込まれます
- 最良のユーザー体験のため、遅延読み込みとレスポンシブ画像を組み合わせて、異なるデバイスに適切なサイズの画像を配信してください
- blur-upプラグインは、ぼかした低解像度のプレースホルダーからフル画像にトランジションする素敵なビジュアルエフェクトを提供できます
- 要素またはその親にスキップクラス（デフォルト：no-lazy）を追加することで、遅延読み込みから除外できます
- Viewsを使用する場合、サードパーティ設定よりも専用の遅延読み込みフォーマッターを使用すると設定が簡単です
- 遅延読み込みを有効にした後、Core Web Vitals（LCP、CLS）を監視して、体感パフォーマンスが向上していることを確認してください
- 対象ユーザーが主にモダンブラウザを使用している場合、JavaScriptが不要なネイティブ遅延読み込みの有効化を検討してください
Technical Details
Admin Pages 1
/admin/config/content/lazy
サイト全体の画像とiframeのグローバル遅延読み込み設定を構成します。このページでは、どのテキストフォーマットとフィールドで現在遅延読み込みが有効になっているかを表示し、lazysizesライブラリの包括的な設定オプションを提供します。
権限 1
Hooks 4
hook_lazy_field_formatters_alter
遅延読み込みをサポートする有効なフィールドフォーマッターのリストを変更します。カスタムの画像ベースフィールドフォーマッターを追加するためにこのhookを使用します。
hook_lazy_default_styles_alter
遅延読み込みクラス（lazyload、lazyloaded）に注入されるデフォルトのCSSスタイルをオーバーライドします。
hook_lazy_effect_styles_alter
デフォルトのCSSトランジションエフェクトスタイルをオーバーライドします。「デフォルトCSSエフェクトを有効化」オプションがチェックされている場合にのみ適用されます。
hook_lazy_settings_alter
Lazyモジュールの設定を変更します。環境や条件ごとに設定をオーバーライドするために使用できます。
Troubleshooting 5
以下を確認してください：1）lazysizesライブラリが設定されたパス（デフォルトは/libraries/lazysizes）にインストールされている、2）使用しているテキストフォーマットまたはフィールドフォーマッターで遅延読み込みが有効になっている、3）現在のページが無効パスリストにない、4）現在のページが管理ページではない（管理無効化が有効な場合）、5）要素がスキップクラス（デフォルトはno-lazy）を持っていない。
https://github.com/aFarkas/lazysizes/releasesからlazysizesライブラリをダウンロードして/libraries/lazysizesに配置するか、'composer require bower-asset/lazysizes'でComposerを介してインストールしてください。フォルダ名が正確に'lazysizes'であり、lazysizes.min.jsを含んでいることを確認してください。
画像のアスペクト比に一致するプレースホルダー画像URLを設定するか、フィールドフォーマッターでplaceholder_styleオプションを使用して適切なサイズのプレースホルダー画像を生成してください。寸法を維持するためにプレースホルダーとして小さな画像スタイルを有効にすることを検討してください。
カスタムモジュールでhook_lazy_field_formatters_alter()を使用して、フィールドフォーマッターのマシン名をサポートされるフォーマッターのリストに追加してください。
モジュール設定で「デフォルトCSSエフェクトを有効化」オプションを有効にして、画像読み込み時にスムーズな不透明度トランジションを追加してください。デフォルトのエフェクトは2秒間で画像をフェードインさせます。
Security Notes 3
- このモジュールはファイルパスを安全に処理し、ライブラリパスが/またはhttps://で始まることを検証して、パストラバーサル攻撃を防止します
- lazysizesライブラリに外部CDNを使用する場合、JavaScriptがサイトで実行されるため、信頼できるソースからのものであることを確認してください
- テキストフィルターはインライン画像とiframeを処理する際にDOM操作を適切にサニタイズし、XSSを防止します