Consejos para mejorar el FCP y FMP en WordPress

Google recientemente anunció que están clasificando sitios web basados ​​en First Content Paint (FCP) y First Meaningful Paint (FMP). Para cualquier sitio web, estas dos métricas indican qué tan rápido se abren los contenidos de sus páginas. Quizás se pregunte que miden exactamente esas métricas.

En este artículo, vamos a explicar el funcionamiento de First Content Paint (FCP) y la First Meaningful Paint (MFP) en detalle. Además, discutimos 4 métodos para reducir los tiempos de carga para su sitio de WordPress con el fin de mejorar su puntaje de PageSpeed ​​Insights.

¿Qué es FCP?

First Contentful Paint (FCP) es el primer cuadro de contenido que se muestra en la pantalla cuando los usuarios navegan por el sitio web. Mide el tiempo desde la búsqueda hasta el momento en que el navegador presenta el primer contenido definido en el Modelo de objetos de documento (DOM). Esto puede ser texto, una imagen o renderizado de lienzo.

En el caso del sitio web de WordPress, los elementos del encabezado son el primer contenido que comienza a renderizarse. El visitante ve el logotipo del sitio y el menú de navegación. Hay dos fases en la primera pintura satisfactoria. Primer cuadro y cuadro satisfactorio .

Primer cuadro: El primer cuadro se activa cuando se detecta un renderizado en el navegador. Esto podría ser algo tan sutil y poco informativo como un cambio en el color de fondo. El problema con este momento es que las primeras pinturas se pueden activar relativamente temprano en la carga de la página, sin entregar necesariamente ningún contenido o información al usuario para su consumo.

Los componentes de los sitios web pueden cargarse de manera escalonada y, aunque un color de fondo puede pintarse rápidamente, el contenido / interactividad real puede tardar más tiempo en cargarse.

Cuadro satisfactorio: El cuadro satisfactorio se activa cuando se pinta la primera parte del contenido del Modelo de objetos de documento (DOM) . Esto puede ser texto, una imagen o renderizado de lienzo definido en el DOM.

Debido a que el foco está en el contenido, la idea es que esta métrica le dé una idea de cuándo su usuario recibe información consumible, como texto, imágenes, etc.

Las diferentes fases de Primer cuadro Cuadro satisfactorio se muestran en la imagen a continuación:

¿Qué es FMP?

Cuando los contenidos de un sitio web están completamente cargados es denominado  First Meaningful Paint o Primer cuadro significativo. Este es el momento en que el usuario siente que el contenido principal de la página está visible. Como su nombre indica después del primer renderizado de cuadro significativo, proporciona información significativa a los usuarios.

La información del primer cuadro significativo difiere de un sitio a otro, pero la práctica general actualmente es designar la representación de contenido valioso conocido como elementos heroicos. Los elementos heroicos incluyen capas, imágenes y encabezados que probablemente sean más significativos para un usuario cuando visita el sitio, lo que los convierte en buenos indicadores para el momento del primer cuadro satisfactorio (FMP).

Para un sitio web de blog, los elementos heroicos podrían ser las publicaciones de blog con imágenes destacadas, y para sitios sociales, los elementos de heroicos podrían ser líneas de tiempo, perfil de usuario.

La siguiente imagen muestra un sitio web completamente cargado con publicaciones destacadas.

¿Cómo acelerar el FCP y FMP?

Cuando ejecuta Google PageSpeed ​​Insights, Google le proporciona sugerencias personalizadas sobre cómo puede arreglar su sitio. Las siguientes cinco sugerencias son recomendaciones de Google para todos los sitios para mejorar el FCP y FMP.

1. Reduzca la cantidad de CSS y scripts externos que bloquean el procesamiento del que depende la página.

Esta es la primera forma en que puede reducir el tiempo de carga del sitio web al eliminar los recursos de bloqueo de renderizado. 

¿Qué es el bloqueo de renderizado? Cuando un visitante está cargando una página web, cualquier cosa que se interponga en el procesamiento del DOM (interfaz del sitio web) se conoce como bloqueo de procesamiento. Son obstáculos de código que el navegador debe procesar primero antes de que pueda hacer cualquier otra cosa.

Asegúrese de mantener su CSS eficiente, entregarlo lo más rápido posible y usar tipos de medios y consultas para desbloquear el renderizado.

2. Use HTTP Caching

El almacenamiento en caché es una forma confiable de mejorar la velocidad del sitio para sus visitantes mediante el almacenamiento de activos en una memoria caché para una recuperación más rápida. Hay varios tipos de cachés.

Con el almacenamiento en caché de HTTP, el navegador almacena una copia de los activos descargados a través de HTTP por el usuario en su caché, por lo que podrá recuperarlos sin realizar un viaje adicional al servidor. Esto mejora drásticamente el rendimiento para los visitantes habituales cuando se realiza correctamente.

Puede darle al navegador opciones sobre dónde puede recuperar un recurso, y eso puede marcar una gran diferencia en la velocidad de carga de su página.

3. Minificar y comprimir activos basados ​​en texto

Los sitios web están formados de archivos HTML, CSS y JavaScript basados ​​en texto. Si no puede eliminar un archivo porque es esencial, debe reducir el tamaño del archivo tanto como sea posible. Hay maneras de reducir el tamaño del archivo, minificar o comprimir.

  • Minificación: la minificación se refiere al proceso de eliminar datos innecesarios o redundantes sin afectar la forma en que el navegador procesa el recurso, por ejemplo, comentarios de código y formateo, eliminación de código no utilizado, uso de nombres de funciones y variables más cortos, etc.
  • Compresión: Comprimir sus archivos es similar al proceso de comprimir sus imágenes . Durante el proceso de compresión, el compresor detecta patrones y duplicaciones en el archivo de texto y los codifica de manera mucho más eficiente.

Ambas técnicas reducen significativamente el tiempo de pintura.

4. Optimizar JavaScript

El archivo JavaScript es el archivo más pesado en comparación con otros archivos de un sitio web. Las imágenes, por ejemplo, deben decodificarse, pero JavaScript debe analizarse, compilarse y finalmente ejecutarse, lo que requiere mucho tiempo valioso. Puede utilizar diferentes métodos, como la sacudidas de árbol y la División de código para optimizar su archivo JavaScript.

  • Sacudidas de árbol es un término comúnmente utilizado dentro de un contexto de JavaScript para describir la eliminación de código muerto.
  • División de código: es el proceso de dividir el código en fragmentos pequeños y mover los fragmentos que no son críticos fuera de la cabeza de su sitio, reduciendo el tiempo de la primera pintura.

Resumen

Hablando de reducir el tiempo de carga de la página, esta es solo una perspectiva (solución técnica) que las herramientas de prueba de velocidad consideran. Hay varios otros factores que afectan la velocidad de carga del sitio web.

Tanto el primer cuadro satisfactoria como el primer cuadro significativo deben ser menos de un segundo para la mejor experiencia de usuario. Debido a que estas métricas son métricas centradas en el usuario que pueden decirle mucho sobre cuánto tiempo sus visitantes esperan por su contenido. Por lo tanto, puede seguir los métodos enumerados anteriormente para reducir FCP y FMP . Consulte la velocidad de la página de su sitio en PageSpeed ​​Insights de Google y descubra el estado de su sitio web.

Deja una respuesta

Mira más contenido relacionado

Aplicación de la domótica. ¿Qué tanto ha evolucionado esta premisa?

por Tecneófito, mayo 5, 2021

La evolución de la tecnología ha avanzado hasta tal punto de entrelazar varias facetas...

Los beneficios de blockchain ¿Qué trae consigo para 2021?

por Tecneófito, abril 24, 2021

Conocer los beneficios de blockchain para 2021 ayudará a comprender más sobre esta...

Facebook Gaming y todo lo que ofrece esta magnífica extensión

por Tecneófito, abril 23, 2021

Facebook Gaming es la nueva extensión que busca hacer frente a Twitch y seguir...

Red Starlink: La revolucionaria apuesta de Space X para internet satelital

por Tecneófito, abril 20, 2021

Elon Musk está decidido a impulsar por completo el desarrollo humano. Ahora, no solo...

Internet de las cosas. ¿De qué se trata este concepto tecnológico?

por Tecneófito, abril 14, 2021

El Internet de las cosas forma parte de un selecto grupo de conceptos tecnológicos cuya...

¿Los backlinks siguen siendo importantes para el SEO en 2021?

por Jhon Torres, febrero 16, 2021

Los backlinks siguen siendo una de las estrategias de SEO más importantes. Todavía...