Diez formas de mejorar los tiempos de carga de su sitio web y Google Core Vitals

¿Qué son los principales web vitals?

A principios de este año, Google introdujo un nuevo conjunto de criterios que definen la estabilidad, la velocidad y la capacidad de respuesta de cualquier sitio web. Los tres criterios principales son los siguientes:

• El cambio de diseño acumulativo define cuánto debe cambiar la estructura de una página web y cambiar de posición. El punto de referencia para esto es 0.1.
• La pintura con contenido más grande mide cuánto tiempo se tarda en cargar el contenido principal de una página. Los mejores resultados deben ser de 2,5 segundos o menos.
• First Input Delay es el tiempo entre la apertura de una página web y el momento en que se vuelve interactiva por primera vez. El marco de tiempo más comúnmente buscado es de alrededor de 100 milisegundos.

Con estos términos básicos en mente, veamos cómo puede usar Core Vitals para hacer que su sitio web sea lo más rápido y eficiente posible.

1. Optimice su CDN y caché del navegador

Sus puntajes FID y LCP deberían mejorar bastante rápido usando este método. Sirva sus activos estáticos desde una CDN o colóquelos en caché en un servicio como Cloudfront de AWS. Los navegadores obtendrán los resultados necesarios mucho más rápido después de esto.

Además, las páginas dinámicas se pueden almacenar en caché en su CDN con los valores TTL correctos ya aplicados según cómo se comporten sus aplicaciones.

2. Use el tamaño exacto para todos los anuncios y medios

En lo que respecta a sus puntajes CLS, este es uno de los factores más importantes. Siempre verifique que haya establecido una altura específica en las imágenes o activos etiquetados, lo cual es muy importante, especialmente para los componentes de nivel de pliegue. Si tiene poco tiempo, siempre puede configurar las alturas en automático y obtener un tamaño aproximado que debería funcionar lo suficientemente bien en un apuro.

Los anuncios también son un factor en CLS, y debe verificar sus alturas y tamaños a fondo para asegurarse de que no desplacen el contenido al mostrarse incorrectamente. Esto puede requerir ponerse en contacto con su proveedor de servicios de publicidad o buscar algunas opciones diferentes si su CLS se ve afectado constantemente.

Si está en una plataforma de WordPress, le recomendamos considerar un complemento como Ewww , que puede entregar automáticamente sus imágenes en Webp y habilitar funciones como la carga diferida para retrasar la carga de todas las imágenes en la carga de la página.

3. Cargue imágenes de resolución correcta de forma perezosa en función del tipo de dispositivo que se utilice

Esta técnica produce resultados increíblemente rápidos y debe ser una de sus primeras consideraciones. Al usar un paquete de carga diferida para, sorprendentemente, cargar todas las imágenes en su sitio, su LCP se verá afectado positivamente, principalmente al reducir el peso de la página y garantizar que se cargue lo más rápido posible.

También es esencial establecer la resolución de cada activo según el tipo de dispositivo que se utiliza para ver su sitio. Cargar la resolución como una talla única hará que el sitio sea mucho más lento en dispositivos más pequeños o menos potentes y afectará a su LCP de la peor manera posible.

4. Use SSR y CSR de manera inteligente

Google siempre está dispuesto a fomentar y promover páginas renderizadas del lado del servidor (SSR) con buena puntuación para inspirar un rendimiento SEO valioso. Sin embargo, debe considerar el equilibrio entre el SEO y el rendimiento de carga de la página. Las páginas con demasiado contenido pueden tardar años en cargarse en el lado del servidor y reducir el rendimiento general de su sitio.

El contenido real debe mantenerse en la parte superior de la página, mientras que otras funciones del sitio deben mantenerse para mejorar la SSR. Este estilo de carga asíncrono le quita mucho tiempo a sus puntajes de carga y renderizado.

5. Divida todo dividiendo su código

Usar los tamaños de archivo más significativos para los activos (particularmente los archivos JS) generalmente es una mala idea. En su lugar, debe permitir el protocolo h2 y aprovecharlo para volver a cargar activos de forma asíncrona en piezas separadas.

Además, en lugar de usar un gran archivo HTML, puede dividir el sitio en varios archivos más pequeños y así disminuir la carga de la carga.

6. Utilice las técnicas de compresión de Brotli para reducir los activos estáticos

En cuanto a la compresión, Brotli parece ser la mejor opción en términos de velocidad de carga. Sin embargo, las relaciones de compresión más altas se sumarán al paquete y a los tiempos de compilación en términos de DevOps.

Pero al final del día, el tiempo de carga del sitio es el factor más crucial y debe priorizarse por encima de cualquier otra cosa.

7. Haga que el contenido de la respuesta y la solicitud de API sean lo más eficientes posible

Sin duda, el elemento más vital en términos de velocidades de carga, incluso los cambios más pequeños, pueden generar resultados masivos con API. Las respuestas y solicitudes de API deben verificarse con frecuencia en aras de la optimización.

Además, defina los parámetros de datos y use solo lo necesario para ahorrarse mucho tiempo y esfuerzo. La elección de una red para sus API también merece una consideración cuidadosa, ya que el alojamiento en las subredes incorrectas puede aumentar enormemente el requisito de tiempo.

8. Reduzca el tamaño total de sus páginas y documentos

Las páginas de destino de código pesado (cualquier cosa por encima de 75 kb es probable que sea grave) son muy indeseables, ya que aumentan drásticamente los tiempos de carga y recuperación.

Siempre trate de mantener las cosas limpias en el lado del código, ya que es fácil perder fragmentos de datos redundantes.

9. Reemplace las miniaturas de video con imágenes de marcador de posición

Muchos visitantes del sitio prefieren no interactuar con el contenido del video, por lo que cargar las miniaturas en videos que no se están reproduciendo es una pérdida de recursos en este caso.

Es una mejor idea elegir una imagen de marcador de posición o un espacio de video en blanco para conservar recursos y así aumentar la velocidad del sitio.

10. Elija el servidor más rápido disponible

Esto puede parecer un factor obvio, pero vale la pena decirlo. Invertir en la mejor infraestructura de servidores suele ser una gran idea, ya que afecta directamente la velocidad de todo su sitio sin excepción.

Al gastar un poco más de dinero, ahorrará una cantidad considerable de tiempo en general. Cloudflare es una excelente herramienta a nivel de DNS que le permite optimizar su sitio de manera rentable sin costosos recursos de servidor.

Conclusión

Los consejos anteriores lo llevarán por el camino correcto para lograr una mejor puntuación de velocidad de página y puntos vitales principales. Sin embargo, es posible que se encuentre en una plataforma o tema inflados que a menudo significará el mejor curso de acción para crear un sitio nuevo, más limpio y más liviano.

Suponga que se está rascando la cabeza con todos estos términos o se siente intimidado ante la idea de rediseñar todo su sitio para aumentar la velocidad. En ese caso, es posible que desee considerar una revisión del sitio por parte de un experto en diseño web que probablemente sugerirá el mejor curso de acción para optimizar su sitio existente o sugerir evolucionar a un nuevo sitio con una base de código que esté más optimizada para los elementos vitales principales.