First Contentful Paint (FCP) mide cuánto tiempo tarda una página desde la carga inicial hasta el primer contenido renderizado que se muestra en la pantalla.
En 2019, Google anunció que clasificará los sitios web en función de dos métricas de rendimiento más: primera pintura con contenido y retraso en la primera entrada.
Más tarde, Google introdujo tres Elementos fundamentales de la Web: Primer retardo de entrada, Cambio de diseño acumulativo.
En este artículo, hablaremos sobre First Contentful Paint, ya que sigue siendo una métrica importante de la experiencia del usuario y representa la puntuación de rendimiento general de un sitio web.
¿Qué es la primera partitura contenta?
La primera pintura de contenido de un sitio web es cuando el navegador recupera y representa el primer elemento DOM de la página. Los elementos de lienzo, imágenes o textos, elementos que no sean blancos y SVG se consideran contenido DOM.
En palabras simples, FCP es el tiempo que le toma a un usuario de un sitio web ver cualquier contenido en su navegador una vez que ha hecho clic en el enlace del sitio web.
Por lo tanto, un FCP increíblemente rápido garantiza que los usuarios encuentren algo útil tan pronto como accedan a la página.
Recientemente publicamos una publicación sobre el retraso de la primera entrada. Si lo ha leído, quizás se pregunte cuál es la diferencia entre First Contentful Paint y First Input Delay.
Diferencia entre la primera pintura con contenido y el primer retraso de entrada:
Primer retardo de entrada (FID)
FID mide la interactividad: el tiempo que tarda un sitio web en responder después de que el visitante interactúa (por ejemplo, hace clic en un botón o enlace) con él.
Primera pintura con contenido (FCP):
FCP mide cuánto tiempo tarda una página desde la carga inicial hasta que el primer contenido renderizado se muestra en la pantalla.
Algunos de ustedes se preguntarán en qué se diferencia la primera pintura de la primera pintura con contenido. Vamos a ver:
Primera pintura frente a primera pintura con contenido:
Para los no expertos, la primera pintura es cuando el navegador detecta un renderizado. Este renderizado podría ser tan sutil como el color de fondo.
- Primeras pinturas:
Las primeras pinturas se activan muy temprano en la carga de la página, pero no brindan ninguna información o "contenido" a los usuarios. El color de fondo suele pintarse rápidamente, mientras que el contenido real tarda más en aparecer en la pantalla.
Por lo tanto, el momento de la primera pintura no es tan útil ya que el sitio realmente no muestra ninguna información útil.
- Primera pintura con contenido:
First Contentful Paint significa cargar cualquier "contenido" que sea informativo para los usuarios finales. Se activa cuando se pinta cualquier contenido; renderizado de texto, imagen o lienzo.
El tiempo de First Contentful Paint brinda información útil sobre qué tan pronto los usuarios conocen su sitio web, ya que representa el tiempo de carga del contenido real de la página. Dado que la atención se centra en el "contenido", es una métrica más útil en comparación con la primera pintura.
¿Cómo medir la primera pintura con contenido?
Los webmasters o editores pueden medir la primera pintura de contenido de su sitio web a través de múltiples herramientas que incluyen:
- Lighthouse
- WebPageTest
- DevTools de Chrome
- PageSpeed Insights
- Informe de experiencia del usuario de Chrome
¿Qué es una buena puntuación FCP?
Según las directrices de Google, la primera pintura de contenido de una página web debe producirse en 1.8 segundos. Cuando una página web se carga en 2 segundos, garantiza una buena experiencia de usuario para los visitantes, ya que pueden acceder a la información más rápido.
Si la primera imagen de contenido de un sitio web tarda más de 3 segundos en cargarse, se considera lenta.
Google califica el tiempo del FCP en tres categorías diferentes:
- Bueno: entre 0 segundos y 1.8 segundos
- Necesita mejorar: entre 1.8 segundos y 3 segundos
- Pobre – más de 3 segundos
Cómo mejorar el tiempo de la primera pintura con contenido (FCP):
Ahora que hemos entendido qué es FCP y por qué es importante, echemos un vistazo a cómo se puede mejorar el tiempo de FCP:
- Elimine los recursos de bloqueo de renderizado:
Los recursos de bloqueo de renderizado son los archivos que se deben renderizar en un sitio web. Estos pueden incluir fuentes, archivos CSS, JavaScript y HTML. Estos archivos se denominan "bloqueo de renderizado" porque tienen prioridad sobre otros elementos de la página (por ejemplo, las imágenes, el texto u otro contenido de cara al usuario).
Este retraso crea un aumento repentino en FCP ya que los archivos de bloqueo de renderizado suelen ser de gran tamaño y ni siquiera contienen contenido del sitio.
El tiempo de FCP se puede reducir si elimina recursos de renderizado de la ruta de renderizado crítica, difiere recursos no críticos o elimina JS innecesarios. - Reduzca el tiempo de respuesta del servidor:
TTFB o tiempo hasta el primer byte es el tiempo total que tarda un navegador en recibir el primer byte del contenido de una página. Si TTFB es menor, el tiempo de FCP también será menor.
Así es cómo,
FCP = TTFB + Tiempo de renderizado + Tiempo de carga de contenido
Como puede ver, FCP depende del TTFB. Por lo tanto, optimizar TTFB mejoraría automáticamente la puntuación FCP. Puede reducir el TTFB utilizando una CDN de calidad, habilitando el almacenamiento en caché para su sitio web y eligiendo un proveedor de alojamiento rápido. - Eliminar CSS innecesario
Si tiene archivos en sus hojas de estilo que no se utilizan, pero que requieren una velocidad significativa, no tiene sentido conservarlos. Por lo tanto, cualquier código antiguo o no utilizado debe eliminarse para que no afecte el tiempo de carga de su sitio.
- Minificar HTML, JavaScript y CSS
La minificación de HTML, JavaScript y CSS puede reducir significativamente el tiempo de FCP de su sitio web. La minificación consiste en eliminar todos los caracteres adicionales, como los espacios, de los archivos CSS, HTML y JavaScript de su sitio. Si bien el espaciado ayuda a la legibilidad, los navegadores no los necesitan. De hecho, estos espacios ocupan bytes y minimizarlos disminuiría el tamaño de la página y mejoraría el tiempo de pintura del contenido inicial.
La línea de base:
Dado que Google valora la velocidad de la página como una métrica de rendimiento importante, First Contentful Paint seguirá siendo una métrica importante para los sitios web.
Tener un cronograma de FCP bajo no solo mantiene a los usuarios en su sitio, sino que también mejora la experiencia general del usuario.
Estamos de acuerdo, el FCP puede ser una métrica difícil de concretar, pero un poco de optimización para reducir el FCP sin duda aumentará la UX y los tiempos de carga generales de su sitio.
Preguntas Frecuentes
First Contentful Paint (FCP) mide la rapidez con la que los visitantes pueden ver el contenido real (texto, imágenes, vídeos, etc.) de su página. Nuestros informes heredados ya rastrearon el FCP, que está relacionado con la velocidad de carga de su página.
Durante la primera pintura de contenido (FCP), el navegador representa el primer fragmento de contenido del DOM, lo que le brinda al usuario la primera indicación de que la página se está cargando.
Según los datos del archivo HTTP, su puntuación FCP compara el tiempo FCP de su página con el de sitios web reales. FCP se procesa en 1.2 segundos para sitios con un rendimiento en el percentil noventa y nueve, por ejemplo. Su puntuación FCP es 99 si el FCP de su sitio web es de 1.2 segundos.
Shubham es un especialista en marketing digital con amplia experiencia trabajando en la industria de la tecnología publicitaria. Tiene una amplia experiencia en la industria programática, impulsando la estrategia comercial y escalando funciones que incluyen, entre otras, crecimiento y marketing, operaciones, optimización de procesos y ventas.
