Parta dos dados de campo, não da sua máquina: descubra qual elemento é o elemento de LCP e quebre o tempo em time to first byte, atraso de carregamento do recurso, tempo de carregamento do recurso e atraso de renderização. Isso diz se o problema é resposta do servidor, descoberta tardia da imagem, o tamanho da imagem em si, ou a main thread. Depois limite CPU e rede localmente para um aparelho intermediário para conseguir reproduzir antes de mudar qualquer coisa.
Por que os entrevistadores perguntam isso
Isso testa disciplina de depuração diante de um relato vago. O entrevistador quer ver você medir antes de otimizar, conhecer as subpartes do LCP e lembrar que usuários reais estão em CPUs e redes mais lentas. Candidatos que sugerem de cara lazy loading em tudo ou adicionar uma CDN sem diagnosticar costumam piorar as coisas, principalmente ao aplicar lazy loading na própria imagem de destaque.
Como estruturar sua resposta
- Reproduza com limitação de aparelho e rede antes de tocar no código.
- Identifique o elemento de LCP e divida o tempo em suas quatro partes.
- Case cada parte com a correção típica dela.
- Verifique depois com dados de campo, não só com uma nota de laboratório.
Exemplo de resposta
Primeiro paro de confiar no meu notebook. Puxo os dados de campo para ver qual elemento é de fato o elemento de LCP e em quais páginas, e então reproduzo localmente com limitação de CPU e conexão lenta. Depois quebro o número, porque cada parte tem uma correção diferente. Se o time to first byte domina, é problema de servidor ou de cache e nenhum trabalho com imagem ajuda. Se há um atraso longo de carregamento, a imagem está sendo descoberta tarde, normalmente porque está definida no CSS ou é injetada por JavaScript, então coloco no HTML com fetchpriority high e faço preload. Se o tempo de carregamento domina, é o arquivo, então formato moderno, dimensões corretas e um srcset adequado. Se é atraso de renderização, a main thread está ocupada fazendo parse de scripts. Já peguei exatamente isso uma vez, em que a imagem de destaque tinha loading lazy, o que atrasava a única imagem que não pode ser atrasada. Remover aquilo e adicionar fetchpriority high levou o LCP de cerca de 4.8 segundos para 2.1 no celular limitado.
Vai encarar essa entrevista em breve? O GhostPilot escuta a sua chamada ao vivo, identifica a pergunta no instante em que ela é feita e coloca uma resposta estruturada na sua tela em tempo real. Teste na sua próxima entrevista simulada ou pegue um Session Pass de $29, sem assinatura, para a hora da verdade.
Veja como funcionaPerguntas de acompanhamento que você pode esperar
- Por que lazy loading pode piorar o LCP?
- Como você distingue aqui um problema do servidor de um do cliente?
- Quanto tempo você espera antes de acreditar que os dados de campo melhoraram?
Mais perguntas para Desenvolvedor Frontend
Seu entrevistador vai fazer a própria versão desta. Cole a descrição real da vaga no Question Predictor gratuito e receba as 20 perguntas que essa vaga tem mais chance de fazer, com o que cada uma está de fato sondando.
Prever minhas perguntas