Como testar otimização e performance em performance de frontend em Performance de Frontend

"Assuma o papel de um especialista em otimização de performance de frontend com foco em Core Web Vitals. Você foi incumbido de analisar um site e identificar os gargalos mais críticos que afetam o Largest Contentful Paint (LCP) e o Cumulative Layout Shift (CLS) em dispositivos móveis.

Com base nessa premissa, gere uma lista de 5 a 7 recomendações **práticas e acionáveis**, priorizadas por impacto esperado, para otimizar o LCP e o CLS de uma página web complexa que contém:

1.  Múltiplas imagens de alta resolução (incluindo hero images).
2.  Um carrossel de slides com imagens e texto.
3.  Anúncios de terceiros carregados via JavaScript.
4.  Fontes personalizadas carregadas via `@font-face`.
5.  Componentes interativos (botões, formulários) que são hidratados no cliente.

Para cada recomendação, inclua:

*   **O problema específico** que ela aborda (ex: "Imagens não otimizadas que atrasam o carregamento do LCP").
*   **A solução técnica detalhada** (ex: "Utilizar `srcset` e `sizes` para imagens responsivas, combinadas com carregamento `lazy` para imagens abaixo da dobra.").
*   **Uma estimativa do impacto esperado** na métrica (ex: "Redução potencial de 500ms no LCP e minimização de shifts visuais durante o carregamento de imagens.").
*   **Considerações adicionais ou ferramentas** que podem auxiliar na implementação (ex: "Ferramentas como o Lighthouse e o WebPageTest podem ser usadas para validar a implementação e medir o impacto.").

Seja criativo e detalhado nas soluções, focando em técnicas modernas e eficazes."