Como adicionar fallback src ao elemento picture
Preserve uma fonte de imagem padrão para navegadores e rastreadores que não usem as fontes condicionais.
Ler guiaBIBLIOTECA · Desempenho
Diagnóstico de desempenho de sites
Antes de alterar o site, reproduza o problema e observe em que etapa aparece. Diagnósticos ajudam a separar sintomas e escolher uma correção que possa ser conferida.
ESCOLHA SEU PRÓXIMO PASSO
Guias de desempenho.
Como testar o espaçamento de texto de uma página
Verifique se mudanças de espaçamento não sobrepõem ou cortam o conteúdo.
Ler guiaQuando usar lazy loading em imagens do site
Adie mídia distante da primeira tela e evite atrasar o elemento principal do carregamento.
Ler guiaComo automatizar a otimização de imagens na publicação
Inclua conversão e geração de tamanhos como etapa repetível do fluxo de conteúdo.
Ler guiaComo avaliar se um site precisa de CDN
Avalie distância, conteúdo estático, tráfego, cache e custos para saber se uma CDN atende a um problema medido.
Ler guiaComo carregar recursos sob demanda sem prejudicar interações
Evite baixar componentes e bibliotecas que o visitante não usa nessa página.
Ler guiaLargest Contentful Paint: como medir e investigar o LCP
Identifique o maior conteúdo visível, meça o LCP em campo e laboratório e investigue servidor, descoberta do recurso e renderização. Compare condições equivalentes antes e depois.
Ler guiaCache de páginas no WordPress: configuração e verificação
Entenda quando o cache de página ajuda, escolha uma configuração compatível com a hospedagem e teste páginas dinâmicas, usuários conectados, formulários e atualizações.
Ler guiaComo configurar e limpar o cache do Cloudflare
Defina regras de cache compatíveis com o site e purgue apenas o conteúdo necessário, verificando HTML, mídia e recursos atualizados.
Ler guiaComo configurar o Cloudflare e verificar DNS e HTTPS
Revise registros DNS, proxy, SSL/TLS e cache sem afetar email, painel administrativo ou conteúdo dinâmico. Teste cada host após a mudança.
Ler guiaQuery Monitor: como investigar consultas lentas no WordPress
Use o Query Monitor em ambiente controlado para encontrar consultas e componentes associados à lentidão. Restrinja o acesso aos diagnósticos e confirme cada hipótese antes de otimizar.
Ler guiaComo interpretar um relatório do PageSpeed Insights
Leia separadamente dados de campo e diagnóstico de laboratório, localize métricas e oportunidades relevantes e priorize uma hipótese que possa ser testada.
Ler guiaInteraction to Next Paint: como diagnosticar o INP do site
Investigue interações lentas observando entrada, processamento e apresentação visual. Reproduza tarefas representativas e diferencie uma medição local dos dados de usuários reais.
Ler guiaComo monitorar Core Web Vitals após mudanças no site
Registre as páginas e mudanças importantes, combine monitoramento de campo e testes reproduzíveis e investigue regressões depois de atualizações ou publicação.
Ler guiaCDN de imagens ou otimização no build: como escolher
Compare transformação em runtime com geração de arquivos otimizados durante o build.
Ler guiaLighthouse e dados de campo: quando usar cada um
Use laboratório para reproduzir e dados de campo para entender experiências reais.
Ler guiaComo comprimir imagens sem prejudicar o conteúdo
Reduza bytes com uma rotina de comparação visual para cada tipo de imagem.
Ler guiaComo validar uma otimização de Core Web Vitals após publicar
Compare antes e depois com mesmo escopo e monitore se o ganho de laboratório se confirma em campo.
Ler guiaComo configurar sizes para imagens responsivas
Descreva ao navegador quanto espaço a imagem ocupa antes que o arquivo seja escolhido.
Ler guiaComo corrigir mudanças de layout medidas pelo CLS
Localize elementos que deslocam o conteúdo durante a leitura e escolha correções como reservar espaço e ajustar fontes com base em medições.
Ler guiaComo identificar CSS que bloqueia a renderização
Analise a cadeia de recursos que antecede a primeira renderização e reduza estilos críticos com testes visuais e responsivos.
Ler guiaComo reservar espaço para imagens e reduzir CLS
Informe as dimensões da mídia para o navegador não deslocar o conteúdo quando ela carregar.
Ler guiaPor que CLS de campo difere do Lighthouse
Deslocamentos depois do carregamento inicial podem aparecer para usuários e escapar ao teste rápido.
Ler guiaComo investigar lentidão no painel do WordPress
Reproduza a lentidão por tarefa e avalie plugins, consultas, servidor e tarefas em segundo plano antes de trocar de hospedagem.
Ler guiaComo diagnosticar um site lento
Reproduza a lentidão e investigue servidor, recursos, scripts e interação antes de escolher uma otimização.
Ler guiaTBT e INP: como interpretar sem confundir as métricas
TBT é diagnóstico de laboratório; INP mede responsividade observada durante interações reais.
Ler guiaAVIF, WebP ou JPEG: como comparar formatos de foto
Avalie compressão e aparência no conteúdo real antes de trocar o formato das fotos.
Ler guiaComo escolher formato de imagem para um site
Compare tipo de conteúdo, transparência, qualidade percebida e suporte antes de converter arquivos.
Ler guiaQuando usar picture para selecionar outra imagem
Use `<picture>` quando a composição ou o recorte precisa mudar entre contextos, não apenas o tamanho.
Ler guiaQuando usar SVG em vez de imagem raster
Use vetor para logos e gráficos de formas; mantenha raster para conteúdo fotográfico quando fizer sentido.
Ler guiaComo evitar excesso de preload em uma página
Priorize poucos recursos comprovadamente críticos, não toda biblioteca ou mídia acima da dobra.
Ler guiaComo encontrar o elemento LCP no Lighthouse
Descubra qual conteúdo grande foi pintado por último antes de decidir o que otimizar.
Ler guiaComo encontrar imagens pesadas em uma página
Identifique arquivos que consomem mais transferência antes de alterar o design ou instalar ferramentas.
Ler guiaComo medir o tempo de resposta do servidor
Separe DNS, conexão, TLS, espera pelo primeiro byte e download para localizar atrasos entre navegador e servidor.
Ler guiaComo otimizar o carregamento de fontes
Reduza fontes e variantes dispensáveis, escolha um fallback compatível e use preload somente quando medições mostrarem que ajuda.
Ler guiaComo revisar fontes web que atrasam texto visível
O texto pode ser elemento LCP; revise download, prioridade e estratégia de fallback da fonte.
Ler guiaComo planejar art direction de imagens para mobile
Mude o enquadramento em telas menores quando a composição desktop não comunica bem o conteúdo.
Ler guiaComo decidir se uma fonte deve receber preload
Pré-carregue somente a fonte usada cedo e que demonstrou atraso no recurso de texto principal.
Ler guiaComo pré-carregar a imagem LCP sem competir com outros recursos
Use preload apenas quando a imagem essencial é descoberta tarde pelo navegador.
Ler guiaComo priorizar o recurso que causa LCP lento
Descubra se o atraso está no servidor, descoberta do recurso, transferência ou renderização.
Ler guiaComo redimensionar imagens para o tamanho de exibição
Evite baixar uma imagem muito maior do que o espaço que ela ocupa na página.
Ler guiaComo reduzir animações disparadas por interação
Evite movimento inesperado em transições acionadas por clique ou rolagem.
Ler guiaComo investigar tarefas longas que atrasam cliques
Inspecione trabalho de JavaScript e divida operações que deixam a interface sem resposta.
Ler guiaComo reduzir CLS causado pela troca de fonte
Investigue deslocamentos quando fontes e conteúdo final entram depois da renderização inicial.
Ler guiaComo reduzir downloads que não contribuem para a página
Remova recursos e scripts sem uso na rota para liberar rede e processamento.
Ler guiaComo reduzir o impacto de scripts de terceiros
Inventarie tags, iframes e widgets externos, confirme seu valor e adie ou remova o que não é necessário.
Ler guiaComo reduzir JavaScript desnecessário
Use medições para localizar código que a página não precisa e reduza carregamento sem remover interações ou recursos importantes.
Ler guiaComo conferir contraste de botões, bordas e estados
Revise controles e indicadores além do contraste do texto corrido.
Ler guiaComo revisar imagens visíveis na primeira tela
Priorize clareza e carregamento da mídia principal sem transferir imagens desnecessárias no início.
Ler guiaComo testar qual imagem responsiva o navegador baixou
Confira no painel de rede qual candidato foi requisitado em cada viewport e densidade.
Ler guiaComo testar se o conteúdo reorganiza com zoom
Confira se a página continua utilizável em coluna estreita sem rolagem horizontal geral.
Ler guiaComo verificar se texto ampliado continua utilizável
Teste aumento do texto sem sobreposição, corte ou perda de controles.
Ler guiaComo usar uma CDN para transformar imagens do site
Avalie se uma CDN de imagens resolve a entrega de tamanhos e formatos sem perder controle dos ativos.
Ler guiaComo manter texto legível enquanto uma webfont carrega
Escolha comportamento da fonte que preserve leitura e limite mudanças bruscas de layout.
Ler guiaComo usar srcset com descritores de largura
Ofereça tamanhos diferentes para que o navegador selecione um arquivo adequado à tela e ao layout.
Ler guiaComo servir imagens nítidas em telas de alta densidade
Forneça versões adequadas a telas de 2x sem enviar arquivos enormes a todo dispositivo.
Ler guiaComo usar TTFB e FCP para investigar LCP alto
Localize se o atraso está antes dos primeiros bytes, do conteúdo inicial ou do elemento principal.
Ler guiaComo validar lazy loading em rede lenta
Teste mídia próxima à viewport e confirme que aparece a tempo sem carregar tudo no início.
Ler guiaPRÓXIMO PASSO
Conhecer serviço Menos espera, com melhorias que podem ser medidas.
Diagnóstico e melhorias de carregamento e interação com medição antes e depois. Conheça o escopo da otimização de desempenho e seus limites.
PRÓXIMO PASSO
Conhecer serviço Criação de sites profissionais em Brasília
Criação de sites profissionais em Brasília para apresentar sua empresa com clareza, confiança e um caminho simples para o cliente entrar em contato.
PRÓXIMO PASSO
Conhecer serviço Cuidar do site faz parte da operação.
Defina uma rotina de manutenção com responsabilidades, testes e registro de mudanças. Conheça o que avaliar antes de contratar suporte para seu site.