\u00bfPor qu\u00e9 Core Web Vitals?<\/h2>\n
El contenido sigue siendo crucial. Pero si se comparan dos sitios con texto y popularidad similares, el que ofrezca la mejor experiencia web tendr\u00e1 mayor prioridad en los resultados de b\u00fasqueda de Google.<\/p>\n
Adem\u00e1s de una mejora en el rango de la p\u00e1gina, los sitios de alto rendimiento son elegibles para su inclusi\u00f3n en el carrusel de b\u00fasqueda m\u00f3vil. Anteriormente esto estaba reservado para las p\u00e1ginas m\u00f3viles aceleradas (AMP)<\/a>, que requer\u00edan que se portara el contenido a un sitio separado alojado en Google. AMP ha suscitado cr\u00edticas, sobre todo porque las p\u00e1ginas no siempre son m\u00e1s r\u00e1pidas que un sitio est\u00e1tico o de WordPress bien optimizado. Sin embargo, eso ya no es un requisito<\/a>.<\/p>\n Independientemente de lo que elijas, cuanto m\u00e1s r\u00e1pido y receptivo sea tu sitio, m\u00e1s posibilidades tendr\u00e1s de aparecer en los resultados de b\u00fasqueda de Google.<\/p>\n Si tenemos en cuenta que la p\u00e1gina media ocupa unos 2 MB, realiza m\u00e1s de 60 peticiones HTTP y tarda 16 segundos en renderizarse por completo en un dispositivo m\u00f3vil, veremos que hay margen para mejorar tu sitio. Te mostraremos las mejores formas de conseguir esas mejoras.<\/p>\n Hay cuatro factores clave de clasificaci\u00f3n que hay que examinar antes de empezar a evaluar el rendimiento:<\/p>\n Una vez que cumplas estos requisitos, se evaluar\u00e1 el rendimiento de tu sitio web.<\/p>\n\n Hacer que tu sitio web se cargue r\u00e1pidamente<\/a>, se renderice con rapidez y que sea receptivo antes es vital. Pero, \u00bfse siente r\u00e1pido para los usuarios?<\/p>\n Las aplicaciones de medici\u00f3n del rendimiento<\/a>, como el navegador DevTools, informan de mediciones t\u00e9cnicas como:<\/p>\n Pueden utilizarse para determinar cuellos de botella espec\u00edficos, como la carga del servidor, la cach\u00e9 del CMS<\/a>, la cach\u00e9 del navegador, la velocidad de descarga y la eficiencia de JavaScript<\/a>. Pero no pueden determinar si una p\u00e1gina proporciona una buena o mala experiencia al usuario. Por ejemplo:<\/p>\n Core Web Vitals es el prop\u00f3sito de Google para resolver estos dilemas.<\/p>\n Las Core Web Vitals (CWV) de Google son tres m\u00e9tricas de rendimiento que eval\u00faan la experiencia del usuario en el mundo real:<\/p>\n Esta nueva actualizaci\u00f3n del algoritmo de Google<\/a> ha comenzado a desplegarse globalmente a finales de agosto de 2021. Las m\u00e9tricas de Core Web Vitals afectan principalmente a los resultados de las b\u00fasquedas en m\u00f3viles, pero los equivalentes para ordenadores de sobremesa seguir\u00e1n si el experimento tiene \u00e9xito.<\/p>\n Las puntuaciones de LCP, FID y CLS de una p\u00e1gina se basan en los \u00faltimos 28 d\u00edas de m\u00e9tricas de usuarios reales recogidas de forma an\u00f3nima a trav\u00e9s del navegador Chrome. Estas mediciones pueden variar debido al dispositivo del usuario, la conexi\u00f3n y otras actividades concurrentes, por lo que se calcula el percentil 75 en lugar de una media.<\/p>\n En otras palabras, las m\u00e9tricas de todos los usuarios se ordenan de mejor a peor, y se toma la cifra en el punto de las tres cuartas partes. Por tanto, tres de cada cuatro visitantes del sitio web experimentar\u00e1n ese nivel de rendimiento o uno mejor.<\/p>\n Cualquier p\u00e1gina que obtenga una buena puntuaci\u00f3n (verde) en las tres m\u00e9tricas de Core Web Vitals recibir\u00e1 una mejor clasificaci\u00f3n en los resultados de b\u00fasqueda y se incluir\u00e1 en el carrusel de \u00abTop Stories\u00bb de la aplicaci\u00f3n Google News.<\/p>\n En las siguientes secciones, describiremos el algoritmo utilizado para calcular una m\u00e9trica, las herramientas que puede utilizar para identificar la puntuaci\u00f3n de una p\u00e1gina, las causas t\u00edpicas de las puntuaciones bajas y los pasos que puede dar para resolver los problemas de rendimiento.<\/p>\n Largest Contentful Paint mide el rendimiento de la carga<\/a>. En esencia, \u00bfcon qu\u00e9 rapidez se renderiza el contenido utilizable en la p\u00e1gina?<\/p>\n LCP analiza el tiempo que tarda la imagen o el bloque de texto m\u00e1s grande en ser visible dentro de la ventana gr\u00e1fica del navegador (por encima del pliegue). En la mayor\u00eda de los casos, el elemento m\u00e1s prominente ser\u00e1 una imagen principal, un banner, un encabezado o un bloque de texto grande.<\/p>\n Cualquiera de los siguientes elementos es elegible para el an\u00e1lisis de la pintura de mayor contenido:<\/p>\n Las p\u00e1ginas en las que la Largest Contentful Paint se completa en los primeros 2,5 segundos de la carga de la p\u00e1gina se consideran buenas (verde). Las p\u00e1ginas que superan los 4,0 segundos se consideran malas (rojo):<\/p>\n LCP es la m\u00e9trica de Core Web Vital m\u00e1s f\u00e1cil de comprender, pero puede que no sea obvio qu\u00e9 elemento se elegir\u00e1 para el an\u00e1lisis.<\/p>\n El panel DevTools Lighthouse <\/strong>se proporciona en los navegadores basados en Chromium como Chrome, Edge, Brave<\/a>, Opera y Vivaldi. Abre DevTools desde el men\u00fa del navegador -generalmente en M\u00e1s herramientas <\/strong>> Herramientas de desarrollo <\/strong>o los atajos de teclado Ctrl | Cmd + Shift + i <\/strong>o F12<\/strong>– y luego navega hasta la pesta\u00f1a Lighthouse <\/strong>(las ediciones m\u00e1s antiguas pueden nombrarla Auditor\u00eda<\/strong>).<\/p>\n Genera un informe de Rendimiento m\u00f3vil y examina la secci\u00f3n de Rendimiento <\/strong>resultante. El mayor tiempo de Largest Contentful Paint se muestra con una secci\u00f3n ampliable, que identifica el elemento elegido:<\/p>\n Puedes generar informaci\u00f3n id\u00e9ntica en las herramientas online PageSpeed Insights<\/a> y web.dev Measure<\/a> si no tienes acceso a un navegador basado en Chromium:<\/p>\n El panel de DevTools Performance <\/strong>tambi\u00e9n muestra un indicador de LCP. Para empezar, haz clic en el icono circular de Registro<\/strong>, recarga tu p\u00e1gina y, a continuaci\u00f3n, haz clic en el bot\u00f3n Detener <\/strong>para ver el informe. Haz clic en el icono LCP de la secci\u00f3n Tiempos <\/strong>para identificar el elemento y ver un resumen de las estad\u00edsticas.<\/p>\n La extensi\u00f3n Web Vitals<\/a> est\u00e1 disponible para Google Chrome, pero puede instalarse en la mayor\u00eda de los navegadores basados en Chromium. Calcula las m\u00e9tricas de Core Web Vitals para cada sitio que visites, y su icono se vuelve verde, naranja o rojo en funci\u00f3n del resultado. Tambi\u00e9n puedes hacer clic en el icono de la extensi\u00f3n para ver m\u00e1s detalles de LCP:<\/p>\n Search Console de Google<\/a> ofrece ahora una secci\u00f3n de Core Web Vitals<\/a> si tu sitio se a\u00f1ade como propiedad<\/a>. El informe ilustra c\u00f3mo han cambiado las m\u00e9tricas de CWV a lo largo del tiempo. Ten en cuenta que no identifica las m\u00e9tricas espec\u00edficas de LCP, y que s\u00f3lo est\u00e1n disponibles los sitios con un tr\u00e1fico razonablemente alto:<\/p>\n El informe sobre la experiencia de los usuarios de Chrome<\/a> permite consultar las estad\u00edsticas de uso real, incluida la LCP en diferentes pa\u00edses, conexiones y dispositivos, para una URL espec\u00edfica. Es un proyecto p\u00fablico en Google BigQuery, por lo que debes registrarte en una cuenta de Google Cloud Platform<\/a> y proporcionar los datos de facturaci\u00f3n. De nuevo, el informe solo ser\u00e1 \u00fatil cuando una URL tenga un nivel de tr\u00e1fico razonablemente alto.<\/p>\n Por \u00faltimo, la biblioteca JavaScript de web-vitals<\/a> es un peque\u00f1o script de 1 kB que puede calcular LCP y otras m\u00e9tricas de Core Web Vital para usuarios reales en tu sitio en vivo. Como se puede descargar desde un CDN, puedes a\u00f1adir el siguiente script a tu HTML El script anterior env\u00eda el objeto a la consola, aunque es m\u00e1s pr\u00e1ctico enviar los datos a un servidor o a Google Analytics<\/a> para su posterior an\u00e1lisis.<\/p>\n Las puntuaciones bajas de LCP suelen estar causadas por p\u00e1ginas de carga lenta que impiden que el bloque m\u00e1s grande aparezca r\u00e1pidamente:<\/p>\n Una auditor\u00eda exhaustiva puede identificar los problemas de carga, pero generalmente se trata de reducir la cantidad de datos enviados al navegador<\/a>. Los siguientes consejos ayudar\u00e1n a conseguir una puntuaci\u00f3n LCP m\u00e1s saludable:<\/p>\n El First Input Delay mide la capacidad de respuesta de tu p\u00e1gina. En esencia, \u00bfcon qu\u00e9 rapidez responde a las acciones del usuario, como hacer clic, tocar o desplazarse?<\/p>\n La m\u00e9trica FID se calcula como el tiempo que transcurre entre la interacci\u00f3n del usuario y el procesamiento de su solicitud por parte del navegador. No mide el tiempo de ejecuci\u00f3n de la funci\u00f3n manejadora, que normalmente procesar\u00eda la entrada y actualizar\u00eda el DOM.<\/p>\n Las p\u00e1ginas con un tiempo FID de 100 milisegundos o menos se consideran buenas (verde). Las p\u00e1ginas que superan los 300 milisegundos se consideran malas (rojo):<\/p>\n El First Input Delay es imposible de simular porque s\u00f3lo puede medirse cuando la p\u00e1gina se sirve a un usuario real que interact\u00faa con ella. Por lo tanto, el resultado depende de la velocidad y las capacidades del procesador de cada dispositivo.<\/p>\n El FID no se calcula en el panel DevTools Lighthouse ni en PageSpeed Insights<\/a>. Sin embargo, pueden determinar el Tiempo Total de Bloqueo (TBT). Esta es una aproximaci\u00f3n razonable para el First Input Delay. Mide la diferencia de tiempo entre:<\/p>\n La extensi\u00f3n Web Vitals<\/a> para Google Chrome tambi\u00e9n puede mostrar una m\u00e9trica FID despu\u00e9s de interactuar con la p\u00e1gina desplaz\u00e1ndose o haciendo clic. Haz clic en el icono de la extensi\u00f3n para ver m\u00e1s informaci\u00f3n:<\/p>\n Al igual que el LCP<\/a>, el informe de experiencia de usuario de Chrome<\/a> permite consultar las estad\u00edsticas reales de FID registradas en diferentes pa\u00edses, conexiones y dispositivos para una URL espec\u00edfica.<\/p>\n La biblioteca JavaScript de web-vitals<\/a> tambi\u00e9n puede calcular las m\u00e9tricas FID para usuarios reales en tu sitio en vivo. Puede a\u00f1adir la siguiente secuencia de comandos a su HTML Las puntuaciones pobres de FID y TBT suelen estar causadas por c\u00f3digo del lado del cliente que acapara el procesador, como:<\/p>\n Por defecto, los navegadores se ejecutan en un \u00fanico hilo, que s\u00f3lo puede procesar una tarea a la vez. Si una funci\u00f3n de JavaScript tarda un segundo en ejecutarse, todos los dem\u00e1s procesos de renderizaci\u00f3n se bloquean durante ese segundo. La p\u00e1gina no puede reaccionar a la entrada del usuario, actualizar el DOM, mostrar animaciones, etc. Incluso las animaciones GIF pueden bloquearse en los navegadores m\u00e1s antiguos.<\/p>\n Una auditor\u00eda de JavaScript del lado del cliente puede identificar problemas, pero generalmente se trata de eliminar el c\u00f3digo redundante y asegurar que las tareas se ejecuten r\u00e1pidamente.<\/p>\n Los siguientes consejos ayudar\u00e1n a conseguir una puntuaci\u00f3n FID m\u00e1s saludable:<\/p>\n CLS mide la estabilidad visual de la p\u00e1gina. En esencia, \u00bfel contenido de la p\u00e1gina se mueve o salta inesperadamente, especialmente durante la carga inicial?<\/p>\n CLS calcula una puntuaci\u00f3n cuando los elementos se mueven sin previo aviso o sin la interacci\u00f3n del usuario. Probablemente lo has experimentado al leer un art\u00edculo en un dispositivo m\u00f3vil: el texto salta repentinamente fuera de la pantalla y pierde su lugar. En el peor de los casos, podr\u00eda hacer clic en un enlace incorrecto.<\/p>\n Los problemas de CLS son m\u00e1s evidentes cuando se carga una imagen o un anuncio de gran tama\u00f1o por encima de la posici\u00f3n de desplazamiento actual y un espacio de altura cero crece instant\u00e1neamente en varios cientos de p\u00edxeles.<\/p>\n Las puntuaciones de Cumulative Layout Shift se calculan multiplicando las siguientes m\u00e9tricas:<\/p>\n \u00a0<\/p>\n Google ha realizado cambios en la m\u00e9trica CLS para adaptarse a las siguientes situaciones:<\/p>\n Las p\u00e1ginas con una puntuaci\u00f3n CLS de 0,1 o menos se consideran buenas (verde). Las p\u00e1ginas que superan el 0,25 se consideran malas (rojo):<\/p>\n Las m\u00e9tricas de CLS se calculan en el panel DevTools Lighthouse<\/strong>, PageSpeed Insights<\/a> y las herramientas web.dev Measure<\/a>:<\/p>\n La extensi\u00f3n Web Vitals<\/a> para Google Chrome tambi\u00e9n muestra la m\u00e9trica CLS:<\/p>\n Al igual que el LCP<\/a> y el FID<\/a>, el Informe de la experiencia del usuario de Chrome<\/a> te permite consultar las estad\u00edsticas reales del CLS registradas en diferentes pa\u00edses, conexiones y dispositivos para una URL espec\u00edfica.<\/p>\n La biblioteca JavaScript de web-vitals<\/a> tambi\u00e9n puede calcular las m\u00e9tricas de CLS para usuarios reales en tu sitio en vivo, al igual que lo hace con LCP y FID. La siguiente secuencia de comandos podr\u00eda a\u00f1adirse a tu HTML Las puntuaciones bajas de CLS suelen deberse a la lentitud de carga de los activos de la p\u00e1gina y a los elementos din\u00e1micos o sin tama\u00f1o del DOM:<\/p>\n Una auditor\u00eda del lado del cliente puede identificar los problemas, pero generalmente se trata de asegurar que el espacio est\u00e1 reservado para el contenido antes de que se descargue. Los consejos de optimizaci\u00f3n del servidor sugeridos para Largest Contentful Paint<\/a> tendr\u00e1n alg\u00fan beneficio, pero es posible realizar m\u00e1s mejoras:<\/p>\nFactores clave de clasificaci\u00f3n de Google<\/h2>\n
\n
\u00bfC\u00f3mo eval\u00faa Google el rendimiento de la web?<\/h2>\n
\n
\n
\u00bfQu\u00e9 son las Core Web Vitals?<\/h2>\n
\n
Largest Contentful Paint (LCP)<\/h2>\n
\n
<img><\/code>)<\/li>\n<image><\/code> incrustada en un <svg><\/code>)<\/li>\n<video><\/code>)<\/li>\nbackground-image url()<\/code>)<\/li>\n![\"Largest](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/lcp-rank.png\"){kind=icon}
<\/a>Herramientas de an\u00e1lisis de Largest Contentful Paint<\/h3>\n
![\"Informe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/devtools-lcp-lighthouse.png\")
<\/a>![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-lcp.png\")
<\/a>![\"Indicador](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/devtools-lcp-performance.png\")
<\/a>![\"Extensi\u00f3n](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-lcp.png\")
<\/a>![\"Search](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/console-lcp.png\")
<\/a><head><\/code>:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getLCP } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetLCP(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\ngetLCP()<\/code> es una funci\u00f3n as\u00edncrona a la que se le pasa una llamada de retorno que se activa cuando se ha calculado el valor de LCP (aunque puede que nunca se active si la p\u00e1gina se carga en una pesta\u00f1a de fondo). A la funci\u00f3n callback se le pasa un objeto que contiene:<\/p>\n\n
name<\/code>:<\/strong> el nombre de la m\u00e9trica (\u00abLCP\u00bb en este caso)<\/li>\nvalue<\/code>: <\/strong>el valor calculado<\/li>\nid<\/code>:<\/strong> un ID \u00fanico que representa esta m\u00e9trica para la p\u00e1gina actual<\/li>\ndelta<\/code>:<\/strong> el delta entre el valor actual y el \u00faltimo valor comunicado<\/li>\nentries<\/code>:<\/strong> una matriz de entradas utilizadas en el c\u00e1lculo del valor<\/li>\n<\/ul>\nCausas comunes de las puntuaciones de Largest Contentful Paint<\/h3>\n
\n
C\u00f3mo mejorar las puntuaciones de Largest Contentful Paint<\/h3>\n
\n
loading=\"lazy\"<\/code>. A\u00f1ade atributos de anchura y altura para asegurar que se reserva el espacio adecuado en la p\u00e1gina antes de que la imagen termine de cargarse.<\/li>\n<link><\/code> en la parte superior de la p\u00e1gina, y luego carga otras hojas de estilo de forma as\u00edncrona.<\/li>\nFirst Input Delay (FID)<\/h2>\n
![\"First](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/fid-rank.png\"){kind=icon}
<\/a>Herramientas de an\u00e1lisis del First Input Delay<\/h3>\n
\n
![\"Tiempo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-fid.png\")
<\/a>![\"Extensi\u00f3n](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-fid.png\")
<\/a><head><\/code> para dar salida a las m\u00e9tricas FID a una funci\u00f3n de devoluci\u00f3n de llamada:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getFID } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetFID(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\nCausas comunes de la mala puntuaci\u00f3n del First Input Delay<\/h3>\n
\n
C\u00f3mo mejorar las puntuaciones de la First Input Delay<\/h3>\n
\n
Cumulative Layout Shift (CLS)<\/h2>\n
\n
\n
![\"Cumulative](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/cls-rank.png\"){kind=icon}
<\/a>Herramientas de an\u00e1lisis del Cumulative Layout Shift<\/h3>\n
![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-cls.png\")
<\/a>![\"Extensi\u00f3n](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-cls.png\")
<\/a><head><\/code> para dar salida a las m\u00e9tricas CLS a una funci\u00f3n de devoluci\u00f3n de llamada:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getCLS } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetCLS(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\nCausas comunes de las bajas puntuaciones de<\/h3>\n
\n
C\u00f3mo mejorar las puntuaciones de Cumulative Layout Shift<\/h3>\n
\n
<img><\/code> y <iframe><\/code> o utiliza la nueva propiedad CSS aspect-ratio<\/a> para asegurarte de que se reserva el espacio adecuado en la p\u00e1gina antes de que se descarguen los activos.<\/li>\n<link><\/code> en la parte superior de la p\u00e1gina, y luego carga las hojas de estilo adicionales de forma as\u00edncrona.<\/li>\n