La velocidad de la página es más importante que nunca en estos días y un factor clave que debe tenerse en cuenta en todo sitio web. No sólo tiene un impacto significativo en la experiencia del usuario, sino que también puede tener un efecto masivo en la optimización de motores de búsqueda (SEO).
De hecho, en mayo de 2021, Google introdujo Core Web Vitals que califican la experiencia del usuario durante cada carga de página. Google llama a esta nueva señal "Señal de experiencia de página" y tendrá un efecto extenso en todos los sitios web. Los propietarios de sitios web harán bien en familiarizarse a fondo con estos Core Web Vitals para poder minimizar cualquier cambio de clasificación potencialmente negativo.
La pintura de contenido más grande (LCP) es una de las tres métricas críticas que componen Core Web Vitals de Google. El propósito de este parámetro es garantizar que los usuarios que visitan sitios estén satisfechos con su experiencia. Eso incluye el contenido pero también la presentación y el rendimiento. Si el sitio tarda demasiado en entregar el contenido que ofrece, hay mayores posibilidades de que el visitante abandone rápidamente la página. Para Google, esto significa que la experiencia no fue óptima.
Core Web Vitals también incluye cambio de diseño acumulativo (CLS) y retraso de la primera entrada (FID), que abordaremos brevemente, pero como hay mucho que cubrir, nos centraremos específicamente en la pintura de contenido más grande y en cómo la representación inicial del Los elementos de un sitio web afectan la experiencia general de la página web.
¡Vamos a sumergirnos!
¿Qué es la pintura con contenido más grande? Una explicación sencilla
En pocas palabras, la pintura con contenido más grande mide el tiempo que le toma a un sitio web mostrar al usuario el elemento más grande en la pantalla, completo y listo para la interacción. El análisis de esta métrica finaliza tan pronto como hay interacción del usuario, como hacer clic, desplazarse o ingresar información del usuario, como ingresar texto en un cuadro de texto.
Google afirma que esta es una medida más simple que DOM o DOMContentLoad que se usó en el pasado y que LCP analiza la velocidad de carga percibida de recursos críticos como los elementos más grandes a nivel de bloque, como una imagen visible o un bloque de texto.
Lo que eso significa es que si el elemento de pintura con contenido más grande de su sitio web, como una imagen de fondo o un video, tarda mucho en cargarse en el proceso de renderizado, su puntuación LCP probablemente se verá afectada negativamente.
Google ha declarado que esta métrica solo considera específicamente el contenido de la mitad superior de la página, es decir, todo lo que aparece en la página inmediatamente después de cargarse sin ningún desplazamiento.
¿Cuál es la puntuación ideal de pintura con contenido más grande?
Dado que hemos establecido que LCP indica una mejor experiencia de usuario y puede ser un factor importante de clasificación SEO, es de gran importancia asegurarse de que su sitio web tenga una "buena" puntuación de pintura de contenido más grande.
Si bien a menudo se cita que 1 segundo es la cantidad de tiempo que un usuario esperará antes de comenzar a perder el foco en una tarea, esto es solo una aproximación que han hecho los investigadores. A los efectos de las clasificaciones SEO y una experiencia de usuario positiva en general desde la perspectiva de Google, una puntuación LCP positiva de 2,5 segundos o menos se considera "buena".
Si la puntuación de su sitio web se sitúa en el rango de 2,5 a 4 segundos, se considera "que necesita mejora", mientras que cualquier puntuación superior a 4 segundos se considera "mala".
Es importante tener en cuenta que la pintura con contenido más grande representa aproximadamente el 25% de su puntuación de rendimiento de Google (también conocida como puntuación de "velocidad de página" en dispositivos móviles y de escritorio). Para obtener un informe positivo de Core Web Vitals y aprobar la evaluación, debe tener una puntuación LCP "buena" y al mismo tiempo una buena puntuación en CLS y FID, por lo que deberá considerar seriamente estas métricas.
¿Contra qué umbrales se debe medir la pintura con mayor contenido (LCP)?
Para asegurarse de alcanzar su objetivo de LCP para la mayoría de sus usuarios, querrá comparar el percentil 75 de todas las cargas de páginas de ese sitio web. Esto debe segmentarse en dispositivos móviles y de escritorio para asegurarse de que sus elementos se procesen a la misma velocidad en todos los dispositivos.
En términos simples, medir el percentil 75 significa que si al menos el 75% de las páginas vistas de un sitio web alcanzan el umbral "bueno", se considera que el sitio tiene un rendimiento "bueno" para esa métrica.
Por otro lado, si al menos el 25% de las visitas a la página alcanzan el umbral "deficiente", se determina que el sitio tiene un rendimiento "deficiente". Por ejemplo, un LCP del percentil 75 de 2 segundos se considera "bueno", mientras que un LCP del percentil 75 de 5 segundos se considera "malo".
Hay dos razones por las que se determinó que el percentil 75 era el umbral ideal. En primer lugar, utilizar ese percentil debería garantizar que la mayoría de las visitas a un sitio o página experimenten el nivel de rendimiento objetivo. En segundo lugar, en el percentil elegido, el valor no debería verse seriamente afectado por valores atípicos.
Si tiene una gran cantidad de recursos de bloqueo de renderizado, como javascript o CSS, su puntuación probablemente estará por debajo del umbral ideal y necesitará tomarse un tiempo para mejorar su LCP para que su sitio web cumpla con las pautas de Google.
¿Por qué mi puntuación de pintura con contenido más grande es tan alta?
desempaquetarLas puntuaciones de pintura de contenido más altas miden recursos específicos representados en la mitad superior de la página que son relevantes para la experiencia del usuario, incluidos:
- Imágenes de fondo con CSS.
- Elementos de texto, como párrafos, títulos y listas.
- Imágenes.
- Etiquetas de imagen.
- Miniaturas de vídeo.
Si se detectan tiempos de carga de recursos lentos en cualquiera de estos elementos, Google determina que esto conducirá a una mala experiencia del usuario y la métrica LCP se verá afectada negativamente.
Estos son los elementos clave considerados en este momento, pero se mantuvieron intencionalmente simples cuando se lanzaron los elementos básicos de Web Vitals y se podrían agregar elementos adicionales a medida que se realicen más investigaciones.
¿Qué herramientas se pueden utilizar para medir el LCP?
Existe una variedad de herramientas de campo y de laboratorio que puede utilizar para medir el LCP de su sitio web.
Las herramientas de campo brindan información sobre cómo los usuarios reales experimentan su página o sitio, y este tipo de medición a menudo se denomina Monitoreo de usuarios reales (RUM). Los datos de campo suelen tener un conjunto de métricas más limitado que los datos de laboratorio.
Las herramientas de laboratorio recopilan datos en un entorno controlado y se centran más en ofrecer resultados reproducibles para la depuración con información sobre cómo es probable que un usuario potencial experimente su sitio web. La desventaja es que es posible que no capturen los cuellos de botella que ocurren en las experiencias de los usuarios del mundo real.
Existen múltiples herramientas de laboratorio y de campo y cada herramienta ofrece información claramente valiosa que se puede utilizar para optimizar su experiencia de usuario.
Información de PageSpeed
PageSpeed Insights (PSI) proporciona informes detallados sobre el rendimiento móvil y de escritorio de una página, y también proporciona sugerencias sencillas sobre cómo se podría optimizar esa página. PSI incluye datos de laboratorio y de campo en sus informes, y también tiene en cuenta las tres métricas acumulativas de Core Web Vitals, incluido LCP.
Justo en la parte superior del informe, PSI muestra una puntuación que resume el rendimiento general de la página. Cualquier puntuación de 90 o más se considera buena, mientras que cualquier puntuación entre 50 y 90 es una puntuación que podría mejorar. Cualquier valor por debajo de 50 se considera un mal resultado.
Esa puntuación finalmente se determina ejecutando también Lighthouse para recopilar y analizar datos de laboratorio sobre la página. Si bien PageSpeed utiliza información generada por Lighthouse y luego agrega más datos del mundo real, Lighthouse le proporciona más de una puntuación. Ofrece más funciones más allá de simplemente medir el rendimiento de su sitio web.
Faro
Suzuki KenichiLighthouse es una herramienta de laboratorio automatizada de código abierto que se utiliza para mejorar la calidad de las páginas web y, a diferencia de los conocimientos de PageSpeed, no solo mide la métrica de rendimiento. También cuenta con auditorías de accesibilidad, SEO, aplicaciones web progresivas y más.
Mientras que Google PageSpeed utiliza una combinación de datos de laboratorio y del mundo real, Lighthouse utiliza exclusivamente datos de laboratorio (en condiciones consistentes) para crear su informe.
Dado que Lighthouse ahora está incorporado en PageSpeed Insights como su motor de análisis integrado, puede acceder a los datos de Lighthouse simplemente ejecutando un informe de PageSpeed. Hay ocasiones en las que es posible que desee utilizar Lighthouse en lugar de PageSpeed Insights, como cuando desea ejecutar auditorías mediante programación, evaluar otros aspectos de sus sitios web además de los tiempos de carga o si desea incorporar la API de Lighthouse en sus propios sistemas.
Informe de experiencia del usuario de Chrome
El informe de experiencia del usuario de Chrome es una herramienta de campo, ya que proporciona métricas de experiencia del usuario del mundo real basadas en la forma en que los usuarios de Chrome experimentan destinos populares en Internet. Agrega datos de usuarios que no han configurado una frase de contraseña de sincronización, que han optado por sincronizar su historial de navegación y que tienen habilitados los informes de estadísticas de uso.
LCP es una de las métricas medidas en el informe de experiencia del usuario de Chrome, y los datos finales están disponibles en. Se puede acceder a los datos resultantes a través del proyecto público Google BigQuery, PageSpeed Insights y CrUX Dashboard en Data Studio.
Informe Core Web Vitals (Search Console)
El informe principal de Web Vitals está diseñado para ayudarle a solucionar las malas experiencias de los usuarios en su sitio mediante el análisis de datos de campo. Muestra el rendimiento de sus páginas en función de datos del mundo real.
El informe se basa en tres métricas: pintura con contenido más grande (LCP), cambio de diseño acumulativo (CLS) y retraso en la primera entrada (FID). Si la página web que se analiza no tiene una cantidad mínima de datos para reportar para cualquiera de estas métricas, esa métrica se excluirá del informe.
Una vez que una página tiene una cantidad base de datos para estas tres métricas, el estado de la página será el estado de su métrica de peor rendimiento.
Herramientas de desarrollo de Chrome
Integrado directamente en el navegador Chrome, Chrome DevTools es un conjunto de herramientas para desarrolladores web que se pueden utilizar para inspeccionar la actividad de red de una página y observar más de cerca el HTML (DOM) renderizado, el CSS crítico, el CSS no crítico y el CSS crítico. ruta CSS, CSS no utilizado, JavaScript no utilizado, paquetes de JavaScript, si hay algún JavaScript bloqueado y más.
Chrome DevTools se puede utilizar para solucionar problemas de publicación de anuncios y encontrar el LCP en cualquier página determinada. Simplemente ejecute una grabación de interpretación y encontrará el LCP en la sección Timings. Al hacer clic en el marcador LCP se resaltará el elemento en la página.
En general, el registro del rendimiento mostrará cómo se desempeña su página cuando se está ejecutando en lugar de cargarla. Mostrará sus cuadros por segundo (FPS) y cualquier cuello de botella.
Prueba de página web
FlickrWebPageTest es una herramienta de análisis de rendimiento web de uso gratuito que no está bajo el paraguas de Google. Utiliza navegadores reales para acceder a páginas web y recopilar métricas de tiempo para poder calificar el rendimiento general de un sitio web.
La característica distintiva de WebPageTest es una métrica llamada SpeedIndex que se centra específicamente en la rapidez con la que se muestra el contenido en la mitad superior de la página.
Extensión de Chrome Web Vitals
Quizás una de las herramientas más simples disponibles para rastrear LCP y las otras dos métricas de Web Vitals (CLS y FID0), la herramienta Web Vitals Chrome es una extensión sencilla que se instala en su navegador Chrome.
En cada página web que cargue, la herramienta agregará automáticamente una capa que le muestra las tres métricas.
Cinco formas comprobadas de acelerar la pintura con contenido más grande (LCP)
El seguimiento de su puntaje de pintura de contenido más alto es una parte crucial de la rutina de mantenimiento de su sitio web, pero solo realizando mejoras verá mejores resultados. Si su puntuación LCP no es óptima y necesita mejorar, hay varias cosas sencillas y más elaboradas que puede hacer para elevar su puntuación y crear una mejor experiencia de usuario.
Optimizar tamaños de imagen
Las imágenes pueden mejorar significativamente la experiencia del usuario en su sitio web, pero también pueden causar problemas importantes de velocidad si no están optimizadas. Utilice siempre imágenes responsivas con el tamaño adecuado. Su hosting le sugerirá dimensiones específicas, ya sea para la versión de escritorio o móvil. La optimización de las imágenes en su sitio web ayuda a evitar la sobrecarga y puede mejorar drásticamente las puntuaciones de pintura con mayor contenido.
Evite el uso de JavaScript para cargar imágenes
La llamada "carga diferida" de JavaScript es útil para imágenes en la mitad inferior de la página, pero no se recomienda para imágenes en la mitad superior de la página. La carga diferida significa que en lugar de cargar toda la página web y mostrarla al usuario de una sola vez en masa, solo se carga inmediatamente la sección requerida y el contenido restante se retrasa hasta que el usuario lo necesita.
Dado que desea que las imágenes de la mitad superior de la página se carguen lo más rápido posible, no querrá usar JavaScript para cargar esas imágenes, ya que puede ralentizar el proceso. Esto ayudará a evitar retrasos y a mantener su calificación LCP dentro del rango recomendado.
Utilice una red de entrega de contenido de imágenes (CDN)
Un servicio de red de entrega de contenido (CDN) puede hacer que las imágenes se carguen más rápido almacenándolas en servidores ubicados estratégicamente en todo el mundo. Al entregar imágenes optimizadas desde una fuente más cercana al usuario que las solicita, una página web se puede descargar hasta un 50% más rápido, lo que puede conducir a una mejor puntuación de pintura de contenido.
Elija un buen servicio de hosting
Una de las cosas más fáciles que se pueden hacer para afectar el tiempo de carga de una página web es utilizar un servicio de alojamiento de alta calidad. Encuentre un proveedor de calidad con buena reputación en el mercado y, lo que es más importante, uno que ofrezca la infraestructura necesaria para satisfacer el tamaño y las necesidades de su sitio.
En caso de duda, utilice el patrón PRPL
Google recomienda utilizar el patrón PRPL que se utiliza para hacer que cada página por separado se cargue y se vuelva interactiva más rápido. Lo que representa:
- Insertar (o precargar) primero los recursos más importantes. Para ello, se puede utilizar una solicitud de búsqueda declarativa o, en otras palabras, un código que declare exactamente lo que nos interesa en el navegador.
- Representar la ruta inicial lo antes posible. Una forma de hacerlo es representar el HTML inicial en la página desde el servidor, incorporando en línea cualquier código CSS y JS crítico y eliminando viajes de ida y vuelta adicionales al servidor mediante una función asincrónica para diferir el CSS no crítico.
- Almacene previamente en caché los activos restantes y permita que los usuarios recuperen los activos directamente desde la memoria caché en lugar de hacerlo desde el servidor en visitas posteriores.
- Carga de forma diferida otras rutas y activos no críticos, como imágenes, como se explicó anteriormente.
El patrón PRPL puede tener un impacto beneficioso en los tiempos de respuesta del servidor y vale la pena implementarlo.
¿Cómo mejorar la pintura con contenido más grande en WordPress?
desempaquetarSolucionar problemas de LCP en WordPress implica algunos procesos diferentes a los de los sitios web en otras plataformas. Si bien hay algunos cruces, la mayoría de estos consejos para mejorar la pintura de contenido más grande son directamente relevantes para WordPress.
Cómo optimizar su elemento de pintura con mayor contenido, sin importar cuál sea
Un objeto de pintura con contenido más grande puede variar de una página a otra y podría incluir elementos de imagen, video, animación o texto.
Si se trata de una imagen, querrá asegurarse de que esté comprimida y precargada, con las dimensiones adecuadas, entregada desde una CDN y excluida de cualquier protocolo de carga diferida. Idealmente, también querrás convertir imágenes a WebP, un formato de imagen moderno que proporciona una compresión superior con y sin pérdida para imágenes web. Se pueden utilizar los mismos pasos para una imagen de fondo.
Si su elemento de pintura de contenido más importante es un video o una animación, lo mejor es evitar los videos autohospedados y subirlos a YouTube. Asegúrese de que esté comprimido antes de cargarlo y, si es posible, evite usar un video o animación en la sección principal de su página web, ya que es muy probable que afecte negativamente a su LCP.
Si un elemento HTML a nivel de bloque es su mayor contenido, es poco probable que afecte negativamente su LCP tanto como una imagen, un video o una animación, ya que tienden a generar un tiempo de respuesta más rápido del servidor.
Elimine los recursos que bloquean el procesamiento
La eliminación de los recursos que bloquean el procesamiento puede reducir significativamente los problemas de LCP. Los complementos como Async JavaScript o Autoptimize pueden solucionar la mayoría de los problemas, ya que se crearon específicamente para cargar archivos de forma asincrónica, minimizar, diferir e integrar CSS y JavaScript en línea. Elimine cualquier CSS o JavaScript que no esté en uso, ya que simplemente atascará las cosas innecesariamente.
También puede intentar alojar sus fuentes localmente y precargarlas y, finalmente, evitar complementos pesados, como creadores de páginas, si es posible, ya que pueden agregar JavaScript excesivo y CSS no utilizado a su sitio web, lo que también puede ralentizar los tiempos de respuesta del servidor.
Aproveche un complemento de caché
Sin almacenamiento en caché, los visitantes deben descargar una página web cada vez que visitan un sitio web. Afortunadamente, la mayoría de los navegadores modernos almacenan en caché automáticamente para que los usuarios recurrentes puedan acceder al contenido de su sitio web más rápido.
El uso de un complemento de caché de WordPress le permite aprovechar el almacenamiento en caché del lado del servidor, lo que puede tener un gran impacto en el mayor contenido de su sitio de WordPress. En lugar de guardar temporalmente el contenido en el lado del cliente con la memoria caché del navegador, se almacena en el servidor de un sitio web. El almacenamiento en caché del servidor significa que el almacenamiento en caché se maneja y administra completamente en el servidor sin involucrar en absoluto al usuario final ni al navegador.
También existen complementos de caché basados en archivos que puede usar, pero el almacenamiento en caché del lado del servidor suele ser más rápido y se puede habilitar con complementos como SG Optimizer o LiteSpeed Cache. Los complementos como WP Rocket le permiten aprovechar el almacenamiento en caché de páginas, el almacenamiento en caché de objetos y mucho más.
Si actualmente no está utilizando un complemento de caché y experimenta tiempos de respuesta lentos del servidor en su sitio web, debería ver una mejora importante en los tiempos de carga de recursos al implementar uno.
Conclusión
Si bien LCP es sólo un factor entre muchos en lo que respecta a la velocidad de su sitio web y la experiencia general del usuario, no es algo que deba tomarse a la ligera. Como hemos aprendido, el tiempo de carga de una página web no sólo puede tener un gran impacto en la experiencia del usuario, sino que también puede ser un enorme factor de clasificación SEO, que es la cantidad de sitios web que obtienen tráfico de usuarios en primer lugar.
Utilice los consejos que hemos analizado para realizar un seguimiento, optimizar y mantener su LCP y recuerde que requerirá un esfuerzo continuo para estar al tanto y ofrecer la mejor experiencia posible a sus usuarios.
Si genera más de $2000 en ingresos publicitarios mensuales, contáctenos hoy para obtener más información sobre cómo Publift puede ayudarlo a aumentar sus ingresos publicitarios y optimizar mejor el espacio publicitario disponible en su sitio web o aplicación.