Ótimo post!! Me tira uma dúvida, se não for muito: tenho buscado aprender a prog · eidoc

Ótimo post!! Me tira uma dúvida, se não for muito: tenho buscado aprender a programar recentemente e acabei notando que algumas aplicações em HTML com CSS acabam demorando mais para carregar, como por exemplo: https://www.blog.eidoc.com.br/post/calculadora-de-minimental

Esse é, sem sombra de dúvida, um dos melhores posts que tenho no meu site (em questão de SEO), porém percebo que muitos usuários desistem de acessar devido ao tempo de carregamento do código.

Como uso wix, a opção mais simples que conheço de implementação deste código é através do HTML embutido (Embbed HTML) disponível na plataforma, mas esta ainda é bastante lenta.

Saberia me dizer se existe alguma outra forma de fazer este carregamento da melhor forma possível? Sem atrasar tanto ou sem dar esse delay de quase 5 segundos em alguns dispositivos?

Desde já agradeço - e aproveito para mais uma vez reforçar a qualidade deste conteúdo.

Obrigado pelo elogio e pela sua pergunta! Eu rodei o Chrome Lighthouse para analisar o desempenho da página que você mencionou e consegui algumas ideias que podem ajudar a melhorar o tempo de carregamento, mesmo no Wix. Aqui vão algumas sugestões:

1. Otimize as Imagens

Imagens são responsáveis por boa parte do atraso no carregamento:

Use formatos mais eficientes, como WebP, que têm tamanhos menores sem perda significativa de qualidade.
Ative o lazy-loading para carregar imagens apenas quando forem exibidas na tela. No Wix, você pode ajustar isso diretamente ou certificar-se de que imagens no HTML embutido incluem loading="lazy".

2. Minifique o Código HTML e CSS Embutidos

O HTML embutido na plataforma pode ser mais pesado do que o necessário:

Antes de adicionar o código ao Wix, use ferramentas como HTMLMinifier para compactar e reduzir espaços ou comentários desnecessários.
Faça o mesmo com CSS e JavaScript utilizando Terser ou CSSNano.

3. Utilize uma CDN para Recursos Externos

Se o HTML embutido inclui links para arquivos como imagens, CSS ou JavaScript:

Hospede esses recursos em uma CDN confiável, como Cloudflare ou AWS CloudFront, para reduzir a latência.

4. Prefira Carregar CSS Externo

Se possível, em vez de colocar o CSS diretamente no código HTML, hospede-o externamente e faça a referência:

<link rel="stylesheet" href="https://seu-cdn.com/styles.css">

Isso permite que os navegadores armazenem em cache o arquivo CSS para visitas futuras.

5. Reduza Dependências de Terceiros

Scripts de terceiros, como widgets ou rastreadores, podem causar atrasos significativos:

Use apenas os scripts estritamente necessários e certifique-se de carregá-los de forma assíncrona (async) ou diferida (defer).

6. Configure Cache

Certifique-se de que o Wix está configurando corretamente o cache dos recursos estáticos (como imagens, CSS e JS):

Acesse as configurações de SEO do Wix para verificar e habilitar o cache no navegador.

7. Considere Carregamento Progressivo

Se o conteúdo da calculadora for mais pesado, implemente um skeleton screen ou pré-carregador para melhorar a percepção de velocidade enquanto os dados são carregados.

Alternativa Fora do Wix

Se o Wix estiver limitando o desempenho, você pode criar uma página externa dedicada para o conteúdo da calculadora usando serviços como Netlify ou Vercel. Esses serviços permitem hospedar páginas HTML otimizadas com alta performance.

As sugestões acima foram baseadas nos dados do Chrome Lighthouse, que ajudaram a identificar os pontos críticos de desempenho. Qualquer dúvida ou se precisar de mais detalhes, estou à disposição! 😊