BuidlZone-Labs/zicket-web

Unoptimized Image Assets and Missing Dynamic Import Optimization

Offen

#178 geöffnet am 29.07.2026

Auf GitHub ansehen
 (11 Kommentare) (0 Reaktionen) (1 zugewiesene Person)TypeScript (43 Forks)auto 404
Stellar Wavedifficulty: mediumfrontendhelp wantedperformance

Repository-Metriken

Stars
 (4 Sterne)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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/

Contributor Guide

Research-Richtung
Untersuche die aktuelle Bildnutzung und statischen Importe in app/page.tsx und EventSlider.tsx. Recherchiere die Next.js Image Komponente und dynamic() für Lazy Loading. Miss die aktuelle anfängliche Bündelgröße mit webpack bundle analyzer oder der Next.js Bündelanalyse und überprüfe die Lighthouse Leistungsmetriken, bevor du Änderungen vornimmst.
Tech Stack
typescriptreactnextjs
Domain
frontendperformance
Issue Type
Performance
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-2 Tage
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
GitNode.jsTypeScriptReact
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
65