Evitar un tamaño excesivo en el DOM y mejorar el rendimiento web

 

Mejorar el rendimiento web es clave. Para ello Google Page Speed nos aconseja que debemos evitar un tamaño excesivo en el DOM. ¿Pero qué significa esto? Muy fácil, vamos por partes.

 

 

¿Qué es el DOM?

DOM (Document Object Model). Cada web tiene un lenguaje de marcado llamado HTML (HyperText Markup Language), es decir, Lenguaje de Marcas de Hipertexto. El hipertexto no es otra cosa que enlaces, enlaces internos o enlaces a otras webs. Texto enriquecido.

El modelo de documento de objetos (DOM) es una interfaz de programación para los documentos HTML. Facilita una representación estructurada del documento y define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo como el contenido.

Es un lenguaje que los navegadores entienden e interpretan. Por eso si esta estructura es simple y corta, el navegador la interpretará más rápido y por tanto el usuario visualizará la web antes.

 

¿Por qué su tamaño es excesivo?

Normalmente no hay una cifra exacta, pero para la mayoría de webs, depende de la complejidad del diseño y las funcionalidades hacen falta más elementos que por ejemplo en un simple blog o periódico. El tema está en que cuantos menos elementos tenga, más rápido cargará la página y por tanto mejor será la experiencia de usuario. 

 

¿Cómo quitar elementos del DOM y evitar un tamaño excesivo?

Quitando el código sobrante, minimizando elementos HTML. Limpiando la estructura. Simplificando el diseño. Y si queremos un diseño muy complejo, lo que se suele hacer es cargar algunos elementos pasados unos segundos, después de la primera carga o carga principal. Usando Ajax.

 

¿Cómo mejorar el rendimiento web en genera?

Los desarrolladores web expertos y los propios desarrolladores de navegadores recomiendan que las páginas contengan entre 1200 y 1700 elementos en el DOM. Pero claro, puede ser una tarea difícil a priori.

También cuenta la produndidad, dado que los elementos pueden estar anidados, y un elemento puede tener un sub elementos. Lo ideal es que la profundidad del esquema árbol sea inferior a 32 elementos y menos de 60 elementos secundarios por cada elemento principal. Las webs que cuentan con un DOM muy grande aumentan mucho el uso de memoria, hacen que los cálculos de estilos (diseño) duren más y por tanto la web cargue más lentamente.

 

El hosting como clave punto de partida o de mejora

Los cimientos de una casa tienen que ser consistentes. Por eso, lo primero que tenemos que hacer es elegir un hosting adecuado a nuestras necesidades. Podemos empezar con un hosting base de Raiola Network y luego si vemos que tenemos visitas y necesitamos más rendimiento contratar un VPS. Y si ya tenemos ese problema, sin duda lo mejor es contratar un VPS directamente. Yo desde aquí te ofrezco mi ayuda para contratar a tu nombre el hosting, hacer el traspaso o empezar con tu proyecto hoy mismo.

 

Cómo elegir un buen hosting, te aconsejo que te pases por la categoría dedicada a hosting, de este mismo blog.

 

 

Otras opciones recomendadas para reducir el tiempo de carga además de evitar un tamaño excesivo en el DOM:

• Eliminar archivos CSS sin usar.
• Usar un tamaño adecuado para las imágenes.
• Publicar imágenes con formatos de próxima generación.
• Eliminar los recursos que bloqueen el renderizado.
• Reducir los tiempos de respuesta del servidor. (Contratar un VPS en España).
• Posponer la carga de imágenes que no aparecen en pantalla.
• Minificar los archivos CSS.
• Minificar los recursos JavaScript.
• Codificar las imágenes de forma eficaz.
• Habilitar la compresión de texto.
• Establecer conexión previamente con los orígenes necesarios.
• Evitar que haya varias redirecciones de página.
• Cargar previamente las solicitudes más importantes, por ejemplo el texto.
• Usa formatos de vídeo para incluir contenido animado.
• Evitar cargas de red de gran tamaño.
• Medir y reducir el tiempo de ejecución de JavaScript.
• Reducir el uso de código de terceros.

 

¿Estas medidas te suenan verdad? Si vienes de Google Page Speed seguro que las conoces, porque son casi las mismas. Son medidas clave para mejorar el rendimiento de cualquier web.

Espero que con este artículo hayas conseguido evitar un tamaño excesivo en el DOM.