Cómo mejorar First Contentful Paint (FCP) en WordPress (optimización del lado del servidor y del front-end)

¿Alguna vez has sentido que tu sitio de WordPress tarda mucho en cargarse? Si es así, no estás solo. Los sitios web lentos frustran a los usuarios y perjudican su clasificación de búsqueda. ¡Pero no os preocupéis, desarrolladores de WordPress! Este artículo simplifica la mejora de una métrica clave: First Contentful Paint (FCP).

Piense en FCP como el momento en que su usuario ve la primera parte del contenido real, como texto o una imagen. Cuanto más rápido aparece, más felices son. ¿FCP lento? Es posible que hagan clic antes de ver su contenido útil.

En este artículo, dividiré las mejoras de FCP en pasos sencillos que incluso los ninjas en formación de programación pueden entender. Hablaré sobre el uso de estilos especiales (“CSS crítico”) y la eliminación de obstáculos (“recursos de bloqueo de renderizado”).

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

FCP es una métrica crucial que mide el tiempo que le toma al navegador mostrar el primer contenido significativo en su página. Podría ser texto, una imagen, un ícono o cualquier elemento que no sea solo una rueda de carga o un color de fondo.

En esencia, es el momento en que el visitante finalmente ve algo tangible, una señal de que su sitio web está vivo y coleando. Un FCP veloz les dice a los visitantes: "¡Oigan, estamos aquí y listos para mostrarles algo increíble!"

Por otro lado, un FCP lento transmite una imagen de lentitud y posibles problemas técnicos. Esto puede hacer que los visitantes frustrados se alejen antes incluso de experimentar su contenido, lo que afectará su participación y sus tasas de conversión.

Mejorar el FCP consiste en garantizar que su sitio web ofrezca ese momento inicial de sorpresa con prontitud. Al tomar el control de cómo se muestra su página, puede mejorar la experiencia del usuario, mejorar las clasificaciones SEO y crear un sitio web que realmente brille.

¿Qué es una buena puntuación FCP?

Apunte a un FCP de 1,8 segundos o menos. Este período de tiempo garantiza que la mayoría de los usuarios perciban su sitio como rápido y receptivo. Google considera que esta es una buena experiencia de usuario.

Si bien el objetivo es 1,8 segundos, esfuércese por alcanzar aún más velocidad. Idealmente, el percentil 75 de cargas de páginas, segmentado en dispositivos móviles y de escritorio, debería estar dentro de este rango. Esto garantiza la coherencia y se adapta a diversos tipos de dispositivos y velocidades de red.

Aquí está el desglose:

0-1,8 segundos: ¡Bien! Los usuarios perciben su sitio como un rayo.
1,8-3 segundos: sigue siendo bueno, pero intenta mejorar para evitar posibles frustraciones del usuario.
Más de 3 segundos: ¡Pobre! Los visitantes pueden rebotar debido a la percepción de lentitud.

– Fuente: web.dev

Diagnóstico de sus problemas de FCP

Herramientas como Lighthouse, Google PageSpeed ​​Insights y GTmetrix pueden analizar su sitio web e identificar elementos específicos que retrasan su FCP. Busque culpables como:

• Imágenes grandes o no optimizadas
• Recursos de bloqueo de renderizado
• Fuentes pesadas
• JS y CSS demasiado complejos

Una vez que haya identificado a los sospechosos, profundice para comprender su impacto. Herramientas como Google PageSpeed ​​Insights ofrecen análisis de rendimiento detallados, lo que le ayuda a identificar scripts, estilos y solicitudes de red específicos que afectan al FCP.

Abra Google PageSpeed ​​Insights, ingrese la URL de su sitio web en la barra de búsqueda y haga clic enAnalizar .

• Esto generará un informe detallado que destaca las áreas donde se pueden realizar mejoras para mejorar el FCP y el rendimiento general.

• Esté atento a la métrica FCP. Le indica cuánto tiempo tarda la primera parte de contenido real en aparecer en la pantalla de su visitante.

• A continuación, consulte la secciónDiagnóstico en PageSpeed ​​Insights.Enumera formas específicas de mejorar el FCP en su sitio.

Estrategias para mejorar el FCP

Para crear experiencias verdaderamente atractivas, debemos abordar FCP en ambos frentes: optimización del lado del servidor y del front-end. Veamos las estrategias viables 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 se puede hacer utilizando buenos métodos de almacenamiento en caché, comprimiendo archivos antes de enviarlos y haciendo que el servidor responda más rápido.

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

El tiempo hasta el primer byte (TTFB) es una medida que se utiliza como indicación 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 su servidor, garantizando consultas eficientes a la base de datos y minimizando las solicitudes HTTP.

1.1. Elija un mejor proveedor de alojamiento

La elección del proveedor de alojamiento puede afectar significativamente el rendimiento de su sitio. Busque proveedores que ofrezcan un excelente tiempo de actividad, sólidas medidas de seguridad y hardware de alta velocidad.

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

1.2. Optimizar el software del servidor

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

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

Una CDN es una red de servidores distribuidos en varias ubicaciones alrededor del mundo.

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

Para los usuarios de Cloudways, la integración de Cloudflare CDN ofrece beneficios adicionales más allá de la distribución geográfica. Se integra perfectamente con su cuenta de Cloudways, simplificando la configuración y la administració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 su 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 resulta en tiempos de carga más rápidos para sus usuarios.

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

Hay varios complementos de WordPress disponibles que pueden ayudarlo a implementar el almacenamiento en caché a nivel de servidor. Éstas incluyen:

1. W3 Total Cache: este complemento ofrece un conjunto completo de opciones de almacenamiento en caché, incluido el almacenamiento en caché de páginas, el almacenamiento en caché de objetos y el almacenamiento en caché del navegador.
2. WP Super Cache: este complemento fácil de usar genera archivos HTML estáticos desde su sitio dinámico de WordPress. El servidor web utilizará estos archivos HTML en lugar de procesar los scripts PHP más pesados.

2.2. Configurar reglas de almacenamiento en caché del lado del servidor

La configuración del almacenamiento en caché del lado del servidor implica establecer reglas sobre cómo y cuándo su servidor debe almacenar en caché el contenido. Aquí hay algunos pasos generales:

• Habilitar el almacenamiento en caché: esto generalmente se hace a través del archivo de configuración de su servidor (por ejemplo, .htaccess para servidores Apache).
• Establecer encabezados de control de caché: estos encabezados definen qué tipos de archivos almacenar en caché y durante cuánto tiempo almacenarlos.
• Configurar ETags: las ETags ayudan al navegador a determinar si el contenido almacenado en caché ha cambiado desde la última vez que se almacenó en caché.
• Utilice encabezados de caducidad: estos encabezados le indican al navegador cuánto tiempo almacenar en caché el contenido.

Optimización frontal

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

3. Elimine los recursos que bloquean el renderizado

Los recursos que bloquean el procesamiento, como CSS y JavaScript, pueden ralentizar el tiempo de carga de su sitio web. A continuación se explica cómo abordar este problema:

3.1. Identifique CSS crítico y cárguelo primero

CSS crítico es el conjunto mínimo de CSS de bloqueo necesario para representar el contenido de la mitad superior de una página web. Identifique e inserte el CSS crítico en el documento HTML y posponga la carga de todos los demás estilos CSS.

3.2. Aplazar o cargar JavaScript no crítico de forma asincrónica

JavaScript no crítico se puede aplazar o cargar de forma asincrónica para acelerar la representación de la página. Utilice el atributo defer o async en las etiquetas de su script para lograr esto.

Utilice el atributo defer en sus etiquetas de secuencia de comandos para posponer la carga de JavaScript no crítico hasta que el documento HTML se haya analizado por completo:

 <script src="non-critical.js" aplazar></script>

Alternativamente, use el atributo async para cargar el script de forma asincrónica:

 <script src="non-critical.js" async></script>

3.3 Eliminar scripts y estilos no utilizados

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

1. PurifyCSS: esta herramienta se puede utilizar para eliminar CSS no utilizado. Comprueba sus archivos fuente y elimina los selectores no utilizados de su CSS.
2. UnCSS: similar a PurifyCSS, UnCSS también elimina los estilos no utilizados de sus hojas de estilo.
3. Chrome DevTools: la pestaña Cobertura en Chrome DevTools puede ayudar a identificar código JavaScript y CSS no utilizado.

4. Optimice su estructura CSS

Optimizar su CSS puede generar tiempos de renderizado más rápidos y una mejor experiencia de usuario. Así es cómo:

4.1. Minimizar y reducir archivos CSS

La minificación elimina 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 de CSS incorporada, minimizando automáticamente todos sus archivos CSS para mejorar los tiempos de carga. También proporciona opciones separadas para incorporar CSS crítico, mejorando aún más el FCP.

4.2. Precargar solicitudes de CSS clave

El atributo de precarga en la etiqueta <link>permite al navegador descargar archivos CSS clave lo antes posible, lo que puede reducir el tiempo que lleva procesar la página. A continuación se muestra un ejemplo de cómo utilizar el atributo de precarga paraprecargar un archivo CSS:

 <enlace rel="precarga" href="styles.css" as="estilo">

Esto le indica al navegador que comience a descargar el archivo estilos.css de inmediato, ya que es probable que lo necesite pronto.El atributoas="style" es importante ya que ayuda al navegador a establecer la prioridad correcta para descargar el recurso.

Nota: Tenga cuidado al precargar demasiados recursos, ya que puede ralentizar el rendimiento al utilizar el ancho de banda necesario.Se recomienda precargar solo archivos CSS críticos para la carga inicial de la página.

5. Evite los elementos dependientes de JavaScript en la mitad superior de la página

Los elementos que dependen de JavaScript pueden ralentizar el tiempo de carga de su sitio web. A continuación se explica cómo abordar este problema:

5.1. Utilice soluciones alternativas para animaciones y controles deslizantes

Considere el uso de animaciones CSS o videos HTML5 como alternativas a las animaciones y controles deslizantes basados ​​en JavaScript. Estas alternativas pueden proporcionar una funcionalidad similar con menos impacto en el tiempo de carga de la página.

Las animaciones CSS son una característica poderosa que puede reemplazar las animaciones JavaScript. Son realizadas por el motor de renderizado del navegador, que puede utilizar aceleración de hardware para un mejor rendimiento.

Aquí hay un ejemplo de una animación CSS simple:

 @keyframes diapositiva {
  de { transformar: traducirX(0); }
  a { transformar: traducirX(100px); }
}

.miElemento {
  animación: diapositiva 2s infinita;
}

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

 <vídeo ancho="1080" alto="720" controles>
  <fuente src="película.mp4" tipo="video/mp4">
  Su navegador no soporta la etiqueta de vídeo.
</vídeo>

5.2. Retrasar la ejecución de JavaScript no esencial

El JavaScript no esencial se puede aplazar hasta que se haya cargado la página. Esto permite que el navegador muestre la página más rápidamente y mejora la experiencia del usuario.

El atributodefer en la etiqueta <script>permite al navegador ejecutar el script después de que el documento HTML se haya analizado por completo.

 <script src="script.js" aplazar></script>

El atributoasync permite recuperar el script en paralelo con otros recursos y ejecutarlo tan pronto como esté disponible, sin bloquear la representación de la página.

 <script src="script.js" async></script>

JavaScript proporciona eventos como DOMContentLoaded y loadque se pueden usar para retrasar la ejecución de JavaScript no esencial hasta que la página se haya cargado.

 ventana.addEventListener('cargar', función() {
  // Tu código aquí
});

6. Evite la carga diferida de imágenes en la mitad superior de la página

La carga diferida puede mejorar el rendimiento al cargar imágenes solo cuando son necesarias. Sin embargo, es importante evitar la carga diferida de imágenes que aparecen en la mitad superior de la página. Así es cómo:

6.1. Precargar imágenes críticas

La precarga permite que el navegador descargue imágenes importantes lo antes posible. Esto reduce el tiempo que lleva renderizar la página y mejora la experiencia del usuario. Así es como puedes hacerlo:

• Utilice el valorde precarga del atributo relen un elementode enlaceen su HTML. Esto le indica al navegador que comience a descargar el recurso especificado lo antes posible.
• Si su servidor admite HTTP/2, puede utilizar Server Push para enviar recursos al cliente antes de que se soliciten. Esto puede resultar particularmente eficaz para precargar imágenes críticas.

6.2. Utilice técnicas de optimización de imágenes en la mitad superior de la página

Optimice las imágenes que aparecen en la mitad superior de la página comprimiéndolas, cambiando su tamaño adecuadamente y utilizando formatos de imagen modernos como WebP.

7. Optimizar y comprimir imágenes

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

7.1. Elija el formato de imagen y el nivel de compresión correctos

Se pueden utilizar diferentes formatos de imagen y niveles de compresión según el contenido de la imagen. Por ejemplo, utilice JPEG para fotografías, PNG para gráficos con pocos colores y SVG para imágenes vectoriales.

Imagify te permite cambiar el tamaño y comprimir imágenes sin esfuerzo con un solo clic y está considerado uno de los mejores complementos de optimización de imágenes de WordPress. Aquí están las instrucciones:

• Primero, instale el complemento Imageify en su sitio de WordPress y actívelo.
• Utilice su dirección de correo electrónico para generar la clave API. Una vez generada, copie esta clave y péguela en la siguiente ruta:Panel de WordPress > Configuración > Imagify .
• Vaya al Panel de WordPress → Configuración → Imaginar → Sección de optimización .

En la sección de optimización, seleccione la opción Mostrar imágenes en formato WebP en el sitio y Usar etiquetas <imagen>.

7.2. Utilice técnicas de imágenes receptivas

Las técnicas de imágenes responsivas, como el atributosrcset en HTML, permiten que el navegador elija la fuente de imagen más apropiada según el tamaño y la resolución de la pantalla del dispositivo.Esto puede reducir el uso del ancho de banda y mejorar los tiempos de carga en los dispositivos móviles.

8. Reduzca el tamaño de su DOM

Reducir el tamaño de su modelo de objetos de documento (DOM) puede conducir a un mejor rendimiento. Aquí hay algunas estrategias:

8.1. Minimizar el marcado HTML

Mantenga su HTML limpio y ágil. Elimine etiquetas innecesarias, utilice elementos HTML semánticos y evite el estilo en línea siempre que sea posible.

Para mantener su HTML limpio y optimizado, puede:

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

 <!-- Bueno -->
<cabeza>
    <estilo>
        .mi clase {
            color azul;
        }
    </estilo>
</cabeza>
<cuerpo>
    <div class="myClass">¡Hola mundo!</div>
</cuerpo>

<!-- Malo -->
<cuerpo>
    <div>¡Hola mundo!</div>
</cuerpo>

8.2. Evite elementos anidados innecesarios

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

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

• Utilice CSS Flexbox o Grid para fines de diseño en lugar de tablas o divs anidados.
• Utilice combinadores CSS para diseñar elementos sin aumentar la complejidad del HTML.

UtiliceDocument.querySelector() o Document.querySelectorAll()para acceder directamente a elementos profundamente anidados.

 <!-- Bueno -->
<div class="contenedor">
    <div class="item">Artículo 1</div>
    <div class="item">Artículo 2</div>
</div>

<!-- Malo -->
<div>
    <div>
        <div>Artículo 1</div>
    </div>
    <div>
        <div>Artículo 2</div>
    </div>
</div>

9. Asegúrese de que el texto permanezca visible durante la carga de la fuente web

Las fuentes web pueden ralentizar su sitio, pero puede mitigarlo asegurándose de que el texto permanezca visible durante la carga de la fuente web.

9.1. Utilice opciones de visualización de fuentes como "Intercambiar" o "Retroceder"

La propiedad CSSfont-display controla cómo se muestra una fuente en función de si se descarga y está lista para usar y cuándo.

El valor de "intercambio" le dice al navegador que use la fuente alternativa para mostrar el texto hasta que se haya cargado la fuente personalizada, mientras que el valor de "alternativa" le da a la fuente un período de bloqueo corto y un período de intercambio infinito.

Para usar opciones de visualización de fuentes como "intercambiar" o "alternar", puede agregar la propiedad font-display a su regla @font-faceen su CSS. Así es como puedes hacerlo:

 @Perfil delantero {
  familia de fuentes: 'Mi fuente';
  src: url('/ruta/a/myfont.woff2') formato('woff2'),
       url('/ruta/a/mifuente.woff') formato('woff');
  visualización de fuente: intercambio; /* o reserva */
}

Esto le indica al navegador que use la fuente alternativa para mostrar el texto hasta que se haya cargado la fuente personalizada. Si utiliza "alternativa", la fuente obtiene un período de bloqueo corto y un período de intercambio infinito.

9.2. Aloje fuentes web localmente o en una CDN

Alojar fuentes web localmente o en una red de entrega de contenido (CDN) puede acelerar los tiempos de carga al reducir la cantidad de solicitudes HTTP, aprovechar el almacenamiento en caché del navegador y mejorar la velocidad de entrega de contenido.

Para alojar fuentes web localmente o en una CDN, puede seguir estos pasos:

• Puede descargar archivos de fuentes web de fuentes como Google Fonts, Font Squirrel, etc.
• Si aloja las fuentes web localmente, cargue los archivos en su servidor. Si está utilizando una CDN, siga las instrucciones de la CDN para cargar los archivos.
• Utilice la regla @font-face en su CSS para señalar la ubicación de los archivos de fuentes.

 @Perfil delantero {
  familia de fuentes: 'Mi fuente';
  src: url('/ruta/a/myfont.woff2') formato('woff2'),
       url('/ruta/a/mifuente.woff') formato('woff');
}

Esto puede acelerar los tiempos de carga al reducir la cantidad de solicitudes HTTP, aprovechar el almacenamiento en caché del navegador y mejorar la velocidad de entrega de contenido.

Resumen

En conclusión, mejorar el First Contentful Paint (FCP) de su sitio de WordPress es un proceso multifacético que involucra estrategias tanto del lado del servidor como del front-end. Mejorar la respuesta del servidor, utilizar el almacenamiento en caché del servidor, eliminar bloques de renderizado y mejorar CSS aceleran el FCP.

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