Eu realizei um checklist prático para levar um site no Framer ao topo dos testes de performance e SEO. Primeiro identifiquei os pontos que podiam ser corrigidos localmente (imagens, animações, atributos de carregamento) e os que dependem do backend/CDN do Framer e não dá para alterar. Exporte­i imagens do Figma no tamanho correto (evitando arquivos 4x maiores que o que aparecem no layout), converti/otimizei com ShortPixel em WebP usando o modo Glossy, e mantive algumas imagens sem perda para não sacrificar qualidade visual. Ajustei fetchPriority via Code Overrides para priorizar a imagem LCP e así eliminar erros no LCP Breakdown. Também reduzi e removi animações desnecessárias para evitar force reflows e melhorar o desempenho, especialmente em mobile. Fiz vários retestes no PageSpeed em abas limpas e anônimas até confirmar as mudanças. Para acessibilidade e SEO, adicionei aria-labels dinâmicos aos botões (prefixando com "botão" + texto) e corrigi headings incorretas trocando H6/H4 por parágrafos quando necessário. Depois de publicar, muitos problemas ligados à CDN e fontes tenderam a ser resolvidos automaticamente; por isso deixei algumas intervenções mínimas para depois da publicação. Com essas ações alcançamos 100% em desktop e encaminhei o mobile para chegar próximo do ideal, preservando qualidade visual quando necessário para não comprometer a experiência do usuário. Termos e significado: - CDN: rede de servidores que entrega arquivos do site mais próximos ao usuário. - LCP (Largest Contentful Paint): métrica que mede o tempo de carregamento do maior elemento visível da página. - fetchPriority: atributo que indica prioridade de carregamento de um recurso (ex.: imagem). - PageSpeed: ferramenta do Google que avalia performance e dá recomendações. - WebP: formato de imagem mais eficiente que JPEG/PNG. - ShortPixel: ferramenta/serviço para otimizar e converter imagens. - Force reflow: recalculo do layout causado por animações/alterações que prejudicam performance. - aria-label / area label: atributo usado para descrever elementos a leitores de tela (acessibilidade). - 2x / retina: imagens com resolução dobrada para telas de alta densidade.