商品一覧画面の商品画像を lazyload に対応

[okazy]

概要(Overview・Refs Issue)

refs #4816

商品詳細画面の商品画像を lazyload に対応しました。

lazyload.mov

方針(Policy)

一旦効果が大きそうな商品詳細画面のみ対応しています。

実装に関する補足(Appendix)

Generator は他のプルリクで修正していただいていますので、変更から除外しました。

alt 属性もつけたかったが、商品名で良いのかの議論もあるのでいったん保留。

テスト（Test)

目視で確認

• 商品数: 209個
• ページあたりの商品数: 60個
• Chrome, Firefox, Safari

ただし Safari は lazyload 非対応のため全画像読み込みとなった

Lighthouse で確認したところ、いくつかの警告が改善できていた。
スコアにはほとんど変化なかった。

相談（Discussion）

マイナーバージョン互換性保持のための制限事項チェックリスト

• 既存機能の仕様変更
• フックポイントの呼び出しタイミングの変更
• フックポイントのパラメータの削除・データ型の変更
• twigファイルに渡しているパラメータの削除・データ型の変更
• Serviceクラスの公開関数の、引数の削除・データ型の変更
• 入出力ファイル(CSVなど)のフォーマット変更

レビュワー確認項目

• 動作確認
• コードレビュー
• E2E/Unit テスト確認(テストの追加・変更が必要かどうか)
• 互換性が保持されているか
• セキュリティ上の問題がないか

[okazy]

検証環境を固定するため、レンタルサーバに EC-CUBE をインストールし、 Lighthouse で計測しました。

環境

• さくらのレンタルサーバ（スタンダード）
• 登録商品数: 592件
• 一覧表示商品数: 100件
• bin/console eccube:fixtures:generate --with-image=cats にて商品データを生成

検証結果

概要

• パフォーマンスのスコアとしてはあまり変化がありませんが、いくつか重要な警告が改善しています。

Lazyload なし

Lazyload あり

Opportunities

• Properly size images が大幅に改善

Lazyload なし

Lazyload あり

Diagnostics

• Serve static assets with an efficient cache policy が 107 resources found から 17 resources found に改善
• Avoid enormous network payloads が改善
• Minimize main-thread work が改善
• Keep request counts low and transfer sizes small が 115 requests • 3,946 KiB から 25 requests • 1,225 KiB に改善

Lazyload なし

Lazyload あり

[chihiro-adachi]

全体のスコア自体は大きく向上するわけではないが、各種指標で改善が見られるためマージしたいと思います。

[chihiro-adachi]

@okazy ありがとうございます、マージしました