Casa > Page Speed ​​Essentials > ¿Qué es First Contentful Paint? (FCP)? - ES

¿Qué es First Contentful Paint? (FCP)? - ES

La primera pintura con contenido (FCP) es una métrica rastreada por Google que se utiliza para evaluar la clasificación de velocidad de un sitio determinado.

Como medida importante del desempeño, los administradores del sitio web deben conocerlo, cómo evaluarlo y optimizarlo. Este artículo ofrece una descripción completa de todo lo que necesita saber sobre este valor..

imagen del artículo fcp

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

FCP, o su nombre más largo Primera pintura con contenido es el nombre de una métrica de rendimiento que evalúa el rendimiento de velocidad del contenido visible real entregado a los navegadores..

Esto se opone a la carga de recursos por parte de los navegadores web necesarios para construir la estructura básica de la página..

En términos sencillos, esto significa que este valor representa qué tan rápido se cargan las páginas desde la perspectiva de los visitantes.. Para comprender qué incluye esta métrica, aquí están los tipos de contenido que se consideran entregables en este sentido.:

  • Contenido multimedia
  • Imágenes y videos
  • Texto renderizado con fuentes
  • Imágenes de fondo
  • Imágenes SVG y ráster
  • Elementos de lienzo no blanco
  • Campos y formularios interactivos

Cualquier tipo de contenido que se muestre en los navegadores cuando se solicita la página se etiquetará como FCP.

Esto marca el importante punto de distinción entre él y otras métricas de rendimiento., por definición, esto se considera como usuarios-centrista.

Este valor permite clasificación de rendimiento de velocidad diferencial dependiendo de la carga de dichos elementos. En este momento hay tres categorías de velocidad basadas en la medición realizada: Rápido (FCP <1s), Moderar (FCP <3s), and Lento (FCP> = 3 s)>.

Cómo evaluar el ranking FCP

La forma más sencilla de medir un sitio determinado (o pagina) es confiando en el propio Google PageSpeed ​​Insights.

Además de los resultados de salida, el servicio en línea también mide otras métricas y valores de rendimiento útiles, incluyendo el retardo de la primera entrada, Pintura contenta más grande, y cambio de diseño acumulativo.

Esta herramienta de Google también proporciona dos secciones importantes: Oportunidades que dan consejos sobre cómo las páginas se pueden cargar más rápido, y Diagnóstico que revelan información detallada sobre los recursos.

Es importante tener en cuenta que no afectan la puntuación de rendimiento general..

Evaluación FCP

Evaluación FCP

En realidad, este valor es solo una parte de la puntuación de rendimiento general según lo juzgan las herramientas de Google..

Esto significa que la alta optimización de esta métrica conducirá a un aumento en la clasificación de velocidad.. sin embargo, PageSpeed ​​Insights es simplemente una parte del herramientas de campo, utilizado para medir el valor.

Otras técnicas incluyen el Informe de experiencia del usuario de Chrome, La consola de búsqueda de Google (con su propio informe de velocidad), y el web-vitales Biblioteca JavaScript. También se pueden usar varias herramientas y marcos de terceros de laboratorio de datos.

Una de las formas más sencillas es utilizar el Navegador web Google Chrome. Un enfoque paso a paso rápido y fácil es seguir esta guía:

  1. Abra el navegador web Google Chrome y navegue hasta el sitio o la página designados.
  2. Haga clic derecho y presione el Navegar botón. Esto abrirá el DevTools panel.
  3. El panel superior mostrará ciertas pestañas, abre el Actuación. Haga clic en el Grabar opción, entonces Actualizar la página, y luego deja de grabar.
  4. Verá la métrica de valor en la sección de tiempo que se mostrará.

Como parte de la Herramientas de laboratorio que los administradores web pueden utilizar para medir el valor de FCP, los más utilizados son Lighthouse, las DevTools de Chrome, y PageSpeed ​​Insights (que se considera una herramienta de campo y de laboratorio).

Faro es una herramienta de código abierto desarrollada por Google que se utiliza para mejorar la calidad de las páginas web.

Funciona mediante la creación de auditorías y se puede ejecutar tanto desde Chrome DevTools (está integrado en él), la línea de comandos, o como módulo de nodo (paquete). El enfoque del navegador web Google Chrome que demostramos en este artículo hace uso de esta tecnología.

Empiece a optimizar mediante la creación de una estrategia

El mejor consejo sobre la optimización de la velocidad de FCP es seguir las sugerencias que se muestran en Herramienta PageSpeed ​​Insights.

Las razones para hacerlo es el hecho de que este es un producto desarrollado por Google y muestra la lógica de los desarrolladores web., la forma en que los navegadores web ejecutan el contenido, y cómo lo percibe el motor de búsqueda.

Un simple Búsqueda de Google revelará muchas optimizaciones y técnicas de Page Speed ​​que se pueden utilizar para mejorar la puntuación general. Si bien muchos de ellos pueden implementarse, el enfoque óptimo es primero analizar y clasificar por categorías el tipo de sitio y los objetivos de destino, así como la mayoría de visitantes.

Esto les da a los webmasters una estrategia clara sobre en qué enfocarse primero.

Esto se considera muy importante ya que permite a los webmasters, mas tarde, comparar y contrastar resultados. los punto de partida inicial es el sitio web antes de que comiencen las optimizaciones. Mas tarde, cuando todos los procedimientos implementados hayan completado las métricas del sitio de optimización final puede ser analizado.

Optimizaciones de FCP específicas de alojamiento web

La mayoría de las técnicas de optimización ampliamente utilizadas se basan en el uso de técnicas comunes para acelerar la carga de los sitios de destino.

sin embargo, antes de seguir todas las guías disponibles en Google y YouTube, asegúrese de comprender y seguir las prescripciones que cada acción realizada debe ser analizada y medida para calcular la eficiencia global. En muchos casos, pequeña “arregla” puede tener un impacto mucho mayor en el rendimiento de un sitio determinado que las grandes revisiones que pueden demorar días.

También asegúrese de comprender que algunas optimizaciones pueden no depender de sus acciones, sino más bien en el proveedor de alojamiento web y el servicios y aplicaciones instalados. Generalmente, hay ciertos planes de alojamiento que se adaptan mejor a determinadas aplicaciones. Otros criterios que pueden tener un impacto en la velocidad de carga general de su lado pueden ser los siguientes:

  • Ubicación del centro de datos
  • Asignación de recursos de alojamiento
  • Optimizaciones específicas de aplicaciones de alojamiento web
  • Funcionalidad de almacenamiento en caché implementada
  • Disponibilidad de la red de entrega de contenido
  • Optimización de recursos web

Mejor alojamiento web optimizado para velocidad FCP

Para lograr todos los criterios antes mencionados para la velocidad del sitio FCP, que es una métrica rastreada por Google, por lo tanto, tiene un impacto SEO en su sitio web, deberá migrar a un proveedor de alojamiento web confiable y rápido.

SiteGround








Uno de los mas recomendados, el más rápido, y también el proveedor de alojamiento web más confiable es SiteGround.

La empresa proporciona varias herramientas de optimización de velocidad como SiteGround SuperCacher, funciona con Cloudflare CDN, y también tiene servidores en todo el mundo ya que el principal está en Frankfurt Alemania (punto central de intercambio de internet).

SiteGround es una de las empresas de alojamiento más recomendadas por WordPress para proporcionar las mejores soluciones de alojamiento de WordPress..

Una de las mejores características de SiteGround es la migración administrada gratuita. Para terminar tu velocidad del sitio web mejoramiento migrar a SiteGround gratis ya que su equipo configurará su sitio web en minutos.

1. Técnica de optimización FCP (Ajuste del valor de Ttfb)

La mayoría de las optimizaciones se realizan comúnmente al hacer revisiones técnicas de la forma en que operan los sitios y las páginas. Esto puede ser fácil o complejo., dependiendo del estado actual y la experiencia de los webmasters.

Los objetivos previstos que establecen los webmasters se pueden medir antes y después de que se hayan implementado las optimizaciones.. Al hacerlo, los resultados se pueden rastrear y analizar.

Uno de los procedimientos más importantes es el ajuste del valor ttfb.

Esto es realmente la abreviatura de Tiempo al primer byte, un indicador de la latencia de la red percibida por los visitantes (y motores de búsqueda como Google). Ofrece una estimación bastante buena de cómo funciona el servidor web cuando los visitantes quieren acceder al contenido e interactuar con él..

Hay muchas formas de mejorar la velocidad del sitio de destino reduciendo el valor de ttfb. Las estrategias efectivas que son populares entre la mayoría de los administradores de sitios web son las siguientes:

  • Implementación de la red de entrega de contenido — Alojando archivos estáticos y recursos cargados comúnmente en servidores en la nube, será aster cargarlos desde diferentes ubicaciones geográficas.
  • Optimización del servidor de alojamiento web — Si se experimentan ralentizaciones, Es un buen consejo hablar con el proveedor de alojamiento web y habilitar las optimizaciones propuestas en los servidores de hardware.. La migración a servidores de alojamiento en la nube como los que anuncian Google y Amazon también es una opción popular para sitios con mucho tráfico..
  • Almacenamiento en caché web - El almacenamiento en caché del lado del servidor a menudo se ofrece como parte del servicio de alojamiento web. Habilitarlo acelerará la carga de los servidores mucho más rápido, al mismo tiempo que ahorra recursos.

Es importante tener en cuenta que también están disponibles más sugerencias para reducir el valor de Ttfb. La optimización de este valor tendrá un impacto significativo en la puntuación general de la velocidad de la página..

2. Técnica de optimización FCP (Eliminar el bloqueo de renderizado)

Los recursos de bloqueo de procesamiento se refieren a código incorrecto que puede ralentizar gravemente la carga de los sitios web dados, o en realidad “rotura” que desactivando ciertas funciones.

En la mayoría de los sitios web modernos, los recursos de bloqueo de procesamiento son principalmente código JavaScript y CSS. La razón de esto es que, por diseño, partes de ese código serán cargadas por los navegadores web.

Como están escritos incorrectamente, los navegadores pueden “colgar” cargar o detener el funcionamiento de las secciones, ya que el código no funciona de la manera prevista posible. Dicho código debería eliminarse a fondo en cada página.

Existen dos enfoques principales que se puede hacer para reducir la posibilidad de que tales recursos aparezcan, o para solucionar problemas pendientes:

  • Reescribe el código — Al actualizar y reescribir el código anterior, las posibilidades de tener tal problema disminuirán.
  • Minificar el código — Esto se refiere a la optimización real del código., para que el código no utilizado se difiera. Cuando se trata de código CSS, solo se debe aplicar un diseño relevante a una página determinada. No es necesario llamar al código CSS en archivos grandes.

Le recordamos que el código también se puede comprimir y minificar en consecuencia. Hay ciertos Complementos de WordPress que se puede utilizar para los usuarios de este sistema de gestión de contenido.

3. Técnica de optimización FCP (Confíe en la compresión de contenido)

Las imágenes constituyen los recursos más utilizados en casi todas las páginas web.. Por esta razón, su optimización es vital durante la mejora general de la velocidad de la página. En la mayoría de los casos, el consejo general es aplicar compresión con pérdida, este es el tipo de optimización de imagen que reduce el tamaño de archivo de las imágenes con un grado de calidad notable.

Esto conduce a un tamaño de archivo sustancialmente más pequeño, La mayoría de los algoritmos y técnicas de compresión modernos producirán una imagen de aspecto casi idéntico. Si se aplica la configuración correcta, los visitantes no podrán ver una diferencia mayor entre las variantes original y optimizada..

Es recomendable que las imágenes se preparen en software gráfico con el Exportar / Guardar para Web opción (Cuando esté disponible) ya que esto generalmente elige los algoritmos más apropiados para tal uso.

También se puede realizar la compresión de videos y otro contenido visual, teniendo en cuenta la mayoría de los usuarios que visitan el sitio. Esto les dará a los webmasters una idea de qué método de compresión aplicar..

Conclusión

Dado el hecho de que cada sitio es diferente en su contenido, metas, y visitantes, no hay una guía única que funcione para todos.

El FCP se considera uno de los valores más importantes que determinan la velocidad del sitio.. además, cuando los motores de búsqueda (y particularmente Google) indexar una página determinada y su puntuación, este es también uno de los valores más importantes que determinan el ranking.

Esto da un incentivo adicional para mejorarlo..

Un consejo importante sobre este tema es mejorar siempre el sitio web y analizar proactivamente el rendimiento.. Como contenido y acumulación de tráfico, también surgirá la necesidad de realizar ajustes de velocidad.

Las tecnologías web también mejoran con el tiempo, por lo que un consejo adicional que podemos dar es saber cómo agilizar y optimizar el contenido dinámico y las aplicaciones instaladas.

Este artículo Howtohosting.guide obtiene información de Google Web.dev guía bajo la atribución CC 4.0 licencia.

Lea también:

Los mejores complementos de optimización de velocidad de WordPress

¿Cuáles son las diferencias entre el alojamiento espejo y la copia de seguridad de un sitio web??

¿Qué necesita saber sobre Core Web Vitals??

¿Qué es wp-config.php? (Archivo de configuración de WordPress)

Dejar un comentario

su dirección de correo electrónico no será publicada. Los campos obligatorios están marcados *

Este sitio está protegido por reCAPTCHA y Google Política de privacidad y Términos de servicio aplicar.