Texto traduzido pela IA.

Medindo o Desempenho do Site - PerformanceObserver

Idioma de escrita: Coreana
•
País de referência: Todos os países
•
TI

뚠뚠멍

Há 4 dias

Resumo do texto pela IA do durumis

Utilizar ferramentas de medição de desempenho da Web (PageSpeed Insights, Lighthouse) para melhorar o desempenho do site é benéfico para o ranqueamento nos mecanismos de busca, sendo as métricas do Web Core Vitals importantes.
Para melhorar métricas como CLS, LCP, FCP e FID, você pode aplicar UI Skeleton, otimização de imagens, remoção de elementos que bloqueiam o renderização, otimização de fontes da Web, processamento assíncrono de JavaScript, etc.
Apresentamos os métodos de melhoria de cada métrica, bem como várias tecnologias para melhorar o desempenho da Web (compressão gzip, Web Workers, etc.), e pretendemos aprofundar o assunto no futuro.

Através do site fornecido pelo Google

é possível medir o desempenho da web facilmente.

https://pagespeed.web.dev/
É possível inserir a URL para medição ou instalar o Lighthouse como uma extensão do Chrome para realizar a medição.

PageSpeed Insights

pagespeed.web.dev

O que é bom em melhorar os indicadores?

Pode ser exibido com mais destaque nos mecanismos de pesquisa. O SEO utiliza muito o renderização do lado do servidor, mas

se os indicadores de desempenho acima forem baixos, seu efeito diminuirá drasticamente.

Como melhorar?

O site web.dev fornece uma explicação detalhada de como melhorar cada indicador.

Em particular, três indicadores representam uma grande parte da pontuação. (Web Core Vitals)

Gostaria de registrar as tentativas de melhorar os indicadores.

Como medir localmente?


export default () => {
if (process.client && 'PerformanceObserver' in window) {
let cumulativeLayoutShiftScore = 0;
let largestContentfulPaint = 0;
let firstInputDelay = 0;
let firstContentfulPaint = 0;

// CLS
const clsObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach((entry) => {
    if (!entry.hadRecentInput) {
      cumulativeLayoutShiftScore += entry.value;
    }
  });
});

// LCP
const lcpObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  largestContentfulPaint = lastEntry.startTime;
});

// FID
const fidObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const firstEntry = entries[0];
  firstInputDelay = firstEntry.processingStart - firstEntry.startTime;
});

// FCP
const fcpObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const firstEntry = entries[0];
  firstContentfulPaint = firstEntry.startTime;
});

clsObserver.observe({ type: 'layout-shift', buffered: true });
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });
fidObserver.observe({ type: 'first-input', buffered: true });
fcpObserver.observe({ type: 'paint', buffered: true });

window.addEventListener('onload', () => {
  console.log('Final CLS Score:', cumulativeLayoutShiftScore);
  console.log('LCP:', largestContentfulPaint);
  console.log('FID:', firstInputDelay);
  console.log('FCP:', firstContentfulPaint);
});
}
};

Insira o código acima. No caso do Nuxt, coloque-o nos plugins e verifique o console log.

Cumulative Layout Shift (CLS)

É uma medida da mudança de layout durante a renderização.

Por exemplo, suponha que haja uma página que renderiza uma imagem de 400x400 após receber a URL da imagem da resposta da API.

A posição de um determinado layout será deslocada em 400px devido à renderização da imagem.

Isso é um movimento inesperado para o usuário, o que não é bom para a experiência do usuário, e também afeta indiretamente o navegador ao renderizar a tela.

negativamente.

Existem duas maneiras fáceis de melhorar.

1. Aplicar esqueleto da IU

- A maioria dos sites desenha um esqueleto adequado ao tamanho da imagem ou componente. Considere isso ao desenvolver a tela. No Vue, use v-if e v-else para desenhar o esqueleto correspondente a cada elemento.

2. Reservar altura

- Se muitos estilos forem incluídos no esqueleto, a manutenção se tornará complexa e pode ser contraproducente. Apenas definir o min-height do elemento a ser renderizado pode ser eficaz.

- No caso de sites responsivos, em que o tamanho da imagem varia de acordo com o dispositivo, é difícil fixar a altura. Nesse caso, você pode usar o menor dispositivo como base ou usar vh ou vw.

3. Especificar largura e altura para elementos de imagem

- A largura e a altura podem ser inseridas no elemento de imagem da seguinte forma.

Mesmo que o tamanho real da imagem não seja 400x400, informe ao navegador o tamanho esperado da imagem.

4. Usar font-display: swap para evitar alterações de layout devido a fontes da web

- Isso evita o deslocamento do layout, exibindo uma fonte alternativa.

Largest Contentful Paint(LCP)

É o tempo que leva para renderizar o elemento que ocupa a maior parte da tela. Normalmente é uma imagem, então intuitivamente, você precisa acelerar a velocidade de carregamento.

1. Reduzir o tamanho da imagem.

- Verifique se o tamanho da imagem não é muito maior que o tamanho de renderização.

- Otimize a renderização da imagem usando extensões como webp. O WebP usa compressão com perdas, o que resulta em um tamanho de arquivo cerca de 30% menor do que o formato JPEG, e usa compressão sem perdas, o que resulta em um tamanho de arquivo cerca de 20% menor do que o PNG.

- O carregamento lento, que carrega as imagens de acordo com a posição de rolagem, também pode ser considerado.

2. Usar cache ou CDN.

3. Remover elementos que bloqueiam a renderização.

- Como a maioria dos indicadores de medição é afetada, remova-os. O navegador busca primeiro os scripts na tag head antes de renderizar a tela, então verifique se os scripts na tag head (geralmente scripts externos) devem ser renderizados primeiro. Ao usar as tags async e defer, você pode gerenciá-los facilmente.

* Escreverei outro artigo sobre os atributos dos scripts na tag head mais tarde.

4. Minimizar o tamanho do pacote.

- Independentemente da velocidade de renderização da imagem, se a transferência do servidor for lenta, você precisará melhorar isso.

Se você estiver usando um servidor proxy como o Nginx, poderá usar a compressão gzip.

* Escreverei outro artigo sobre a configuração do Nginx mais tarde.

First Contentful Paint(FCP)

Refere-se ao momento em que o primeiro conteúdo da página é renderizado.

1. Da mesma forma, remova os elementos que bloqueiam a renderização.

2. Minimizar o tamanho do HTML.

- Se você envolver indiscriminadamente em tags div div, uma árvore muito aninhada será criada e o tamanho do arquivo aumentará.

3. Fontes da web externas podem ser um problema. Use ativamente font-display: swap; para renderizar a fonte padrão primeiro.

First Input Delay(FID)

Refere-se ao tempo que o navegador leva para processar a primeira entrada do usuário (clique, rolagem etc.) em uma página. Às vezes, quando você clica em um botão, ele não funciona. Na verdade, ele não está com problemas, mas pode estar esperando a resposta da API.

1. Utilize bem a assincronia para que a thread principal do JavaScript não fique presa em tarefas pesadas.

2. Você pode usar um worker da Web para executar outra tarefa separada da thread principal.

* Escreverei outro artigo sobre o worker da Web mais tarde.

Devido ao limite de número de caracteres, vou terminar por aqui.

Assunto

#Web Core Vitals
#Medição de Desempenho da Web
#PerformanceObserver
#Otimização de Layout
#Velocidade de Carregamento

Resumo do texto pela IA do durumis

Utilizar ferramentas de medição de desempenho da Web (PageSpeed Insights, Lighthouse) para melhorar o desempenho do site é benéfico para o ranqueamento nos mecanismos de busca, sendo as métricas do Web Core Vitals importantes.
Para melhorar métricas como CLS, LCP, FCP e FID, você pode aplicar UI Skeleton, otimização de imagens, remoção de elementos que bloqueiam o renderização, otimização de fontes da Web, processamento assíncrono de JavaScript, etc.
Apresentamos os métodos de melhoria de cada métrica, bem como várias tecnologias para melhorar o desempenho da Web (compressão gzip, Web Workers, etc.), e pretendemos aprofundar o assunto no futuro.