Cómo mejorar el FCP en WordPress (Probado y comprobado)

¿Alguna vez has tenido la sensación de que tu sitio WordPress tarda una eternidad en cargarse? Si es así, no eres el único. Los sitios web lentos frustran a los usuarios y perjudican tu posición en las búsquedas. ¡Pero no os preocupéis, desarrolladores de WordPress! Este artículo simplifica la mejora de una métrica clave: La primera pintura de contenido (FCP).

Piensa en el FCP como el momento en que tu usuario ve el primer fragmento de contenido real, como texto o una imagen. Cuanto más rápido aparezca, más contentos estarán. ¿FCP lento? Puede que hagan clic antes de ver tu contenido útil.

En este artículo, desglosaré las mejoras de FCP en sencillos pasos que incluso los ninjas en prácticas de programación pueden entender. Hablaré del uso de estilos especiales ("CSS crítico") y de la eliminación de cualquier obstáculo ("recursos que bloquean la renderización").

¿Qué es FCP y por qué es importante?

El FCP es una métrica crucial que mide el tiempo que tarda el navegador en renderizar la primera pieza de contenido significativo de tu página. Puede ser texto, una imagen, un icono o cualquier elemento que no sea sólo un spinner de carga o un color de fondo.

En esencia, es el momento en que tu visitante ve por fin algo tangible, una señal de que tu sitio web está vivo y coleando. Un FCP rápido dice a los visitantes: "¡Eh, estamos aquí y listos para mostrarte algo impresionante!".

En cambio, un FCP lento transmite una imagen de lentitud y posibles problemas técnicos. Esto puede hacer que los visitantes frustrados se vayan antes incluso de experimentar tu contenido, lo que afecta a tus índices de participación y conversión.

Mejorar el FCP consiste en garantizar que tu sitio web ofrezca rápidamente ese momento inicial de "asombro". Al tomar el control de la renderización de tu página, puedes mejorar la experiencia del usuario, impulsar las clasificaciones SEO y crear un sitio web que brille de verdad.

¿Qué es una buena puntuación FCP?

Intenta conseguir un FCP de 1,8 segundos o menos. Este tiempo garantiza que la mayoría de los usuarios perciban tu sitio como rápido y receptivo. Google considera esto una buena experiencia de usuario.

Aunque 1,8 segundos es el objetivo, esfuérzate por que sea aún más rápido. El percentil 75 de las cargas de página, segmentado entre dispositivos móviles y de sobremesa, debería situarse idealmente dentro de este intervalo. Así se garantiza la coherencia y se atiende a los distintos tipos de dispositivos y velocidades de red.

He aquí el desglose:

0-1.8 segundos: ¡Bien! Los usuarios perciben tu sitio como la velocidad del rayo.
1.8-3 segundos: Sigue siendo bueno, pero intenta mejorarlo para evitar la posible frustración del usuario.
3+ segundos: ¡Pobre! Los visitantes podrían rebotar debido a la lentitud percibida.

- Fuente: web.dev

Diagnosticar tus problemas con FCP

Herramientas como Lighthouse, Google PageSpeed Insights y GTmetrix pueden analizar tu sitio web y localizar elementos específicos que retrasan tu FCP. Busca culpables como

• Imágenes grandes o no optimizadas
• Recursos que bloquean el renderizado
• Fuentes pesadas
• JS y CSS demasiado complejos

Una vez que hayas identificado a los sospechosos, profundiza para comprender su impacto. Herramientas como Google PageSpeed Insights ofrecen un análisis detallado del rendimiento, ayudándote a localizar secuencias de comandos, estilos y solicitudes de red específicos que afectan a FCP.

Abre Google PageSpeed Insightsintroduce la URL de tu sitio web en la barra de búsqueda y haz clic en Analizar.

• Esto generará un informe detallado en el que se destacarán las áreas en las que se puede mejorar el FCP y el rendimiento general.

• No pierdas de vista la métrica FCP. Te indica cuánto tarda en aparecer el primer fragmento de contenido real en la pantalla de tu visitante.

• A continuación, comprueba la métrica Diagnóstico en PageSpeed Insights. Enumera formas específicas de mejorar la FCP de tu sitio.

Estrategias para mejorar el FCP

Para crear experiencias realmente atractivas, tenemos que abordar el FCP en ambos frentes: la optimización del lado del servidor y del front-end. Veamos las estrategias procesables para cada uno:

Optimización del lado del servidor

Se trata de realizar cambios en el servidor para enviar rápidamente los datos necesarios para mostrar la página web. Esto puede hacerse utilizando buenos métodos de almacenamiento en caché, comprimiendo los archivos antes de enviarlos y haciendo que el servidor responda más rápidamente.

1. Reducir el tiempo de respuesta del servidor (TTFB)

El Tiempo hasta el Primer Byte (TTFB) es una medida utilizada como indicador de la capacidad de respuesta de un servidor web u otro recurso de red.

Se puede reducir el TTFB optimizando la configuración del software de tu servidor, garantizando consultas eficientes a la base de datos y minimizando las peticiones HTTP.

1.1. Elige un proveedor de alojamiento mejor

La elección del proveedor de alojamiento puede afectar significativamente al rendimiento de tu sitio. Busca proveedores que ofrezcan un tiempo de actividad excelente, fuertes medidas de seguridad y hardware de alta velocidad.

Cloudways puede ser una buena elección porque prioriza el rendimiento y la optimización. Además, tiene un tiempo de actividad fiable, lo que garantiza que tu sitio web esté siempre accesible para los usuarios. Veamos qué ofrece Cloudways para mejorar el rendimiento de tu sitio web. También puedes leer más sobre él en detalle aquí.

1.2. Optimizar el software del servidor

Esto implica ajustar la configuración del software de tu servidor web para garantizar un rendimiento óptimo. Esto puede incluir activar la compresión, optimizar tu configuración SSL/TLS para mayor velocidad y seguridad, y configurar tu servidor para entregar archivos estáticos de forma eficiente.

1.3. Utiliza una Red de Entrega de Contenidos (CDN)

Una CDN es una red de servidores distribuidos por varios lugares del mundo.

Cuando un usuario solicita un archivo de tu sitio, se le entrega desde el servidor más cercano de la CDN, lo que se traduce en tiempos de carga más rápidos. Las CDN también ayudan a proteger tu sitio de picos de tráfico y ataques DDoS.

Para los usuarios de Cloudways, la integración de la CDN de Cloudflare ofrece ventajas adicionales más allá de la distribución geográfica. Se integra perfectamente con tu cuenta de Cloudways, lo que simplifica la configuración y la gestión. Además, Cloudflare CDN incluye funciones como:

2. Aprovechar el almacenamiento en caché a nivel de servidor

El almacenamiento en caché a nivel de servidor puede mejorar significativamente la velocidad de tu sitio web al almacenar una copia de las páginas del sitio en una ubicación de almacenamiento temporal. Esto reduce la cantidad de trabajo necesario para generar una vista de página, lo que se traduce en tiempos de carga más rápidos para tus usuarios.

2.1. Plugins de WP para el almacenamiento en caché a nivel de servidor

Hay varios plugins de WordPress disponibles que pueden ayudarte a implementar el almacenamiento en caché a nivel de servidor. Entre ellos están:

1. W3 Caché Total: Este plugin ofrece un completo conjunto de opciones de almacenamiento en caché, incluyendo el almacenamiento en caché de páginas, objetos y navegador.
2. WP Super Caché: Este plugin de fácil uso genera archivos HTML estáticos a partir de tu sitio dinámico de WordPress. El servidor web utilizará estos archivos HTML en lugar de procesar los pesados scripts PHP.

2.2. Configurar las reglas de caché del lado del servidor

Configurar el almacenamiento en caché del lado del servidor implica establecer reglas sobre cómo y cuándo tu servidor debe almacenar en caché el contenido. He aquí algunos pasos generales:

• Activar el almacenamiento en caché: Esto se hace normalmente a través del archivo de configuración de tu servidor (por ejemplo, .htaccess para servidores Apache).
• Establecer cabeceras Cache-Control: Estas cabeceras definen qué tipos de archivos almacenar en caché y durante cuánto tiempo.
• Configura las ETags: Las ETags ayudan al navegador a determinar si el contenido almacenado en caché ha cambiado desde la última vez que se almacenó.
• Utiliza cabeceras Expires: Estas cabeceras indican al navegador cuánto tiempo debe almacenar en caché el contenido.

Optimización del Front-End

Se trata de realizar cambios en el dispositivo del usuario para mostrar la página web más rápidamente. Esto puede hacerse reduciendo el uso de recursos que ralentizan la página, mejorando los archivos CSS y JavaScript, y cargando las imágenes sólo cuando sea necesario.

3. Eliminar los recursos que bloquean el renderizado

Los recursos que bloquean el renderizado, como CSS y JavaScript, pueden ralentizar el tiempo de carga de tu sitio web. A continuación te explicamos cómo solucionar este problema:

3.1. Identifica el CSS crítico y cárgalo primero

El CSS crítico es el conjunto mínimo de CSS de bloqueo necesario para representar el contenido por encima de la página de una página web. Identifica y alinea el CSS crítico en el documento HTML y aplaza la carga de todos los demás estilos CSS.

3.2. Aplazar o asincronizar JavaScript no crítico

El JavaScript no crítico puede aplazarse o cargarse de forma asíncrona para acelerar la renderización de la página. Utiliza el atributo defer o async en tus etiquetas script para conseguirlo.

Utiliza el atributo defer en tus etiquetas script para aplazar la carga de JavaScript no crítico hasta que el documento HTML se haya analizado completamente:

<script src="https://www.cloudways.com/blog/improve-first-contentful-paint-wordpress/non-critical.js" defer></script>

Alternativamente, utiliza el atributo async para cargar el script de forma asíncrona:

<script src="https://www.cloudways.com/blog/improve-first-contentful-paint-wordpress/non-critical.js" async></script>

3.3 Eliminar scripts y estilos no utilizados

Elimina los bytes innecesarios eliminando los scripts y estilos no utilizados. Las siguientes herramientas pueden ayudar a identificar y eliminar el CSS no utilizado.

1. PurificarCSS: Esta herramienta puede utilizarse para eliminar el CSS no utilizado. Comprueba tus archivos fuente y elimina los selectores no utilizados de tu CSS.
2. UnCSS: Similar a PurifyCSS, UnCSS también elimina los estilos no utilizados de tus hojas de estilo.
3. Herramientas de desarrollo de Chrome: La pestaña Cobertura de Chrome DevTools puede ayudar a identificar código JavaScript y CSS no utilizado.

4. Optimiza tu estructura CSS

Optimizar tu CSS puede conducir a tiempos de renderizado más rápidos y a una mejor experiencia de usuario. He aquí cómo:

4.1. Minificar y reducir archivos CSS

La minificación elimina los caracteres innecesarios del código para reducir su tamaño, mejorando así los tiempos de carga. La compresión reduce el tamaño de los archivos CSS para optimizar la entrega al navegador. Breeze ofrece minificación CSS integrada, que minimiza automáticamente todos tus archivos CSS para mejorar los tiempos de carga. También proporciona opciones independientes para inlining CSS crítico, mejorando aún más FCP.

4.2. Precargar peticiones CSS clave

La página precarga en el atributo enlace> permite al navegador descargar los archivos CSS clave lo antes posible, lo que puede reducir el tiempo que se tarda en renderizar la página. Aquí tienes un ejemplo de cómo utilizar el atributo preload para precargar un archivo CSS:

<link rel="preload" href="https://www.cloudways.com/blog/improve-first-contentful-paint-wordpress/styles.css" as="style">

Esto indica al navegador que empiece a descargar el archivo styles.css de inmediato, ya que es probable que lo necesites pronto. El as="estilo" es importante, ya que ayuda al navegador a establecer la prioridad correcta para descargar el recurso.

💡 Nota: Ten cuidado con precargar demasiados recursos, ya que puede ralentizar el rendimiento al consumir el ancho de banda necesario. Se recomienda precargar sólo los archivos CSS críticos para la carga inicial de la página.

5. Evita los elementos dependientes de JavaScript por encima del pliegue

Los elementos que dependen de JavaScript pueden ralentizar el tiempo de carga de tu sitio web. He aquí cómo abordar este problema:

5.1. Utiliza soluciones alternativas para animaciones y deslizadores

Considera la posibilidad de utilizar animaciones CSS o vídeo HTML5 como alternativas a las animaciones y deslizadores basados en JavaScript. Estas alternativas pueden proporcionar una funcionalidad similar con un menor impacto en el tiempo de carga de la página.

Las animaciones CSS son una potente función que puede sustituir a las animaciones JavaScript. Las realiza el motor de renderizado del navegador, que puede utilizar aceleración por hardware para mejorar el rendimiento.

Aquí tienes un ejemplo de una animación CSS sencilla:

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.myElement {
  animation: slide 2s infinite;
}

El vídeo HTML5 puede utilizarse para crear contenido rico y dinámico sin depender de JavaScript. Es compatible con todos los navegadores modernos y puede controlarse mediante la API de vídeo HTML5 estándar.

<video width="1080" height="720" controls>
  <source src="https://www.cloudways.com/blog/improve-first-contentful-paint-wordpress/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

5.2. Retrasar la ejecución de JavaScript no esencial

El JavaScript no esencial puede aplazarse hasta después de que se haya cargado la página. Esto permite al navegador renderizar la página más rápidamente y mejora la experiencia del usuario.

La página aplazar en el atributo <script> permite al navegador ejecutar el script después de que el documento HTML haya sido analizado completamente.

<script src="https://www.cloudways.com/blog/improve-first-contentful-paint-wordpress/script.js" defer></script>

La etiqueta async permite que el script se obtenga en paralelo con otros recursos y se ejecute en cuanto esté disponible, sin bloquear la representación de la página.

<script src="https://www.cloudways.com/blog/improve-first-contentful-paint-wordpress/script.js" async></script>

JavaScript proporciona eventos como DOMContentLoaded y carga que puede utilizarse para retrasar la ejecución de JavaScript no esencial hasta después de que se haya cargado la página.

window.addEventListener('load', function() {
  // Your code here
});

6. Evitar la carga perezosa de imágenes por encima del pliegue

La carga lenta puede mejorar el rendimiento al cargar las imágenes sólo cuando son necesarias. Sin embargo, es importante evitar la carga perezosa de imágenes que aparezcan por encima del pliegue. A continuación te explicamos cómo:

6.1. Precarga las imágenes críticas

La precarga permite al navegador descargar las imágenes importantes lo antes posible. Esto reduce el tiempo que tarda en procesarse la página y mejora la experiencia del usuario. He aquí cómo puedes hacerlo:

• Utiliza el botón precarga valor del rel en un atributo enlace en tu HTML. Esto indica al navegador que empiece a descargar el recurso especificado lo antes posible.
• Si tu servidor es compatible con HTTP/2, puedes utilizar Server Push para enviar recursos al cliente antes de que sean solicitados. Esto puede ser especialmente eficaz para precargar imágenes críticas.

6.2. Utilizar técnicas de optimización de imágenes por encima de la página

Optimiza las imágenes que aparecen por encima del pliegue comprimiéndolas, redimensionándolas adecuadamente y utilizando formatos de imagen modernos como WebP.

7. Optimizar y comprimir imágenes

La optimización de las imágenes puede reducir significativamente los tiempos de carga de las páginas, reducir el uso de ancho de banda y mejorar la experiencia del usuario. He aquí cómo:

7.1. Elige el formato de imagen y el nivel de compresión adecuados

Se pueden utilizar distintos formatos de imagen y niveles de compresión en función del contenido de la imagen. Por ejemplo, utiliza JPEG para fotografías, PNG para gráficos con pocos colores y SVG para imágenes vectoriales.

Imagify te permite redimensionar y comprimir imágenes sin esfuerzo con un solo clic y está considerado entre los mejores plugins de optimización de imágenes para WordPress. Aquí tienes las instrucciones:

• Primero, instala el plugin Imagify en tu sitio de WordPress y actívalo.
• Utiliza tu dirección de correo electrónico para generar la clave API. Una vez generada, copia esta clave y pégala en la siguiente ruta: Panel de WordPress > Configuración > Imagify.
• Ir a la página Panel de WordPress → Ajustes → Imagify → Sección Optimización.

En la sección de optimización, selecciona la opción Mostrar imágenes en formato WebP en el sitio y Utiliza etiquetas <picture>..

7.2. Utiliza técnicas de imagen responsiva

Las técnicas de imagen responsiva, como la srcset en HTML, permiten al navegador elegir la fuente de imagen más adecuada en función del tamaño y la resolución de la pantalla del dispositivo. Esto puede reducir el uso de ancho de banda y mejorar los tiempos de carga en dispositivos móviles.

8. Reduce el tamaño de tu DOM

Reducir el tamaño de tu Modelo de Objetos del Documento (DOM) puede mejorar el rendimiento. He aquí algunas estrategias:

8.1. Minimizar el marcado HTML

Mantén tu HTML limpio y sencillo. Elimina las etiquetas innecesarias, utiliza elementos HTML semánticos y evita el estilo en línea siempre que sea posible.

Para mantener tu HTML limpio y esbelto, puedes:

• Utilizar validadores HTML como Servicio de validación de marcado del W3C para identificar y eliminar las etiquetas innecesarias.
• Utiliza elementos HTML semánticos como <article>, <section> y <nav> para proporcionar más información sobre tu contenido.
• Utiliza hojas de estilo CSS externas o CSS internas en la sección <head> en lugar de estilos en línea.

<!-- Good -->
<head>
    <style>
        .myClass {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="myClass">Hello, World!</div>
</body>

<!-- Bad -->
<body>
    <div style="color: blue;">Hello, World!</div>
</body>

8.2. Evita los elementos anidados innecesarios

Los elementos anidados profundamente pueden hacer que el DOM sea más grande y complejo, ralentizando la representación de la página. Intenta mantener tu estructura HTML lo más plana posible.

Para evitar que el DOM sea más grande y complejo, puedes:

• Utilizar CSS Flexbox o Grid para maquetar en lugar de tablas o divs anidados.
• Utiliza combinadores CSS para dar estilo a los elementos sin aumentar la complejidad del HTML.

Utiliza Document.querySelector() o Document.querySelectorAll() para acceder directamente a los elementos anidados en profundidad.

<!-- Good -->
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
</div>

<!-- Bad -->
<div>
    <div>
        <div>Item 1</div>
    </div>
    <div>
        <div>Item 2</div>
    </div>
</div>

9. Asegúrate de que el texto permanece visible durante la carga de la fuente web

Las fuentes web pueden ralentizar tu sitio, pero puedes mitigarlo asegurándote de que el texto permanece visible durante la carga de la fuente web.

9.1. Utiliza opciones de visualización de fuentes como "Swap" o "Fallback".

El CSS font-display controla cómo se muestra una fuente en función de si está descargada y lista para usar, y cuándo.

El valor "swap" indica al navegador que utilice la fuente de reserva para mostrar el texto hasta que se haya cargado la fuente personalizada, mientras que el valor "fallback" da a la fuente un periodo de bloqueo corto y un periodo de intercambio infinito.

Para utilizar opciones de visualización de fuentes como "swap" o "fallback", puedes añadir el parámetro font-display a tu propiedad @font-face en tu CSS. He aquí cómo puedes hacerlo:

@font-face {
  font-family: 'MyFont';
  src: url('/path/to/myfont.woff2') format('woff2'),
       url('/path/to/myfont.woff') format('woff');
  font-display: swap; /* or fallback */
}

Esto indica al navegador que utilice la fuente "fallback" para mostrar el texto hasta que se haya cargado la fuente personalizada. Si utilizas "fallback", la fuente obtiene un periodo de bloqueo corto y un periodo de intercambio infinito.

9.2. Alojar Webfonts localmente o en una CDN

Alojar los webfonts localmente o en una Red de Entrega de Contenidos (CDN) puede acelerar los tiempos de carga reduciendo el número de peticiones HTTP, aprovechando la caché del navegador y mejorando la velocidad de entrega del contenido.

Para alojar webfonts localmente o en una CDN, puedes seguir estos pasos:

• Puedes descargar archivos webfont de fuentes como Google Fonts, Font Squirrel, etc.
• Si alojas las fuentes web localmente, sube los archivos a tu servidor. Si utilizas una CDN, sigue las instrucciones de la CDN para subir los archivos.
• Utiliza el botón @font-face en tu CSS para señalar la ubicación de los archivos de fuentes.

@font-face {
  font-family: 'MyFont';
  src: url('/path/to/myfont.woff2') format('woff2'),
       url('/path/to/myfont.woff') format('woff');
}

Esto puede acelerar los tiempos de carga reduciendo el número de peticiones HTTP, aprovechando la caché del navegador y mejorando la velocidad de entrega del contenido.

Resumen

En conclusión, mejorar la Primera Pintura de Contenido (FCP) de tu sitio WordPress es un proceso polifacético que implica estrategias tanto del lado del servidor como del front-end. Mejorar la respuesta del servidor, utilizar la caché del servidor, eliminar los bloques de renderizado y mejorar el CSS aceleran el FCP.

Herramientas como Lighthouse, Google PageSpeed Insights y GTmetrix pueden ayudar a diagnosticar problemas de FCP y guiar tus esfuerzos de optimización. Recuerda que una buena puntuación de FCP es de 1,8 segundos o menos, lo que garantiza que la mayoría de los usuarios perciban tu sitio como rápido y receptivo.

Inshal Ali

Inshal es Content Marketer en Cloudways. Con formación en informática, habilidad para los contenidos y mucha creatividad, ayuda a las empresas a alcanzar el cielo e ir más allá a través de contenidos que hablan el idioma de sus clientes. Aparte del trabajo, le verás sobre todo en algún juego en línea o en un campo de fútbol.