Aprenda a identificar e corrigir trocas de layout.
A primeira parte deste artigo discute as ferramentas para depurar mudanças de layout, enquanto a segunda discute o processo de pensamento a ser usado ao identificar a causa de uma mudança de layout.
Ferramentas
API Layout Instability
A API Layout Instability é a mecanismo do navegador para medir e relatar mudanças de layout. Todas as ferramentas para a depuração de mudanças de layout, incluindo DevTools, são basicamente construídas com base na API Layout Instability. No entanto, usar a API de instabilidade de layout diretamente é uma ferramenta de depuração eficiente devido à flexibilidade que ela traz.
Uso
O mesmo snippet de código que a Cumulative Layout Shift (CLS) também pode servem para depurar trocas de layout. O snippet abaixo registra informações sobre layout muda para o console. Ao inspecionar esse registro, você terá sobre quando, onde e como a mudança de layout ocorreu.
let cls = 0;
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (!entry.hadRecentInput) {
cls += entry.value;
console.log('Current CLS value:', cls, entry);
}
}
}).observe({type: 'layout-shift', buffered: true});
Ao executar esse script, esteja ciente de que:
- A opção
buffered: true
indica que oPerformanceObserver
deve verificar a entrada de desempenho do navegador reserva para entradas de desempenho que foram criadas antes inicialização do sistema. Como resultado, oPerformanceObserver
informará o layout mudanças que aconteceram antes e depois da inicialização. Manter em mente ao inspecionar os registros do console. Um excesso inicial de mudanças de layout pode refletem uma lista de pendências na geração de relatórios, e não na ocorrência repentina de trocas de layout. - Para evitar impacto no desempenho, o
PerformanceObserver
aguarda até que o linha de execução está ociosa para informar mudanças de layout. Como resultado, dependendo de como estiver ocupada a linha de execução principal, pode haver um pequeno atraso entre o momento em que o layout mudança ocorre e quando ela é registrada no console. - Este script ignora as trocas de layout que ocorreram dentro de 500 ms da entrada do usuário portanto, não são contabilizados na CLS.
As informações sobre trocas de layout são relatadas usando uma combinação de duas APIs: a
LayoutShift
e
LayoutShiftAttribution
do Google Cloud. Cada uma dessas interfaces é explicada com mais detalhes no
nas seções a seguir.
LayoutShift
Cada mudança de layout é informada usando a interface LayoutShift
. O conteúdo do
uma entrada terá esta aparência:
duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798
A entrada acima indica uma mudança de layout durante a qual três elementos DOM mudaram
posição A pontuação dessa troca específica foi 0.175
.
Estas são as propriedades de uma instância LayoutShift
que são mais relevantes para
Depuração de mudanças de layout:
Propriedade | Descrição |
---|---|
sources |
A propriedade sources lista os elementos DOM que se moveram durante a troca de layout. Essa matriz pode conter até cinco fontes. Caso mais de cinco elementos sejam afetados pela mudança de layout, serão relatadas as cinco maiores fontes (medida pelo impacto na estabilidade do layout). Essas informações são relatadas usando a interface LayoutShiftAttribution (explicada em mais detalhes abaixo). |
value |
A propriedade value informa a pontuação de troca de layout de uma mudança de layout específica. |
hadRecentInput |
A propriedade hadRecentInput indica se uma mudança de layout ocorreu em até 500 milissegundos após a entrada do usuário. |
startTime |
A propriedade startTime indica quando ocorreu uma mudança de layout. startTime é indicado em milissegundos e medido em relação ao horário em que o carregamento da página foi iniciado. |
duration |
A propriedade duration sempre será definida como 0 . Essa propriedade é herdada da interface PerformanceEntry (a interface LayoutShift estende a interface PerformanceEntry ). No entanto, o conceito de duração não se aplica a eventos de mudança de layout. Por isso, ele é definido como 0 . Para mais informações sobre a interface PerformanceEntry , consulte a especificação. |
LayoutShiftAttribution
A interface LayoutShiftAttribution
descreve uma única mudança de um único DOM
. Se vários elementos mudarem durante uma troca de layout, a sources
contém várias entradas.
Por exemplo, o JSON abaixo corresponde a uma mudança de layout com uma origem: o
mudança para baixo do elemento DOM <div id='banner'>
de y: 76
para
y:246
// ...
"sources": [
{
"node": "div#banner",
"previousRect": {
"x": 311,
"y": 76,
"width": 4,
"height": 18,
"top": 76,
"right": 315,
"bottom": 94,
"left": 311
},
"currentRect": {
"x": 311,
"y": 246,
"width": 4,
"height": 18,
"top": 246,
"right": 315,
"bottom": 264,
"left": 311
}
}
]
A propriedade node
identifica o elemento HTML que mudou. Passar o cursor sobre ele
no DevTools destaca o elemento de página correspondente.
As propriedades previousRect
e currentRect
informam o tamanho e a posição dos
do nó.
- As coordenadas
x
ey
informam as coordenadas x e y. respectivamente do canto superior esquerdo do elemento - As propriedades
width
eheight
informam a largura e a altura, respectivamente do elemento. - As propriedades
top
,right
,bottom
eleft
informam os valores x ou y valores de coordenadas correspondentes à borda especificada do elemento. Em outras palavras, o valor detop
é igual ay
. O valor debottom
é igual ay+height
.
Se todas as propriedades de previousRect
forem definidas como 0, isso significa que o elemento tem
em exibição. Se todas as propriedades de currentRect
forem definidas como 0, isso significa que
que o elemento saiu da visualização.
Um dos pontos mais importantes para interpretar esses resultados é que os elementos listados como origens são os elementos que mudaram durante o mudança de layout. No entanto, é possível que esses elementos sejam apenas indiretamente relacionadas à "causa raiz" de instabilidade de layout. Aqui estão alguns exemplos.
Exemplo 1
Essa mudança de layout seria relatada com uma fonte: o elemento B. No entanto, A causa raiz dessa troca de layout é a mudança no tamanho do elemento A.
Exemplo 2
A mudança de layout neste exemplo seria relatada com duas origens: elemento A e o elemento B. A causa raiz dessa troca de layout é a mudança na posição do elemento A.
Exemplo 3
A mudança de layout neste exemplo seria relatada com uma origem: o elemento B. A mudança da posição do elemento B resultou nessa mudança de layout.
Exemplo 4
Embora o elemento B mude de tamanho, não há mudança de layout neste exemplo.
Confira uma demonstração de como as mudanças do DOM são informadas pela API Layout Instability.
DevTools
Painel de desempenho
O painel Experiência do painel Desempenho do DevTools exibe todos os mudanças de layout que ocorrem durante um determinado trace de desempenho, mesmo que ocorram dentro de 500 ms de uma interação do usuário e, portanto, não são contabilizados na CLS. Passe o cursor sobre uma mudança de layout específica no painel Experiência para ver os destaques. o elemento DOM afetado.
Para ver mais informações sobre a troca de layout, clique nela e
abra a gaveta Resumo. As alterações nas dimensões do elemento são listadas
usando o formato [width, height]
; alterações na posição do elemento são listadas
usando o formato [x,y]
. A propriedade Had recent input indica se um
a mudança de layout ocorreu dentro de 500 ms de uma interação do usuário.
Para informações sobre a duração de uma troca de layout, abra a guia Event Log. A duração de uma troca de layout também pode ser aproximada observando no Painel Experience para o comprimento do retângulo vermelho de mudança de layout.
Para mais informações sobre como usar o painel Desempenho, consulte Desempenho Análise Referência.
Destacar regiões de mudança de layout
Destacar regiões de mudança de layout pode ser uma técnica útil para obter uma uma ideia rápida e resumida do local e do momento das mudanças de layout ocorrendo em uma página.
Para ativar as regiões da troca de layout no DevTools, acesse Settings > Mais ferramentas > Renderização > Regiões da troca de layout e atualize a página que você quer depurar. As áreas de mudança de layout serão brevemente destacadas em roxo.
Processo de pensamento para identificar a causa de mudanças de layout
Use as etapas abaixo para identificar a causa das mudanças de layout independentemente de quando ou como a mudança de layout ocorre. Essas etapas podem ser complementado pela execução do Lighthouse. No entanto, lembre-se de que o Lighthouse pode identificam apenas mudanças de layout que ocorreram durante o carregamento inicial da página. Em Além disso, o Lighthouse só pode oferecer sugestões para algumas causas de layout mudanças, por exemplo, elementos de imagem que não têm largura e altura explícitas.
Como identificar a causa de uma mudança de layout
Mudanças de layout podem ser causadas pelos seguintes eventos:
- Mudanças na posição de um elemento DOM
- Mudanças nas dimensões de um elemento DOM
- Inserção ou remoção de um elemento DOM
- Animações que acionam o layout
Em particular, o elemento DOM imediatamente anterior ao elemento alterado é a elemento mais provável de estar envolvido em "causar" mudança de layout. Assim, quando investigar por que ocorreu uma mudança de layout, considere:
- A posição ou as dimensões do elemento anterior mudaram?
- Um elemento DOM foi inserido ou removido antes do elemento deslocado?
- A posição do elemento deslocado foi alterada explicitamente?
Se o elemento anterior não causou a mudança de layout, continue a pesquisa considerando outros elementos anteriores e próximos.
Além disso, a direção e a distância de uma mudança de layout podem fornecer dicas sobre a causa raiz. Por exemplo, uma grande mudança para baixo geralmente indica a inserção de um elemento DOM, enquanto uma mudança de layout de 1 px ou 2 px geralmente indica a aplicação de estilos CSS conflitantes ou o carregamento e a aplicação de uma fonte da Web.
Esses são alguns dos comportamentos específicos que mais frequentemente causam a mudança de layout. eventos:
Mudanças na posição de um elemento (não devido ao movimento de outro elemento)
Esse tipo de mudança geralmente é resultado de:
- Folhas de estilo carregadas com atraso ou que substituem estilos declarados anteriormente.
- Efeitos de animação e transição.
Alterações nas dimensões de um elemento.
Esse tipo de mudança geralmente é resultado de:
- Folhas de estilo carregadas com atraso ou que substituem estilos declarados anteriormente.
- Imagens e iframes sem os atributos
width
eheight
que são carregados depois seu "espaço" foi processado. - Blocos de texto sem atributos
width
ouheight
que trocam fontes depois do texto foi processado.
Inserção ou remoção de elementos DOM
Muitas vezes, isso é resultado de:
- Inserção de anúncios e outras incorporações de terceiros.
- Inserção de banners, alertas e modais.
- Rolagem infinita e outros padrões de UX que carregam mais conteúdo acima conteúdo que já existe.
Animações que acionam o layout
Alguns efeitos de animação podem acionar
layout padrão. Um erro comum
exemplo disso é quando elementos DOM são "animados" incrementando as propriedades
como top
ou left
em vez de usar
transform
. Leia Como criar animações CSS de alto desempenho
para mais informações.
Como reproduzir trocas de layout
Não é possível corrigir mudanças de layout que não podem ser reproduzidas. Um dos métodos mais simples ações mais eficazes para ter uma noção melhor do layout do site a estabilidade é levar de 5 a 10 minutos para interagir com seu site com a meta para acionar trocas de layout. Mantenha o console aberto enquanto isso e use o API Layout Instability para gerar relatórios sobre mudanças de layout.
Para as mudanças de layout difíceis de localizar, considere repetir este exercício com
dispositivos e velocidades de conexão diferentes. Em particular, o uso de uma versão
a velocidade de conexão pode facilitar a identificação de mudanças de layout. Além disso,
é possível usar uma instrução debugger
para facilitar a navegação pelo layout.
muda.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (!entry.hadRecentInput) {
cls += entry.value;
debugger;
console.log('Current CLS value:', cls, entry);
}
}
}).observe({type: 'layout-shift', buffered: true});
Por fim, para problemas de layout que não são reproduzíveis no desenvolvimento, considere usando a API Layout Instability em conjunto com sua ferramenta de geração de registros de front-end de escolha para coletar mais informações sobre essas questões. Finalizar compra o exemplo de código sobre como acompanhar o maior elemento alterado em uma página.