Accediendo a la evaluación de PageSpeed ​​Insights de Google

Si es dueño de un negocio, está interesado en obtener mejores clasificaciones de búsqueda para su sitio web. Si es un desarrollador, deberá satisfacer las necesidades del cliente y crear un sitio capaz de clasificarse bien. Google considera cientos de características cuando determina el orden de los sitios web en su página de clasificación de motores de búsqueda (SERP).

La velocidad de la página se citó oficialmente como un atributo de clasificación importante a mediados de 2018. En este artículo, explicaremos las puntuaciones de rendimiento a las que los empresarios deben prestar atención: PageSpeed ​​Insights. Profundizaremos en algunos detalles técnicos que ayudarán a los desarrolladores de software a realizar mejoras en casos complicados, como los relacionados con aplicaciones de una sola página.

Por qué es importante la prueba PageSpeed ​​Insights de Acing Google

Cuando Google introdujo PageSpeed ​​Tools en 2010, la mayoría de los propietarios de sitios web se familiarizaron con él. Aquellos que no lo hayan hecho deberían abrir PageSpeed ​​Insights para revisar sus sitios.

El servicio proporciona detalles sobre el rendimiento de un sitio web tanto en navegadores de escritorio como móviles. Es fácil pasar por alto el hecho de que puede cambiar entre ellos utilizando las pestañas Móvil y Escritorio en la parte superior del análisis:

Debido a que los dispositivos móviles son compactos y tienen como objetivo preservar la vida útil de la batería, sus navegadores web tienden a mostrar un rendimiento más bajo que los dispositivos que ejecutan sistemas operativos de escritorio, por lo que se espera que la puntuación de escritorio sea más alta.

Las grandes empresas de tecnología no obtendrán puntos rojos en ninguna área, pero los sitios más pequeños que funcionan con presupuestos más ajustados sí. Los dueños de negocios también pueden ejecutar PageSpeed ​​Insights en los sitios de sus competidores y comparar los resultados con los suyos para ver si necesitan invertir para mejorar el rendimiento.

¿Qué puntaje es suficiente para aprobar la evaluación de PageSpeed?

PageSpeed ​​utiliza métricas de Core Web Vitals para proporcionar una evaluación de aprobación/rechazo.

Esta herramienta tiene tres puntuaciones:

1. PageSpeed ​​muestra de forma destacada la puntuación de rendimiento en un círculo de color en la sección Diagnosticar problemas de rendimiento. Se calcula utilizando las máquinas virtuales integradas de PageSpeed ​​con características que coinciden con el dispositivo móvil o de escritorio promedio. Tenga en cuenta que este valor es para la carga de la página y para la máquina virtual de PageSpeed, y no es considerado por el motor de búsqueda de Google.

   Esta cifra es útil cuando los desarrolladores implementan cambios en un sitio web, ya que les permite verificar el efecto de los cambios en el rendimiento. Sin embargo, el motor de búsqueda de Google considera solo las puntuaciones detalladas.

2. Las puntuaciones detalladas para una página específica, y para aquellas que PageSpeed ​​considera similares a la página analizada, se calculan a partir de estadísticas que los navegadores Chrome recopilan en computadoras reales y envían a Google. Esto significa que no se tiene en cuenta el rendimiento en Firefox, Safari y otros navegadores que no sean Chromium.

3. El resumen de todas las páginas del sitio web se obtiene de la misma manera que la puntuación de una sola página. Para acceder a él, seleccione la pestaña Origen en lugar de la pestaña Esta URL. La URL que aparece debajo de la barra de pestañas será diferente, ya que Origin mostrará la página principal del sitio (solo dominio).

Google actualiza constantemente la lista de métricas consideradas por PageSpeed, por lo que la mejor fuente de lo que es importante es la sección Experiencia / Core Web Vitals en Google Search Console, suponiendo que ya haya agregado su sitio web allí.

Para aprobar la evaluación Core Web Vitals, todos los puntajes deben ser verdes:

Para que los valores sean verdes, la página debe obtener una puntuación de al menos el 75 % en la prueba, y muchos usuarios necesitan experimentar valores iguales o mejores. El umbral difiere para cada puntaje y es significativamente más alto para FID.

Para comprender mejor los valores, haga clic en el título de la puntuación:

Esto enlaza con una publicación de blog que explica los umbrales para la categoría dada con más detalle.

Los datos se acumulan durante 28 días y hay otras dos diferencias importantes con respecto a lo que los usuarios reales pueden estar experimentando:

1. El rendimiento de los dispositivos reales y las velocidades de Internet varían, por lo que esta prueba produce resultados diferentes a los de la máquina virtual de PageSpeed.
2. Las calificaciones detalladas se calculan durante toda la vida útil de la página, tomando los peores valores de cada intervalo de cinco segundos que la página está abierta.

Si muchos de los usuarios de un sitio viven en regiones con acceso lento a Internet y usan dispositivos obsoletos o de bajo rendimiento, la diferencia puede ser sorprendente. Esta no es una de las recomendaciones de mejora de PageSpeed ​​Insights. A primera vista, no es obvio cómo lidiar con este problema, pero trataremos de explicarlo más adelante.

Mejorar las puntuaciones con las recomendaciones de PageSpeed ​​Insights

La parte principal de la calificación proviene de cómo la mayoría de los usuarios abren la página. A pesar de que no todos los usuarios visitan un sitio web durante un largo período de tiempo, y la mayoría visita un sitio web ocasionalmente, todos los usuarios se consideran en las calificaciones, por lo que mejorar las velocidades de carga de la página, que impactan a todos, es un buen lugar para comenzar.

Podemos encontrar recomendaciones en la sección Oportunidades debajo de los resultados de la evaluación.

Podemos ampliar cada elemento y obtener recomendaciones detalladas para mejorar. Hay mucha información, pero aquí están los consejos más básicos e importantes:

• Mejorar la velocidad de respuesta del servidor. Por ejemplo, si está utilizando alojamiento compartido, actualice su plan o migre a un servidor privado virtual (VPS) o incluso a un servidor dedicado. Además, no todos los hosts son iguales. Intente elegir un alojamiento confiable con buen hardware y garantías de tiempo de actividad.
• Reduzca el volumen de tráfico necesario para abrir su sitio. Para lograr esto, puede reemplazar las imágenes por otras optimizadas: cambie su formato, ajuste la resolución y la compresión, reemplace las imágenes animadas con imágenes estáticas si es necesario, etc. Los sistemas de administración de contenido populares tienen complementos que facilitan este proceso.
• Almacene en caché más datos. La forma más sencilla de hacer esto es usar una red de entrega de contenido (CDN) como Cloudflare para contenido estático (imágenes, estilos, scripts, páginas que no cambian). Puede configurar reglas de almacenamiento en caché para optimizar el rendimiento.

Ahora echemos un vistazo a factores más complicados, donde un programador experimentado puede ayudar.

Cómo depurar puntuaciones durante la vida útil de la página

Como se mencionó, Google Search Console considera los puntajes promedio obtenidos de los navegadores basados ​​en Chromium durante los últimos 28 días y también incluye valores para toda la vida útil de la página.

La incapacidad de ver lo que sucede durante la vida útil de la página es un problema. La máquina virtual de PageSpeed ​​no puede dar cuenta del rendimiento de la página una vez que se carga y los usuarios interactúan con ella, lo que significa que los desarrolladores del sitio no tendrán acceso a las recomendaciones de mejoras.

La solución es incluir la biblioteca Google Chrome Web Vitals en la versión para desarrolladores de un proyecto de sitio para ver qué sucede mientras un usuario interactúa con la página.

Varias opciones sobre cómo incluir esta biblioteca se encuentran en su archivo README.md en GitHub. La forma más sencilla es agregar el siguiente script. Está ajustado para mostrar valores durante la vida útil de la página en el <head> de la plantilla principal:

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

Tenga en cuenta que el cálculo de cambio de diseño acumulativo (CLS) y pintura con contenido más grande (LCP) está disponible solo para navegadores basados ​​en Chromium, incluidos Chrome, Opera, Brave (desactive Brave Shields para que la biblioteca funcione) y la mayoría de los otros navegadores modernos, excepto Firefox. , que se basa en un motor de Mozilla y el navegador Safari de Apple.

Después de agregar el script y volver a cargar la página, abra las herramientas de desarrollo del navegador y cambie a la pestaña Consola.

Para ver cómo se calculan esos valores para la versión móvil, cambie al dispositivo móvil mediante la barra de herramientas Dispositivo. Para acceder a él, haga clic en el botón Alternar barra de herramientas del dispositivo en las herramientas de desarrollador de su navegador.

Esto ayudará a identificar problemas. Al expandir la fila en la consola, se mostrarán detalles sobre lo que desencadenó el cambio de puntuación.

La mayoría de las veces, el aviso automático para otras puntuaciones es suficiente para hacerse una idea de cómo mejorarlas. Sin embargo, CLS cambia después de que la página se carga con las interacciones del usuario y es posible que simplemente no haya ninguna recomendación, especialmente para las aplicaciones de una sola página. Es posible que vea un puntaje perfecto de 100 en la sección Diagnosticar problemas de rendimiento, incluso si su página no pasa la evaluación de los factores considerados por el motor de búsqueda.

Para aquellos de nosotros que luchamos con CLS, esto será útil. Expanda el registro de registro, luego las entradas, la entrada específica, las fuentes, la fuente específica y compare currentRect con previousRect :

Ahora que podemos ver qué cambió, podemos identificar algunas formas de solucionarlo.

Reducción del cambio de diseño acumulativo

De todos los puntajes, CLS es el más difícil de entender, pero es crucial para la experiencia del usuario. El cambio de diseño se produce cuando se agrega un elemento al modelo de objeto del documento (DOM) o se cambia el tamaño o la posición de un elemento existente. Hace que los elementos debajo de ese elemento se desplacen, y el usuario siente que no puede controlar lo que sucede, lo que hace que abandone el sitio web.

Es relativamente fácil manejar esto en una página HTML simple. Configure los atributos de ancho y alto para las imágenes para que el texto debajo de ellas no se desplace mientras se cargan. Es probable que esto resuelva el problema.

Si su página es dinámica y los usuarios trabajan con ella como si fuera una aplicación, considere los siguientes pasos para abordar los problemas de CLS:

1. Configure la página para mostrar el contenido 500 milisegundos después de que el usuario haga clic en un botón o enlace sin que se active CLS.
2. Cambie los parámetros que no provoquen cambios en otros elementos del DOM: fondo, color, etc.
3. Asegúrese de que otros elementos no se desplacen al cambiar el tamaño o la posición de un elemento.

Hay recomendaciones más detalladas disponibles en la página CLS de Google Developers Optimize.

Cómo 500 milisegundos pueden reducir CLS

Para ilustrar cómo usar el umbral de 500 milisegundos, usaremos un ejemplo relacionado con la carga de una imagen.

Normalmente, cuando un usuario carga un archivo, el script agrega un elemento <img> al DOM y luego el navegador del cliente descarga la imagen del servidor. Obtener una imagen de un servidor puede demorar más de 500 milisegundos y puede causar un cambio de diseño.

Pero hay una manera de obtener la imagen más rápido ya que ya está en la computadora del cliente y, por lo tanto, crear el elemento <img> antes de que finalice el plazo de 500 milisegundos.

Aquí hay un ejemplo universal en ECMAScript puro sin bibliotecas que funcionará en la mayoría de los navegadores modernos:

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

Como vimos anteriormente, solucionar este tipo de problemas puede requerir agilidad mental. Con los dispositivos móviles, especialmente los baratos, y con Internet móvil lento, el arte de la optimización del rendimiento de los 90 se vuelve útil y los enfoques de programación web de la vieja escuela pueden inspirar nuestra técnica. Las herramientas modernas de depuración del navegador ayudarán con eso.

Actualizar la consola de búsqueda de Google

Después de encontrar y eliminar problemas, el motor de búsqueda de Google puede tardar un tiempo en registrar los cambios. Para actualizar los resultados un poco más rápido, informe a Google Search Console que solucionó los problemas.

Seleccione la página en la que está trabajando usando el cuadro de propiedades Buscar en la esquina superior izquierda. Luego navegue hasta Core Web Vitals en el menú de hamburguesas de la izquierda:

Haga clic en el botón Abrir informe en la parte superior derecha del informe móvil o de escritorio. (Si tuvo problemas con ambos, recuerde repetir las mismas acciones para el segundo informe más adelante).

A continuación, vaya a la sección Detalles debajo del gráfico y haga clic en la fila con la advertencia de validación fallida.

Luego haga clic en el botón Ver detalles para este problema.

Y finalmente haga clic en Iniciar nueva validación.

No esperes resultados inmediatos. La validación puede demorar hasta 28 días.

La optimización es una lucha continua

La optimización SEO es un proceso continuo, y lo mismo ocurre con la optimización del rendimiento. A medida que crece su audiencia, los servidores reciben más solicitudes y las respuestas se vuelven más lentas. El aumento de la demanda generalmente significa que se agregan nuevas funciones a su sitio y pueden afectar el rendimiento.

Cuando se trata del aspecto costo/beneficio de la optimización del rendimiento, es necesario lograr el equilibrio adecuado. Los desarrolladores no necesitan lograr los mejores valores en todos los sitios, todo el tiempo. Concéntrese en las causas de los problemas de rendimiento más significativos; obtendrás resultados más rápido y con menos esfuerzo. Las grandes corporaciones pueden darse el lujo de invertir una gran cantidad de recursos y obtener todos los puntajes, pero este no es el caso de las pequeñas y medianas empresas. En realidad, lo más probable es que una pequeña empresa solo necesite igualar o superar el rendimiento de sus competidores, no los pesos pesados ​​de la industria como Amazon.

Los dueños de negocios deben entender por qué la optimización del sitio es fundamental, qué aspectos del trabajo son más importantes y qué habilidades buscar en las personas que contratan para hacerlo. Los desarrolladores, por su parte, deben tener en cuenta el rendimiento en todo momento, ayudando a sus clientes a crear sitios que no solo se sientan rápidos para los usuarios finales, sino que también obtengan una buena puntuación en PageSpeed ​​Insights.