¿Cómo afectan DCL y FCP a la SEO? | Métricas de rendimiento web

¿Qué es DCL?

DCL, abreviatura de DOMContentLoaded, es una métrica importante de rendimiento de las páginas web. DCL mide el punto en el que un navegador está listo para implementar cualquier scripting por parte del cliente. En términos más técnicos, DCL es el momento durante el proceso de carga de una página web en el que el DOM (Modelo de objetos del documento) ha sido ensamblado por el navegador, y ninguna hoja de estilo impide la ejecución de JavaScript. (Para ayudar a entender estos términos, consulta a continuación "Breve nota sobre cómo funcionan las páginas web").

¿Qué es el DOM (Modelo de objetos del documento)?

DOM es un acrónimo que significa Modelo de objetos del documento. El Modelo de objetos del documento es una representación de la estructura de una página web, de forma similar a un esquema de un trabajo de investigación, con puntos y subpuntos. El DOM también se puede comparar con un árbol, con la propia página como raíz, que se ramifica en los diferentes elementos HTML de la página.

DOMContentLoaded significa que el navegador ha generado este modelo de página a partir del código HTML que ha recibido. Esto también significa que está listo para realizar scripts y mostrar contenido dinámico.

¿Qué es FCP?

First Contentful Paint, o FCP, es otra métrica fundamental de rendimiento. FCP mide el momento en el que se renderiza el primer contenido del DOM, es decir, que se muestra el primer elemento HTML. Esto puede ser texto, imágenes o cualquier cosa que un usuario reconocerá como parte de la página web. First Contentful Paint es diferente de First Paint (FP), que mide cuando se renderiza cualquier elemento de la página.

Hay otras métricas de rendimiento que miden la "primera" cosa que ocurre. Por ejemplo, el Tiempo hasta el primer byte (TTFB) mide el momento en que el primer byte de un servidor web llega al navegador. Sin embargo, FCP mide el primer punto en el que un usuario puede ver que una página empieza a cargarse correctamente. Ya que la percepción del usuario sobre el rendimiento web es lo más importante para mantener a los usuarios en un sitio web, TTFB es casi irrelevante desde la perspectiva del usuario.

¿Cómo afectan DCL y FCP a la SEO?

La velocidad del sitio web es fundamental en una estrategia sólida de SEO (optimización del motor de búsqueda). El rendimiento es un factor especialmente importante para el posicionamiento en los motores de búsqueda de Google. DCL y FCP son dos métricas en las que Google hace hincapié para su evaluación del rendimiento, y Google PageSpeed Insights ayuda a los desarrolladores a medirlas. (Aunque Google no indica exactamente en qué medida estas dos métricas de rendimiento influyen en su posicionamiento de búsqueda, lo cierto es que las tiene en cuenta).

Los desarrolladores pueden tomar una serie de medidas para mejorar estas métricas de rendimiento para un sitio. Aprovechar el almacenamiento en caché y una CDN son dos pasos fundamentales para mejorar los tiempos de DCL y FCP.

¿Cómo mejora Cloudflare a DCL y FCP?

La CDN de Cloudflare acelera de forma considerable los sitios web mediante el almacenamiento en caché del contenido en ubicaciones de todo el mundo, así que las solicitudes HTTP se responden mucho más rápido. Como resultado, los navegadores reciben el HTML de la página más rápido, lo cual mejora ambas métricas.

Breve nota sobre cómo funcionan las páginas web

Una página web está formada por una combinación de código HTML, código CSS y código JavaScript. Cuando un navegador realiza una solicitud a una página web, el servidor web correspondiente envía un archivo HTML que contiene, entre otras cosas, una lista de los CSS, JavaScript y otros activos que el navegador debe solicitar por separado.

• HTML (Lenguaje de hipertexto de marcado) es un código que proporciona instrucciones a los navegadores acerca de cómo mostrar contenidos y solicitar otros activos.
• CSS (Hojas de estilo CSS) es un código que proporciona instrucciones adicionales sobre cómo debe aparecer el contenido HTML y cómo se presentan las páginas web.
• JavaScript es un lenguaje de programación que puede tomar el contenido HTML y cambiarlo cuando se cumplen determinadas condiciones. Además, JavaScript puede utilizarse para tareas más complejas, como el renderizado 3D, videojuegos u otras actividades técnicamente complejas.

El archivo HTML incluye el contenido que aparece en la página, instrucciones sobre cómo mostrar ese contenido e instrucciones para cargar otros contenidos desde otras fuentes, como las imágenes. Enlaza con archivos CSS (hojas de estilo) y con bibliotecas JavaScript con instrucciones adicionales. El navegador entonces coge ese código, lo interpreta y muestra la página web.

En la mayoría de los navegadores, se puede ver el archivo HTML que está haciendo el navegador si se hace clic con el botón derecho del ratón en cualquier página web y se selecciona "Ver código fuente de la página" en el menú desplegable. Se abrirá el archivo HTML en una nueva pestaña. El texto del archivo empieza casi siempre con '<!DOCTYPE html>'.