Aprende a identificar y corregir los cambios de diseño.
En la primera parte de este artículo, se analizan las herramientas para depurar los cambios de diseño. mientras que la segunda analiza el proceso de razonamiento que se debe usar cuando identificar la causa de un cambio de diseño.
Herramientas
API de Layout Instability
La API de diseño de inestabilidad es la mecanismo del navegador para medir e informar los cambios de diseño. Todas las herramientas para los cambios de diseño de depuración, incluido Herramientas para desarrolladores, en última instancia, se basan en el API de Layout Instability Sin embargo, usar directamente la API de Layout Instability es una potente herramienta de depuración debido a su flexibilidad.
Uso
El mismo fragmento de código que medidas que el Cambio de diseño acumulado (CLS) también puede entregar para depurar cambios de diseño. El siguiente fragmento registra información sobre el diseño cambia a la consola. Al inspeccionar este registro, obtendrás información sobre cuándo, dónde y cómo ocurrió un cambio de diseño.
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});
Cuando ejecutes esta secuencia de comandos, ten en cuenta lo siguiente:
- La opción
buffered: true
indica que elPerformanceObserver
deberías comprobar la entrada de rendimiento del navegador búfer para las entradas de rendimiento que se crearon antes que la solicitud de inicio. Como resultado,PerformanceObserver
informará el diseño cambios que ocurrieron antes y después de su inicialización. Conservar en cuando inspecciones los registros de la consola. Un grupo inicial de cambios de diseño puede reflejan un trabajo pendiente de informes, en lugar de la aparición repentina de varios cambios de diseño. - Para no afectar el rendimiento,
PerformanceObserver
espera hasta que se active el subproceso está inactivo para informar sobre los cambios de diseño. Como resultado, según cómo ocupado está el subproceso principal, puede haber una pequeña demora entre el momento en que se crea se produce el cambio y cuando se registra en la consola. - Esta secuencia de comandos ignora los cambios de diseño que se produjeron dentro de los 500 ms de la entrada del usuario y, por lo tanto, no se consideran en CLS.
La información sobre los cambios de diseño se informa usando una combinación de dos APIs: la
LayoutShift
y
LayoutShiftAttribution
interfaces. Cada una de estas interfaces se explica con más detalle en el
secciones a continuación.
LayoutShift
Cada cambio de diseño se informa a través de la interfaz LayoutShift
. El contenido de
una entrada se verá así:
duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798
La entrada anterior indica un cambio de diseño durante el cual tres elementos del DOM cambiaron
posición. La puntuación del cambio de diseño de este cambio de diseño en particular fue de 0.175
.
Estas son las propiedades de una instancia de LayoutShift
que son más relevantes para
depuración de cambios de diseño:
Propiedad | Descripción |
---|---|
sources |
La propiedad sources enumera los elementos del DOM que se movieron durante el cambio de diseño. Este array puede contener hasta cinco orígenes. En el caso de que haya más de cinco elementos afectados por el cambio de diseño, se informan las cinco fuentes más grandes (según el impacto en la estabilidad del diseño). Esta información se informa a través de la interfaz LayoutShiftAttribution (que se explica con más detalle a continuación). |
value |
La propiedad value informa la puntuación de cambio de diseño de un cambio de diseño en particular. |
hadRecentInput |
La propiedad hadRecentInput indica si se produjo un cambio de diseño dentro de los 500 milisegundos posteriores a la entrada del usuario. |
startTime |
La propiedad startTime indica cuándo se produjo un cambio de diseño. startTime se indica en milisegundos y se mide según el tiempo en que se inició la carga de la página. |
duration |
La propiedad duration siempre se establecerá como 0 . Esta propiedad se hereda de la interfaz PerformanceEntry (la interfaz LayoutShift extiende la interfaz PerformanceEntry ). Sin embargo, el concepto de duración no se aplica a los eventos de cambio de diseño, por lo que se establece en 0 . Para obtener información sobre la interfaz de PerformanceEntry , consulta la especificación. |
LayoutShiftAttribution
La interfaz LayoutShiftAttribution
describe un solo cambio de un solo DOM
. Si varios elementos cambian durante un cambio de diseño, sources
contiene varias entradas.
Por ejemplo, el siguiente JSON corresponde a un cambio de diseño con una fuente: la
desplazamiento hacia abajo del elemento del DOM <div id='banner'>
de y: 76
a
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
}
}
]
La propiedad node
identifica el elemento HTML que cambió. Colocar el cursor sobre esto
en Herramientas para desarrolladores destaca el elemento de página correspondiente.
Las propiedades previousRect
y currentRect
informan el tamaño y la posición de
el nodo.
- Las coordenadas
x
yy
informan la coordenada X y la coordenada Y respectivamente de la esquina superior izquierda del elemento - Las propiedades
width
yheight
informan el ancho y la altura respectivamente del elemento. - Las propiedades
top
,right
,bottom
yleft
informan sobre "x" o "y" coordenadas correspondientes a la arista del elemento. En otro palabras, el valor detop
es igual ay
; el valor debottom
es igual ay+height
Si todas las propiedades de previousRect
se establecen en 0, significa que el elemento tiene
a la vista. Si todas las propiedades de currentRect
se establecen en 0, significa
de que el elemento se haya desplazado fuera de la vista.
Uno de los aspectos más importantes que hay que entender cuando se interpretan estos resultados es que los elementos enumerados como fuentes son los que cambiaron durante la cambio de diseño. Sin embargo, es posible que estos elementos solo sean indirectamente relacionadas con la “causa raíz” de la inestabilidad del diseño. Estos son algunos ejemplos.
Ejemplo 1
Este cambio de diseño se informaría con una fuente: el elemento B. Sin embargo, el La causa raíz de este cambio de diseño es el cambio de tamaño del elemento A.
Ejemplo 2
El cambio de diseño en este ejemplo se informaría con dos fuentes: el elemento A. y el elemento B. La causa raíz de este cambio de diseño es el cambio en la posición de elemento A.
Ejemplo 3
El cambio de diseño en este ejemplo se informaría con una fuente: el elemento B. Cambiar la posición del elemento B dio como resultado este cambio de diseño.
Ejemplo 4
Aunque el elemento B cambia de tamaño, no hay un cambio de diseño en este ejemplo.
Mira una demostración de cómo la API de Layout Instability informa los cambios del DOM.
Herramientas para desarrolladores
Panel de rendimiento
En el panel Experiencia del panel Rendimiento de Herramientas para desarrolladores se muestran cambios de diseño que ocurren durante un registro del rendimiento determinado, incluso si ocurren en un plazo de 500 ms después de una interacción del usuario y, por lo tanto, no se cuentan para CLS. Colocar el cursor sobre un cambio de diseño específico en los elementos destacados del panel Experiencia el elemento DOM afectado.
Para ver más información sobre el cambio de diseño, haz clic en él y, luego,
Abre el panel lateral Resumen. Se enumeran los cambios en las dimensiones del elemento
con el formato [width, height]
los cambios en la posición del elemento se enumeran
con el formato [x,y]
. La propiedad Had recent input indica si una
el cambio de diseño ocurrió dentro de los 500 ms posteriores a la interacción del usuario.
Para obtener información sobre la duración de un cambio de diseño, abre la pestaña Registro de eventos. La duración de un cambio de diseño también puede aproximarse si se observa el Panel Experiencia para la longitud del rectángulo de cambio de diseño en rojo.
Para obtener más información sobre el uso del panel Rendimiento, consulta Rendimiento Análisis Referencia.
Destaca las regiones de cambio de diseño
Destacar las regiones de cambio de diseño puede ser una técnica útil para obtener un una idea rápida y de un vistazo de la ubicación y el momento de los cambios de diseño que ocurren en una página.
Para habilitar las regiones de cambio de diseño en Herramientas para desarrolladores, ve a Configuración > Más herramientas > Renderización > Regiones de cambio de diseño y, luego, actualiza la página que deseas depurar. Las áreas de cambio de diseño se destacarán brevemente en púrpura.
Proceso de pensamiento para identificar la causa de los cambios de diseño
Puedes usar los pasos que se indican a continuación para identificar la causa de los cambios de diseño. sin importar cuándo o cómo ocurra el cambio de diseño. Estos pasos pueden ser se complementa con la ejecución de Lighthouse; sin embargo, ten en cuenta que Lighthouse puede identificar solo los cambios de diseño que ocurrieron durante la carga inicial de la página En Además, Lighthouse también puede proporcionar solo sugerencias para algunas causas de diseño. cambios, por ejemplo, elementos de imagen que no tienen ancho ni altura explícitos.
Identifica la causa de un cambio de diseño
Los cambios de diseño pueden deberse a los siguientes eventos:
- Cambios en la posición de un elemento del DOM
- Cambios en las dimensiones de un elemento del DOM
- Inserción o eliminación de un elemento del DOM
- Animaciones que activan el diseño
En particular, el elemento DOM que antecede al elemento desplazado es el tiene más probabilidades de involucrarse en "causar" cambio de diseño. Por lo tanto, cuando investigar por qué se produjo un cambio de diseño considera lo siguiente:
- ¿Cambiaron la posición o las dimensiones del elemento anterior?
- ¿Se insertó o quitó un elemento del DOM antes del elemento desplazado?
- ¿Se cambió explícitamente la posición del elemento desplazado?
Si el elemento anterior no causó el cambio de diseño, continúa con la búsqueda teniendo en cuenta otros elementos anteriores y cercanos.
Además, la dirección y la distancia de un cambio de diseño pueden proporcionar sugerencias sobre la causa raíz. Por ejemplo, un cambio grande hacia abajo a menudo indica la la inserción de un elemento DOM, mientras que un cambio de diseño de 1 px o 2 px, a menudo, indica la aplicación de estilos CSS conflictivos o la carga y aplicación de un fuente web.
![Diagrama que muestra un cambio de diseño causado por un intercambio de fuentes](https://web.dev/static/articles/debug-layout-shifts/image/diagram-showing-layout-s-60ec3d8c95616.png?authuser=3&hl=es-419)
Estos son algunos de los comportamientos específicos que causan con más frecuencia el cambio de diseño eventos:
Cambios en la posición de un elemento (que no se deben al movimiento de otro elemento)
Este tipo de cambio suele ser el resultado de lo siguiente:
- Hojas de estilo que se cargan tarde o reemplazan los estilos declarados con anterioridad.
- Efectos de animación y transición
Cambios en las dimensiones de un elemento
Este tipo de cambio suele ser el resultado de lo siguiente:
- Hojas de estilo que se cargan tarde o reemplazan los estilos declarados con anterioridad.
- Imágenes o iframes sin los atributos
width
yheight
que se cargan después su "ranura" . - Bloques de texto sin atributos
width
oheight
que intercambian fuentes después de se procesó el texto.
La inserción o la eliminación de elementos del DOM
Esto suele deberse a lo siguiente:
- Inserción de anuncios y otras incorporaciones de terceros
- Inserción de banners, alertas y modales
- Desplazamiento infinito y otros patrones de UX que cargan contenido adicional en la parte superior contenido existente.
Animaciones que activan el diseño
Algunos efectos de animación pueden activar
diseño. Un problema común
Un ejemplo de esto es cuando los elementos del DOM están “animados” aumentando las propiedades
como top
o left
, en lugar de usar los CSS
transform
propiedad. Consulta Cómo crear animaciones de CSS de alto rendimiento.
para obtener más información.
Cómo reproducir los cambios de diseño
No puedes corregir los cambios de diseño que no puedes reproducir. Una de las maneras más sencillas más eficaces que puede realizar para tener una mejor idea del diseño de su sitio la estabilidad es que te lleve entre 5 y 10 minutos interactuar con tu sitio con el objetivo activar cambios de diseño. Mantén la consola abierta mientras lo haces y usa API de Layout Instability para informar sobre cambios de diseño
Para los cambios de diseño difíciles de ubicar, considera repetir este ejercicio con
diferentes dispositivos y velocidades de conexión. En particular, el uso de un servidor
la velocidad de conexión puede facilitar la identificación de los cambios de diseño. Además,
puedes usar una sentencia debugger
para que sea más fácil recorrer el diseño
cambios.
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 último, para los problemas de diseño que no son reproducibles en el desarrollo, considera lo siguiente: usando la API de Layout Instability junto con tu herramienta de registro de frontend de elección para recopilar más información sobre estos temas. Finalizar la compra el código de ejemplo para hacer un seguimiento del elemento desplazado más grande en una página.