search

rafael-ventura / cumes-brasil

Climbing Routes Catalog App
http://cumesbrasil.com.br
4 stars 3 forks source link

Tela Inicial está demorando muito pára carregar dados e fotos. #217

Open rafael-ventura opened 1 day ago

rafael-ventura commented 1 day ago

🐛 Tela Inicial demora para carregar dados e fotos

Objetivo

Melhorar o desempenho da tela inicial, reduzindo os tempos de carregamento identificados no relatório Lighthouse e otimizando a renderização de conteúdo e imagens.

Contexto

A análise do Lighthouse apontou as seguintes áreas de melhoria:

  1. Carregamento Lento do Maior Elemento de Conteúdo (LCP):

    • O tempo para carregar a imagem principal é de 7,1 segundos, afetando a métrica de Largest Contentful Paint.
    • Imagens estão sendo carregadas lentamente e não utilizam lazy loading ou formatos modernos como WebP.

  2. Mudanças no Layout (CLS):

    • O Cumulative Layout Shift foi medido em 0,137, indicando que elementos da tela estão mudando durante o carregamento, prejudicando a experiência do usuário.

  3. Recursos Não Otimizados:

    • Identificado CSS não usado (31 KiB) e JavaScript não usado (137 KiB).
    • Imagens sem tamanho adequado (55 KiB) e sem formatos modernos (52 KiB).
    • Recursos estáticos não possuem política de cache eficiente, resultando em 19 solicitações desnecessárias.

  4. Encadeamento de Requisições e Bloqueios:

    • O encadeamento de 15 solicitações críticas impacta o tempo total de carregamento.
    • O uso de terceiros bloqueia a execução por 50 ms.

  5. Carregamento de Dados Gradual:

    • A tela inicial exibe conteúdo de forma gradual, com dados e contadores carregados após a exibição inicial, aumentando o tempo de percepção do carregamento.

Soluções Esperadas

  1. Otimização do Carregamento de Imagens:

    • Implementar lazy loading para imagens com placeholders.
    • Adotar formatos modernos (WebP) para reduzir o tamanho das imagens.
    • Definir tamanhos fixos para evitar mudanças no layout.

  2. Consolidação de Recursos:

    • Reduzir CSS e JavaScript não utilizados.
    • Configurar cache eficiente para recursos estáticos.

  3. Melhoria no Carregamento de Dados:

    • Consolidar consultas ao backend em um único endpoint para retornar todos os dados necessários de uma vez.
    • Garantir que os dados sejam pré-carregados antes da exibição da tela inicial.

  4. Minimização do Encadeamento de Requisições:

    • Priorizar carregamento de recursos críticos acima da dobra (above the fold).
    • Revisar dependências de terceiros para reduzir bloqueios.

Passos para Implementação

Backend

  1. Criar um endpoint consolidado que retorne:
    • Dados para os contadores (vias por bairro, grau e exposição).
    • URLs otimizadas para as imagens principais.
  2. Adicionar suporte ao formato WebP no armazenamento de imagens.

Frontend

  1. Atualizar o HomeService para usar o novo endpoint consolidado.
  2. Implementar lazy loading para imagens usando a propriedade loading="lazy".
  3. Ajustar a lógica de renderização para garantir que:
    • Os placeholders sejam exibidos até que os dados e imagens sejam carregados.
    • Elementos tenham tamanhos fixos para evitar mudanças no layout.
  4. Substituir imagens por versões em WebP com fallback para PNG/JPEG.

Recursos Estáticos

  1. Configurar cache de longo prazo para CSS, JavaScript e imagens.
  2. Remover CSS e JavaScript não utilizados, minimizando os arquivos.

Critérios de Aceitação

Etiquetas

Prioridade

Notas Adicionais