Tamaño excesivo del DOM
Silktide mide cuántos elementos componen su página y cuán profundamente están anidados. Las páginas construidas con demasiados elementos tardan más en cargarse, responden con más lentitud y usan más memoria en los dispositivos de sus visitantes.
Cada encabezado, párrafo, imagen y contenedor de una página es un elemento en el modelo interno del navegador de la página, el . Los navegadores manejan con facilidad unos cientos de elementos; las páginas con miles hacen que cada cálculo de estilos, cada pasada de maquetación y cada actualización de scripts sean apreciablemente más lentas.
Por qué es importante
Los visitantes perciben una página sobredimensionada como lentitud: la página tarda más en aparecer, el desplazamiento da tirones y las interacciones, como abrir un menú, muestran un retraso notable. El efecto es peor en los dispositivos con menos recursos —teléfonos económicos y ordenadores antiguos—, de modo que los visitantes con el hardware más lento obtienen la peor versión de su sitio.
Las páginas sobredimensionadas por lo general no se diseñan así deliberadamente. Se van acumulando: maquetadores que envuelven todo en capas de contenedores, variantes ocultas del mismo contenido para distintos tamaños de pantalla y listas largas renderizadas por completo aunque los visitantes solo vean la primera pantalla.
Cómo solucionarlo
- Identifique qué está inflando la página. Los culpables habituales son temas de maquetadores que generan envoltorios profundamente anidados, megamenús que incrustan toda la estructura del sitio en cada página y tablas extensas o listados de productos renderizados por completo.
- Renderice las listas largas de forma incremental: muestre los primeros elementos y cargue más a medida que el visitante se desplaza o pagina, en lugar de colocar miles de filas en la página de una vez.
- Evite duplicar contenido para distintos dispositivos. Aplique estilos a una sola copia con en lugar de servir versiones separadas y ocultas para escritorio y móvil del mismo contenido.
- Divida las páginas muy largas en varias más pequeñas cuando el contenido lo permita.
Cómo lo prueba Silktide
- Carga la página en un navegador real, utilizando el tipo de dispositivo, la velocidad de conexión y la ubicación de prueba configurados para sus pruebas de velocidad.
- Cuenta los elementos que componen la página completamente cargada, incluido todo lo que añada .
- Mide tres métricas e identifica el elemento responsable de cada una: el número total de elementos, la anidación más profunda de elementos y el mayor número de hijos bajo un mismo padre.
- Califica cada métrica. Aproximadamente 1.000 elementos totales, una anidación de unos 24 niveles o un padre con unos 45 hijos empieza a bajar la nota; en torno a 1.500 elementos, 32 niveles o 60 hijos se califica como deficiente.
Solución de problemas
La página no parece grande
El recuento de elementos se refiere a la estructura, no al contenido visible. Una página visualmente simple puede contener miles de elementos si cada elemento visible está envuelto en muchas capas de contenedores, o si hay contenido para otros tamaños de pantalla presente pero oculto. Los elementos indicados para cada métrica muestran dónde está realmente el grueso.
El alto número de elementos procede de mi tema o maquetador
Es algo común y, por lo general, no es algo que puedan solucionar los editores de contenido. Traslade el hallazgo a quien mantenga el tema o las plantillas del sitio; desactivar funciones no utilizadas del maquetador o simplificar plantillas suele eliminar cientos de elementos de una vez.