El FCP significa First Contentful Paint y es una métrica que mide cuánto tarda el navegador en mostrar el primer contenido visible (texto, imagen, logotipo, etc.) de una URL.
Ejemplo de carga en una url: primero botón y luego el logotipo
Pueden parecer cosas insignificantes cuando encargamos o diseñamos una página, pero muchas veces al crear un diseño nos dejamos engatusar por lo bonito y resultón que se puede mostrar. Sin embargo debemos tener en cuenta estos valores que pueden afectar a la UX.
La velocidad de un sitio web afecta significativamente a la experiencia de los usuarios, su participación en ella y por lo tanto seguramente en la tasa de conversión y porcentaje de rebote que muestre luego nuestro informe.
¿Cuál es una buena puntuación FCP?
Una puntuación FCP alta indica tiempos de carga de contenido más lentos, lo que puede hacer que los visitantes perciban el sitio web de forma negativa. Por el contrario, una puntuación baja en First Contentful Paint implica una carga rápida de contenido, lo que conduce a una mejor experiencia de usuario y una mayor participación.
Antes de comprobar la puntuación FCP con diferentes herramientas, es fundamental responder cuál es una buena puntuación. Según el sistema de puntuación de Google, califica las puntuaciones del FCP como buenas, necesitan mejorar o malas. Por lo tanto, debemos asegurarnos de que nuestra puntuación se encuentre dentro de los rangos orientativos:
- Bueno: ≤ 1,8 s
- Necesita mejorar: entre 1,8 s y 3,0 s
- Malo: > 3,0 s
Muddle tip: si estás cerca de 1,0 s o menos, puedes considerarlo un resultado excelente.
En relación a las herramientas que podemos utilizar para comprobar estos datos os recomendamos 3: PageSpeed insights, GTmetrix y Pingdom.
Qué suele empeorar el FCP
- CSS que bloquea el render (hojas pesadas o muchas).
- JavaScript en exceso en la parte superior (especialmente scripts de terceros).
- Fuentes web que tardan en cargar (y bloquean el texto).
- Imágenes demasiado pesadas en el primer pantallazo.
- Servidor lento / TTFB alto (hosting, caché, base de datos…)
En WordPress, gran parte de ese CSS/JS suele venir del tema o del page builder. Si necesitas identificarlo rápido, mira cómo saber qué tema de WordPress usa un sitio web.
¿Cómo mejorar el First Contentful Paint?
Te dejamos cuatro acciones prácticas:
- Optimizar imágenes y videos. Es fundamental centrarse en optimizar las imágenes, ya que suelen ser las principales culpables de una carga lenta. Esto se puede lograr mediante varias técnicas, como comprimir, reducir el tamaño del archivo y cambiar el tamaño de las imágenes a sus dimensiones adecuadas. Hay muchas herramientas disponibles que permiten la compresión de imágenes sin comprometer la calidad. Te recomendamos utilizar WebP
- Utilizar un CDN para imágenes. Sus grandes virtudes son las de aumentar la velocidad de carga de la página y el número de rastreos que se producen sobre el contenido. Al reducir la distancia física entre el usuario y el servidor, los rastreadores podrían premiar con mayor visibilidad nuestro contenido.
- Reducir el tiempo de respuesta del servidor. Si los tiempos de respuesta de un servidor son lentos, puede afectar significativamente al posicionamiento SEO. Por lo tanto, optimizar los tiempos de respuesta del servidor es crucial. La optimización del almacenamiento en caché es prioritario por eso, debes activar el almacenamiento en caché del navegador. Os podemos recomendar los mejores hostings en caso de que sea necesario.
- Minimizar el número de solicitudes. Las solicitudes que se activan cada vez que se ejecutan recursos como scripts, imágenes y hojas de estilo puede ser un problema. Para mitigar este problema, es fundamental reducir el número de solicitudes. Esto se puede solucionar combinando CSS, eliminando plugins innecesarios, reduciendo el JavaScript, etc.
FCP en WordPress: checklist rápida
- Evita “page builders” o plugins que inyectan demasiados scripts en todas las páginas.
- Activa caché y compresión (y revisa que no “rompa” el render).
- Optimiza la imagen destacada/hero (tamaño real + WebP).
- Reduce fuentes externas y variantes.
- Revisa scripts de analítica/marketing y carga diferida cuando sea posible.
Preguntas
¿El FCP es una métrica de Core Web Vitals?
No. Es una métrica de rendimiento útil, pero las Core Web Vitals actuales se centran en otras señales. Aun así, el FCP influye mucho en la percepción de velocidad.
¿Qué es más importante, FCP o LCP?
Depende. El FCP es el primer “arranque visual”, pero el LCP suele representar cuándo el usuario ve el contenido principal. Lo ideal es mejorar ambos.
Muddle-opinión
El First Contentful Paint (FCP) es una métrica crucial para asegurar que nuestros usuarios no tienen problemas al recibir el contenido de la página solicitada. Google establece unos rangos orientativos para evaluar el FCP: en general, un FCP bueno suele estar en ≤ 1,8 s, mientras que por encima de 3 s se considera malo. La optimización de la velocidad de carga mediante herramientas como PageSpeed insights, GTmetrix y Pingdom, junto con prácticas como la optimización de imágenes, el uso de CDN, la reducción del tiempo de respuesta del servidor y la minimización de solicitudes, no solo mejora la puntuación FCP, sino que también impulsa el rendimiento SEO, generando una experiencia de usuario más positiva y eficiente.