[パフォーマンス] 画像のlazy loading追加による表示速度改善 #2377
Description
背景
PageSpeed Insightsの診断項目で「オフスクリーン画像の遅延読み込み」が指摘されています。
現在、loading="lazy" が設定されている <img> タグはごく一部に限られており、大半の画像表示テンプレートでは遅延読み込みが未適用です。ファーストビュー外の画像に loading="lazy" と decoding="async" を追加することで、初期読み込み時の帯域使用量を削減し、描画速度の改善が期待できます。
調査結果
複数行にまたがる <img> タグも含めて全件調査を実施しました。
lazy loading 実装済みファイル
| ファイル | 属性 |
|---|---|
plugins/user/photoalbums/default/partials/manual_sort_tree.blade.php |
loading="lazy" decoding="async" width="64" height="64" |
plugins/user/photoalbums/default/index_image_items.blade.php |
loading="lazy" decoding="async"（全imgタグ対応済み） |
plugins/user/photoalbums/default/index_folder_items.blade.php |
loading="lazy" decoding="async"（全imgタグ対応済み） |
plugins/user/photoalbums/card/index_folder_items.blade.php |
loading="lazy" decoding="async"（全imgタグ対応済み） |
plugins/user/slideshows/default/slideshows.blade.php |
loading="lazy"（2枚目以降のスライドのみ） |
plugins/manage/uploadfile/index.blade.php |
loading="lazy" |
plugins/manage/uploadfile/userdir_public.blade.php |
loading="lazy" |
lazy loading 未実装 — ユーザー向けプラグイン（対応対象）
| ファイル | img数 | 内容 |
|---|---|---|
plugins/user/whatsnews/default/whatsnews.blade.php |
4 | 新着情報サムネイル（Blade + Vue） |
plugins/user/whatsnews/card_04/whatsnews.blade.php |
8 | 新着情報カード表示（Blade + Vue） |
plugins/user/whatsnews/onerow/whatsnews.blade.php |
4 | 新着情報1行表示（Blade + Vue） |
plugins/user/databases/default/databases_include_value.blade.php |
1 | データベース一覧の画像カラム（PHP文字列生成） |
plugins/user/databases/default/databases_include_detail_value.blade.php |
1 | データベース詳細の画像カラム（PHP文字列生成） |
plugins/user/databases/default/databases_confirm.blade.php |
1 | データベース確認画面 |
plugins/user/databasesearches/card_04/databasesearches.blade.php |
1 | データベース検索結果の画像 |
lazy loading 未実装 — 編集画面・モーダル（対象外）
以下は編集画面またはモーダル内の画像であり、PageSpeed Insightsの計測対象外のためスコープに含めません。
| ファイル | img数 | 理由 |
|---|---|---|
plugins/user/photoalbums/default/index_image.blade.php |
1 | モーダル内画像（JSでsrc動的設定、lazy loading効果なし） |
plugins/user/photoalbums/default/edit_contents.blade.php |
2 | 編集画面（サムネイル + モーダル内拡大画像） |
plugins/user/photoalbums/default/edit_video.blade.php |
1 | 編集画面（ポスター画像サムネイル） |
plugins/user/slideshows/default/slideshows_edit_row.blade.php |
3 | 編集画面（プレビュー + no_image + モーダル内） |
plugins/user/slideshows/default/slideshows_edit_row_add.blade.php |
2 | 編集画面（プレビュー + モーダル内） |
lazy loading 未実装 — 管理画面（対象外）
管理画面はPageSpeed Insightsの計測対象外のため、今回のスコープには含めません。
| ファイル | 内容 |
|---|---|
plugins/manage/site/site.blade.php |
レイアウト選択アイコン（16個） |
plugins/manage/page/page.blade.php |
ページ管理レイアウトアイコン |
plugins/manage/page/page_form.blade.php |
ページ編集レイアウトアイコン（17個） |
plugins/manage/site/meta.blade.php |
OGP画像プレビュー |
plugins/manage/theme/theme_image_list.blade.php |
テーマ画像一覧 |
plugins/manage/site/pdf/page.blade.php |
PDF出力レイアウトアイコン |
plugins/manage/site/pdf/base_favicon.blade.php |
PDF出力favicon |
対象外
| ファイル | 理由 |
|---|---|
manual/method.blade.php |
マニュアル生成用 |
manual/pdf/method.blade.php |
PDF出力用 |
実装手順
Step 1: Blade テンプレートの img タグに属性追加
ファーストビュー外の画像に対して以下の属性を追加:
loading="lazy" decoding="async"Step 2: Vue.js テンプレート内の img タグ
whatsnewsプラグインのVue.jsテンプレート内の <img> タグにも同様に属性を追加:
<img v-bind:src="whatsnews.first_image_path" loading="lazy" decoding="async">Step 3: PHP文字列生成の img タグ
databasesプラグインではPHP文字列として <img> タグを生成しているため、文字列内に属性を追加:
$value = '<img src="..." class="img-fluid" loading="lazy" decoding="async" />';注意事項
- ファーストビューのLCP候補画像には
loading="lazy"を付けない（loading="lazy"をLCP画像に付けると逆にLCPが悪化する） - photoalbumsプラグインの既存実装（
loading="lazy" decoding="async"）をベストプラクティスとして参考にする
関連Issue（外部プラグイン）
- connect-cms-option-private: opensource-workshop/connect-cms-option-private#363
- connect-lms: opensource-workshop/connect-lms#223（該当なしのためクローズ済み）
検証方法
- 一般ページで画像が正常に表示されること
- スクロールして画像が表示領域に入った時に遅延読み込みされることをNetwork タブで確認
- ファーストビューの画像が即座に表示されること（LCP悪化がないこと）
- 新着情報・データベース等の画像表示プラグインが正常に動作すること