BuidlZone-Labs/zicket-web

Unoptimized Image Assets and Missing Dynamic Import Optimization

オープン

#178 opened on 2026/07/29

GitHub で見る
 (11 件のコメント) (0 件のリアクション) (1 人の担当者)TypeScript (43 件のフォーク)auto 404
Stellar Wavedifficulty: mediumfrontendhelp wantedperformance

Repository metrics

Stars
 (4 個のスター)
PR merge metrics
 (PR metrics pending)

説明

Category

Performance

Priority

Medium

Description

Large PNG assets in /public/images/ and /public/assets/ are loaded directly without WebP/AVIF format conversions. Swiper JS and heavy UI components are bundled statically into initial route chunks.

Proposed Solution

  1. Convert static PNG assets to compressed WebP/AVIF images.
  2. Use Next.js dynamic() lazy loading for heavy client components (EventSlider, TipTap editor, QRCode modals).

Acceptance Criteria

  • Images optimized and served in modern formats.
  • Initial bundle chunk size reduced.
  • Lighthouse Performance score improved.

Files

  • app/page.tsx
  • app/components/EventSlider.tsx
  • public/images/

コントリビューターガイド

調査方針
app/page.tsx と EventSlider.tsx での現在の画像使用と静的インポートを調べてください。Next.js の Image コンポーネントと dynamic() を使った遅延読み込みについて調査してください。webpack bundle analyzer や Next.js のバンドル分析を使用して現在の初期バンドルサイズを測定し、変更を行う前に Lighthouse のパフォーマンス指標を確認してください。
技術スタック
typescriptreactnextjs
領域
frontendperformance
Issue 種別
パフォーマンス
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
2
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-2日
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
アクティブ
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
明確
前提条件
GitNode.jsTypeScriptReact
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
65