\u00bfQu\u00e9 es el First Contentful Paint (FCP)?<\/h2>\n
El First Contentful Paint, a menudo abreviada como FCP, es una m\u00e9trica de rendimiento centrada en la experiencia del usuario que mide el tiempo que tarda la primera parte de la p\u00e1gina en ser visible en la pantalla del usuario.<\/p>\n
El FCP es una m\u00e9trica importante porque afecta al rendimiento percibido<\/em>. Cuando un visitante visita tu sitio por primera vez, su navegador mostrar\u00e1 una pantalla en blanco, lo que no es una buena experiencia para los visitantes.<\/p>\n Una vez que el contenido empieza a cargarse, el visitante sentir\u00e1 al menos que \u00abalgo\u00bb est\u00e1 ocurriendo, y el contenido completo de la p\u00e1gina se cargar\u00e1 pronto. Por eso, tener un tiempo FCP r\u00e1pido puede hacer que el usuario sienta que tu sitio web es r\u00e1pido, aunque el resto del contenido tarde un poco m\u00e1s en cargarse.<\/p>\n Por el contrario, tener un tiempo FCP lento es frustrante para los usuarios, ya que les hace ver que la p\u00e1gina tarda mucho en cargarse. No hay nada peor que tener a los visitantes sentados mirando sus pantallas en blanco y pregunt\u00e1ndose si tu sitio web est\u00e1 funcionando.<\/p>\n El Largest Contentful Paint (LCP)<\/a> es otra popular m\u00e9trica centrada en la experiencia del usuario que funciona de forma similar al First Contentful Paint.<\/p>\n Como las m\u00e9tricas son tan similares, puede ser dif\u00edcil entender las diferencias entre First Contentful Paint y Largest Contentful Paint.<\/p>\n Aqu\u00ed tienes la diferencia b\u00e1sica entre ellos:<\/p>\n Debido a esta diferencia, el tiempo FCP de tu p\u00e1gina siempre debe ser al menos un poco m\u00e1s r\u00e1pido que el tiempo LCP de tu p\u00e1gina. Seg\u00fan la definici\u00f3n de las m\u00e9tricas, es imposible que tu tiempo LCP sea m\u00e1s r\u00e1pido que tu tiempo FCP. Aunque t\u00e9cnicamente podr\u00edan ser iguales si el \u00abprimer\u00bb elemento en cargarse es el mismo que el elemento \u00abprincipal\u00bb, esto no ocurrir\u00e1 en la mayor\u00eda de las p\u00e1ginas<\/em>.<\/p>\n Para ilustrarlo, aqu\u00ed tienes una l\u00ednea de tiempo visual de un an\u00e1lisis de WebPageTest que realizamos en la p\u00e1gina principal de Kinsta.<\/p>\n Google recomienda que busques un tiempo de First Contentful Paint de 1,8 segundos o menos en las p\u00e1ginas de tu sitio.<\/p>\n Google clasifica los tiempos de FCP entre 1,8 y 3,0 segundos como \u00abNecesita mejorar\u00bb, mientras que los tiempos de FCP superiores a 3,0 segundos son \u00abDeficiente\u00bb.<\/p>\n La forma m\u00e1s f\u00e1cil de medir el tiempo de First Contentful Paint de una p\u00e1gina de tu sitio es utilizar la herramienta PageSpeed Insights de Google<\/a>, aunque tambi\u00e9n hay otras herramientas que puedes utilizar<\/a>.<\/p>\n Lo bueno de PageSpeed Insights es que te proporcionar\u00e1 tanto resultados de pruebas simuladas como datos de FCP de usuarios reales (si tu sitio tiene suficiente tr\u00e1fico para incluirlo en el informe de experiencia de usuario de Chrome<\/em>).<\/p>\n Tambi\u00e9n incluye el rendimiento tanto en ordenadores de sobremesa como en m\u00f3viles, ya que el tiempo de FCP de tu p\u00e1gina variar\u00e1 en funci\u00f3n del dispositivo y la velocidad de conexi\u00f3n del usuario.<\/p>\n Aqu\u00ed te explicamos c\u00f3mo probar una p\u00e1gina:<\/p>\n Tras una breve espera, deber\u00edas ver los resultados.<\/p>\n Si tu sitio tiene suficiente tr\u00e1fico para ser incluido en el informe Experiencia de usuario de Chrome, ver\u00e1s 2<\/em> tiempos FCP diferentes:<\/p>\n Tambi\u00e9n puedes cambiar entre los resultados para m\u00f3viles y para ordenadores de sobremesa utilizando las pesta\u00f1as de la parte superior.<\/p>\n Para probar otras p\u00e1ginas de tu sitio, puedes repetir el mismo proceso.<\/p>\n Los tiempos de FCP variar\u00e1n en funci\u00f3n de la p\u00e1gina, por lo que te recomendamos que pruebes varias p\u00e1ginas para tener una buena idea del rendimiento de tu sitio.<\/p>\n Por ejemplo, puedes probar la p\u00e1gina de inicio, la p\u00e1gina de listado del blog, una sola entrada del blog, etc. Y, de nuevo, aseg\u00farate de mirar tanto los datos de m\u00f3vil como los de escritorio.<\/p>\n Aunque PageSpeed Insights ofrece una de las formas m\u00e1s sencillas de ver los tiempos de FCP reales y simulados de tu sitio, tambi\u00e9n hay otras herramientas de comprobaci\u00f3n del rendimiento<\/a> que puedes utilizar como suplemento o sustituto de PageSpeed Insights.<\/p>\n Estos son algunos buenos sitios para empezar:<\/p>\n En un nivel alto, existen 2 \u00abcategor\u00edas\u00bb de problemas que pueden ralentizar el FCP:<\/p>\n Dependiendo de tu sitio, podr\u00edas tener problemas en una sola \u00e1rea o en ambas.<\/p>\n Ahora que ya sabes m\u00e1s sobre qu\u00e9 es el First Contentful Paint y por qu\u00e9 es importante, pasemos a algunos consejos pr\u00e1cticos que puedes poner en pr\u00e1ctica para mejorar los tiempos de tu sitio.<\/p>\n Lo bueno de poner en pr\u00e1ctica estos consejos es que mejorar\u00e1n todas las<\/em> m\u00e9tricas de rendimiento de tu sitio<\/a>, no s\u00f3lo el FCP.<\/p>\n Aqu\u00ed tienes un resumen r\u00e1pido de la lista \u2014 m\u00e1s abajo los analizaremos en detalle:<\/p>\n Hay un hecho inevitable cuando se trata de FCP:<\/p>\n Si el alojamiento subyacente de tu sitio es lento, tu FCP seguir\u00e1 siendo lento aunque tengas un sitio perfectamente optimizado.<\/p>\n Poner en pr\u00e1ctica los otros consejos de esta lista mejorar\u00e1<\/em> los tiempos de FCP de tu sitio, pero el rendimiento de tu sitio siempre se ver\u00e1 limitado por la calidad de tu alojamiento.<\/p>\n As\u00ed que \u2014 puedes seguir adelante y poner en pr\u00e1ctica primero los otros consejos de esta lista. Pero si sigues teniendo problemas con los tiempos lentos de FCP despu\u00e9s de hacer todo lo dem\u00e1s, puede que necesites cambiar a un alojamiento m\u00e1s r\u00e1pido<\/a>.<\/p>\n Si no est\u00e1s seguro de por d\u00f3nde empezar, el alojamiento administrado de WordPress de Kinsta<\/a> es una gran elecci\u00f3n.<\/p>\n No s\u00f3lo la infraestructura subyacente est\u00e1 optimizada para el rendimiento, sino que Kinsta tambi\u00e9n puede ayudarte a implementar autom\u00e1ticamente muchas de las otras estrategias de esta lista, como el almacenamiento en cach\u00e9, la red de distribuci\u00f3n de contenidos (CDN), DNS optimizado, im\u00e1genes optimizadas y mucho m\u00e1s.<\/p>\n Si has construido tu sitio web con WordPress, tendr\u00e1 que procesar de forma din\u00e1mica el c\u00f3digo del lado del servidor para cada visitante (por defecto).<\/p>\n Cuando una persona visita tu p\u00e1gina, tu servidor de alojamiento necesitar\u00e1 ejecutar el PHP<\/a> de WordPress y consultar la base de datos de tu sitio<\/a> para generar el documento HTML terminado que se entregar\u00e1 al navegador del usuario.<\/p>\n Esto lleva tiempo, especialmente en alojamientos poco potentes, lo que puede tener un gran efecto en los tiempos de FCP de tu sitio.<\/p>\n Con el almacenamiento en cach\u00e9 de p\u00e1ginas<\/a>, puedes \u00abalmacenar en cach\u00e9\u00bb la versi\u00f3n HTML acabada de cada p\u00e1gina. En lugar de tener que procesar el c\u00f3digo del lado del servidor en cada visita, tu servidor responder\u00e1 inmediatamente con el HTML terminado en su cach\u00e9.<\/p>\n Si utilizas el alojamiento de Kinsta, Kinsta implementar\u00e1 autom\u00e1ticamente el almacenamiento en cach\u00e9 de p\u00e1ginas por ti a trav\u00e9s de su funcionalidad Edge Caching.<\/p>\n La particularidad del sistema Edge Caching de Kinsta<\/a> es que puede servir las p\u00e1ginas almacenadas en cach\u00e9 desde la red global de Cloudflare<\/a>. Hablaremos de lo que es una red de distribuci\u00f3n de contenidos en el siguiente apartado, pero la principal ventaja es que te permite conseguir tiempos de carga globales muy r\u00e1pidos<\/a>.<\/p>\n Si te alojas en otro sitio, puedes comprobar si tu proveedor tiene una funci\u00f3n de almacenamiento en cach\u00e9 a nivel de servidor o utilizar uno de los muchos plugins de almacenamiento en cach\u00e9 de WordPress, como WP Rocket y FlyingPress.<\/p>\n Una red de distribuci\u00f3n de contenidos (CDN<\/a>) es una red global de servidores que almacenan una copia de algunos o todos los contenidos\/archivos de tu sitio.<\/p>\n Cuando una persona visite tu sitio, la CDN servir\u00e1 autom\u00e1ticamente los archivos de tu sitio desde la ubicaci\u00f3n f\u00edsicamente m\u00e1s cercana al visitante.<\/p>\n Dado que la distancia f\u00edsica sigue influyendo en los tiempos de carga (\u00a1todav\u00eda no hemos superado la velocidad de la luz!<\/em>), el navegador del visitante recibir\u00e1 los archivos de tu sitio m\u00e1s r\u00e1pidamente<\/a>, mejorando tu tiempo FCP.<\/p>\n Si utilizas el alojamiento de Kinsta, Kinsta implementa autom\u00e1ticamente una CDN gratuita impulsada por Cloudflare<\/a> para todas las p\u00e1ginas de tu sitio, que ofrece el rendimiento global m\u00e1s r\u00e1pido.<\/p>\n Si te alojas en otro sitio, puedes implementar t\u00fa mismo una CDN utilizando proveedores como Cloudflare, Amazon CloudFront, Fastly y otros.<\/p>\n 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)<\/a> para encontrar el servidor web real asociado al nombre de dominio de tu sitio.<\/p>\n El proveedor de DNS que hayas configurado para que utilice tu nombre de dominio afectar\u00e1 a la duraci\u00f3n de este proceso, lo que, en consecuencia, afectar\u00e1 al FCP de tu sitio.<\/p>\n Por ejemplo, seg\u00fan DNSPerf<\/a>, la diferencia entre el proveedor m\u00e1s r\u00e1pido y el m\u00e1s lento es de m\u00e1s de 130 ms, lo que es bastante significativo.<\/p>\n Si te alojas con Kinsta<\/a>, ya tienes acceso a los DNS premium de Amazon Route53<\/a> cuando utilizas los servidores de nombres<\/a> de Kinsta.<\/p>\n Si alojas en otro sitio, Cloudflare ofrece uno de los mejores servicios DNS gratuitos.<\/p>\n Ahora que has solucionado los problemas de tiempo de respuesta del servidor, es hora de pasar a optimizar el c\u00f3digo de tu sitio, empezando por su CSS.<\/p>\n El CSS controla el dise\u00f1o y el estilo<\/a> de los elementos de tu p\u00e1gina. Aunque es una parte esencial de cualquier sitio web<\/a>, tu CSS podr\u00eda estar ralentizando tus tiempos de FCP si se est\u00e1 cargando de forma no optimizada y\/o si est\u00e1s cargando CSS innecesario en p\u00e1ginas donde no es necesario.<\/p>\n Tenemos un post entero sobre c\u00f3mo optimizar el CSS<\/a>, pero repasemos las t\u00e1cticas m\u00e1s importantes para acelerar el FCP.<\/p>\n En primer lugar, deber\u00e1s eliminar el CSS que no utilices de las p\u00e1ginas en las que no sea necesario.<\/p>\n Una forma de hacerlo es el m\u00e9todo manual. Una herramienta como PurifyCSS<\/a> puede escanear tus p\u00e1ginas en busca de CSS no utilizado, y luego puedes eliminar manualmente ese c\u00f3digo. PageSpeed Insights tambi\u00e9n marcar\u00e1 el CSS no utilizado en la secci\u00f3n \u00abReducir CSS no utilizado\u00bb de sus diagn\u00f3sticos.<\/p>\n Sin embargo, si utilizas WordPress, hay algunos plugins \u00fatiles que pueden automatizar todo el proceso por ti, lo que es mucho m\u00e1s f\u00e1cil (especialmente para los no desarrolladores). Algunas buenas opciones a tener en cuenta son WP Rocket<\/a>, FlyingPress<\/a> y Perfmatters<\/a>.<\/p>\n Todos estos plugins son herramientas premium. Sin embargo, creemos que puede merecer la pena la inversi\u00f3n porque tambi\u00e9n pueden ayudarte a poner en pr\u00e1ctica muchos de los otros consejos de esta lista.<\/p>\n Por defecto, tu sitio probablemente esperar\u00e1 hasta que haya cargado todo<\/em> el c\u00f3digo CSS antes de empezar a mostrar el contenido de la mitad superior de la p\u00e1gina. Sin embargo, esto no es totalmente \u00f3ptimo desde el punto de vista de la experiencia del usuario, porque en realidad s\u00f3lo necesitas el CSS necesario para el contenido de la mitad superior de la p\u00e1gina; todo lo dem\u00e1s puede esperar hasta m\u00e1s tarde.<\/p>\n El CSS para el contenido de la mitad superior de la p\u00e1gina se denomina CSS cr\u00edtico<\/strong>.<\/p>\n Para acelerar el FCP de tu p\u00e1gina y otras m\u00e9tricas de rendimiento, puedes colocar este CSS cr\u00edtico directamente en la secci\u00f3n Los usuarios m\u00e1s avanzados pueden generar manualmente el CSS cr\u00edtico de una p\u00e1gina utilizando una herramienta como \u00e9sta<\/a>.<\/p>\n Pero, de nuevo, en WordPress, puedes automatizar este proceso para cada p\u00e1gina individual de tu sitio utilizando FlyingPress o WP Rocket.<\/p>\n Una vez que hayas incorporado el CSS cr\u00edtico de manera Inline en una p\u00e1gina, puedes posponer de manera segura la carga del resto del CSS de la p\u00e1gina hasta m\u00e1s adelante en el proceso de carga de la p\u00e1gina (despu\u00e9s de que el contenido por encima de la p\u00e1gina ya se haya renderizado<\/em>).<\/p>\n Tanto WP Rocket como FlyingPress lo har\u00e1n autom\u00e1ticamente por ti como parte de su funcionalidad de CSS cr\u00edtico, que es otra raz\u00f3n para considerar su uso.<\/p>\n Por \u00faltimo, otra forma de a\u00f1adir un poco<\/em> de rendimiento al c\u00f3digo CSS de tu sitio es minificarlo. Cuando minificas el c\u00f3digo CSS, eliminas los caracteres y espacios en blanco innecesarios, lo que puede suponer un ahorro de tama\u00f1o m\u00e1s marginal.<\/p>\n Plugins como WP Rocket y FlyingPress pueden hacerlo por ti. Tambi\u00e9n puedes encontrar plugins espec\u00edficos de minificaci\u00f3n como Fast Velocity Minify<\/a>.<\/p>\n Adem\u00e1s del CSS, el JavaScript<\/a> de tu sitio es otra \u00e1rea a la que deber\u00e1s dedicar algo de tiempo para optimizar el c\u00f3digo de tu sitio.<\/p>\n 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.<\/p>\n Si utilizas JavaScript para activar funciones importantes por encima de la p\u00e1gina, como el men\u00fa de navegaci\u00f3n de tu sitio<\/a> (esto es especialmente com\u00fan en la versi\u00f3n m\u00f3vil de un sitio, ya que muchos men\u00fas para m\u00f3viles dependen de JavaScript<\/em>), 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\u00e1gina.<\/p>\n Si utilizas WordPress, elegir un tema optimizado para el rendimiento<\/a> deber\u00eda ayudarte a evitar esto, ya que los buenos desarrolladores evitar\u00e1n depender de JavaScript para estas funciones.<\/p>\n Tambi\u00e9n puedes intentar evitar el uso de sliders<\/a> y otros elementos con JavaScript en las zonas por encima del pliegue.<\/p>\n Aunque deber\u00e1s hacer especial hincapi\u00e9 en reducir el uso de JavaScript en los elementos de la mitad superior de la p\u00e1gina, en general tambi\u00e9n es una buena idea eliminar todo el JavaScript innecesario posible de cada p\u00e1gina.<\/p>\n Para empezar, deber\u00e1s eliminar cualquier plugin de WordPress<\/a> que no suponga una mejora significativa para tu sitio, ya que muchos plugins de WordPress dependen de JavaScript para su funcionalidad.<\/p>\n Otra opci\u00f3n es utilizar un plugin administrador de scripts como Asset CleanUp<\/a> o Perfmatters<\/a> para desactivar JavaScript p\u00e1gina por p\u00e1gina, lo que te permite desactivar los scripts en las p\u00e1ginas en las que no son necesarios y dejarlos activados en otras p\u00e1ginas.<\/p>\n Tambi\u00e9n tenemos una gu\u00eda m\u00e1s t\u00e9cnica sobre c\u00f3mo desactivar plugins<\/a> p\u00e1gina por p\u00e1gina.<\/p>\n Pase lo que pase, probablemente necesitar\u00e1s cargar al menos algo de JavaScript en tu p\u00e1gina. Para asegurarte de que este JavaScript no interfiere con la carga del contenido de la mitad superior de la p\u00e1gina, hay dos estrategias comunes que puedes aplicar:<\/p>\n Puedes implementar cualquiera de estas t\u00e1cticas en WordPress mediante plugins como WP Rocket o FlyingPress.<\/p>\n Tambi\u00e9n tenemos gu\u00edas sobre c\u00f3mo diferir la interpretaci\u00f3n de JavaScript<\/a> y c\u00f3mo eliminar los recursos que bloquean la renderizaci\u00f3n<\/a>.<\/p>\n Por \u00faltimo, deber\u00e1s minificar el JavaScript restante de tu sitio web<\/a> para conseguir algunas peque\u00f1as ventajas adicionales de rendimiento eliminando caracteres innecesarios.<\/p>\n Al igual que con la minificaci\u00f3n del CSS, la mayor\u00eda de los plugins de cach\u00e9 y rendimiento (incluidos WP Rocket y FlyingPress) pueden hacerlo por ti. Tambi\u00e9n puedes utilizar un plugin espec\u00edfico como Fast Velocity Minify.<\/p>\n Con la carga diferida<\/a> de im\u00e1genes, puedes retrasar la carga de las im\u00e1genes de tu sitio<\/a> hasta que sean necesarias (por ejemplo, cuando un usuario se desplaza por la p\u00e1gina).<\/p>\n Normalmente, esto es bueno para el rendimiento si est\u00e1s retrasando la carga de im\u00e1genes que est\u00e1n por debajo<\/em> del pliegue. Sin embargo, utilizar la carga diferida para las im\u00e1genes por encima<\/em> del pliegue puede afectar negativamente a los tiempos FCP y LCP de tu sitio.<\/p>\n Por lo tanto, deber\u00e1s asegurarte de excluir de la carga diferida cualquier imagen que est\u00e9 por encima del pliegue.<\/p>\n Si utilizas la funci\u00f3n b\u00e1sica de carga diferida de WordPress, WordPress deber\u00eda<\/em> hacerlo autom\u00e1ticamente. Pero si tienes problemas, puedes ajustar manualmente este comportamiento utilizando la funci\u00f3n wp_omit_loading_attr_threshold<\/a>.<\/p>\n Si utilizas un plugin para la carga diferida, es de esperar<\/em> que te ofrezca una opci\u00f3n para hacerlo. Por ejemplo, Perfmatters te permite excluir autom\u00e1ticamente un cierto n\u00famero de im\u00e1genes principales y excluir manualmente im\u00e1genes espec\u00edficas si es necesario.<\/p>\n Si tu plugin no ofrece esta funci\u00f3n, plant\u00e9ate cambiar a uno que s\u00ed lo haga.<\/p>\n 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\u00e9n c\u00f3mo se cargan las fuentes si utilizas fuentes personalizadas<\/a> (como las <\/em> que has encontrado en Google Fonts<\/a><\/em>).<\/p>\n Para evitar problemas, puedes utilizar los descriptores CSS Font-Display: Optional<\/strong> o Font-Display: Swap<\/strong>.<\/a><\/p>\n Con Font-Display: Optional<\/strong>, puedes indicar a los navegadores de los usuarios que utilicen una fuente alternativa si la fuente personalizada no se carga lo suficientemente r\u00e1pido.<\/p>\n Si no quieres a\u00f1adir 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.<\/p>\n Seg\u00fan Mozilla<\/a>, el Modelo de Objetos del Documento (DOM, Document Object Model) es \u00abla representaci\u00f3n de datos de los objetos que componen la estructura y el contenido de un documento en la web\u00bb<\/p>\n Aunque los visitantes humanos no interact\u00faan con el DOM directamente, el DOM de una p\u00e1gina es importante para ayudar a los navegadores web a comprender y mostrar el contenido de una p\u00e1gina.<\/p>\n Como regla general, tener un DOM m\u00e1s grande y complejo provocar\u00e1 tiempos de FCP m\u00e1s lentos que una estructura DOM m\u00e1s corta y optimizada.<\/p>\n Aqu\u00ed tienes algunos consejos para reducir el tama\u00f1o del DOM de tu sitio:<\/p>\n Las redirecciones te permiten enviar tr\u00e1fico de una URL a otra URL antes de que se cargue la p\u00e1gina. Por ejemplo, puedes redirigir a alguien que visita la versi\u00f3n HTTP<\/strong> de tu sitio a la versi\u00f3n HTTPS<\/strong>.<\/p>\n Sin embargo, como la redirecci\u00f3n tiene que completarse antes de que el navegador del usuario pueda cargar la p\u00e1gina, cada redirecci\u00f3n suele a\u00f1adir cientos de milisegundos de retraso al tiempo FCP de tu sitio (y a otras m\u00e9tricas de rendimiento).<\/p>\n Aqu\u00ed tienes algunos consejos para evitar redireccionamientos innecesarios:<\/p>\n Para encontrar problemas de redireccionamiento, puedes utilizar la herramienta gratuita de comprobaci\u00f3n de redireccionamientos Kinsta<\/a>. Tambi\u00e9n tenemos un post sobre las mejores pr\u00e1cticas de redirecci\u00f3n en WordPress<\/a>.<\/p>\n Por ejemplo, aqu\u00ed puedes ver que el comprobador de redirecciones de Kinsta detect\u00f3 m\u00faltiples redirecciones cuando introdujimos http:\/\/www.wordpress.org como URL:<\/p>\nFirst Contentful Paint vs Largest Contentful Paint<\/h3>\n
\n
\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/first-contentful-paint-vs-largest-contentful-paint-example-1024x450.jpg\")
\u00bfCu\u00e1l es un buen tiempo de First Contentful Paint?<\/h2>\n
![\"Google](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/good-fcp-time-1024x269.jpg\")
C\u00f3mo medir el tiempo de First Contentful Paint de una p\u00e1gina<\/h2>\n
\n
\n
![\"D\u00f3nde](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/fcp-time-pagespeed-insights-683x1024.jpg\")
Otras formas de medir los tiempos de First Contentful Paint<\/h3>\n
\n
\u00bfQu\u00e9 puede afectar a los tiempos de FCP de tu sitio?<\/h2>\n
\n
C\u00f3mo acelerar el First Contentful Paint: 10 consejos que funcionan<\/h2>\n
1. Cambiar a un alojamiento m\u00e1s r\u00e1pido<\/h3>\n
2. Utiliza el cach\u00e9 de p\u00e1ginas (idealmente a nivel de servidor)<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/kinsta-page-caching-edge-1024x771.jpg\")
3. Implementa una red de distribuci\u00f3n de contenidos (CDN)<\/h3>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/cloudflare-global-network-1024x645.jpg\")
4. Utiliza un proveedor de DNS m\u00e1s r\u00e1pido<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/kinsta-dns-management-1024x663.jpg\")
5. Optimiza el CSS de tu sitio<\/h3>\n
Elimina el CSS no utilizado<\/h4>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/wp-rocket-remove-unused-css-1024x847.jpg\")
Incorpora CSS cr\u00edtico Inline y pospone CSS no cr\u00edtico<\/h4>\n
<head><\/code> de la p\u00e1gina (es decir, ponerlo<\/em>\u00a0inline<\/em><\/strong>) en lugar de cargarlo como parte de una hoja de estilos externa.<\/p>\n![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/flyingpress-optimize-css-delivery-1024x705.jpg\")
Minificar el c\u00f3digo CSS<\/h4>\n
6. Optimiza el JavaScript de tu sitio<\/h3>\n
No utilices elementos que dependan de JavaScript por encima del pliegue<\/h4>\n
Elimina el JavaScript innecesario<\/h4>\n
Elimina el JavaScript que bloquea la renderizaci\u00f3n (diferir o retrasar)<\/h4>\n
\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/wp-rocket-javascript-optimization-1024x986.jpg\")
Minificar el c\u00f3digo JavaScript<\/h4>\n
7. Desactiva la carga diferida para las im\u00e1genes de la mitad superior de la p\u00e1gina<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/perfmatters-optimize-lazy-loading-1024x822.jpg\")
8. Optimizar la entrega de fuentes<\/h3>\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/flyingpress-optimize-fonts-1024x721.jpg\")
9. Intenta reducir al m\u00e1ximo el tama\u00f1o del DOM<\/h3>\n
\n
10. Evita las redirecciones (especialmente las redirecciones m\u00faltiples)<\/h3>\n
\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/kinsta-redirect-tool-1024x812.jpg\")