¿Tienes problemas con los tiempos de First Contentful Paint (FCP) en tu sitio?

Ya sea que no estés seguro de lo qué es el First Contentful Paint o estés buscando algunos consejos específicos sobre cómo acelerar los tiempos de First Contentful Paint en tu sitio, este post es para ti.

Empezaremos explicando qué es el First Contentful Paint y cómo puedes medirlo en tu sitio.

Después, compartiremos un montón de tácticas que puedes utilizar para acelerar los tiempos de FCP en tu sitio. Y para que este post sea lo más accesible posible, intentaremos mostrar herramientas no técnicas y plugins de WordPress que te ayuden a ponerlo todo en práctica.

¡Vamos allá!

¿Qué es el First Contentful Paint (FCP)?

El First Contentful Paint, a menudo abreviada como FCP, es una métrica de rendimiento centrada en la experiencia del usuario que mide el tiempo que tarda la primera parte de la página en ser visible en la pantalla del usuario.

El FCP es una métrica importante porque afecta al rendimiento percibido. Cuando un visitante visita tu sitio por primera vez, su navegador mostrará una pantalla en blanco, lo que no es una buena experiencia para los visitantes.

Una vez que el contenido empieza a cargarse, el visitante sentirá al menos que «algo» está ocurriendo, y el contenido completo de la página se cargará pronto. Por eso, tener un tiempo FCP rápido puede hacer que el usuario sienta que tu sitio web es rápido, aunque el resto del contenido tarde un poco más en cargarse.

Por el contrario, tener un tiempo FCP lento es frustrante para los usuarios, ya que les hace ver que la página tarda mucho en cargarse. No hay nada peor que tener a los visitantes sentados mirando sus pantallas en blanco y preguntándose si tu sitio web está funcionando.

First Contentful Paint vs Largest Contentful Paint

El Largest Contentful Paint (LCP) es otra popular métrica centrada en la experiencia del usuario que funciona de forma similar al First Contentful Paint.

Como las métricas son tan similares, puede ser difícil entender las diferencias entre First Contentful Paint y Largest Contentful Paint.

Aquí tienes la diferencia básica entre ellos:

  • FCP — mide el tiempo que tarda en aparecer el primer objeto. Puede ser cualquier cosa, siempre que aparezca algún tipo de contenido en la página.
  • LCP — mide el tiempo que tarda en aparecer el contenido principal de la página.

Debido a esta diferencia, el tiempo FCP de tu página siempre debe ser al menos un poco más rápido que el tiempo LCP de tu página. Según la definición de las métricas, es imposible que tu tiempo LCP sea más rápido que tu tiempo FCP. Aunque técnicamente podrían ser iguales si el «primer» elemento en cargarse es el mismo que el elemento «principal», esto no ocurrirá en la mayoría de las páginas.

Para ilustrarlo, aquí tienes una línea de tiempo visual de un análisis de WebPageTest que realizamos en la página principal de Kinsta.

  • El FCP aparece en la tira de película de 1,0 segundos (,924 segundos, para ser exactos). Es la primera vez que pasa de ser una página en blanco a tener algún contenido visual.
  • El LCP aparece en la tira de película de 1,3 segundos (1,217 segundos para ser exactos). Es entonces cuando el contenido «principal» de la página es visible.
Una línea de tiempo que muestra la diferencia entre los tiempos FCP y LCP.
La diferencia entre los tiempos FCP y LCP.

¿Cuál es un buen tiempo de First Contentful Paint?

Google recomienda que busques un tiempo de First Contentful Paint de 1,8 segundos o menos en las páginas de tu sitio.

Google clasifica los tiempos de FCP entre 1,8 y 3,0 segundos como «Necesita mejorar», mientras que los tiempos de FCP superiores a 3,0 segundos son «Deficiente».

Google recomienda que los tiempos de FCP sean inferiores a 1,8 segundos para ser "Buenos".
Directrices de Google para los tiempos FCP.

Cómo medir el tiempo de First Contentful Paint de una página

La forma más fácil de medir el tiempo de First Contentful Paint de una página de tu sitio es utilizar la herramienta PageSpeed Insights de Google, aunque también hay otras herramientas que puedes utilizar.

Lo bueno de PageSpeed Insights es que te proporcionará tanto resultados de pruebas simuladas como datos de FCP de usuarios reales (si tu sitio tiene suficiente tráfico para incluirlo en el informe de experiencia de usuario de Chrome).

También incluye el rendimiento tanto en ordenadores de sobremesa como en móviles, ya que el tiempo de FCP de tu página variará en función del dispositivo y la velocidad de conexión del usuario.

Aquí te explicamos cómo probar una página:

  1. Abre la página PageSpeed Insights.
  2. Introduce la URL de la página de tu sitio que quieras probar.
  3. Haz clic en el botón Analizar.

Tras una breve espera, deberías ver los resultados.

Si tu sitio tiene suficiente tráfico para ser incluido en el informe Experiencia de usuario de Chrome, verás 2 tiempos FCP diferentes:

  • El tiempo de la sección «Descubre lo que experimentan tus usuarios reales» es el tiempo medio de FCP de los visitantes humanos reales de tu sitio.
  • El tiempo de la sección «Diagnostica problemas de rendimiento» se basa en una prueba simulada. Puedes ver las condiciones de la simulación en el recuadro gris bajo los números.

También puedes cambiar entre los resultados para móviles y para ordenadores de sobremesa utilizando las pestañas de la parte superior.

Dónde localizar los tiempos FCP en la página de resultados PageSpeed Insights de Google.
Tiempos de FCP en la herramienta PageSpeed Insights de Google.

Para probar otras páginas de tu sitio, puedes repetir el mismo proceso.

Los tiempos de FCP variarán en función de la página, por lo que te recomendamos que pruebes varias páginas para tener una buena idea del rendimiento de tu sitio.

Por ejemplo, puedes probar la página de inicio, la página de listado del blog, una sola entrada del blog, etc. Y, de nuevo, asegúrate de mirar tanto los datos de móvil como los de escritorio.

Otras formas de medir los tiempos de First Contentful Paint

Aunque PageSpeed Insights ofrece una de las formas más sencillas de ver los tiempos de FCP reales y simulados de tu sitio, también hay otras herramientas de comprobación del rendimiento que puedes utilizar como suplemento o sustituto de PageSpeed Insights.

Estos son algunos buenos sitios para empezar:

¿Qué puede afectar a los tiempos de FCP de tu sitio?

En un nivel alto, existen 2 «categorías» de problemas que pueden ralentizar el FCP:

  • Tiempo de respuesta lento del servidor — si tu servidor tarda demasiado en proporcionar los datos de tu sitio a los navegadores de los usuarios, tu página tendrá un tiempo FCP lento. Esto puede incluir problemas como un alojamiento o DNS lentos, no utilizar caché (que requiere que el servidor haga más trabajo antes de poder servir una página), no utilizar una red de distribución de contenidos (CDN), etc.
  • Código del sitio web mal optimizado — aunque tu servidor responda con rapidez, podrías tener un tiempo FCP lento si el código de tu sitio está mal optimizado. Por ejemplo, tu página podría tener toneladas de JavaScript que están bloqueando la carga del contenido visible. También podría haber problemas con CSS, imágenes u otras áreas del código de tu sitio.

Dependiendo de tu sitio, podrías tener problemas en una sola área o en ambas.

Cómo acelerar el First Contentful Paint: 10 consejos que funcionan

Ahora que ya sabes más sobre qué es el First Contentful Paint y por qué es importante, pasemos a algunos consejos prácticos que puedes poner en práctica para mejorar los tiempos de tu sitio.

Lo bueno de poner en práctica estos consejos es que mejorarán todas las métricas de rendimiento de tu sitio, no sólo el FCP.

Aquí tienes un resumen rápido de la lista — más abajo los analizaremos en detalle:

1. Cambiar a un alojamiento más rápido

Hay un hecho inevitable cuando se trata de FCP:

Si el alojamiento subyacente de tu sitio es lento, tu FCP seguirá siendo lento aunque tengas un sitio perfectamente optimizado.

Poner en práctica los otros consejos de esta lista mejorará los tiempos de FCP de tu sitio, pero el rendimiento de tu sitio siempre se verá limitado por la calidad de tu alojamiento.

Así que — puedes seguir adelante y poner en práctica primero los otros consejos de esta lista. Pero si sigues teniendo problemas con los tiempos lentos de FCP después de hacer todo lo demás, puede que necesites cambiar a un alojamiento más rápido.

Si no estás seguro de por dónde empezar, el alojamiento administrado de WordPress de Kinsta es una gran elección.

No sólo la infraestructura subyacente está optimizada para el rendimiento, sino que Kinsta también puede ayudarte a implementar automáticamente muchas de las otras estrategias de esta lista, como el almacenamiento en caché, la red de distribución de contenidos (CDN), DNS optimizado, imágenes optimizadas y mucho más.

2. Utiliza el caché de páginas (idealmente a nivel de servidor)

Si has construido tu sitio web con WordPress, tendrá que procesar de forma dinámica el código del lado del servidor para cada visitante (por defecto).

Cuando una persona visita tu página, tu servidor de alojamiento necesitará ejecutar el PHP de WordPress y consultar la base de datos de tu sitio para generar el documento HTML terminado que se entregará al navegador del usuario.

Esto lleva tiempo, especialmente en alojamientos poco potentes, lo que puede tener un gran efecto en los tiempos de FCP de tu sitio.

Con el almacenamiento en caché de páginas, puedes «almacenar en caché» la versión HTML acabada de cada página. En lugar de tener que procesar el código del lado del servidor en cada visita, tu servidor responderá inmediatamente con el HTML terminado en su caché.

Si utilizas el alojamiento de Kinsta, Kinsta implementará automáticamente el almacenamiento en caché de páginas por ti a través de su funcionalidad Edge Caching.

La particularidad del sistema Edge Caching de Kinsta es que puede servir las páginas almacenadas en caché desde la red global de Cloudflare. Hablaremos de lo que es una red de distribución de contenidos en el siguiente apartado, pero la principal ventaja es que te permite conseguir tiempos de carga globales muy rápidos.

La interfaz de Kinsta que te permite activar la función Edge Caching de Kinsta.
La solución Edge Caching integrada de Kinsta.

Si te alojas en otro sitio, puedes comprobar si tu proveedor tiene una función de almacenamiento en caché a nivel de servidor o utilizar uno de los muchos plugins de almacenamiento en caché de WordPress, como WP Rocket y FlyingPress.

3. Implementa una red de distribución de contenidos (CDN)

Una red de distribución de contenidos (CDN) es una red global de servidores que almacenan una copia de algunos o todos los contenidos/archivos de tu sitio.

Cuando una persona visite tu sitio, la CDN servirá automáticamente los archivos de tu sitio desde la ubicación físicamente más cercana al visitante.

Una representación visual de la red de Cloudflare de más de 300 servidores edge.
Cloudflare tiene una enorme red global de más de 300 ubicaciones.

Dado que la distancia física sigue influyendo en los tiempos de carga (¡todavía no hemos superado la velocidad de la luz!), el navegador del visitante recibirá los archivos de tu sitio más rápidamente, mejorando tu tiempo FCP.

Si utilizas el alojamiento de Kinsta, Kinsta implementa automáticamente una CDN gratuita impulsada por Cloudflare para todas las páginas de tu sitio, que ofrece el rendimiento global más rápido.

Si te alojas en otro sitio, puedes implementar tú mismo una CDN utilizando proveedores como Cloudflare, Amazon CloudFront, Fastly y otros.

4. Utiliza un proveedor de DNS más rápido

Antes de que el navegador de un usuario pueda conectarse al servidor de tu sitio web, primero tiene que utilizar el Sistema de Nombres de Dominio (DNS) para encontrar el servidor web real asociado al nombre de dominio de tu sitio.

El proveedor de DNS que hayas configurado para que utilice tu nombre de dominio afectará a la duración de este proceso, lo que, en consecuencia, afectará al FCP de tu sitio.

Por ejemplo, según DNSPerf, la diferencia entre el proveedor más rápido y el más lento es de más de 130 ms, lo que es bastante significativo.

Si te alojas con Kinsta, ya tienes acceso a los DNS premium de Amazon Route53 cuando utilizas los servidores de nombres de Kinsta.

La interfaz de Kinsta que te permite gestionar los registros DNS de tu dominio.
Gestión de DNS gratuita de Kinsta impulsada por Amazon Route53.

Si alojas en otro sitio, Cloudflare ofrece uno de los mejores servicios DNS gratuitos.

5. Optimiza el CSS de tu sitio

Ahora que has solucionado los problemas de tiempo de respuesta del servidor, es hora de pasar a optimizar el código de tu sitio, empezando por su CSS.

El CSS controla el diseño y el estilo de los elementos de tu página. Aunque es una parte esencial de cualquier sitio web, tu CSS podría estar ralentizando tus tiempos de FCP si se está cargando de forma no optimizada y/o si estás cargando CSS innecesario en páginas donde no es necesario.

Tenemos un post entero sobre cómo optimizar el CSS, pero repasemos las tácticas más importantes para acelerar el FCP.

Elimina el CSS no utilizado

En primer lugar, deberás eliminar el CSS que no utilices de las páginas en las que no sea necesario.

Una forma de hacerlo es el método manual. Una herramienta como PurifyCSS puede escanear tus páginas en busca de CSS no utilizado, y luego puedes eliminar manualmente ese código. PageSpeed Insights también marcará el CSS no utilizado en la sección «Reducir CSS no utilizado» de sus diagnósticos.

Sin embargo, si utilizas WordPress, hay algunos plugins útiles que pueden automatizar todo el proceso por ti, lo que es mucho más fácil (especialmente para los no desarrolladores). Algunas buenas opciones a tener en cuenta son WP Rocket, FlyingPress y Perfmatters.

Todos estos plugins son herramientas premium. Sin embargo, creemos que puede merecer la pena la inversión porque también pueden ayudarte a poner en práctica muchos de los otros consejos de esta lista.

La interfaz del plugin WP Rocket que te permite eliminar automáticamente el CSS no utilizado de las páginas de tu sitio.
Cómo eliminar CSS no utilizado en WP Rocket.

Incorpora CSS crítico Inline y pospone CSS no crítico

Por defecto, tu sitio probablemente esperará hasta que haya cargado todo el código CSS antes de empezar a mostrar el contenido de la mitad superior de la página. Sin embargo, esto no es totalmente óptimo desde el punto de vista de la experiencia del usuario, porque en realidad sólo necesitas el CSS necesario para el contenido de la mitad superior de la página; todo lo demás puede esperar hasta más tarde.

El CSS para el contenido de la mitad superior de la página se denomina CSS crítico.

Para acelerar el FCP de tu página y otras métricas de rendimiento, puedes colocar este CSS crítico directamente en la sección <head> de la página (es decir, ponerlo inline) en lugar de cargarlo como parte de una hoja de estilos externa.

Los usuarios más avanzados pueden generar manualmente el CSS crítico de una página utilizando una herramienta como ésta.

Pero, de nuevo, en WordPress, puedes automatizar este proceso para cada página individual de tu sitio utilizando FlyingPress o WP Rocket.

Una vez que hayas incorporado el CSS crítico de manera Inline en una página, puedes posponer de manera segura la carga del resto del CSS de la página hasta más adelante en el proceso de carga de la página (después de que el contenido por encima de la página ya se haya renderizado).

Tanto WP Rocket como FlyingPress lo harán automáticamente por ti como parte de su funcionalidad de CSS crítico, que es otra razón para considerar su uso.

Cómo optimizar la entrega de CSS y CSS de ruta crítica utilizando el plugin FlyingPress.
Cómo alinear CSS crítico en FlyingPress.

Minificar el código CSS

Por último, otra forma de añadir un poco de rendimiento al código CSS de tu sitio es minificarlo. Cuando minificas el código CSS, eliminas los caracteres y espacios en blanco innecesarios, lo que puede suponer un ahorro de tamaño más marginal.

Plugins como WP Rocket y FlyingPress pueden hacerlo por ti. También puedes encontrar plugins específicos de minificación como Fast Velocity Minify.

6. Optimiza el JavaScript de tu sitio

Además del CSS, el JavaScript de tu sitio es otra área a la que deberás dedicar algo de tiempo para optimizar el código de tu sitio.

Al igual que con CSS, hay varias estrategias diferentes que puedes aplicar para reducir el impacto de JavaScript en los tiempos de FCP de tu sitio.

No utilices elementos que dependan de JavaScript por encima del pliegue

Si utilizas JavaScript para activar funciones importantes por encima de la página, como el menú de navegación de tu sitio (esto es especialmente común en la versión móvil de un sitio, ya que muchos menús para móviles dependen de JavaScript), esto puede ralentizar el tiempo de tu FCP porque los navegadores de los usuarios necesitan cargar el pesado JavaScript antes de poder empezar a procesar la página.

Si utilizas WordPress, elegir un tema optimizado para el rendimiento debería ayudarte a evitar esto, ya que los buenos desarrolladores evitarán depender de JavaScript para estas funciones.

También puedes intentar evitar el uso de sliders y otros elementos con JavaScript en las zonas por encima del pliegue.

Elimina el JavaScript innecesario

Aunque deberás hacer especial hincapié en reducir el uso de JavaScript en los elementos de la mitad superior de la página, en general también es una buena idea eliminar todo el JavaScript innecesario posible de cada página.

Para empezar, deberás eliminar cualquier plugin de WordPress que no suponga una mejora significativa para tu sitio, ya que muchos plugins de WordPress dependen de JavaScript para su funcionalidad.

Otra opción es utilizar un plugin administrador de scripts como Asset CleanUp o Perfmatters para desactivar JavaScript página por página, lo que te permite desactivar los scripts en las páginas en las que no son necesarios y dejarlos activados en otras páginas.

También tenemos una guía más técnica sobre cómo desactivar plugins página por página.

Elimina el JavaScript que bloquea la renderización (diferir o retrasar)

Pase lo que pase, probablemente necesitarás cargar al menos algo de JavaScript en tu página. Para asegurarte de que este JavaScript no interfiere con la carga del contenido de la mitad superior de la página, hay dos estrategias comunes que puedes aplicar:

  • Diferir el JavaScript que bloquea la renderización — puedes evitar que se bloquee la carga de otros contenidos difiriendo la carga del JavaScript hasta más adelante en el proceso de renderización de la página. Puedes utilizar defer o async, y existen plugins de WordPress para automatizar este proceso.
  • Retrasar JavaScript hasta la interacción del usuario — puedes esperar a cargar completamente parte o todo el JavaScript de tu sitio hasta que un usuario interactúe con la página (por ejemplo, haciendo clic o desplazándose). Esto ofrece la mayor mejora de rendimiento, pero puede que tengas que excluir manualmente determinados scripts para evitar causar problemas.

Puedes implementar cualquiera de estas tácticas en WordPress mediante plugins como WP Rocket o FlyingPress.

La interfaz del plugin WP Rocket que te permite optimizar completamente el código JavaScript de tu sitio.
Cómo optimizar JavaScript con WP Rocket.

También tenemos guías sobre cómo diferir la interpretación de JavaScript y cómo eliminar los recursos que bloquean la renderización.

Minificar el código JavaScript

Por último, deberás minificar el JavaScript restante de tu sitio web para conseguir algunas pequeñas ventajas adicionales de rendimiento eliminando caracteres innecesarios.

Al igual que con la minificación del CSS, la mayoría de los plugins de caché y rendimiento (incluidos WP Rocket y FlyingPress) pueden hacerlo por ti. También puedes utilizar un plugin específico como Fast Velocity Minify.

7. Desactiva la carga diferida para las imágenes de la mitad superior de la página

Con la carga diferida de imágenes, puedes retrasar la carga de las imágenes de tu sitio hasta que sean necesarias (por ejemplo, cuando un usuario se desplaza por la página).

Normalmente, esto es bueno para el rendimiento si estás retrasando la carga de imágenes que están por debajo del pliegue. Sin embargo, utilizar la carga diferida para las imágenes por encima del pliegue puede afectar negativamente a los tiempos FCP y LCP de tu sitio.

Por lo tanto, deberás asegurarte de excluir de la carga diferida cualquier imagen que esté por encima del pliegue.

Si utilizas la función básica de carga diferida de WordPress, WordPress debería hacerlo automáticamente. Pero si tienes problemas, puedes ajustar manualmente este comportamiento utilizando la función wp_omit_loading_attr_threshold.

Si utilizas un plugin para la carga diferida, es de esperar que te ofrezca una opción para hacerlo. Por ejemplo, Perfmatters te permite excluir automáticamente un cierto número de imágenes principales y excluir manualmente imágenes específicas si es necesario.

La interfaz del plugin Perfmatters que te permite excluir las imágenes principales de la carga lenta.
Cómo excluir las imágenes principales de la carga lenta en Perfmatters.

Si tu plugin no ofrece esta función, plantéate cambiar a uno que sí lo haga.

8. Optimizar la entrega de fuentes

Para garantizar que el contenido de texto sea visible mientras se carga (lo que puede afectar a los tiempos de tu FCP y a la experiencia del usuario), es importante optimizar también cómo se cargan las fuentes si utilizas fuentes personalizadas (como las que has encontrado en Google Fonts).

Para evitar problemas, puedes utilizar los descriptores CSS Font-Display: Optional o Font-Display: Swap.

Con Font-Display: Optional, puedes indicar a los navegadores de los usuarios que utilicen una fuente alternativa si la fuente personalizada no se carga lo suficientemente rápido.

Si no quieres añadir esto utilizando tu propio CSS, hay varios plugins de WordPress que pueden optimizar la carga de fuentes por ti, como WP Rocket, FlyingPress y Perfmatters.

Cómo optimizar automáticamente las fuentes con el plugin FlyingPress.
Cómo optimizar las fuentes en FlyingPress.

9. Intenta reducir al máximo el tamaño del DOM

Según Mozilla, el Modelo de Objetos del Documento (DOM, Document Object Model) es «la representación de datos de los objetos que componen la estructura y el contenido de un documento en la web»

Aunque los visitantes humanos no interactúan con el DOM directamente, el DOM de una página es importante para ayudar a los navegadores web a comprender y mostrar el contenido de una página.

Como regla general, tener un DOM más grande y complejo provocará tiempos de FCP más lentos que una estructura DOM más corta y optimizada.

Aquí tienes algunos consejos para reducir el tamaño del DOM de tu sitio:

  • Utiliza un tema de WordPress optimizado para el rendimiento — en WordPress, tu tema desempeñará un papel importante en el tamaño del DOM de tu sitio. Echa un vistazo a nuestros posts con datos sobre los temas de WordPress más rápidos y los temas de WooCommerce más rápidos.
  • Utiliza el bloque Salto de Página — puedes dividir una página larga utilizando el bloque Salto de Página.
  • Optimizar la paginación — puedes utilizar la paginación en WordPress para dividir las páginas que contienen las entradas de tu blog (u otros tipos de entradas personalizadas).
  • Muestra extractos — en lugar de mostrar el texto completo en las páginas de listado, considera la posibilidad de mostrar un extracto.
  • Limita o evita el uso de constructores de páginas «pesados» — aunque los constructores de páginas visuales, de arrastrar y soltar, pueden ser muy agradables desde el punto de vista del diseño, también pueden añadir mucha hinchazón al DOM. Desde el punto de vista del rendimiento, será mejor que te quedes con el editor nativo. Puede que el rendimiento de un constructor visual merezca la pena por la potencia de diseño añadida, y eso suele estar bien siempre que sigas los demás consejos.

10. Evita las redirecciones (especialmente las redirecciones múltiples)

Las redirecciones te permiten enviar tráfico de una URL a otra URL antes de que se cargue la página. Por ejemplo, puedes redirigir a alguien que visita la versión HTTP de tu sitio a la versión HTTPS.

Sin embargo, como la redirección tiene que completarse antes de que el navegador del usuario pueda cargar la página, cada redirección suele añadir cientos de milisegundos de retraso al tiempo FCP de tu sitio (y a otras métricas de rendimiento).

Aquí tienes algunos consejos para evitar redireccionamientos innecesarios:

  • Actualiza las URL codificadas si cambias de HTTP a HTTPS — si pasas tu sitio a HTTPS, en realidad deberías actualizar todas las URL de la base de datos de tu sitio para que utilicen HTTPS en lugar de confiar en las redirecciones.
  • Apunta las URL a las versiones WWW o no WWW correctas — asegúrate de que todas tus URL utilizan la versión correcta para evitar redireccionamientos de WWW a no WWW (o viceversa).
  • Arregla los enlaces internos rotos — actualiza los enlaces internos que estén rotos en lugar de confiar en las redirecciones para enviar a los usuarios al lugar correcto.
  • Pide a otros sitios que arreglen los enlaces externos rotos (si merece la pena) — si estás recibiendo mucho tráfico hacia un enlace roto desde un sitio de terceros, puedes ponerte en contacto con el propietario del sitio y pedirle que arregle el enlace en lugar de confiar en las redirecciones.

Para encontrar problemas de redireccionamiento, puedes utilizar la herramienta gratuita de comprobación de redireccionamientos Kinsta. También tenemos un post sobre las mejores prácticas de redirección en WordPress.

Por ejemplo, aquí puedes ver que el comprobador de redirecciones de Kinsta detectó múltiples redirecciones cuando introdujimos http://www.wordpress.org como URL:

  • Una redirección de HTTP a HTTPS.
  • Una segunda redirección de WWW a no WWW.
Una página de resultados del comprobador de redirecciones de Kinsta que muestra múltiples redirecciones.
Redirecciones múltiples detectadas por la herramienta de comprobación de redirecciones de Kinsta.

Si ves múltiples redirecciones como éstas, tendrás que arreglarlas.

Resumen

El First Contentful Paint es una métrica de rendimiento centrada en la experiencia del usuario que te permite ver cuánto tarda en hacerse visible la primera pieza de contenido en tu página. Es similar, aunque ligeramente diferente, al Largest Contentful Paint.

Si optimizas el tiempo de First Contentful Paint de tu sitio, tendrá el efecto natural de mejorar también los tiempos de Largest Contentful Paint, junto con la mayoría de las demás métricas de rendimiento de tu sitio.

Para acelerar tus tiempos, deberás centrarte en optimizar tanto el código frontend de tu sitio como el tiempo de respuesta del servidor.

Si pones un sitio con código optimizado en un alojamiento rápido de WordPress como Kinsta, deberías poder conseguir que los tiempos de FCP de tu sitio estén muy por debajo de la marca de 1,8 segundos que Google considera «Buena»

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).