El contenido más grande lleno de contenido: qué es y cómo optimizarlo (2021)

Debido a que el campo de las experiencias del usuario evoluciona a un ritmo rápido, se requiere un nuevo idioma. La pintura de contenido más grande (LCP) es una de las pocas medidas para determinar cuánto tiempo lleva el contenido jugar en una página web. Discutiremos qué es LCP y cómo cuantificarlos en este artículo. Luego analizaremos algunas sugerencias para acelerar su tiempo de carga. ¡Vamos a empezar! ¿Cuál es la pintura más grande con el máximo contenido (LCP)? Debido a que se centra en el usuario, LCP es una medida crucial para la puntuación web vital. Mide, mientras que el detalle más importante de un sitio web en particular se verá en el navegador de consumo.
LCP es una medida centrada en el consumidor, debido al hecho de que el detalle más importante dentro de la ventana de visualización es normalmente el más importante, y su representación lo antes posible mejora la alegría de sus visitantes. Dentro de la ventana de visualización durante la página web. Método y revisa el tiempo necesario para reproducir ese detalle por la razón por la cual la página web ha comenzado a cargarse. El detalle de LCP es normalmente la imagen del héroe o un párrafo con contenido textual masivo.
¿Qué es una buena evaluación LCP? Debido a que LCP mide el tiempo de juego, reducir su calificación es aún mayor porque sus clientes verán el contenido crítico antes. LCP debe ser menor o igual a 2.5 segundos para una puntuación sólida. Si este es el caso, la página recibirá una puntuación verde y pasará la prueba. Si su LCP está entre 2.5 y 4.0, ganará una nota naranja, porque su puntaje “requiere mejora”. Supongamos que LCP es mayor de 4 segundos. El puntaje es entonces “malo” y debes corregirlo lo antes posible. El artículo continúa a continuación

¿Por qué es importante LCP? Ahora que sabemos cuál es la pintura de contenido más grande y lo que hace, podemos olvidar por qué esta medida es tan crucial para el SEO. La velocidad del sitio es ampliamente reconocida en la industria de SEO como un criterio de clasificación, pero hay una variedad de razones para ello y, como resultado, una variedad de razones por las cuales LCP influyará en el SEO. Analizaremos las razones por las cuales un LCP decente es vital para el SEO y para aumentar la visibilidad de sus sitios web para el público objetivo en las secciones a continuación.
Esta estadística fue producida y recomendada por Google.
El hecho de que Google recomienda el uso de este indicador ya demuestra su importancia. El LCP será el factor predeterminado para medir una auditoría de rendimiento web desde mayo de este año.
La velocidad con la que se carga su sitio tiene un impacto en su clasificación.
Tanto en dispositivos móviles como en computadoras de escritorio, Google prefiere páginas de carga rápida. La posición de las páginas en las serpientes se verá afectada una vez que Google comience a usar activamente LCP.
La pintura más controvertida tiene un impacto en la experiencia del usuario. La experiencia del usuario está influenciada por la pintura de contenido más alta. Cuanto más débil sea la experiencia del usuario, mayor será la tasa de rechazo y más bajas son las posiciones de búsqueda. La tasa de rechazo puede disminuir de una variedad de causas, así que lea el blog sobre cómo reducir la tasa de rechazo para obtener más información.
¿Cómo informó el informe de pintura de contenido más alto (LCP)? LCP solo se puede definir como los elementos que se representan y permanecen visibles para el usuario. La representación no se aplica a los elementos que aún no se han cargado. Como resultado, estos elementos no se tienen en cuenta al determinar la pintura más grande con el máximo contenido. Cuando los elementos inferiores en una página están en la ventana del usuario, pueden convertirse en LCP. Incluso si se elimina un elemento LCP de la ventana de vista, aún puede ser el contenido más contenido. Hasta que se produzca otro elemento más grande en la página, permanecerá LCP. Cuando un usuario interactúa con una página, existe una probabilidad significativa de que los elementos LCP cambien.
¿Qué tipos de contenido califican para LCP? Esta medida no se desencadena por ningún contenido del producto. Al momento de escribir, los siguientes elementos están disponibles:
img> elementos
Etiquetas Elementos> en
Una imagen de A sello como póster (no todo el archivo de video)
Usando el método CSS url (), puede establecer una imagen de fondo.
Los nodos de texto (que generalmente son el contenido del texto principal) y otros componentes de texto de nivel de línea se encuentran en elementos en el nivel de bloque.
¿Cómo medir la pintura más grande llena de contenido? PageSpeed ​​Insights de Google Utlaspeed Instalar Google de Google es el enfoque más simple para determinar la pintura más grande con el máximo contenido. Generará una evaluación de laboratorio de su sitio web y devolverá los datos auténticos de los usuarios que Google ya ha recopilado. Estos hallazgos se dividen en dos categorías: datos de tierras y datos de laboratorio.
El artículo continúa a continuación
Debido a que la prueba de laboratorio de Google utiliza una conexión de red bastante lenta, sus valores generalmente serán más lentos en el laboratorio que para los usuarios reales. Por ejemplo, el campo LCP para usted en YouTube es de 3.1 s, sin embargo, la prueba de laboratorio proporciona un valor de 7.8 s. Los datos de laboratorio mejorarán rápidamente si acelera su sitio. Sin embargo, la recopilación de datos actualizados en usuarios reales llevará algún tiempo.

Debido a que la prueba de laboratorio se realiza con Lighthouse, PageSpeed ​​Insights también ofrece un análisis de página más detallado que identifica áreas de mejora.

En la sección de diagnóstico, también puede encontrar el elemento que creó la pintura de contenido más grande. Chrome Devtools Debido a que la prueba de laboratorio se realiza con Lighthouse, PageSpeed ​​Insights también ofrece un análisis de página más detallado que identifica áreas de mejora. En la sección de diagnóstico, también puede encontrar el elemento que creó la pintura de contenido más grande.

Verifique las porciones de tiempo de un perfil de rendimiento. Para ver detalles interesantes en la parte inferior, haga clic en el anotador LCP. El informe Chrome UX (Crux) El informe Chrome UX (Crux) publica estadísticas de millones de sitios web importantes sobre experiencias de usuarios reales. Esta información se utiliza en el proyecto Google BigQuery ML, que recopila experiencias de los usuarios de acuerdo con la ubicación. Cada conjunto de datos representa un determinado país, para determinar la experiencia del usuario de acuerdo con la región, en función de valores importantes. Aunque esto puede no parecer relevante para LCP y otros indicadores de rendimiento, la base de datos incluye una API abierta que permite a los desarrolladores obtener datos para cualquier sitio web.

El artículo continúa a continuación
Esto significa que puede rastrear el LCP para su propio sitio o para sus competidores, si sabe cómo hacer un código básico.

Este informe le brinda una mirada más cercana a la experiencia del consumidor basada en datos demográficos, dispositivos y ubicación. Cómo optimizar la pintura más grande llena de contenido Mejora los tiempos de carga de recursos de carga lenta
Las imágenes, las imágenes de fondo y las diapositivas de video deben optimizarse.

La optimización de imágenes puede reducir el tiempo requerido para cargar una página web y mejorar la experiencia del usuario. Las velocidades de carga se pueden mejorar cambiando el tamaño, utilizando fotos de menos resolución y tipos más nuevos e incluso eliminando las imágenes cuando sea necesario.

No sugerimos que elimine todas las fotos sobre el pliegue para mejorar el tiempo de carga, pero vale la pena señalar cuán significativas pueden ser estas imágenes. Elija el formato de archivo correcto

Los formatos de imagen JPEG y JPG (el grupo pronunciado Jay-Peg (JAY) son los mismos. Aquí, usaremos el formato “JPG”. La extensión del archivo para archivos jpg es.jpeg o.jpg. Para imágenes con miles o millones de colores, como fotos, JPG suele ser la mejor opción. Estos suelen ser los archivos más grandes, y JPG es un maestro de compresión. Las fotos y las imágenes fotográficas deben guardarse en formato JPG. La compresión con pérdidas es lo que significa JPG. Reduce los archivos eliminando datos innecesarios. Es por eso que la compresión JPG funciona tan bien para muchos colores. Elimine la información del sistema. Aunque esto puede afectar la calidad, la compresión de JPG es casi imperceptible cuando se hace correctamente. PNG (Portable Network Graphics, Ping pronunciado o pis-en-ee) es el mejor formato de formato de línea y otras imágenes con una paleta de colores limitados. Todos estos tipos de archivos se refieren al método de compresión utilizado en archivos de imagen. Si su diseño requiere fondos transparentes, use PNG para gráficos o fotos. Un formato de archivo libre de perdedor es PNG. Funciona reorganizando los datos para usar mejor el espacio de archivos. No reduce significativamente el tamaño del archivo de imagen fotográfica. Sin embargo, es maravilloso para gráficos y gráficos con colores limitados. También mantiene la transparencia. El formato que usa hace una gran diferencia.
Existen diferentes tipos de archivos nuevos que permiten a los diseñadores web crear gráficos más pequeños y más detallados que nunca. WebP es uno de los formatos más utilizados. Los JPEG y los PNG son más grandes que las imágenes de WebP. Según Google, la conversión de una imagen en la webp puede conducir a una reducción del tamaño en un 25-34%. Para obtener esta disminución y mejorar el tiempo de carga web, este formato combina la compresión de pérdida y pérdida (un método de compresión de datos en el que el tamaño del archivo se reduce al eliminar el material selectivo del archivo). Sin embargo, WebP (junto con otros formatos de archivo como JPEG XL) no es aceptada por todos los navegadores. Para convertir los tipos de imágenes, hay posibles cientos de herramientas disponibles. Pasaremos por algunos aquí, pero una búsqueda rápida de Google aparecerá muchos más. CWEBP es una herramienta de línea de comandos: esta es una buena alternativa para proyectos simples si está familiarizado con los instrumentos de línea de comandos. Puede elegir si utilizar la compresión con pérdidas o sin pérdidas, así como cambiar los valores de píxeles y otras configuraciones. Imagemin para WebP es un programa que convierte las imágenes en formato WebP. Si usa herramientas de compilación o scripts de compilación, este complemento NPM es una mejor opción. Puede seleccionar nuevamente los tipos de compresión, claridad, configuraciones de calidad y una variedad de otros parámetros. Squoosh es una aplicación creada por Google que le permite comprimir, cambiar el tamaño y cambiar la calidad de sus imágenes.
Servir las imágenes que son receptivas Sirvan la imagen con el tamaño correcto para el dispositivo, se lo verá para aumentar su puntaje LCP. Las fotos de escritorio generalmente usan 2-4 veces más datos que los dispositivos móviles, debido al hecho de que las pantallas en el escritorio generalmente son mucho más grandes que las disponibles en dispositivos móviles. El cambio de tamaño de las fotos para diferentes tipos de dispositivos es una operación que consume tiempo, pero dará fruta a largo plazo.

Use CDN Global
CDNS se destaca en la optimización de imágenes. Amazon CloudFront es un popular CDN para sitios web de servicios web de Amazon (AWS). La plataforma de Duda utiliza AWS para servir sus fotos, lo que reduce su tamaño y acelera los tiempos de carga.
Se deben precargar recursos importantes
Algunos elementos del sitio web, como los archivos CSS y JavaScript, pueden tener prioridad durante la carga, así que piense en qué archivos deben cargarse primero y quién puede esperar. Las fuentes, elementos gráficos o videos sobre la página y CSS o JavaScript son todos elementos que deben precargarse.
Sirviendo que es flexible

Puede ser útil hacerse cargo de diferentes materiales, dependiendo del dispositivo del usuario, al cargar recursos que constituyan el contenido principal de una página. Esta técnica se conoce como “servicio adaptativo”. Cuando se trata de cargar el material en dispositivos móviles, el servicio adaptativo es útil.
Artículos de caché que sirven HTML más pequeño
Las respuestas con un servicio de trabajadores de servicio se pueden utilizar para una variedad de funciones, incluidas respuestas HTML más pequeñas. También se pueden utilizar para almacenar cualquier recurso estático proporcionado al navegador en lugar de pedir que la red a las solicitudes repetidas. Elimine JavaScript y CSS que bloquee la representación de JavaScript o CSS se consideran “bloqueo”, mientras que el navegador quiere analizar y ejecutar CSS o JavaScript antes de poder reproducir cualquier material de contenido. La reducción del tiempo en que el espectáculo está “bloqueado” se puede lograr mediante el respeto de las prácticas de alta calidad.
Minimizar el método CSS, eliminar el espacio, la sangría y la retroalimentación de los documentos CSS es una buena manera de llevarlos a lo más pequeño posible. Esto se asemeja a la compresión de la dimensión general del informe. Use MinifyCode.com: con una interfaz de uso simple y elegante, este sitio ofrece minificadores para JavaScript, CSS y HTML que reducen su código con un solo botón de clic. También viene con una herramienta de “belleza” que descompone el código de mini clase y hace que sea más fácil de leer (prácticamente lo opuesto a Mini). Pasos para reducir CSS usando minifycode.com
Copie e inserte el código fuente en el cuadro o cargue el archivo con el código fuente.
Para reducir o comprimir el código, seleccione el botón Minify CSS.
Copie el resultado del código minimizado o guarde el archivo de código minimizado.
Postpon CSS no crítico
Cualquier CSS inútil debe ser eliminado, y cualquier CSS que ya no se desee ahora para la representación preliminar se puede cargar asíncrono.
Use CSS Critic In Line
Introducción esencial de CSS ayudará al navegador a cargar las páginas más rápido por medio que le permiten cargar el número máximo de documentos vitales. Reducir JavaScript
Muchos sitios web hoy en día dependen estrechamente de JavaScript, y este código generalmente se hace referencia dentro del elemento. Esto activa el navegador para procesar/cobrar esos activos primero, en lugar de priorizar el material de contenido vital máximo. Como hemos visto, es vital dar prioridad a los materiales de contenido sobre la página. Sin embargo, descargar y difundir la cantidad mínima de JavaScript puede ser un desafío. Google recomienda minimizar y comprimir documentos de JavaScript, además de posponer JavaScript no utilizado. Seleccione un servidor web de baja respuesta, uno de los enfoques más efectivos para remediar las dificultades más graves en los elementos de pintura de contenido en su sitio es reducir los tiempos de respuesta del servidor. La causa más común por la cual los recursos no cobran rápidamente en los sitios web es su plan de alojamiento. Un tono de alojamiento no proporcionará tiempos de respuesta extremadamente rápidos para la mayoría de las tiendas en línea. Un servidor host lento hace que la existencia de un sitio web rápido y receptivo sea imposible. Además de alojar, mejorar el servidor para administrar los picos de tráfico es un enfoque inteligente para minimizar los problemas con los elementos LCP. El tiempo de reacción del servidor es vital para el SEO y para que una persona disfrute. Algunos de los enfoques para mejorar el tiempo de reacción del servidor se indexan a continuación:
Use un servidor más eficiente (RAM y CPU más grandes)

Actualizar el dispositivo de la comunidad en el servidor
Optimice el código básico para su servidor. Para responder más rápido a las solicitudes de entrada, esto nos lleva al final de nuestras instrucciones muy extensas sobre cómo optimizar los problemas de sincronización de pintura más grandes.¡La conclusión!LCP es una medida que indica la “salud” general del rendimiento de su sitio web.La falta de monitoreo de los problemas LCP y de enfoque, por otro lado, es un error significativo que afectará no solo la capacidad de usar su sitio, sino también su capacidad para atraer a los clientes primero.¡La implementación de los conceptos abordados en esta publicación aumentará los puntajes LCP, mejorará la experiencia del usuario y lo ayudará a alcanzar sus objetivos de conversión!