Cómo aumentar la puntuación del primer contenido pintado (FCP) de su sitio WordPress y acelerar la carga de la página

La pintura del primer contenido (o FCP, por sus siglas en inglés) es una métrica clave utilizada por Google para medir la velocidad de carga de una página web, que registra el tiempo que transcurre desde que un usuario comienza a cargar una página hasta que aparece el primer fragmento de contenido de la misma.

Para los propietarios de sitios web WordPress, el FCP muestra lo bien que funciona un sitio web y el impacto que puede tener en la experiencia del usuario y en la optimización para motores de búsqueda (SEO). Un FCP rápido significa que los visitantes no tienen que mirar una pantalla en blanco durante largos periodos de tiempo, lo que puede hacer que su experiencia en el sitio web sea más agradable y, por tanto, aumentar el compromiso de los usuarios.

Google pone mucho énfasis en la experiencia del usuario, por lo que la puntuación FCP de su sitio tendrá un impacto directo en cómo se clasifica en los resultados de búsqueda. Tener una buena puntuación FCP (lo ideal es situarse en el 25% superior de todas las experiencias web) significa que el tiempo FCP debe ser de 1,8 segundos o menos.

Las mejores estrategias para mejorar el FCP de WordPress

Reducir el tiempo de respuesta del servidor

Una de las acciones clave para mejorar el rendimiento del Primer Pintado de Contenido (FCP) de un sitio WordPress es reducir el tiempo de respuesta del servidor, que medimos como Tiempo hasta el Primer Byte (TTFB).

TTFB es el tiempo que tarda el navegador del usuario en recibir el primer byte de datos del servidor. Si TTFB es lento, puede deberse a que:

• Problemas de conectividad de la red.
• La configuración del servidor no está optimizada para la velocidad.
• Demasiados visitantes en línea al mismo tiempo para que el servidor pueda manejarlo.

Para acelerar su TTFB, esto es lo que puede hacer:

• Elija un servicio de alojamiento fiable que disponga de buenas instalaciones y experiencia para gestionar un tráfico intenso.
• El uso de una red de distribución de contenidos (CDN), que puede alojar copias de su sitio web en múltiples ubicaciones de todo el mundo, permite a los usuarios cargar el sitio desde la ubicación más cercana a ellos, lo que puede reducir significativamente los tiempos de carga.
• Habilite el almacenamiento en caché para que, cuando los visitantes vuelvan, el sitio pueda mostrarse rápidamente sin tener que recargarlo todo cada vez.

Elimine los recursos que bloquean la renderización

Recursos que bloquean el renderizado, principalmente archivos JavaScript y CSS. Estos archivos deben cargarse y ejecutarse por completo antes de que el navegador pueda empezar a mostrar el contenido de la página. Si estos archivos son demasiado grandes o complejos, el tiempo que tarda en cargarse su página hasta que aparece el primer contenido (FCP) será mayor.

Para que su sitio WordPress cargue más rápido, necesita optimizar la forma en que su sitio gestiona los archivos JavaScript y CSS. En pocas palabras, haga lo siguiente:

Para archivos JavaScript

Lo más sensato esUso de los atributos async y defer en archivos JavaScript. 

Cuando utiliza la "carga asíncrona", en realidad está dejando que el navegador siga construyendo la página mientras los archivos JavaScript se cargan silenciosamente en segundo plano. Una vez descargados estos scripts, el navegador deja de construir la página brevemente, ejecuta los scripts y luego continúa con su trabajo anterior. Es una buena idea utilizar la carga asíncrona cuando estos archivos JavaScript no necesitan ejecutarse en un orden determinado.

La ventaja de "diferir" es que permite al navegador esperar hasta que la página se muestre completamente antes de ejecutar el JavaScript, lo que garantiza que cuando su script necesite interactuar con los elementos HTML de la página, éstos ya estén listos.

💡 La elección de carga asíncrona o diferida depende en gran medida del tipo de script que tenga:

• Si el orden de ejecución de sus secuencias de comandos es importante, o si las secuencias de comandos deben ejecutarse después de que la página se haya mostrado por completo, entonces la carga retardada puede ser más adecuada.
• Si su script no tiene mucho que ver con los elementos HTML de la página y el orden de ejecución no importa, entonces la carga asíncrona puede ser una mejor opción.

Para archivos CSS

Considere la posibilidad de escribir los estilos CSS que se necesitan inicialmente para que la página se cargue directamente en el HTML. Esto significa poner los estilos básicos necesarios para que el contenido sea visible para el usuario en primer lugar directamente en el código de la página web. Hacerlo así permite que el navegador empiece a mostrar la página más rápidamente al no tener que esperar a un archivo CSS externo al cargar la página.

Además, la eliminación del código CSS y JavaScript no deseado o no utilizado puede ayudar a que las páginas se muestren más rápidamente, haciendo que el FCP (First Time Content Painting) sea más rápido.

Comprimir CSS

Comprimir CSS significa eliminar cosas no deseadas del archivo, como espacios extra, comentarios y delimitadores, y hacerlo no afectará al funcionamiento de la página.

Este método reduce significativamente el tamaño de los archivos CSS, permitiendo que se carguen más rápido, lo que a su vez acelera la primera visualización del contenido de su sitio. Existen muchas herramientas y plugins que pueden ayudarle a automatizar este proceso de compresión, elCohete WPes una de las opciones más populares: no sólo comprime CSS, sino que también ofrece funciones como el almacenamiento en caché y la carga retardada de JavaScript para ayudar a agilizar su sitio de WordPress.

Si necesita otras opciones, también puede probarAutoptimizeresponder cantandoW3 Total Cachey otros plugins. Estas herramientas comprimen automáticamente el CSS para que no tenga que editarlo manualmente usted mismo, ahorrándole tiempo y frustración.

Evite colocar elementos dependientes de JavaScript por encima de la primera pantalla

Si el contenido de su sitio web que se muestra en primer lugar a los visitantes depende en gran medida de JavaScript, esto puede ralentizar la visualización del primer contenido (FCP) de su sitio web. El motivo es que el navegador necesita descargar, analizar y luego ejecutar el código JavaScript antes de poder mostrar el contenido.

Para que FCP sea rápido, lo mejor es confiar principalmente en HTML y CSS para el contenido de la primera pantalla de su sitio, en lugar de JavaScript.Esto significa que debe organizar el diseño de su sitio y los elementos visuales básicos de forma que no tenga que esperar a que se cargue JavaScript para mostrarlos rápidamente.

El método para realizar esta operación es el siguiente:

1. Evalúe qué partes del sitio requieren JavaScript y cuáles no.Por ejemplo, los elementos de diseño sencillos y el contenido básico no deben sernecesitaJavaScript. a continuación, puede construir el HTML para cargar estos elementos en primer lugar. Utilice CSS para dar estilo en la medida de lo posible, especialmente a la primera pantalla. CSS carga más rápido que JavaScript y a menudo puede lograr efectos visuales similares.
2. Carga diferida o asíncrona de archivos JavaScript, especialmente aquellos archivos que no son importantes para la renderización inicial de la página. De este modo, su sitio podrá mostrar su contenido principal sin tener que esperar a que todo el JavaScript se cargue y ejecute.

Si da prioridad a la carga de HTML y CSS para el contenido de la primera pantalla y reduce su dependencia inicial de JavaScript, podrá acelerar el FCP y crear una experiencia más fluida y receptiva para los visitantes cuando aterricen en su sitio de WordPress.

Optimice las imágenes y evite el retraso en la carga de la primera pantalla

Si las imágenes de la parte superior de su sitio web son demasiado grandes, se cargarán lentamente, sobre todo las imágenes importantes situadas en la parte superior de la página, lo que ralentizará la primera impresión (FCP) de la visualización del sitio web.

Por ejemplo, si la gran imagen de fondo de la página de inicio (a menudo denominada "imagen héroe") no está optimizada, ralentizará la página como un atasco.

Para evitar este problema, esto es lo que puede hacer:

• Imágenes comprimidas: Esto puede ayudar a reducir el tamaño del archivo de imagen sin que la imagen se vea mucho peor.
• Elija el formato de imagen adecuado: Por ejemplo, en el caso de las fotos, las que están en formato JPEG suelen ser más pequeñas y se cargan más rápido que las PNG.
• Uso de imágenes con capacidad de respuesta: Proporcione las imágenes en diferentes tamaños en función del dispositivo que acceda al sitio. Por ejemplo, a los usuarios de teléfonos móviles se les proporcionan archivos de imagen más pequeños que a los usuarios de ordenadores de sobremesa para que se carguen más rápidamente en los dispositivos de pantalla pequeña.
• Aplicación de la carga diferida: Cargue las imágenes sólo cuando vayan a aparecer en la pantalla. Este método funciona para las imágenes situadas por debajo de la primera pantalla, pero es mejor no utilizarlo para las imágenes de la primera pantalla para evitar que afecte a la velocidad de carga.
• Simplifique el proceso con plug-ins: Smush es una gran herramienta que comprime y optimiza automáticamente las imágenes por usted.

Con estos métodos, se puede mejorar la velocidad de carga de su sitio web para que los visitantes puedan ver rápidamente el contenido en cuanto abran el sitio.

Implementación del almacenamiento en caché a nivel de servidor

El almacenamiento en caché a nivel de servidor es cuando se guarda una copia de la página de un sitio web en el servidor. De esta forma, cuando alguien vuelve a visitar el sitio, el servidor puede limitarse a mostrar esta página almacenada en caché sin tener que recargar la página completa cada vez.

Este método es impresionante porque hace lo que el almacenamiento en caché del navegador no puede hacer. El almacenamiento en caché del navegador es el proceso de guardar la información del sitio web en el ordenador o teléfono móvil de un visitante para que se cargue más rápido la próxima vez que lo visite. Pero para los visitantes primerizos, el almacenamiento en caché del navegador no puede ayudar. El almacenamiento en caché a nivel de servidor, en cambio, hace que la experiencia sea más rápida para todos los visitantes, sean primerizos o no.

Hoy en día, muchos servicios que ofrecen alojamiento para WordPress incluyen el almacenamiento en caché a nivel de servidor, lo que facilita mucho las cosas. También puede hacerlo con plugins como WP Rocket o W3 Total Cache, que ofrecen varias opciones de caché, incluida la caché a nivel de servidor.

Reducir el tamaño del DOM

En el desarrollo web, existe algo llamado Modelo de Objetos del Documento, o DOM para abreviar.Imagínelo como el plano de una página web, que ayuda al navegador a saber cómo presentar cada parte de la página, ya sea texto, imágenes o encabezados.

El DOM convierte una página web en un gran árbol genealógico formado por muchas partes pequeñas. Cada vez que usted hace algo en una página web (como pulsar un botón), el navegador hace referencia a este árbol genealógico y actualiza la página web en función de su acción.

Si el árbol genealógico es más sencillo, más rápido renderizará el navegador la página web, lo que significa que ésta se le mostrará más rápidamente. Pero si el árbol genealógico es demasiado complejo, el navegador tiene que dedicar más tiempo a descifrarlo, lo que ralentiza la visualización de la página web, lo que significa que tendrá que esperar más tiempo para ver el contenido. En pocas palabras, mantener el DOM reducido permite que las páginas web se carguen más rápido, lo que le proporciona una mejor experiencia de navegación.

Esencialmente, un DOM más esbelto permite interacciones más rápidas y una experiencia de usuario más receptiva.

He aquí algunos consejos útiles para reducir el tamaño del DOM:

• Minimizar lo innecesariodivElementos:El uso excesivo de elementos div HTML puede dar lugar a un DOM demasiado grande. Simplifique la estructura de la página eliminando los divs que no se utilicen para un fin específico.
• Haga un uso más eficiente del CSS:Utilice CSS en lugar de depender en gran medida de JavaScript o de una estructura HTML excesiva para el estilo.CSS es más rápido de procesar para los navegadores y a menudo consigue los resultados visuales y funcionales deseados con una estructura DOM más racionalizada. Este enfoque ordena el DOM y reduce los tiempos de carga de la página.
• HTML semántico:Siempre que sea posible, utilice elementos semánticos HTML5 como
  ,

  ,

  ,
• Optimice el HTML generado por JavaScript:Si su sitio utiliza JavaScript para generar HTML de forma dinámica, asegúrese de que el proceso sea eficiente. Evite el anidamiento innecesario de elementos y examine la estructura del HTML generado en busca de oportunidades de simplificación.
• Revise y refactorice su código:Audite regularmente el código de su sitio en busca de elementos innecesarios y prácticas obsoletas.Herramientas como DevTools de Chrome pueden ayudar a identificar partes del DOM demasiado grandes o complejas. Refactorizar su código puede significar combinar elementos, simplificar los selectores CSS o refactorizar ciertas partes de la página.
• Utilice CSS Grid y Flexbox:Las técnicas modernas de maquetación CSS, como Grid y Flexbox, reducen significativamente la necesidad de divs adicionales y estructuras anidadas. Proporcionan una forma más eficiente de crear maquetaciones complejas utilizando menos HTML.
• Limite el uso de scripts de terceros:Los scripts de terceros pueden añadir elementos adicionales al DOM. Limite su uso y elija alternativas ligeras siempre que sea posible.

Uso de una red de distribución de contenidos (CDN)

Una red de distribución de contenidos, o CDN para abreviar, es como un servicio de mensajería, pero éste distribuye contenidos web. Lo hace colocando una serie de servidores (piense en ellos como estaciones de mensajería) por todo el mundo para garantizar que la obtención de páginas web sea rapidísima, esté donde esté.

Imagine que cada vez que navega por una página web, el servicio CDN le entrega el contenido rápidamente desde la "estación de entrega" (también conocida como servidor) más cercana. La ventaja de esto es que reduce la distancia que tienen que recorrer los datos y hace que la página se cargue mucho más rápido.

Esta entrega rápida no sólo hace que las páginas web se abran más rápido, sino que también hace que su sitio web se posicione mejor en los motores de búsqueda. Como una página web que carga rápido es más popular, a los motores de búsqueda les gusta más. En pocas palabras, utilizar una CDN es como poner un superimpulsor en su página web y hacer que vuele ante los usuarios.

Se incluye un CDN fiable compatible con WordPress:

• Cloudflare:: Cloudflare es ampliamente reconocido por sus amplias funciones web y de seguridad. Ofrece un plan gratuito muy potente y es conocida por su fácil integración con WordPress, lo que la convierte en una opción muy popular entre los propietarios de sitios web WordPress.
• Akamai:: Akamai es uno de los servicios CDN más antiguos y completos, conocido por su vasta red de servidores y sus avanzadas funciones de seguridad, aunque probablemente sea más adecuado para grandes sitios de nivel empresarial.
• MaxCDN (ahora StackPath):: StackPath ofrece servicios CDN de alta velocidad y es especialmente conocido por su interfaz fácil de usar y su eficaz integración con los plugins de caché de WordPress, lo que lo convierte en una opción popular para los sitios web pequeños y medianos.
• KeyCDN:: KeyCDN es un proveedor de CDN asequible y eficaz, fácil de configurar con WordPress y que ofrece precios de pago por uso, lo que resulta atractivo para los sitios web con tráfico variable.
• Amazon CloudFront: CloudFront, parte de Amazon Web Services (AWS), es un potente servicio CDN que se integra bien con otros servicios de AWS. Es una buena opción para los sitios que requieren un alto grado de personalización y que ya forman parte del ecosistema de AWS.
• Rápidamente::Con una CDN en tiempo real con capacidades de computación de borde, Fastly no sólo entrega contenidos, sino que también ejecuta código personalizado muy cerca del usuario, proporcionando características únicas de personalización y optimización.
• Sucuri:: Conocido principalmente por sus soluciones de seguridad, Sucuri también ofrece un servicio CDN que integra seguridad y rendimiento, lo que lo convierte en una gran opción para los sitios de WordPress preocupados por la velocidad y la seguridad.

Evite los redireccionamientos múltiples de páginas

Los redireccionamientos son como trampolines para las páginas web, y a veces ayudan a guiarnos a nosotros o a los motores de búsqueda a la URL correcta. Pero este proceso ralentiza la apertura de las páginas web. Imagine que el navegador tiene que hacer una ronda extra de "pedir indicaciones - que le digan la nueva dirección - ir de nuevo" cada vez que se encuentra con un lugar al que necesita saltar.

Es como pedir indicaciones y que le digan que su destino ha cambiado y tiene que ir por otro camino. Cada vez que pide indicaciones, tarda más en llegar y el navegador es más lento en mostrar el contenido.

Si una página web tiene demasiados de estos puntos de salto (también conocidos como redireccionamientos), hace que el viaje de los datos sea más largo, lo que provoca un aumento del tiempo de carga de la página web, que puede impacientar al usuario. Así pues, los redireccionamientos sólo deben utilizarse cuando sean realmente necesarios para evitar retrasos innecesarios y que todo el mundo pueda estar más contento y tranquilo al visitar las páginas web.

Puede seguir los siguientes pasos para asegurarse de que gestiona los redireccionamientos de forma eficaz y optimizar el rendimiento y la SEO de su sitio web:

• Audite los redireccionamientos de su sitio: utilicePageSpeed Insights de GoogleyGTmetrixtal vezWebPageTesty otras herramientas para analizar su sitio web e informar sobre el número y el impacto de los redireccionamientos. Pueden ayudarle a identificar los redireccionamientos no deseados.
• Compruebe la configuración del servidor:Compruebe el archivo de configuración del servidor (por ejemplo, en el servidor Apache) para ver si existe la opción.htaccess) para las reglas de redirección. A veces las redirecciones se establecen y se olvidan, por lo que es importante comprobar estas configuraciones con regularidad.
• Simplifique la estructura de las URL:El objetivo es una estructura de URL sencilla. Esto reduce la necesidad de redireccionamientos, especialmente si el patrón de URL cambia con el tiempo.
• Compruebe los enlaces internos:Asegúrese de que todos los enlaces internos apuntan directamente a la URL de destino final, en lugar de redirigir a una URL intermedia.
• Actualice los enlaces externos:Si tiene control sobre los enlaces externos (por ejemplo, los backlinks de otros sitios), procure que apunten directamente a la URL actual para evitar redireccionamientos innecesarios.
• Cadena de redireccionamiento:Evite las cadenas en las que una redirección lleva a otra. Si es necesaria una redirección, asegúrese de que va directamente a la URL de destino final.
• Utilice redireccionamientos 301 para realizar cambios permanentes:Utilice los redireccionamientos 301 cuando sean necesarios (por ejemplo, al trasladar páginas permanentemente). Son más eficaces que las redirecciones temporales (como la 302) y son mejores para el SEO.

Existen varios plugins y herramientas que pueden ayudarle con este problema:

• redirigees un popular plugin que ayuda a gestionar y realizar un seguimiento de las redirecciones 301, facilitando el manejo de las redirecciones en WordPress.
• Araña SEO Screaming Froges una potente herramienta que rastrea su sitio web, identifica los redireccionamientos y las cadenas de redireccionamientos, y le ayuda a comprender y optimizar la estructura de redireccionamientos de su sitio web.

Supervisar y ajustar con regularidad estos elementos mantendrá su sitio de WordPress funcionando sin problemas y con eficacia, proporcionando a los visitantes una experiencia excelente y manteniendo una sólida presencia en línea.

Herramientas para medir las puntuaciones FCP

Comprobar con regularidad la velocidad de carga de sus páginas (un proceso llamado monitorización FCP) es como hacer un chequeo de salud a su sitio web, que le ayuda a averiguar qué está ralentizando las cosas y, a continuación, encontrar maneras de hacer que se carguen más rápido. Haciendo esto se asegura de que todos los que visiten su sitio disfruten de una experiencia de navegación fluida y rápida.

Descuidar el control de esta velocidad de carga puede molestar a los visitantes y hacer que dejen de visitar su sitio. En el entorno competitivo que es Internet, hacer que su sitio web cargue rápido no sólo es algo que hará felices a los usuarios, sino que también ayudará a que su sitio web destaque.

Uso:

1. Visite el sitio web de PageSpeed Insights.
2. Introduzca su dirección web.
3. hacer clic (con un ratón u otro dispositivo señalador)analizadoDeje que la herramienta evalúe su página.

PageSpeed Insights proporciona informes detallados, incluyendo puntuaciones FCP. Clasifica el rendimiento en diferentes rangos, considerándose buenas las puntuaciones superiores a 90. La herramienta también sugiere posibles mejoras para aumentar la velocidad de carga y el rendimiento general del sitio.

Faro

Faroes otra herramienta gratuita de Google que se integra con Chrome y proporciona información sobre FCP como parte de su puntuación de rendimiento. 

Puede encontrar más información al respecto en Chrome DevTools'FaroLighthouse proporciona datos de laboratorio (en condiciones controladas) y datos de campo (que reflejan la experiencia real de los usuarios) para ofrecer una visión completa del rendimiento del PCF de un sitio.

WebPageTest

WebPageTestes una herramienta versátil para mediciones de FCP que proporciona una visión detallada del rendimiento. Le permite realizar pruebas desde diferentes ubicaciones y navegadores para obtener una visión más matizada del rendimiento de su sitio web en diversas condiciones.

GTmetrix

GTmetrixCombina la potencia de Google Lighthouse y otras herramientas para proporcionar informes detallados sobre el rendimiento de los sitios web, incluido el FCP. Su interfaz fácil de usar y sus análisis exhaustivos lo convierten en una opción muy popular entre los propietarios y desarrolladores de sitios web.

Utilizando estas herramientas, es posible estar al tanto del rendimiento de su sitio web y tomar decisiones informadas para mejorar y mantener una experiencia de usuario de alta calidad.

resúmenes

Es importante que el contenido de su sitio web llegue rápidamente a los visitantes (un proceso denominado "mapeo de contenidos de primera pasada"). No sólo supone una mejor experiencia para el usuario, sino que también puede ayudar a mejorar la clasificación de su sitio web en los motores de búsqueda. Así que realmente merece la pena dedicar tiempo a la optimización en este ámbito.

Sin embargo, llevar a cabo realmente dicha optimización puede resultar un poco complicado y requiere que tenga la paciencia suficiente para depurar y optimizar paso a paso. Es como resolver un rompecabezas complejo y, aunque el proceso puede resultar un poco tedioso, en última instancia hará que su sitio web sea más rápido y ofrecerá a sus usuarios una mejor experiencia de navegación.