Optimización de la velocidad de la página de Google: qué es y cómo optimizarla


La velocidad de la página ha sido durante mucho tiempo un factor de clasificación para Google. De primer anuncio en 2010y luego fortalecerlo con otra actualización en 2018y luego concluir el acuerdo con el introducción de Core Web Vitals en 2020. En este artículo, veremos cuál es la velocidad de la página hoy, cómo medirla y, lo que es más importante, cómo mejorar los puntajes de velocidad de la página para su sitio web.

¿Qué es la velocidad de la página?

Durante mucho tiempo, el propio Google ha tenido problemas con la medición de la velocidad de la página. ¿Cuáles son las métricas correctas? ¿Utiliza datos de campo o datos de laboratorio? ¿Tiempo de toda la página o solo de la parte superior? Hay docenas de métricas que se relacionan con la velocidad de la página y ha sido un largo camino para descubrir cuál es realmente importante para el usuario.

Eventualmente, Google se decidió por un conjunto de tres métricas que ahora se consideran las más importantes para la velocidad de la página: la pintura con contenido más grande (LCP), el retraso de la primera entrada (FID) y el cambio de diseño acumulativo (CLS). Estas métricas, conocidas conjuntamente como Core Web Vitals, están destinadas a medir la velocidad de página percibida frente a la velocidad de página real.

El mayor contenido de pintura.

La pintura con contenido más grande es el tiempo que tarda el elemento más grande en la ventana en cargarse por completo. Los puntos de referencia para esta métrica son los siguientes:

Optimizacion de la velocidad de la pagina de Google que

Punto de referencia LCP

Es común que el elemento más grande sea una imagen, por lo que la optimización de la imagen es el principal contribuyente a esta métrica. Además, LCP depende de los tiempos de respuesta del servidor, el código de bloqueo de procesamiento y el procesamiento del lado del cliente.

Retraso en la primera entrada

First Input Delay es el retraso entre la pintura de un elemento interactivo y el momento en que se vuelve funcional. Digamos que un botón está pintado en la página, hace clic en él, pero aún no responde. Los puntos de referencia para esta métrica son los siguientes:

1659300016 395 Optimizacion de la velocidad de la pagina de Google que

punto de referencia FID

FID se puede optimizar con división de código y usando menos JavaScript.

Desplazamiento acumulativo del diseño

El cambio de diseño acumulativo mide si los elementos de la página se mueven durante la carga. Supongamos que una página parece lista para usar, pero luego aparece una nueva imagen en la parte superior y el resto del contenido se desplaza hacia abajo: se trata de un cambio de diseño. Los puntos de referencia para esta métrica son los siguientes:

1659300016 407 Optimizacion de la velocidad de la pagina de Google que

Punto de referencia CLS

CLS depende de la configuración correcta de los atributos de tamaño y la carga de recursos en una secuencia específica, de arriba a abajo.

¿Cómo medir la velocidad de la página en su sitio web?

Hay muchas herramientas proporcionadas por Google que ofrecen Core Web Vitals como parte de la verificación de su página:

1659300016 227 Optimizacion de la velocidad de la pagina de Google que

Herramientas de Google para medir Core Web Vitals

Un problema es que algunas herramientas usan datos de laboratorio en lugar de datos de campo, mientras que Google clasifica sus páginas basándose únicamente en datos de campo. Puede distinguir estas herramientas ya que reemplazan la métrica FID solo en el campo con la métrica TBT (Total Blocking Time) medida en el laboratorio.

El otro problema es que la mayoría de las herramientas solo pueden evaluar una página a la vez, lo cual no es un enfoque práctico para optimizar todo su sitio web.

De las herramientas de Google enumeradas anteriormente, probablemente sea la mejor para usar Consola de búsqueda de Google. Allí puedes ir a Experiencia> Principales Web Vitals y vea el informe de todas sus páginas a la vez:

1659300017 131 Optimizacion de la velocidad de la pagina de Google que

Informe Core Web Vitals en Google Search Console

Debajo del informe hay una lista de todas las métricas fallidas:

1659300017 476 Optimizacion de la velocidad de la pagina de Google que

Problemas principales de Web Vitals en Google Search Console

Y desde allí, puede seguir el proceso de desglose para encontrar los problemas específicos dentro de cada métrica, luego las páginas afectadas por el problema y, después de unos pocos clics, se encontrará en el informe de PageSpeed ​​Insights para una página específica. Entonces, aunque el informe de nivel superior se proporciona de forma masiva, determinar qué páginas se ven afectadas por qué problemas puede ser un proceso tedioso.

Probablemente una mejor manera de medir la velocidad de la página es usar WebSite Auditor. ahí puedes ir Estructura del sitio> Auditoría del sitio y obtenga un informe de velocidad de página masivo para todo su sitio web y vea todas las páginas afectadas, todo desde un único panel:

1659300017 815 Optimizacion de la velocidad de la pagina de Google que

Informe Core Web Vitals en WebSite Auditor

O puedes cambiar a Comprobar sitio> Páginas> Velocidad de página y ver una lista de páginas que enfrentan problemas de velocidad que las afectan. Haga clic en cualquier página y también obtendrá una lista de elementos de página que se pueden optimizar para un mejor rendimiento:

1659300018 905 Optimizacion de la velocidad de la pagina de Google que

Informe Core Web Vitals en WebSite Auditor

En general, encuentro que WebSite Auditor es más conveniente para realizar el trabajo real de optimización de la página, mientras que Google Search Console es más una herramienta de informes.

¿Cómo mejorar la velocidad de la página en su sitio web?

Ahora que tiene una lista de páginas afectadas, es hora de trabajar para mejorar la velocidad de su página. A continuación se presentan algunas de las oportunidades de optimización más comunes y algunos consejos sobre cómo aprovecharlas.

1. Establecer el tamaño de la imagen

Comencemos con algo simple. Cuando omite el tamaño de la imagen de su código, el navegador puede tardar un tiempo en cambiar el tamaño de sus imágenes y videos correctamente. Esto significa que el contenido de su página se saltará y afectará negativamente su puntaje CLS.

Para evitar este problema, siempre establezca las propiedades de ancho y alto para sus imágenes, así:

cuscinoancho = «640» altura = «360» alt = «cojín morado con patrón floral» />

Con esta información, cualquier navegador puede calcular el tamaño de la imagen y reservar suficiente espacio en la página. Esto debería solucionar la mayoría, si no todos, los problemas de CLS.

2. Ofrecer imágenes en formatos de última generación

No todos los formatos de imagen son iguales. Nuestros formatos JPEG y PNG de confianza ahora tienen características de compresión y calidad mucho peores que AVIF, JPEG 2000, JPEG XR y WebP.

De estos formatos enumerados, WebP es probablemente el primero a considerar. Admite compresión con pérdida y sin pérdida, además de permitir transparencia y animación. Es más, Los archivos WebP son generalmente entre un 25 % y un 35 % más ligeros que los PNG y los JPEG de calidad similar.. Y aunque en el pasado era una preocupación común que algunos navegadores no admitieran el formato WebP, recientemente Safari agregó soporte para WebP en la versión 14, por lo que el soporte total para el formato en todos los navegadores ahora supera el 90%.

Si su sitio web está basado en WordPress, puede crear fácilmente una copia WebP de sus imágenes con un complemento de optimización de imágenes como Imaginar. Si su sitio web no está construido en una plataforma CMS o no desea instalar demasiados complementos, puede convertir sus imágenes utilizando convertidores en línea o editores gráficos.

3. Comprime las imágenes

Independientemente de si está utilizando formatos de imagen de próxima generación o no, la compresión de imágenes sigue siendo una buena forma de reducir el tamaño total de la página. Nuevamente, si su sitio web está basado en WordPress, puede comprimir sus imágenes a granel con complementos de imagen como WP Smush. También puede usar compresores en línea si no desea instalar demasiados complementos y correr el riesgo de ralentizar su sitio web. Último recurso: utilice editores gráficos para comprimir sus imágenes antes de subirlas a su sitio web.

Solo para darle una idea de cuánto puede ahorrar, realicé una prueba rápida en una selección aleatoria de imágenes de mi carpeta de descargas:

1659300018 119 Optimizacion de la velocidad de la pagina de Google que

Resultados de compresión de imágenes de TinyPNG

Usando un compresor en línea, ahorré entre un 30% y un 75% por imagen y un 68% en total (las imágenes más pesadas pesaban más y sesgaban el porcentaje).

4. Reenviar imágenes fuera de pantalla

Las imágenes fuera de la pantalla son las que aparecen debajo de la tapa, lo que significa que el usuario no las verá hasta que se desplace más allá de la pantalla de inicio. Y este será un tema común en el resto del artículo: la carga de todo lo que está debajo del pliegue debe posponerse hasta que los elementos que están encima del pliegue estén completamente cargados. El área de la mitad superior de la página es lo que usa Google para medir la velocidad de su página, por lo que es donde debe concentrarse la mayor parte de su esfuerzo de optimización.

1659300019 187 Optimizacion de la velocidad de la pagina de Google que

Arriba del pliegue vs debajo del pliegue

La técnica para manejar imágenes fuera de pantalla se llama carga lenta. Básicamente, las imágenes de la parte superior de la página se cargan primero y las imágenes fuera de la pantalla solo se cargan cuando el usuario se desplaza hacia abajo en la página. Mira esto guía sobre carga lenta de imágenes para más información.

5. Convertir gif a video

Puede parecer contradictorio, pero los gifs suelen tener archivos más grandes que los videos. No tiene sentido, no sé cómo sucedió, pero convertir un gif grande en un video permitirá una reducción de tamaño de hasta un 500% o incluso más. Entonces, si su informe de velocidad de la página le dice usar formatos de video para contenido animado también podrías tomártelo en serio.

Para convertir gifs a video puedes usar cualquier conversor en línea o descargar una herramienta como MPEG. Google realmente recomienda crear dos formatos de video: WebM y mp4. WebM es similar a WebP en que es más ligero, pero aún no es compatible con todos los navegadores. Entonces, cuando agregue su video a la página, primero debe enumerar la versión webm y luego la versión mp4 como respaldo:




Tenga en cuenta que el elemento de video también tiene cuatro atributos adicionales: reproducción automática, bucle, silencio, Y jugar en linea. Estos atributos hacen que su video se comporte como un gif: comienza a reproducirse automáticamente, se reproduce en bucle, sin audio y se reproduce en línea.

6. Devolver CSS no utilizado

El CSS no utilizado puede ralentizar la construcción del árbol de renderizado por parte del navegador. La cuestión es que un navegador tiene que pasar por todo el árbol DOM y verificar qué reglas de CSS se aplican a cada nodo. Por lo tanto, cuanto más CSS no se use, más tiempo le llevará a un navegador calcular los estilos para cada nodo.

El objetivo aquí es identificar las piezas de CSS que no se usan o no son críticas y eliminarlas por completo o cambiar el orden en que se cargan. Por favor comprueba esto orientación sobre el aplazamiento de CSS no utilizado.

7. Minimiza JS y CSS

Los archivos JS y CSS a menudo pueden contener comentarios, espacios, saltos de línea y fragmentos de código innecesarios. Eliminarlos podría hacer que sus archivos sean hasta un 50% más ligeros, aunque la minificación promedio es mucho menor. Sin embargo, es un contribuyente marginal a la velocidad de su página y vale la pena intentarlo.

Si tiene un sitio web pequeño, puede minimizar el código usando minificadores en línea, como Miniificador de CSS, Miniificador de JavaScriptY compresor HTML. O, si su sitio web está construido en una plataforma CMS, como WordPress, definitivamente hay algunos complementos que pueden hacer el trabajo por usted. Para un sitio web personalizado, consulte esta guía en minimizando CSS y esto en minimizando JS.

8. Extraiga CSS crítico

De forma predeterminada, CSS es un recurso de bloqueo de procesamiento. Su página no se mostrará hasta que el navegador obtenga y analice los archivos CSS, lo que puede llevar mucho tiempo.

Para solucionar esto, puede extraer solo los estilos que necesita para el área superior de su página y agregarlos al de su documento HTML. El resto de sus archivos CSS se pueden cargar de forma asíncrona. Esto mejorará significativamente sus puntajes LCP y hará que sus páginas sean más rápidas para los usuarios.

Mira esto guía para extraer CSS crítico para más detalles.

9. Mejore el tiempo de respuesta del servidor

Lo más desafortunado de los retrasos en la respuesta del servidor es que existe una amplia selección de razones que podrían causarlos. Por ejemplo, puede ser enrutamiento lento, lógica de aplicación lenta, agotamiento de recursos de la CPU, consultas lentas a la base de datos, agotamiento de la memoria, marcos lentos, etc.

Una solución simple que no es de desarrollo para estos problemas es actualizar a un mejor alojamiento, lo que en muchos casos significa de alojamiento compartido a alojamiento administrado. El alojamiento administrado generalmente viene con CDN y otros trucos de entrega de contenido que tendrán un impacto positivo en la velocidad de la página. Pero, si quieres ensuciarte las manos, aquí tienes uno más detallado. guía para reparar un servidor sobrecargado.

10. JS diferido / asíncrono de terceros

Los activos de terceros, como los botones para compartir en redes sociales y las incrustaciones de reproductores de video, tienden a consumir muchos recursos. Además, cada vez que el navegador encuentra una pieza de JS, deja de ejecutar HTML hasta que se encarga de JS. Todo esto tiende a agregar una caída medible en la velocidad de la página.

Si alguno de sus activos de terceros no es esencial, es decir, no importan el aspecto o la función de la parte superior de la página, debe sacarlos de la ruta de representación crítica. Para cargar recursos de terceros de manera más eficiente, puede usar el atributo asíncrono o diferido. El atributo asíncrono es más suave: le permite descargar HTML y JS al mismo tiempo, pero aún pausará HTML para ejecutar JS. El atributo diferido es más difícil: no pausará HTML para ejecutar JS, que solo se ejecutará al final.

1659300019 16 Optimizacion de la velocidad de la pagina de Google que

Atributos asíncronos y diferidos

11. Preconectarse a recursos de terceros

Por regla general, establecer conexiones, especialmente las seguras, lleva mucho tiempo. La cuestión es que requiere búsquedas de DNS, protocolo de enlace SSL, intercambio de claves secretas y algunos viajes de ida y vuelta al servidor final responsable de la solicitud del usuario. Por lo tanto, para ahorrar este valioso tiempo, puede conectarse previamente a los orígenes requeridos.

Para vincular previamente su sitio web a una fuente de terceros, solo necesita agregar una etiqueta de enlace a su página:

Herramientas de desarrollo de Chrome para identificar tareas demasiado largas – son las marcadas con banderas rojas:

Optimizacion de la velocidad de la pagina de Google que

Actividades largas en Chrome DevTools

Una vez que haya identificado actividades largas en sus páginas, puede dividirlas en actividades más pequeñas, retrasarlas o incluso sacarlas del hilo principal a través de un trabajador web.

13. Precarga activos clave

Depende de los navegadores decidir qué recursos cargar primero. Por lo tanto, a menudo intentan cargar activos importantes como CSS antes que scripts e imágenes, por ejemplo. Desafortunadamente, esta no siempre es la mejor manera de hacerlo. Al precargar recursos, puede cambiar la prioridad de carga de contenido en los navegadores modernos al informarles lo que necesitará a continuación.

Con la ayuda de la etiqueta. puede informar al navegador que se necesita un recurso como parte del código responsable de representar el contenido de la mitad superior de la página y hacer que recupere el recurso lo antes posible.

Aquí hay un ejemplo de cómo se puede usar la etiqueta:

Tenga en cuenta que el activo se cargará con la misma prioridad. La diferencia es que la descarga comenzará antes ya que el navegador conoce la precarga de antemano. Para obtener instrucciones más detalladas, consulte este guía sobre la precarga de recursos críticos.

14. Habilitar el almacenamiento en caché del navegador

Sin el almacenamiento en caché del navegador, cada vez que visita la misma página, la página completa se carga desde cero. Con el almacenamiento en caché del navegador, algunos elementos de la página se almacenan en la memoria del navegador, por lo que solo es necesario cargar una parte de la página desde el servidor. Por supuesto, la página se carga mucho más rápido en las visitas repetidas y las puntuaciones generales de velocidad de la página aumentan.

Normalmente, el objetivo es almacenar en caché tantos recursos de página como sea posible durante el mayor tiempo posible y garantizar que los recursos actualizados se vuelvan a validar para el almacenamiento en caché. En realidad, puede verificar todos estos parámetros con encabezados HTTP especiales que contienen instrucciones de almacenamiento en caché. Un buen lugar para comenzar a aprender sobre el almacenamiento en caché de HTTP es este ayuda de google.

15. Reducir el tamaño del DOM

Un árbol DOM demasiado grande con reglas de estilo complicadas puede afectar negativamente cosas como la velocidad, el tiempo de ejecución y el rendimiento de la memoria. La mejor práctica es tener un árbol DOM, que tiene menos de 1500 nodos en total, tiene una profundidad máxima de 32 nodos y ningún nodo principal con más de 60 nodos secundarios.

Una gran práctica es eliminar los nodos DOM que ya no necesita. Para hacer esto, considere eliminar los nodos que no se muestran actualmente del documento cargado e intente crearlos solo después de que un usuario se desplace hacia abajo en una página o presione un botón.

16. Evita demasiadas redirecciones

Deshacerse de todos los redireccionamientos innecesarios es una de las mejores cosas que puede hacer por su sitio en términos de velocidad. Cada redireccionamiento adicional ralentiza el procesamiento de la página y agrega uno o más viajes de ida y vuelta de solicitud-respuesta HTTP.

La mejor práctica es no usar redireccionamientos en absoluto. Sin embargo, si tiene una gran necesidad de usar uno, elegir el tipo correcto de redireccionamiento es crucial. Lo mejor es utilizar una redirección 301 para la redirección permanente. Pero si, digamos, está dispuesto a redirigir a los usuarios a algunas páginas promocionales a corto plazo o URL específicas del dispositivo, las redirecciones 302 temporales son la mejor opción.

Pensamientos finales

Los problemas enumerados anteriormente no son todos los problemas que pueden afectar la velocidad de la página, sino los más comunes y los que tienen el mayor potencial de mejora. Asegúrate de adaptar tus estrategias de optimización a los problemas reflejados en el informe de velocidad de la página. Tenga en cuenta que los problemas en muchas páginas de su sitio web a menudo se pueden resolver de forma masiva mediante la implementación de cambios en todo el sitio.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Ir arriba