Cómo mejorar la primera pintura con contenido (FCP) en WordPress

Una introducción a First Contentful Paint

First Contentful Paint es una métrica útil que monitorea la velocidad de carga de su página. Hay una variedad de métricas similares que miden el rendimiento de un sitio. FCP, en particular, se centra en el tiempo que tarda en aparecer el primer contenido en una página. Una vez que se genera el FCP, el usuario sabe que el resto está en camino.

Es similar a la métrica de pintura con contenido más grande (LCP) en Core Web Vitals de Google. Pero mientras que LCP mide cuánto tarda en cargarse el contenido "principal" de un sitio, FCP solo se enfoca en la primera parte del contenido, que puede ser o no el contenido principal.

Hay muchos factores que contribuyen a su puntaje FCP. Los archivos JavaScript y HTML mal optimizado son causas comunes de rendimiento lento, ya que se requieren muchos recursos para procesarlos. Además, las secuencias de comandos que bloquean el renderizado pueden afectar su puntaje de FCP, ya que deben procesarse antes de que se puedan realizar otras operaciones.

Su puntaje FCP es importante porque es un indicador de la velocidad general de su sitio web. El rendimiento no solo es vital para su UX, sino que también es un factor que los motores de búsqueda como Google consideran al decidir cómo clasificar sus páginas. Un rendimiento deficiente puede conducir a clasificaciones de búsqueda más bajas. Esto significa que si no sabe cómo mejorar First Contentful Paint, puede afectar la visibilidad de su sitio web.

Cómo medir la primera pintura con contenido

Si bien FCP le brinda una ventana a la percepción del usuario, sigue siendo una métrica que se puede medir objetivamente a través de pruebas de laboratorio y datos de campo. Por ejemplo, PageSpeed ​​Insights es una herramienta que le permite ver lo que están experimentando sus usuarios reales ( siempre y cuando su sitio tenga suficiente tráfico para ser incluido en el informe de experiencia del usuario de Chrome ).

Incluso si su sitio no tiene suficientes datos para ver las experiencias reales de los usuarios, PageSpeed ​​Insights aún puede ayudarlo a recopilar datos de FCP en sus pruebas de laboratorio simuladas.

Para usarlo, simplemente ingrese su URL y obtenga un resultado inmediato:

También puede cambiar entre las vistas móvil y de escritorio para ver qué tan receptivo es su sitio web en varios dispositivos.

Otra herramienta útil para medir FCP es WebPageTest, que lleva un poco más de tiempo pero puede proporcionar un análisis más profundo.

¿Qué es un buen tiempo de FCP?

Según Chrome, su sitio tiene una buena puntuación de FCP si está por debajo de 1,8 segundos. Cuando su puntaje FCP excede los tres segundos, eso es motivo de preocupación.

Sin embargo, incluso si su sitio actualmente tiene un puntaje FCP sólido, siempre hay espacio para mejorar.

Cómo mejorar First Contentful Paint en WordPress (6 técnicas)

Ahora que sabe un poco más sobre FCP, echemos un vistazo a cómo mejorar First Contentful Paint en su sitio a través de seis métodos efectivos:

1. Usar una red de entrega de contenido (CDN)
2. Optimizar y comprimir imágenes
3. Elimine los recursos que bloquean el renderizado
4. Reduzca el tamaño de su DOM
5. Mejore el tiempo de respuesta del servidor
6. Evite demasiados redireccionamientos de página

1. Utilice una red de entrega de contenido (CDN)

Una red de entrega de contenido (CDN) es una manera fácil de aumentar los tiempos de carga generales. Sin uno, cuando un usuario visite su sitio web, deberá esperar mientras se transfieren los datos necesarios entre el servidor principal de su sitio y su ubicación. Esto puede generar tiempos de espera más prolongados para los usuarios que se encuentran geográficamente lejos de los servidores de su proveedor de alojamiento.

Por otro lado, un CDN ofrece una red de servidores que se distribuyen por todo el mundo. Por lo tanto, el contenido se puede entregar desde cualquier servidor que esté físicamente más cerca de cada visitante.

Un ejemplo popular de CDN es Cloudflare, que tiene más de 275 centros de datos en todo el mundo:

Con Cloudflare, puede aprovechar otras técnicas de optimización, como la optimización de imágenes sin pérdidas.

Por lo general, las CDN también utilizan el almacenamiento en caché y otras estrategias para mejorar FCP. Por ejemplo, su proveedor de CDN podría ofrecer minificación y compresión de archivos para aligerar su sitio web. Esto lo ayuda a reducir la latencia, mejorar la UX y aliviar la carga en su servidor principal.

2. Optimiza y comprime imágenes

Las imágenes rara vez son el primer elemento que se carga en su sitio web. Sin embargo, si ejecuta un sitio con muchos medios, como un portafolio o una exhibición de fotografías, es importante optimizar y comprimir imágenes para mejorar su puntaje FCP (y el rendimiento general).

Una forma de optimizar sus imágenes es cambiar a un formato de archivo diferente. Por ejemplo, si actualmente usa JPG/JPEG o PNG, puede cambiar a un formato con mejor compresión, como SVG o WebP.

También debe cambiar el tamaño de las imágenes a las dimensiones más pequeñas que se ajusten a sus necesidades y comprimirlas para reducir aún más su tamaño.

Si bien puede hacer todo esto manualmente usando herramientas en línea, una forma mucho más simple para los usuarios de WordPress es usar un complemento de optimización de imágenes.

Por ejemplo, el complemento gratuito Optimole puede cambiar el tamaño, comprimir y convertir automáticamente sus imágenes. Además, también puede atenderlos desde su CDN integrado, que mata dos pájaros de un tiro.

Esta herramienta también le permite entregar imágenes de alta calidad a velocidades rápidas, sin importar qué dispositivo usen los visitantes para acceder a su sitio. Puede usar funciones como la carga diferida y el cambio de tamaño de imagen para perfeccionar aún más sus imágenes.

3. Elimina los recursos que bloquean el renderizado

Los recursos de bloqueo de procesamiento pueden evitar que su contenido se cargue rápidamente, ya que el navegador debe procesarlos primero, incluso si no son importantes para cargar el contenido inicial de su sitio. Como resultado, pueden ralentizar su puntaje FCP. Esto puede incluir código HTML, hojas de estilo CSS y archivos JavaScript.

Si se pregunta cómo mejorar First Contentful Paint, hay algunas formas de eliminar los recursos que bloquean el renderizado. Si se siente cómodo con el desarrollo y encuentra un código que no se está utilizando en su página, puede continuar y eliminarlo. También puede identificar sus recursos críticos y "en línea" dentro de su página usando las etiquetas <script> y <style>.

Además, es posible aplazar JavaScript, por lo que su contenido no se retrasa mientras espera que el navegador procese estos archivos. Además, puede generar CSS crítico para mostrar el contenido "en la mitad superior de la página" (la parte que los usuarios ven de inmediato). Si no es desarrollador, una herramienta como Jetpack puede ayudarlo a realizar algunos de estos cambios.

4. Reduce el tamaño de tu DOM

Cuando se carga una página web, su navegador crea un modelo de objeto de documento (DOM). Esta es una representación de todos los objetos que componen su página.

Si hay demasiados nodos DOM (etiquetas HTML) en su página, o si están demasiado anidados, el navegador tardará más en procesar su página. Esto puede dar como resultado velocidades de carga más lentas y una puntuación de FCP deficiente.

Por lo tanto, puede mejorar su FCP reduciendo el tamaño de su DOM. Puede hacerlo manualmente eliminando las etiquetas <div> innecesarias, dividiendo las páginas largas en páginas más pequeñas y limitando la cantidad de publicaciones en su archivo o en su página de inicio.

Además de eso, puede cargar de forma diferida sus elementos HTML utilizando un complemento de optimización como Optimole. Lazy loading es una técnica que retrasa la carga de contenido hasta que se necesita. En lugar de procesar todo a la vez, el navegador puede enfocarse en entregar esos elementos que son inmediatamente visibles.

Elegir un tema optimizado también puede ayudar a reducir el tamaño de su DOM, ya que muchos temas (y creadores de páginas) usan demasiadas etiquetas <div>. Si está buscando un nuevo tema en el mercado, le sugerimos que consulte a Neve, que es rápido, liviano y solo usa código de calidad.

5. Mejore el tiempo de respuesta del servidor

El tiempo de respuesta del servidor también se conoce como tiempo hasta el primer byte (TTFB). Esta métrica mide el tiempo que transcurre entre el momento en que un usuario realiza una solicitud y el momento en que el servidor envía el primer byte de información.

Hay muchas maneras de mejorar el tiempo de respuesta de su servidor (y, como resultado, su puntaje FCP).

En primer lugar, es importante elegir un proveedor de hosting de calidad. Lo mejor es buscar un host que se adapte específicamente a los sitios web de WordPress y prestar atención a la ubicación de sus servidores. Idealmente, su host debería tener servidores que estén cerca de su audiencia principal.

Si desea mejorar el rendimiento de su host, puede elegir un proveedor de nuestra colección respaldada por datos del alojamiento de WordPress más rápido.

Sin embargo, si su proveedor de alojamiento no ofrece servidores convenientes, siempre puede optar por un CDN, del que hablamos anteriormente cuando discutimos cómo mejorar First Contentful Paint.

El almacenamiento en caché es una excelente manera de reducir los tiempos de respuesta. Algunos hosts ofrecen almacenamiento en caché incorporado. Alternativamente, puede instalar un complemento de almacenamiento en caché como WP Rocket o WP Fastest Cache.

6. Evite demasiados redireccionamientos de página

Cuando visita una página que lo redirige inmediatamente a otro sitio, su navegador debe realizar otra solicitud HTTP a la nueva ubicación. Esto puede dar como resultado una puntuación de FCP baja, ya que retrasa la carga de su página web.

Cuantas más redirecciones tenga en su página, peor será probablemente su puntuación de FCP. Además, demasiados redireccionamientos de página pueden interrumpir gravemente su UX.

Si el problema ocurre en todo el sitio, es posible que desee ver cómo administra los redireccionamientos de www a no www (o viceversa) y/o de HTTP a HTTPS.

Por ejemplo, si redirige desde http://www.yoursite.com a http://yoursite.com y luego nuevamente a https://yoursite.com , sería más eficiente hacerlo en un solo paso.

Si los redireccionamientos solo afectan su FCP en una sola página, es posible que desee ver los redireccionamientos que haya creado para esa página.

Puede administrar los redireccionamientos manualmente, aunque eso puede llevar mucho tiempo. Por lo general, es mejor optar por un complemento de WordPress como Redirección:

Una vez instalada, puede usar esta herramienta para administrar las redirecciones de manera fácil y rápida.

Mejore el tiempo de FCP de su sitio hoy

En sitios web complejos o con mucho contenido, puede ser difícil mantener tiempos de carga rápidos. Afortunadamente, al enfocarse en métricas clave como First Contentful Paint (FCP), puede evaluar y mejorar el tiempo que tardan los visitantes en ver su contenido.

En resumen, aquí se explica cómo mejorar First Contentful Paint en WordPress:

Para conocer otras formas de acelerar su sitio, consulte nuestra colección de diferentes formas de acelerar WordPress.

¿Tiene alguna pregunta sobre cómo mejorar FCP en WordPress? ¡Háganos saber en la sección de comentarios!