La puntuación de First Contentful Paint (FCP) te indica cuánto tarda tu sitio en renderizarse. Una puntuación baja significa que es probable que tus visitantes tengan que esperar más de lo necesario.
Por suerte, puedes tomar algunas medidas para mejorarla. Al optimizar los recursos de tu sitio web, puedes asegurarte de que el contenido se cargue rápidamente y mantener el interés de los usuarios.
En esta guía, explicaremos qué es el FCP, por qué es importante y cómo comprobar esta métrica en tu sitio web. Después, te mostraremos cómo mejorar una puntuación baja de FCP en WordPress.
¿Qué es First Contentful Paint (FCP)?
First Contentful Paint (FCP) mide cuánto tarda un navegador en cargar el primer texto o la primera imagen de una página. En pocas palabras, es el tiempo que transcurre desde que comienza la carga hasta que la página empieza a mostrar contenido.
FCP es una de las seis métricas que se siguen en la sección de rendimiento del informe de Lighthouse. Estas métricas evalúan la experiencia de usuario de un sitio web e incluyen:
- Renderizado del mayor elemento con contenido (LCP): Una medida del rendimiento de carga.
- First Input Delay (FID), o retraso de la primera interacción: Una medida de la interactividad.
- Cumulative Layout Shift (CLS): Una medida de la estabilidad visual.
Debes trabajar para mejorar todas estas métricas y ofrecer a los usuarios la mejor experiencia posible. Aunque no es una métrica principal de Core Web Vitals, First Contentful Paint es una métrica complementaria que puede ayudarte a identificar y solucionar problemas de carga.
Google quiere dirigir a los usuarios de su buscador a sitios que ofrezcan una experiencia excelente, por lo que unas buenas puntuaciones no solo son un objetivo para lograr una experiencia de usuario de calidad, sino que también pueden mejorar la posición en los resultados de búsqueda.
Cómo afecta el FCP a la experiencia de usuario
Cuando un visitante hace clic por primera vez en un sitio web, espera que se cargue rápidamente. Si tu sitio web es demasiado lento, podría abandonar la página y buscar la información que necesita en la web de un competidor.
First Contentful Paint marca el tiempo que tarda un visitante en ver el primer elemento de una página.
Esto es importante porque, aunque la página tarde un poco en cargar todo o en volverse completamente interactiva, si el visitante puede ver algún indicio de progreso, es más probable que espere unos segundos más a que termine. Si, por el contrario, solo ve una pantalla en blanco, probablemente abandonará la página por completo.
Posibles causas de una puntuación baja de FCP
Según Google, la puntuación ideal de FCP debería ser inferior a 1,8 segundos. Si tienes una puntuación baja, podría deberse a varios factores:
- Tiempo de respuesta lento del servidor: Si tu sitio web tiene una puntuación alta de tiempo hasta el primer byte (TTFB), esto puede afectar a First Contentful Paint.
- JavaScript y CSS que bloquean el renderizado: Una cola de scripts ineficiente puede detener el proceso de renderizado hasta que se procesen los scripts pesados.
- Elementos que dependen de scripts en la parte visible de la página: Como JavaScript se carga de arriba abajo, es importante evitar elementos con mucho JavaScript en la parte visible de la página.
- Carga diferida de imágenes en la parte visible de la página: Aunque la carga diferida de imágenes puede mejorar la velocidad de la página, este proceso utiliza JavaScript, lo que puede aumentar el FCP.
- Carga ineficiente de fuentes: Las fuentes pueden tener archivos pesados que retrasan el renderizado del texto.
- Un tamaño excesivo del modelo de objetos del documento (DOM): Tener demasiados nodos en el DOM puede provocar una carga ineficiente.
Como puedes ver, hay varios factores que pueden afectar al First Contentful Paint de tu sitio web. La mayoría de las herramientas de análisis del rendimiento te ayudarán a identificar una causa concreta. Esto puede facilitar que localices el origen del problema y apliques la solución adecuada.
Cómo medir el First Contentful Paint de tu sitio web
Antes de empezar a aplicar medidas que afecten a tu puntuación de FCP, es importante evaluar la velocidad y el rendimiento de tu sitio. Veamos algunas herramientas distintas que puedes utilizar.
PageSpeed Insights
First Contentful Paint se puede medir tanto en el laboratorio como en el entorno real. Con una herramienta que usa datos de campo, puedes comprobar el rendimiento de tu página para usuarios reales. Sin embargo, las herramientas de laboratorio solo simulan los resultados.
PageSpeed Insights es una herramienta que puede evaluar tu sitio web utilizando tanto los resultados de laboratorio como los de campo. Solo tienes que introducir la URL de tu sitio para analizar al instante sus métricas de Core Web Vitals.
En la parte superior de la página, verás tu evaluación de Core Web Vitals. Esto indicará si has superado o no pruebas como LCP, FID, CLS y más.
Encontrarás la puntuación de First Contentful Paint en Otras métricas destacadas. Si es de 1,8 segundos o menos, obtendrás la valoración «Buena». Cualquier puntuación superior a 1,8 segundos requerirá algunas mejoras.
Estos resultados se configurarán automáticamente para Móvil. Puedes hacer clic en Ordenador para ver tu puntuación de FCP en esos dispositivos.
Si ves una valoración «Deficiente» o «Necesita mejoras» en la sección de FCP, tendrás que aplicar algunos métodos de optimización.
Lighthouse
Lighthouse es una herramienta de laboratorio que puede auditar cualquier página web en cuanto a accesibilidad, Core Web Vitals y mucho más. Este software comparará el tiempo de FCP de tu sitio con el de otros sitios web.
Para utilizar Lighthouse, haz clic con el botón derecho en la página que quieras analizar en el navegador Google Chrome y selecciona Inspeccionar.
En la ventana de Chrome DevTools, busca el icono de las dos flechas. Después, selecciona Lighthouse en el menú desplegable que aparece.
A continuación, puedes seleccionar los elementos que quieras incluir en el informe de Lighthouse. Cuando hayas terminado, haz clic en Analizar la carga de la página.
Cuando Lighthouse termine de procesar tu sitio web, verás tu puntuación general de rendimiento. Debajo, encontrarás tu puntuación de First Contentful Paint.
Si ves un círculo verde junto a esta sección, tienes una buena puntuación de FCP. Si aparece un cuadrado amarillo o un triángulo rojo, tu contenido tarda demasiado en renderizarse.
GTmetrix
Otra herramienta gratuita que puedes utilizar para medir el FCP es GTmetrix. Mediante los datos y las auditorías de Lighthouse, GTmetrix ofrece un análisis detallado del rendimiento de tu sitio web.
Primero, pega tu URL en la barra de búsqueda y haz clic en Prueba tu sitio.
Después, puedes consultar la puntuación de First Contentful Paint en el gráfico de Visualización de velocidad.
Si tu FCP es demasiado lento, aparecerá en Principales problemas. En esta auditoría de FCP, puedes ver cómo determinados recursos afectan a tu puntuación.
Al identificar la causa del problema, puedes aplicar la solución adecuada. Además, GTmetrix te ofrecerá sugerencias para ayudarte a mejorar tu puntuación de FCP.
Cómo reducir el tiempo de First Contentful Paint en WordPress
No te preocupes si tu sitio tiene una puntuación baja de FCP: hay varias cosas que puedes hacer para mejorar su rendimiento. Veamos algunas formas eficaces de mejorar esta métrica.
1. Instala un plugin de optimización de Core Web Vitals
Hay muchos plugins de WordPress diferentes que puedes usar para mejorar tu puntuación de First Contentful Paint. Aunque puedes instalar distintas herramientas para minificar los archivos del sitio o eliminar recursos que bloquean el renderizado, lo mejor es encontrar un plugin de Core Web Vitals todo en uno.
Jetpack Boost es una herramienta gratuita que puede optimizar el rendimiento de tu sitio de muchas formas. Desarrollado por Automattic, la empresa responsable de WordPress.com, este plugin puede ayudarte a mejorar las puntuaciones de Core Web Vitals de tu sitio de WordPress con solo unos clics.
Primero, instala y activa Jetpack Boost. Después, recibirás una evaluación automática de la velocidad de tu página en dispositivos de escritorio y móviles.
También te ofrecerá algunas opciones de optimización del rendimiento. Al activar estos ajustes, puedes optimizar fácilmente CSS, aplazar el JavaScript no esencial e implementar la carga diferida de imágenes.
Después, puedes volver a hacer una prueba de velocidad para comprobar si ha mejorado tu puntuación de rendimiento. Como puedes ver, usar Jetpack puede ser una de las formas más rápidas y sencillas de mejorar la puntuación de First Contentful Paint en WordPress.
2. Reduce el tiempo de respuesta del servidor
El tiempo de respuesta del servidor, o tiempo hasta el primer byte (TTFB), es el tiempo que tarda el servidor en enviar el primer byte de información al navegador. Esto mide el retraso entre el inicio de una solicitud y el comienzo de la respuesta.
El First Contentful Paint depende del TTFB. Este es un ejemplo de cómo el FCP y el TTFB funcionan conjuntamente durante el proceso de carga:
FCP = TTFB + tiempo de renderizado
Esto significa que reducir el tiempo de respuesta del servidor puede ser una forma eficaz de mejorar la puntuación de First Contentful Paint en WordPress. Una de las formas más sencillas de hacerlo es encontrar un servicio de hosting de calidad.
A menudo, lo mejor es elegir un proveedor de alojamiento configurado específicamente para WordPress. Un servicio de alojamiento de WordPress puede optimizar tu contenido dinámico y mejorar el tiempo de respuesta de tu servidor. Esto puede, a su vez, mejorar tu puntuación de FCP.
También ayuda contar con servidores cerca de tu audiencia. Por eso, al evaluar un proveedor de alojamiento web, conviene comprobar dónde están ubicados sus servidores. Si tu audiencia está repartida geográficamente, quizá también te interese utilizar WordPress CDN para que los visitantes puedan acceder a tu sitio desde un servidor más cercano a ellos.
Cuando elijas tu nuevo proveedor de hosting, podrás migrar fácilmente tu sitio de WordPress. Después, disfrutarás de velocidades de carga más rápidas, un menor tiempo de respuesta del servidor y una puntuación de FCP más alta.
3. Elimina los recursos que bloquean el renderizado
Cuando alguien intenta visitar tu sitio web, todos los elementos de la página tienen que renderizarse. Durante este proceso, el código de tu sitio se descarga de arriba abajo. Antes de que aparezca tu contenido, el navegador tiene que leer toda esta cola de scripts.
Por desgracia, puede haber recursos que bloquean el renderizado que impidan que la página se cargue. En este caso, es necesario renderizar un archivo innecesario de HTML, CSS o JavaScript, lo que impide que el navegador cargue contenido importante.
Estos archivos suelen ser grandes y no contienen información esencial. Cuando los recursos que bloquean el renderizado se procesan al principio de la cola, tus imágenes, textos u otros elementos visuales esenciales pueden tardar más en aparecer. Como puedes imaginar, esto puede afectar negativamente al FCP, así como al LCP y al Total Blocking Time (TBT).
Con PageSpeed Insights, puedes comprobar fácilmente si este es un problema para tu sitio. En la sección de Oportunidades busca la alerta Eliminar los recursos que bloquean el renderizado.
Para solucionar este problema, puedes usar el plugin Jetpack Boost para optimizar CSS, aplazar la carga de JavaScript no esencial y aplazar la carga de las imágenes que están fuera de la pantalla. Esto mejorará la estructura de tus archivos para que se carguen más rápido.
Si quieres editar manualmente tus scripts, puedes instalar el plugin Async JavaScript.
Esta herramienta te permite añadir atributos async o defer a archivos específicos, pero el proceso puede ser un poco complicado. Con Jetpack Boost, puedes optimizar fácilmente los archivos de tu sitio sin trabajar con código.
4. Optimiza la estructura de CSS
Al escribir código, puedes incluir espacios para que otras personas lo entiendan fácilmente. El problema es que estos caracteres adicionales pueden ocupar más espacio en el disco. Además, los navegadores no necesitan espacios en blanco para procesar el código.
La optimización de CSS consiste en eliminar espacios y caracteres adicionales de tus archivos CSS. Al eliminar información innecesaria, puedes reducir el tamaño de una página. Esto facilita que el navegador la lea y, por tanto, puede mejorar tu puntuación de FCP.
Jetpack Boost te permite hacerlo en un solo paso sencillo. Al activar el ajuste «Optimizar la carga de CSS», el plugin minificará tus archivos para cargar únicamente el CSS crítico.
Con Jetpack Boost, también puedes generar el CSS de la ruta crítica para la página con solo hacer clic en un botón. Esta es la cantidad mínima de código CSS necesaria para mostrar el contenido visible en la parte superior de la página.
Crear manualmente el CSS de la ruta crítica puede ser una tarea abrumadora, pero puedes utilizar una herramienta como Pegasaas para automatizar el proceso. Solo tienes que introducir la URL de tu sitio para acceder a este código.
Después, puedes añadir este CSS dentro de la sección <head> de tu HTML. Si se hace correctamente, el contenido visible en la parte superior se mostrará de inmediato, sin hojas de estilo asíncronas.
5. Evita los elementos que dependan de JavaScript en la parte superior de la página
Aunque optimices tu JavaScript, puede seguir tardando más en cargarse que HTML. Como el FCP mide el tiempo que tarda en renderizarse el primer elemento de una página, es importante asegurarse de que estos elementos no dependan demasiado de JavaScript.
Al estructurar tu sitio web, debes evitar que el diseño dependa de JavaScript en la parte superior de la página. Para mejorar la primera impresión de contenido (First Contentful Paint), muchas personas optan por retrasar o eliminar JavaScript. Si tus primeros elementos dependen de scripts pesados, la página no se cargará muy rápido.
Estos son algunos elementos de JavaScript que deberían trasladarse a una zona más abajo de la página:
- Animaciones pesadas
- Carruseles
- Widgets de redes sociales
- Google Ads
Como el código de JavaScript se ejecuta de arriba abajo, puede ser conveniente trasladar estos elementos más abajo en la página. Si están en una zona que no se ve inicialmente, los visitantes podrán ver tu contenido mucho más rápido.
6. Evita la carga diferida de imágenes en la parte superior de la página
Una de las mejores formas de acelerar tu sitio web es implementar la carga diferida de imágenes. Básicamente, esto consiste en procesar las imágenes cuando aparecen en pantalla. Si alguien está viendo la parte superior de la página, las imágenes que estén más abajo todavía no tendrán que cargarse.
Aunque la carga diferida de imágenes puede ofrecer muchas ventajas, en realidad puede perjudicar la primera impresión de contenido (First Contentful Paint). La carga diferida utiliza un script que retrasa la carga de las imágenes. Como utiliza JavaScript, puede retrasar tu puntuación de FCP.
Al utilizar un plugin de carga diferida como Jetpack Boost, puedes especificar qué imágenes excluir de la carga diferida. Para las imágenes de la parte superior de la página, puedes añadir la clase skip-lazy de CSS.
También puedes aplicar el filtro jetpack_lazy_images_blocked_classes. Esto indicará a Jetpack que no aplique la carga diferida a las imágenes que tengan una clase determinada.
Este es el aspecto que tiene ese código en la práctica:
function mysite_customize_lazy_images( $blocked_classes ) {
$blocked_classes[] = 'my-header-image-classname';
return $blocked_classes;
}
add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );También puede ser buena idea desactivar la carga diferida para el logotipo de tu sitio. De este modo, el logotipo se renderizará más rápido y animará a los usuarios a permanecer en la página.
7. Optimiza y comprime las imágenes
Normalmente, las imágenes no son los primeros elementos que se renderizan en una página. Por eso, quizá no tengas que optimizar y comprimir tus imágenes para mejorar el FCP. Aun así, deberías plantearte realizar este paso para reducir el tiempo de carga y el uso de recursos del servidor.
En primer lugar, puedes cambiar el formato de tus archivos a SVG o WebP. Es probable que tu sitio utilice archivos de imagen JPG, PNG o GIF. Al utilizar un formato con una compresión mejor, es posible que reduzcas el tiempo de la primera impresión de contenido (First Contentful Paint).
También puedes utilizar un plugin de compresión de imágenes. Con una herramienta como TinyPNG, puedes optimizar automáticamente imágenes JPEG, PNG y imágenes WebP en WordPress a medida que las subes.
Si algunas imágenes no necesitan una resolución de alta calidad, puedes insertarlas en línea. Esto puede ser útil para imágenes de la parte superior de la página, como logotipos, iconos e imágenes de banners. Al insertar estos elementos en línea, el navegador no tendrá que realizar tantas solicitudes para descargarlos.
Para insertar una imagen en línea, tienes que convertirla al formato Base64 o SVG. La herramienta Base64 Image puede convertir automáticamente archivos JPG, PNG, GIF, WebP, SVG y BMP en un archivo Base64.
Después, puedes añadir las imágenes Base64 a tu sitio web. Este es el código de HTML que puedes utilizar:
<img src="data:image/jpeg;base64,/uj/…[content]..." width="100" height="50" alt="this is a base64 image">Para CSS, esta es la forma de insertar un archivo Base64:
.custom-class {
background: url('data:image/jpeg;base64,/9j/…[content]...');
}Si utilizas un archivo SVG, puedes insertar la imagen en HTML:
<body>
<!-- Insert SVG code here, and the image will show up! -->
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx='50' cy='25' r='20'/>
</svg>
</body>Ten en cuenta que insertar imágenes en línea puede aumentar su tamaño, así como el tamaño total de la página. Además, estas imágenes no pueden distribuirse a través de tu red de distribución de contenido (CDN).
8. Aprovecha la caché a nivel de servidor
Cuando alguien hace clic en tu sitio web, su navegador solicita datos a tu servidor. Después, el servidor procesa las solicitudes y devuelve los recursos correspondientes.
Con la caché a nivel de servidor, tu servidor almacena temporalmente estos archivos para reutilizarlos. Cuando el mismo usuario envíe la solicitud por segunda vez, tu servidor enviará la copia guardada de la página web.
Al utilizar una caché, tu servidor no tendrá que generar el contenido desde cero cada vez. Esto puede reducir eficazmente la carga de tu servidor y permitir que los usuarios vean el contenido antes.
Para empezar a utilizar una caché a nivel de servidor, puedes instalar un plugin de caché como WP Super Cache. Después, tu servidor entregará archivos estáticos de HTML generados, en lugar de procesar scripts de PHP.
Además, puedes configurar fácilmente la caché en los ajustes de WP Super Cache. Solo tienes que seleccionar Activar la caché.
Esta puede ser una de las formas más sencillas de reducir el tiempo de procesamiento de tu servidor. Con la caché, puedes garantizar una experiencia rápida y agradable a los visitantes que vuelvan a tu sitio.
9. Utiliza una red de distribución de contenido (CDN)
Otra forma de mejorar tu puntuación de FCP es utilizar una red de distribución de contenido (CDN). La CDN es una red de servidores que puede distribuir contenido en línea a grandes distancias. Cuando alguien visita tu sitio, la CDN distribuye tu contenido desde el servidor más cercano a su ubicación.
Al implementar una CDN, puedes reducir la distancia entre tu servidor y los visitantes. Como resultado, estos visitantes disfrutarán de tiempos de carga más rápidos.
Por suerte, Jetpack incluye una CDN de WordPress gratuita e integrada. Tras activarlo, puedes ir a Jetpack → Ajustes → Rendimiento y velocidad y activar el acelerador del sitio.
Esto puede acelerar eficazmente la distribución de tus imágenes y archivos estáticos. Independientemente de su ubicación, los visitantes podrán acceder a tu contenido sin una demora significativa.
10. Reduce el tamaño del DOM
El modelo de objetos del documento (DOM) es una interfaz que representa la estructura y el contenido de un documento web. Si las páginas de tu sitio web son demasiado complejas, pueden aumentar el tamaño del DOM. Esto puede perjudicar tu rendimiento, incluida la primera impresión de contenido (First Contentful Paint).
Lighthouse te avisará si tienes un tamaño excesivo del DOM. En general, solo recibirás un aviso si el elemento body tiene más de 800 nodos. Si hay más de 1.400 nodos, recibirás un mensaje de error.
Si editas el DOM por tu cuenta, debes asegurarte de crear únicamente los nodos necesarios y eliminar los que no sean esenciales. Si tienes un sitio de WordPress, estas tareas las realizarán los temas, los plugins, el núcleo de WordPress y los maquetadores de páginas.
Aquí tienes algunas formas alternativas de reducir el tamaño del DOM en WordPress:
- Divide las páginas largas en otras más pequeñas
- Reduce el número de entradas de tu archivo y de tu página de inicio
- Evita usar etiquetas <div> innecesarias
- Usa menos selectores de CSS
También puede ser beneficioso elegir un tema de WordPress optimizado. Usar una opción rápida y ligera como Twenty Twenty-Two puede ayudarte a reducir el tamaño del DOM.
11. Asegúrate de que el texto siga visible mientras se carga la fuente web
A menudo, las fuentes tienen archivos grandes que tardan mucho en cargarse. En algunos casos, el navegador retrasa la representación del texto hasta que la fuente se carga por completo. Esto se conoce como Flash of Invisible Text (FOIT).
Para evitarlo, puedes mostrar temporalmente una fuente del sistema. Esto implica incluir font-display: swap en el estilo @font-face.
Este es un ejemplo de cómo puede verse:
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}Como alternativa, puedes importar una fuente de Google Fonts. En este caso, puedes aplicar el parámetro &display=swap al enlace de Google Fonts:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">En lugar de mostrar un destello de texto invisible, tu sitio web mostrará un Flash of Unstyled Text (FOUT). Así, tu sitio web podrá mostrar el contenido de inmediato y mejorar tu First Contentful Paint.
Preguntas frecuentes (FAQ) sobre First Contentful Paint
Veamos algunas preguntas frecuentes sobre First Contentful Paint.
¿Cómo puedo medir la puntuación de FCP de mi sitio web de WordPress?
Puedes usar varias herramientas para medir tu First Contentful Paint. Con PageSpeed Insights, Lighthouse o GTmetrix, podrás identificar tu puntuación de FCP y solucionar problemas concretos.
¿Cuál es una buena puntuación de FCP?
Una buena puntuación de FCP debe ser de 1,8 segundos o menos. Una métrica de entre 1,8 y 3 segundos probablemente necesite mejoras. Cualquier valor superior a 3 segundos requerirá atención inmediata.
¿Cómo puedo optimizar fácilmente mi puntuación de FCP?
Una de las formas más sencillas de mejorar tu puntuación de FCP es usar el plugin Jetpack Boost. Esta herramienta gratuita puede optimizar tus métricas Core Web Vitals en un solo lugar.
Primero, instala y activa Jetpack Boost. Después, haz clic en Jetpack para empezar a mejorar el rendimiento de tu sitio web.
Aquí puedes optimizar la carga de CSS, aplazar el JavaScript no esencial y usar la carga diferida de imágenes. Al activar cada función, puedes mejorar automáticamente la puntuación de First Contentful Paint en WordPress.
Muestra tu contenido online al instante
Al mejorar la puntuación de First Contentful Paint de tu sitio, puedes asegurarte de que el contenido se cargue más rápido para tus visitantes. Sin esta métrica, podrías experimentar una tasa de rebote mucho mayor.
Para medir tu FCP, puedes analizar tu sitio web con PageSpeed Insights. Si obtienes una puntuación baja, puedes usar Jetpack Boost para optimizar tus scripts y archivos de imagen. Además, puedes usar el plugin para activar la carga diferida y usar la CDN.
Cuando implementes estas medidas, tus visitantes empezarán a disfrutar de tiempos de carga más rápidos. ¡Esto se traduce en una tasa de rebote menor y una audiencia más implicada!
Jetpack 