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).
In fact, in May 2021, Google introduced the Core Web Vitals which score the user experience during each page load. Google is calling this new signal the "Page Experience Signal" and it will have an extensive effect on all websites. Website owners will do well to thoroughly familiarize themselves with these Core Web Vitals so that they can minimize any potentially negative ranking shifts.
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?
Since we've established that LCP indicates a better user experience and can be a significant SEO ranking factor, it's of great importance to make sure your website has a "good" largest contentful paint score.
While it's often cited that 1 second is the amount of time a user will wait before they begin to lose focus on a task, this is just an approximation that researchers have made. For the purposes of SEO rankings and an overall positive user experience from Google's perspective, a positive LCP score of 2.5 seconds or less is considered "good."
If your website's score sits in the 2.5 to 4-second range, it's considered "in need of improvement," while anything over 4 seconds is considered "poor."
It's important to note that largest contentful paint accounts for roughly 25% of your Google Performance Score (also known as your "Page Speed" score on mobile and desktop). In order to have a positive Core Web Vitals report and pass the assessment, you need to have a "good" LCP score while also scoring well in CLS and FID, so you'll want to give these metrics some serious consideration.
¿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.
In simple terms, measuring against the 75th percentile means that if at least 75% of page views to a website meet the "good" threshold, the site is deemed as having "good" performance for that metric.
On the other hand, if at least 25% of page views meet the "poor" threshold, the site is determined to have "poor" performance. For example, a 75th percentile LCP of 2 seconds is deemed "good", while a 75th percentile LCP of 5 seconds is deemed "poor".
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.
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 is a free-to-use web performance analytics tool that doesn't fall under the Google umbrella. It uses real browsers to access web pages and gather timing metrics so that it can score a website's overall performance.
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.
¿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.
