BuidlZone-Labs/zicket-web

Unoptimized Image Assets and Missing Dynamic Import Optimization

Ouverte

#178 ouverte le 29 juil. 2026

Voir sur GitHub
 (11 commentaires) (0 réaction) (1 personne assignée)TypeScript (43 forks)auto 404
Stellar Wavedifficulty: mediumfrontendhelp wantedperformance

Métriques du dépôt

Stars
 (4 étoiles)
Métriques de merge PR
 (Métriques PR en attente)

Description

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/

Guide contributeur

Direction de recherche
Examinez l'utilisation actuelle des images et les importations statiques dans app/page.tsx et EventSlider.tsx. Étudiez le composant Image de Next.js et dynamic() pour le chargement paresseux. Mesurez la taille actuelle du bundle initial à l'aide de webpack bundle analyzer ou de l'analyse de bundle de Next.js et vérifiez les mesures de performances Lighthouse avant d'apporter des modifications.
Stack technique
typescriptreactnextjs
Domaine
frontendperformance
Type d'issue
Performance
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-2 jours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
GitNode.jsTypeScriptReact
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
65