Page Speed con un presupuesto ajustado: las optimizaciones que más importan

Las optimizaciones que más importan

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 y bajo esfuerzo que realmente mejoren los Core Web Vitals.

Revisado por última vez por Arjen Karel en marzo de 2026

Los números hablan por sí solos. Según el Web Almanac de 2025, solo el 48% de los orígenes móviles aprueban los tres Core Web Vitals. La página móvil mediana pesa 2.6 MB, con 632 KB de JavaScript (de los cuales 251 KB no se utilizan). Estos son problemas que puede solucionar sin un gran presupuesto.

Consejo de Core Web Vitals: Mi On-Call Consultancy es la forma más económica de obtener ayuda experta. Reserve una sesión de 2 horas (300 €) y diagnosticaré sus problemas de Core Web Vitals, solucionaré los problemas más urgentes y le daré una estrategia clara para el resto. Me preparo antes de hablar, así que no se pierde tiempo.

¡Reserve una sesión!

1. Identifique los problemas primero

Al optimizar el rendimiento web (Web Performance) con un presupuesto ajustado, 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 usar la excelente y gratuita herramienta PageSpeed Insights para consultar los datos de CrUX. Los datos de CrUX son la única fuente de datos que importa, ya que es la fuente de datos que utiliza Google.

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

¡Permítame ser claro acerca de la auditoría de 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 no dude en explorar todas sus sugerencias, pero dado que tenemos un presupuesto limitado, nos importa aprobar los Core Web Vitals. ¡No nos importa aprobar pruebas sintéticas en este momento!

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

• Si está fallando el Time to First Byte, ¡solucione eso primero!
• Si está fallando el First Contentful Paint solucione los recursos que bloquean el renderizado (aplace los scripts y optimice los estilos)
• Si está fallando el Largest Contentful Paint priorice los recursos que necesita para ese LCP (como fuentes o imágenes)
• Si está fallando el CLS agregue ancho y alto a todas las imágenes, busque y elimine las transiciones CSS y reserve espacio para los elementos que se renderizan tarde (como anuncios, filtros de productos, etc.)
• Si está fallando el Interaction to Next Paint lo más probable es que esté usando demasiado JavaScript en el momento equivocado. Elimine los scripts y complementos innecesarios, use una herramienta RUM como CoreDash para encontrar los scripts más lentos

2. Optimice sus imágenes

Las imágenes representan 911 KB de la página móvil mediana según el Web Almanac de 2025. Eso es más de un tercio del peso total de la página. Y el 57% de las imágenes del LCP todavía se sirven como JPG cuando WebP sería más pequeño con la misma calidad. Con un presupuesto ajustado, la optimización de imágenes le brinda el mayor impacto con el menor esfuerzo.

Convierta imágenes a WebP de forma gratuita

Existen muchas herramientas, soluciones y complementos gratuitos 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.

Implemente la carga diferida (lazy loading)

La carga diferida indicará al navegador que no se debe cargar una imagen hasta que esté casi en la ventana gráfica visible. Si tiene 15 imágenes en una página y solo 3 están en la parte visible de la página, puede agregar de manera segura loading="lazy" a las imágenes que no se encuentran en la ventana gráfica visible.

Hay 2 formas de abordar esto. La primera es habilitar la carga diferida en su CMS. Esto agregará carga diferida a todas las imágenes. A continuación, consulte la documentación sobre cómo eliminar la carga diferida para las imágenes que son visibles e importantes. La otra forma es agregar manualmente loading="lazy" a las imágenes debajo del pliegue (below-the-fold). Para obtener una guía completa, consulte cómo aplazar imágenes fuera de pantalla.

<img loading="lazy" src="image.jpg" width="800" height="600">

Establezca la prioridad de obtención (fetchpriority) de la imagen

Al agregar fetchpriority="high" a una etiqueta de imagen, le indicamos al navegador que esta imagen es más importante que otras imágenes y debe descargarse primero. Y aunque existen mejores formas que incluyen la precarga de imágenes y las 103 Early Hints, ¡establecer el fetchpriority es simple, rápido y efectivo! Simplemente identifique la imagen más importante en su página, edite la plantilla y agregue fetchpriority="high" a la imagen:

<img fetchpriority="high" src="image.jpg" width="800" height="600">

3. Arregle la caché de su navegador

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. Sin los encabezados de almacenamiento en caché adecuados, los visitantes recurrentes descargan las mismas imágenes, scripts y hojas de estilo una y otra vez. Eso es ancho de banda desperdiciado y tiempo perdido.

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

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

Mientras edita el archivo .htaccess, habilite también la compresión GZIP. Esto comprime los recursos basados en texto (HTML, CSS, JavaScript) antes de enviarlos al navegador. En la mayoría de los sitios, esto reduce el tamaño de transferencia entre un 60 y un 80%.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript
  AddOutputFilterByType DEFLATE application/javascript application/json
</IfModule>

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

4. Considere Cloudflare (incluso el plan gratuito ayuda)

Incluso en el plan gratuito, Cloudflare le brinda muchas de las características importantes de rendimiento. Si tiene un alojamiento económico, cambiar su DNS a Cloudflare es uno de los cambios de mayor impacto y menor esfuerzo que puede realizar. Para un tutorial detallado, consulte la guía de configuración completa de Cloudflare.

En el plan gratuito

1. DNS rápido. Los servidores DNS de Cloudflare son gratuitos y probablemente superen a los servidores DNS de su proveedor de alojamiento económico. Los datos de CrUX del Web Almanac de 2025 muestran que solo el 44% de los orígenes móviles tienen un buen TTFB. Un DNS lento es un contribuyente común, y cambiar a Cloudflare soluciona esto instantáneamente.
2. HTTP/3 y Brotli. 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 al menos un 10%.
3. Almacenamiento en caché del navegador consistente. Cloudflare tiene un sólido historial en lo que respecta al almacenamiento en caché de recursos estáticos. La configuración predeterminada probablemente sea mejor de lo que tiene ahora mismo.
4. Caché perimetral (edge caching) para recursos estáticos. Cloudflare almacenará en caché versiones de sus recursos estáticos como imágenes, scripts y archivos CSS y los entregará 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 aplazará la carga de scripts y manejará las complicaciones que surjan de ello. Es un método tosco, pero si no puede aplazar los scripts manualmente, esto probablemente mejorará las métricas de renderizado como Largest Contentful Paint. Nota: Rocket Loader utiliza API de navegador obsoletas y PageSpeed Insights puede marcarlo. Si ve esas advertencias, considere aplazar sus scripts manualmente en su lugar.

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 permitirse y está dispuesto a gastar en un sitio más rápido, probablemente debería considerarlo.

1. Todas las funciones gratuitas. Obviamente, el plan pro viene con todas las funciones 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 la optimización de sus imágenes. Cloudflare convertirá y almacenará en caché imágenes en formato WebP y las servirá solo a los visitantes que acepten estos formatos.

5. Autoaloje todo lo que pueda

Otra optimización simple y efectiva es autoalojar los recursos estáticos. En muchos sitios, los recursos estáticos están alojados en CDN externas. Por ejemplo, jQuery está alojado en https://code.jquery.com/, Bootstrap está alojado en https://cdn.jsdelivr.net y sus fuentes están alojadas en https://fonts.googleapis.com. Entiendo el atractivo. Estas CDN se presentan como fáciles y rápidas, pero usarlas en realidad es una mala idea y ralentizará su sitio.

La idea de usar una CDN compartida para este tipo de archivos era sólida cuando los navegadores aún podían compartir estos archivos entre sitios web. Esos días ya pasaron. 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. Para fuentes específicamente, consulte cómo autoalojar Google Fonts.

6. Aplace sus scripts

Un gran cuello de botella pueden ser los scripts de bloqueo en la cabecera (head) de la página. ¡Estos scripts a veces pueden retrasar la carga de la página hasta en 20 segundos! El Web Almanac de 2025 encontró que solo el 15% de las páginas móviles aprueban la auditoría de recursos que bloquean el renderizado. Eso le da una idea de lo generalizado que es este problema.

Aplazar estos scripts no es nada difícil. Solo agregue defer a la etiqueta del script y habrá terminado. Si puede, ¡haga esto! Edite la plantilla y cambie su script así:

<!-- antigua etiqueta de script de bloqueo -->
<script src="script.js"></script>

<!-- nueva etiqueta de script aplazada -->
<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 dado que tiene un presupuesto ajustado, 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 aplazar sus scripts y busque errores (presione Ctrl+Shift+I en Chrome y verifique la pestaña de la consola). ¡Si no hay problemas después de la prueba, usted es uno de los pocos afortunados! Si hay problemas, debe recurrir a una de las siguientes soluciones. Para obtener la imagen completa, consulte 16 métodos para aplazar JavaScript.

Use Rocket Loader

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

Use un complemento (plugin)

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

7. Optimice sus fuentes

Las fuentes web son un costo de rendimiento oculto en sitios con presupuesto ajustado. La página mediana carga 122 KB de archivos de fuentes según el Web Almanac de 2025. Si sus fuentes se cargan desde Google Fonts, está realizando búsquedas DNS y conexiones TCP adicionales en cada primera visita.

Dos soluciones gratuitas:

1. Autoaloje sus fuentes. Descargue los archivos de fuentes, colóquelos en su propio servidor y cárguelos desde allí. Esto elimina la sobrecarga de conexión a fonts.googleapis.com y fonts.gstatic.com.
2. Agregue font-display: swap. Esto le dice al navegador que muestre texto en una fuente de respaldo (fallback) inmediatamente mientras se descarga la fuente web. Sus visitantes ven el contenido más rápido y evita el problema del texto invisible. Para ver la estrategia completa, consulte cómo arreglar el texto invisible durante la carga de fuentes web.

8. Almacenamiento en caché, almacenamiento en caché, almacenamiento en caché

Cuando tiene un presupuesto ajustado 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 alto Time to First Byte. El almacenamiento en caché se puede hacer en diferentes niveles.

Caché del lado del cliente: Configure su servidor web para indicar a los navegadores que almacenen en caché la mayor cantidad de recursos estáticos posible. Esto disminuirá la carga en su servidor. (Vea el ejemplo de .htaccess en la sección 3).

Caché de objetos (Object cache): La caché de objetos se puede usar para almacenar datos que pueden ser costosos de regenerar computacionalmente, como el resultado de consultas complejas a bases de datos. Pídale a su proveedor de alojamiento que instale Redis o Memcached.

Caché de página completa (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.

9. Tome decisiones de alojamiento estratégicas

Cuando se trata de alojamiento, vale la pena buscar y el alojamiento 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 un aprendiz de todo es maestro de nada. Busque un alojamiento que incluya PHP 8+, HTTP/2 y almacenamiento SSD como mínimo. Un buen alojamiento de WordPress con esos elementos básicos superará a un alojamiento compartido genérico en todo momento.

10. Monitoree su rendimiento

Todas estas optimizaciones no valen nada si no sabe si realmente funcionaron. Configure Real User Monitoring para que pueda ver cómo experimentan su sitio los visitantes reales, no solo cómo lo puntúa Lighthouse en un laboratorio. Las puntuaciones de laboratorio son útiles para la depuración, pero los datos de campo de los visitantes reales es lo que utiliza Google para clasificar. CoreDash rastrea los Core Web Vitals de usuarios reales y le dirá exactamente dónde se encuentra.