BuidlZone-Labs/zicket-web

Unoptimized Image Assets and Missing Dynamic Import Optimization

Aberta

#178 aberto em 29 de jul. de 2026

Ver no GitHub
 (11 comentários) (0 reação) (1 responsável)TypeScript (43 forks)auto 404
Stellar Wavedifficulty: mediumfrontendhelp wantedperformance

Métricas do repositório

Stars
 (4 estrelas)
Métricas de merge de PR
 (Métricas PR pendentes)

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/

Guia do colaborador

Direção de pesquisa
Examine o uso atual de imagens e importações estáticas em app/page.tsx e EventSlider.tsx. Estude o componente Image do Next.js e dynamic() para carregamento preguiçoso. Meça o tamanho atual do bundle inicial usando webpack bundle analyzer ou a análise de bundle do Next.js e verifique as métricas de desempenho do Lighthouse antes de fazer alterações.
Pilha de tecnologia
typescriptreactnextjs
Domain
frontendperformance
Tipo Issue
Performance
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-2 dias
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
GitNode.jsTypeScriptReact
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
65