fix: 画像サイズを修正

[yamageji]

🔗 Linked issue

• https://github.com/vuejs-jp/vuefes-2024-backside/issues/423
• https://github.com/vuejs-jp/vuefes-2024-backside/issues/372

📚 Description

• ファイルサイズの大きい画像をリサイズしました。

  • before
    
  • after
    

• ファーストビューに表示されない画像はloading="lazy"にしました。

📝 Note

• スピーカー2名の画像はSupabase管理でしたので、そちらで修正しています。
• Nuxt Imageを利用したほうが良いかとも思いましたが、今回は一旦そのままとしています。
  → 一部Nuxt Imageを入れて対応しています。

[netlify]

✅ Deploy Preview for vuefes-2024 ready!

Name	Link
🔨 Latest commit	b2fda42
🔍 Latest deploy log	https://app.netlify.com/sites/vuefes-2024/deploys/66fc90d66415a200080aed0e
😎 Deploy Preview	https://deploy-preview-357--vuefes-2024.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cloudflare-workers-and-pages]

Deploying vuefes-2024-designsystem with    Cloudflare Pages

Latest commit:	b2fda42
Status:	✅  Deploy successful!
Preview URL:	https://88f586b4.vuefes-2024-designsystem.pages.dev
Branch Preview URL:	https://fix-resize-images.vuefes-2024-designsystem.pages.dev

View logs

[kazupon]

@yamageji
ありがとうございます！
ロードされる画像は1MB以下に抑えられていることを確認しました！

サイトのトップあたりは load="eager" にしておいたほうがいいかもしれません。
私の環境ではアップロードしたようにページスクロールしたときにロード中になってしまって画像が見えない状況になっています。

vuefes-lazy-issue.mp4

[kazupon]

lighthouse で測ってみたんですが、パフォーマンスの改善はしているんですが、SEOが点数が落ちていたりと逆に悪くなっていますね... 何だろう...

一応現状デプロイされているときに測定(Before)と、このPRの内容で測定(After)の点数貼っておきますね。

before

after

[kazupon]

アバター以外の画像、つまりVue Fes 関連の画像、もっと画像サイズ最適化して減らしてもいいかもしれない。
自分の環境だと、ロード10秒ぐらいかかるときがある。

それか、時間かかっている画像、もしかして netlify の静的ファイル配信が効かないところから配信している？
例: https://deploy-preview-357--vuefes-2024.netlify.app/2024/ticket/ippan-party.png

[yamageji]

SEOのところは、プレビュードメインのためかと思いました 🤔
こちら本番デプロイされてから再度確認してみます！

画像最適化に関しては、もう少しみてみます 👀

[yamageji]

Nuxt Imageを使用して全体的に画像サイズを抑えました。

また、本番デプロイとプレビューでスコアに差がありそうでしたので、比較対象を前回のプレビューとしました。
before：https://deploy-preview-356--vuefes-2024.netlify.app/2024/
after：https://deploy-preview-357--vuefes-2024.netlify.app/2024/

	before	after
SP
PC

メモ

• SEOのスコアはプレビューのドメインが原因と思われます。
• 個人スポンサーの元画像が粗いので、きれいな画像があれば差し替えたいです。

[jiyuujin]

ネームカード、個人スポンサーの差込画像のサイズが小さくなっている気がします
（環境: macOS 15 / Chrome 129

[yamageji]

@jiyuujin
ありがとうございます！　修正しました。85d4066
ついでに他のスタイル崩れも修正しています。 85ed58b

[jiyuujin]

LGTM

[kazupon]

@yamageji
ありがとうございます！自分もパフォーマンス速くなっていることを確認しました！素晴らしいです！