Velocidad de página con presupuesto limitado: Formas rentables de mejorar el rendimiento del sitio web

Velocidad de página con presupuesto limitado

Como consultor de Core Web Vitals recibo muchas solicitudes diferentes de soporte para pagespeed. Y sí, a veces no hay un gran presupuesto. Si ese es el caso, necesito ser aún más eficiente con mi tiempo y solo realizar optimizaciones de alta ganancia / bajo esfuerzo. En este artículo, exploraremos estrategias prácticas y rentables para elevar el rendimiento del sitio web y ofrecer una experiencia de usuario perfecta.

CONSEJO Core Web Vitals: ¡El servicio más económico que ofrezco es el soporte de Core Web Vitals de 2 horas! ¡En 2 horas ayudaré a establecer una estrategia efectiva que solucionará los problemas más urgentes y le dará el mayor rendimiento por su dinero!

¡Reserve ahora!

Averigüe los problemas primero

Al optimizar el rendimiento web con un presupuesto limitado, debemos estar absolutamente seguros de que estamos optimizando de la manera más efectiva posible. Eso significa que primero necesitamos saber cuál es el problema real.

Podemos utilizar la excelente herramienta gratuita PageSpeed Insights para consultar los datos CrUX. Los datos CrUX son la única fuente de datos que importa, ya que es la fuente de datos que utiliza Google.

¡Datos CrUX aprobados!

¡Datos CrUX fallidos!

Debajo de la puntuación CrUX verá una auditoría lighthouse. 

¡Permítanme ser claro sobre la auditoría lighthouse! En este momento no nos importa lighthouse. ¿Por qué? Porque no mide los Core Web Vitals. Claro, lighthouse es una herramienta de prueba increíble y siéntase libre de explorar todas sus sugerencias, pero como estamos con un presupuesto limitado, nos importa aprobar los Core Web Vitals. ¡No nos importa aprobar pruebas sintéticas en este momento!

Volviendo a los datos CrUX. ¡Aquí hay algunas pautas a seguir si tiene un presupuesto limitado! ¡Comience a investigar los Core Web Vitals en este orden exacto y concéntrese en estos problemas primero!

• Si está fallando en el Time to First Byte, ¡arréglelo primero!
• Si está fallando en el First Contentful Paint, arregle los recursos que bloquean el renderizado (diferir scripts y optimizar estilos)
• Si está fallando en el Largest Contentful Paint, priorice los recursos que necesita para ese LCP (como fuentes o imágenes)
• Si está fallando en el CLS, agregue ancho y alto a todas las imágenes, busque y elimine las transiciones CSS y reserve espacio para elementos de renderizado tardío (como anuncios, filtros de productos, etc.)
• Si está fallando en el Interaction to Next Paint, lo más probable es que esté utilizando demasiado JavaScript en el momento equivocado. Elimine scripts/plugins innecesarios, use una herramienta RUM como Core/Dash para encontrar los scripts más lentos

Optimizando imágenes responsablemente

Las imágenes contribuyen a los Core Web Vitals de varias maneras diferentes. A menudo son los mayores contribuyentes al tamaño de la página web. Al aprovechar técnicas eficientes de compresión de imágenes y utilizar formatos de imagen modernos como WebP, los propietarios de sitios web pueden mantener la calidad visual mientras reducen significativamente los tiempos de carga. Muchas veces las imágenes se convertirán en el elemento Largest Contentful Paint. Eso significa que tenemos que priorizar esas imágenes LCP importantes y despriorizar las imágenes menos importantes y que están por debajo del pliegue (below-the-fold).

1. Convertir imágenes a WebP gratis

Hay muchas herramientas gratuitas, soluciones y plugins disponibles que le permitirán convertir imágenes a formatos más nuevos, rápidos y modernos como WebP. Para WordPress, por ejemplo, sugeriría el excelente y gratuito WebP Express

2. Implementar Lazy loading

Lazy loading indicará al navegador que una imagen no debe cargarse hasta que esté (casi) en el viewport visible (la parte visible de la página). Si tiene 15 imágenes en una página y solo 3 están en la parte visible de la página, puede agregar con seguridad loading="lazy" a las imágenes que no están en el viewport visible. 

Hay 2 formas de abordar esto. La primera es habilitar lazy loading en su CMS. Esto agregará lazy loading a todas las imágenes. Luego consulte la documentación sobre cómo eliminar lazy loading para las imágenes que son visibles e importantes. La otra forma es agregar manualmente loading="lazy" a las imágenes que están por debajo del pliegue.

<img loading="lazy" src="image.jpg">

3. Configurar fetchpriority de imagen

Al agregar fetchpriority = "high" a una etiqueta de imagen, podemos indicar al navegador que esta imagen es más importante que otras imágenes y debe descargarse con un fetchpriority alto. Y aunque soy consciente de que hay mejores formas que incluyen precarga de imágenes y 103 early hints, ¡establecer el fetchpriority es simple, rápido y efectivo! El proceso es simple: solo identifique la imagen más importante en su página, edite la plantilla de la página misma y agregue fetchpriority = "high" a la imagen. Esto se verá algo así

<img fetchpriority="high" src="image.jpg">

2. Aprovechando el almacenamiento en caché del navegador para la consistencia

Si está utilizando un alojamiento económico, es probable que el servidor web no esté configurado de manera óptima. Uno de los errores que encuentro regularmente es el almacenamiento en caché del navegador mal configurado.  El almacenamiento en caché del navegador permite que los recursos accedidos con frecuencia, como imágenes, scripts y hojas de estilo, se almacenen localmente, reduciendo los tiempos de carga para los visitantes recurrentes. Configure los encabezados de caché para lograr un equilibrio entre el rendimiento óptimo y garantizar que los usuarios reciban las últimas actualizaciones de contenido.

Si está utilizando Apache como servidor web, simplemente cree un archivo llamado .htaccess en el directorio raíz (base) de su sitio web y agregue estas líneas

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

Si está utilizando un servidor web diferente como NGINX, comuníquese con su proveedor de alojamiento y muéstreles este artículo.

3. Considere una CDN gratuita o económica como CloudFlare

Explore los beneficios de las Redes de Entrega de Contenido (CDN) para distribuir contenido estático en servidores de todo el mundo. Si bien las CDN premium ofrecen características avanzadas, incluso las opciones gratuitas o económicas pueden proporcionar un impulso significativo en la velocidad y confiabilidad de la página.

En el plan gratuito:

En el plan gratuito obtendrá muchas de las 'cosas buenas' como 

1. DNS súper rápido. Los servidores DNS de CloudFlare son gratuitos y probablemente superarán a los servidores DNS de su proveedor de alojamiento económico. Solo por esa razón es una gran idea cambiar a CloudFlare 
2. HTTP/3. CloudFlare utiliza los protocolos más nuevos y los métodos de compresión más rápidos. Sin entrar en muchos detalles, tenga la seguridad de que esto acelerará su red en al menos un 10%.
3. Almacenamiento en caché del navegador consistente. CloudFlare tiene un historial bastante sólido cuando se trata de almacenar en caché recursos estáticos. ¡La configuración lista para usar es probablemente mejor que la que tiene ahora!
4. Almacenamiento en caché en el borde para recursos estáticos. CloudFlare almacenará en caché versiones de sus recursos estáticos como imágenes, scripts y archivos css y los servirá directamente al usuario final desde su red perimetral. Esto elimina la necesidad de viajes de ida y vuelta a su servidor de origen.
5. Rocket loader. Rocket loader diferirá la carga de scripts y manejará todas las complicaciones que surjan de ello. Rocket loader es un método rudimentario, pero si no puede diferir los scripts manualmente, esto probablemente mejorará las métricas de pintura como Largest Contentful Paint.

En el plan Pro

Una de las primeras cosas que siempre digo cuando veo un plan gratuito de CloudFlare es '¡hazte pro!'. Si los $25 son algo que puede pagar y está dispuesto a gastar en un sitio más rápido, probablemente debería considerarlo.

1. Todas las características gratuitas. Obviamente, el plan pro viene con todas las características gratuitas.
2. CloudFlare APO para WordPress. APO para WordPress es una solución completa que almacenará en caché sus páginas en la red perimetral si los visitantes no han iniciado sesión. Esto puede acelerar enormemente el Time to First Byte. 
3. Optimización de imágenes con y sin pérdida. Una de las principales ventajas de usar la versión pro de CloudFlare es su optimización de imágenes. CloudFlare convertirá y almacenará en caché imágenes en formato webp y las servirá solo a los visitantes que acepten estos formatos.

4. ¡Autoaloje tanto como pueda!

Otra optimización simple y efectiva es el autoalojamiento de 'recursos estáticos'. En muchos sitios, los recursos estáticos se alojan en CDN externas (no confunda esto con su propia CDN). Por ejemplo, jQuery se aloja en  https://code.jquery.com/,  Bootstrap se aloja en https://cdn.jsdelivr.net y sus fuentes se alojan en https://fonts.googleapis.com. Entiendo el atractivo, estas CDN se presentan como fáciles y rápidas, pero usarlas es realmente una muy mala idea y ralentizará su sitio.

La idea de utilizar una CDN compartida para estos tipos de archivos era sólida cuando los navegadores aún podían compartir estos archivos entre sitios web. Estos días quedaron en el pasado. El resultado es que un nuevo visitante siempre necesita descargar el archivo estático y necesita una nueva conexión a un nuevo servidor para cada archivo. Y estas nuevas conexiones a estos nuevos servidores pueden tomar mucho tiempo extra.

La solución es autoalojar esos archivos de terceros. Hacer esto es fácil, simplemente descargue el archivo, colóquelo en su servidor y cambie la referencia a este archivo.

5. Carga de scripts asíncrona

Un gran cuello de botella pueden ser los 'scripts de bloqueo' en el encabezado de la página. ¡Estos scripts a veces pueden retrasar la carga de la página hasta 20 segundos! Ahora, diferir estos scripts no es difícil en absoluto. Simplemente agregue defer a la etiqueta del script y listo. Si puede, ¡haga esto! Edite la plantilla y cambie su script de esta manera

<!-- old blocking script tag -->
<script src="script.js"></script>

<!-- new deferred script tag -->
<script defer src="script.js"></script>

¡Pero hay trampas! Agregar defer a las etiquetas de script puede causar todo tipo de problemas y errores de dependencia. Y como tiene un presupuesto limitado, tengo que asumir que no tiene los medios para contratar a un experto en JavaScript para solucionar todos los problemas que puedan ocurrir. Así que intente diferir sus scripts y verifique si hay errores (presione Ctrl-Shift-I en Chrome y verifique la pestaña de consola). Si no hay problemas después de las pruebas... ¡es uno de los pocos afortunados! Si hay problemas, probablemente debería recurrir a una de las siguientes soluciones:

Usar Rocket loader 

Como se discutió, la versión gratuita de CloudFlare le dará acceso a Rocket Loader. Esto diferirá todos los scripts en una página. De ninguna manera es perfecto, pero la mayoría de las veces hará un trabajo bastante bueno.

Usar un plugin

La mayoría de los sitios basados en CMS tienen un enorme repositorio de plugins. Hay muchos plugins que le permitirán diferir JavaScript y manejar todas las complicaciones que puedan surgir al diferir scripts.

6. ¡Caché, caché, caché!

Cuando tiene un presupuesto limitado y no quiere gastar mucho en alojamiento, el almacenamiento en caché es una de las formas más efectivas de acelerar un sitio web. El almacenamiento en caché es especialmente efectivo contra un Time to First Byte alto. El almacenamiento en caché se puede realizar en diferentes niveles. 

Caché del lado del cliente: Configure su servidor web para indicar al navegador que almacene en caché tantos recursos estáticos como sea posible. Esto disminuirá la carga en su servidor.

Object Cache:  Object cache se puede utilizar para almacenar datos que podrían ser computacionalmente costosos de regenerar, como el resultado de consultas complejas a la base de datos. Pídale a su proveedor de alojamiento que instale Redis o Memcached.

Full Page Cache: Si está utilizando un CMS, probablemente querrá agregar una caché de página completa a su sitio. Para WordPress, buenas opciones son WP Fastest Cache o WP Core Web Vitals

7. Tome decisiones de alojamiento estratégicas

Cuando se trata de alojamiento, vale la pena comparar precios y el host más caro no siempre es el más rápido. Generalmente, está buscando un plan de alojamiento que esté optimizado para su CMS, ¡porque quien mucho abarca, poco aprieta!  Busque proveedores que ofrezcan servidores optimizados. Una elección estratégica de alojamiento puede marcar una diferencia considerable en la velocidad del sitio web.

8. Monitoreo y análisis continuo

Implemente una estrategia de monitoreo robusta con herramientas asequibles como CoreDash Audite regularmente el rendimiento de su sitio web para identificar nuevas oportunidades de optimización y garantizar mejoras de velocidad consistentes.