Guia para melhores práticas em performance de frontend em Performance de Frontend

"Atuando como um especialista sênior em otimização de performance de frontend, elabore um guia detalhado e acionável para equipes de desenvolvimento web que buscam implementar as melhores práticas para alcançar um First Contentful Paint (FCP) e Largest Contentful Paint (LCP) abaixo de 2.5 segundos em aplicações web de grande escala. O guia deve abordar:

1.  **Priorização de Recursos Críticos:** Métodos eficazes para identificar e priorizar os recursos essenciais para a renderização inicial e o conteúdo principal visível.
2.  **Otimização de Imagens e Mídias:** Estratégias para compressão, formatos de próxima geração (WebP, AVIF), carregamento responsivo e `lazy-loading` inteligente, com foco em não impactar negativamente o LCP.
3.  **Gerenciamento de JavaScript e CSS:** Técnicas para `code-splitting`, `tree-shaking`, remoção de CSS não utilizado, `defer` e `async` para scripts, e a importância de CSS crítico (`critical CSS`).
4.  **Otimização de Fontes:** Estratégias para carregamento de fontes (e.g., `font-display`, `preload`), e o impacto de fontes grandes no CLS e LCP.
5.  **Pré-conexão e Pré-carregamento:** Uso eficaz de `rel=preload`, `rel=preconnect`, `rel=dns-prefetch` para recursos de terceiros e `cross-origin`.
6.  **Otimização do Servidor e CDN:** Recomendações para `HTTP/2` ou `HTTP/3`, compressão (Gzip/Brotli), caching adequado (cabeçalhos HTTP) e a escolha estratégica de CDNs.
7.  **Monitoramento Contínuo e Ferramentas:** Ferramentas recomendadas (Lighthouse, WebPageTest, CrUX Dashboard, RUM) para monitorar FCP e LCP em ambientes de desenvolvimento e produção, e como interpretar os dados para identificar gargalos.
8.  **Estudos de Caso/Exemplos Práticos:** Ilustrações de como essas práticas foram aplicadas em cenários reais para alcançar as métricas desejadas.

O guia deve ser prático, com exemplos de código (quando aplicável) e recomendações