Cómo mejorar la primera pintura con contenido y la pintura más grande con contenido

Como probablemente sepa, los sitios web no se cargan de una vez. Cuanto más compleja es una página, más tiempo tarda en representar todos sus elementos. Por lo tanto, debe usar más valores para medir el rendimiento de cualquier sitio. Dos de los valores de rendimiento más importantes que puede medir son las primeras pinturas (FCP) y la pintura contenta más grande (LCP). Estos dos números le dicen cuánto tiempo lleva, en promedio, hasta que se cargan los elementos de cada página. Al reducirlos, puede mejorar la velocidad del sitio en general. En este artículo, hablaremos sobre lo que son FCP y LCP y cómo medir ambos. Luego pasaremos algunos consejos para mejorar su tiempo de carga. ¡Vamos a eso!
¿Cuáles son la primera pintura satisfactoria y la pintura satisfactoria más grande? El FCP de una página le indica cuánto tiempo lleva el primer elemento basado en el texto o la imagen en aparecer en el navegador de un visitante. LCP, como su nombre indica, mide el tiempo requerido para que aparezca el elemento más grande. Como se mencionó anteriormente, los sitios web no se cargan a la vez. Si abre un sitio web ahora, verá que los elementos aparecen en un orden que parece casi aleatorio. Si abre Rotten Tomatoes, por ejemplo, así es como se ve la página inicial para un segundo después de la carga:

Ahora aquí está la misma parte de la pantalla después de que la página está completamente cargada:

Algunas personas miden el rendimiento del sitio utilizando tiempos de carga generales. Es un comienzo decente, pero no da una imagen completa. Idealmente, los tiempos de FCP deben ser lo más pequeños posible, y los tiempos de LCP deberían ser similares:

Si la diferencia entre las horas FCP y LCP de su página es pequeña, le dice dos cosas: hay pocos elementos que van más allá del resto (por ejemplo, sin imagen masiva, fondo de video, etc.).
Los materiales de la página probablemente se redujeron.
No hay un número particular a seguir cuando se trata de mejorar FCP. Dependerá de los elementos que haya incorporado en la página en cuestión. Sin embargo, para mantener el tiempo de carga razonable general, querrá reducirlo tanto como sea posible.
Cómo probar su hora FCP y LCP de su sitio Hay muchas herramientas que puede usar para evaluar el rendimiento de su sitio. FCP y LCP y porque es gratuito:
Todo lo que tiene que hacer es ingresar la URL de la página que desea probar. El servicio tomará unos segundos para analizar algunos números y luego verá una página de resultados con muchos datos de clasificación. Primero, verá los datos de campo de resultados. Esta sección muestra los tiempos de carga promedio recopilados para la página en los últimos 28 días (si está disponible). Por lo general, es una evaluación más precisa que los resultados inmediatos:

A continuación se muestra la sección de datos de laboratorio. Esto le muestra los números en la prueba que PageSpeed ​​Insights acaba de realizar:

Si hace clic en el botón en la esquina superior derecha de la sección de laboratorio, le mostrará un detalle de lo que significa cada valor. Una de las mejores partes de PageSpeed ​​Insights no le dice si su sitio es lento. También le da sugerencias sobre cómo mejorar su rendimiento en la sección Oportunidades: puede expandir las secciones relacionadas con cada medida para las ideas de PageSpeed ​​para ver las recomendaciones sobre cómo mejorar en esa área en particular.

Cómo mejorar la primera pintura Contentul y la mejor optimización del rendimiento de Contentul Paint (4 consejos) es esencial si desea proporcionar la mejor experiencia posible para los usuarios de su sitio. Esto incluye reducir los tiempos FCP y LCP. Recomendamos usar PageSpeed ​​Insights para obtener sugerencias específicas para su sitio, pero los cuatro consejos a continuación deberían ayudarlo a indiferente. 1. Active la memoria de caché del sitio memorizando en caché es un proceso que se hace cargo de algunos de los elementos del sitio y almacena en los navegadores de los visitantes o en un servidor remoto. En la práctica, hay varios tipos de caché que puede usar, que incluyen:

Memorización de caché del sitio: este tipo de almacenamiento en caché almacena los datos de su sitio en los navegadores de los visitantes, pero controla su configuración.
La memoria del navegador en caché: con la memoria de su navegador, los clientes de sus visitantes usan sus propias configuraciones para almacenar elementos en su sitio.
La memoria del servidor del servidor: este tipo de almacenamiento de caché involucra a otro servidor, que almacena a los niños de su sitio para reducir su propio impacto. Las redes de entrega de contenido (CDN) son un ejemplo común. El caché del sitio ofrece la implementación más fácil, con algunos de los mejores resultados. Hay muchos complementos de WordPress que harán más trabajo por usted, incluidos WP Super Cache y WP Rocket:
WP Super Cache es gratuito y activará automáticamente la memoria del sitio en caché una vez que la active. El tiempo de FCP y LCP debería disminuir para los visitantes recurrentes, ya que ya no tendrán que recargar todos los elementos de su sitio cada vez que regresen. 2. Comprima las imágenes de su sitio web. Sus archivos multimedia generalmente se encuentran entre los elementos más grandes en cualquier sitio web. Si no tiene la intención de diseñar un sitio que contenga 100% de texto, necesitará una forma de reducir los tiempos de carga de imágenes. La mejor manera de lograr esto es comprimir imágenes antes o mientras las carga en WordPress. Por el primero, puede usar una herramienta en línea como TinyPng:
TinyPng le permite subir imágenes y comprimirlas sin una pérdida de calidad significativa. Si desea adoptar un enfoque más automático, hay varios complementos que puede usar en su lugar. Dos de nuestras opciones principales incluyen ShortPixel Image Optimizer y Smush:
Ambos son fáciles de configurar y funcionan bien, incluso si carga grandes cantidades de imágenes en su sitio. Smush también le brinda la opción de comprimir imágenes que ya están en su biblioteca de medios. 3. Optimizar las imágenes de JavaScript y su sitio no son los únicos elementos que requieren compresión. La mayoría de los sitios web modernos se basan en gran medida en JavaScript y CSS para aspectos de su funcionalidad y diseño. Por lo general, esos escenarios no pesan mucho. Sin embargo, cuanto más usas, más se reúnen. Además, los navegadores deben ejecutar cada script separado, que puede tener un impacto significativo en el rendimiento. Hay muchas herramientas en línea que puede usar para comprimir o “minifica” el código en unos segundos. Sin embargo, también hay algunos complementos de WordPress de calidad que lo harán por usted, como la velocidad rápida minificar y autoptimizar:


Ambos complementos le permiten minimizar JavaScript, CSS y otros tipos de código. AutoPtimize también proporciona la bonificación adicional para incluir la funcionalidad de la carga perezosa.

4. Implemente la carga perezosa Por lo general, los navegadores no reproducen las imágenes de sus páginas en orden. Las fotos y gráficos aparecen cuando terminan cargando. El tiempo requerido para hacer esto puede variar según el tamaño de los archivos, su conexión y otros factores. La carga perezosa pospone algunas imágenes de la representación hasta que los usuarios corren y aparecen a la vista. En teoría, esto puede ayudarlo a reducir sus tiempos de FCP. Sin embargo, esto solo funciona si implementa la carga perezosa para los elementos correctos. Para obtener los mejores resultados, no debe usar esta técnica para las imágenes sobre el pliegue, es decir, las que están incluidas en la primera sección de la página que puede ver. Por ejemplo, si visitamos el sitio web de administración, aquí está nuestra opinión anterior: en nuestro caso, nos gustaría deshabilitar la carga perezosa para el fondo del encabezado, nuestro logotipo y la imagen que es parcialmente visible en la parte inferior de la pantalla. Algunos complementos de WordPress le permiten elegir y elegir los elementos para los que desea activar la carga perezosa. La autoevaluación es un ejemplo:

Tenga en cuenta que la carga perezosa ahora es parte del núcleo de WordPress. Puede activar esta funcionalidad para ciertas imágenes agregando el siguiente atributo: carging = “perezoso” Este enfoque implica más trabajo que usar un complemento, pero le brinda un control total sobre la funcionalidad de la carga perezosa. Por ejemplo, puede optar por no usarlo para imágenes de fondo y guardarlo para archivos muy grandes. Conclusión Al mejorar sus valores FCP y LCP, puede reducir el tiempo de carga general. Cuanto más corta esta expectativa, más sus visitantes deberían ser más felices. Afortunadamente, mejorar estos valores es relativamente simple si usa WordPress. Aquí hay cuatro consejos para mejorar estos indicadores clave de rendimiento: habilitar el caché del sitio.
Comprima las imágenes de su sitio.

Optimice JavaScript y CSS de su sitio.
Implementar carga perezosa.

¿Tiene alguna pregunta sobre cómo mejorar sus tiempos FCP y LCP? ¡Hablemos de ellos en la sección de comentarios a continuación! Imagen de crédito: Pixabay.