Conocimientos sobre la velocidad web: cómo abordarla prácticamente
La velocidad web ha evolucionado en los últimos años de ser una mera curiosidad técnica a convertirse en un campo plenamente desarrollado. Influye en las conversiones, el SEO e incluso en el costo de la publicidad, y cuenta con sus propias métricas (Core Web Vitals), herramientas y conferencias. Pero, ¿cómo orientarse en medio de todo esto?
En PageSpeed.ONE, a través de años de consultoría, hemos recopilado métodos que funcionan repetidamente. Los compartimos aquí en forma de artículos, estudios de caso y listas de verificación. Sin disertaciones teóricas, solo números concretos y procedimientos.
Elija el tema que necesita abordar de manera práctica:
¿Por qué la velocidad web?
Psicología, conversiones y Google. ¿Por qué también debería interesarte un sitio rápido?
¿Por qué monitorear?
Medir la velocidad ocasionalmente no es suficiente. Sin un monitoreo continuo de la velocidad, no se detectarán problemas ocultos, no se tendrá un historial de datos para análisis y se pueden pasar por alto tendencias que podrían costarle a tu sitio web conversiones y visitantes.
Elemento LCP
Para optimizar LCP, es fundamental identificar el "elemento LCP", que es el elemento más grande en la parte visible del navegador.
Optimización de CLS
Exploremos juntos cómo evitar los problemas con CLS y cómo solucionarlos cuando ya hayan ocurrido.
Optimización de LCP
Exploremos juntos los problemas que puede presentar la métrica Largest Contentful Paint (LCP) y cómo optimizarla de manera más efectiva.
Optimización de INP
La INP no es precisamente la métrica más sencilla de optimizar, por eso hemos seleccionado los problemas más comunes y cómo resolverlos.
BFcache
La caché de retroceso/avance (o BFcache) es una optimización del navegador que permite una navegación instantánea hacia atrás y adelante. Mejora significativamente la experiencia de navegación, especialmente para usuarios con redes o dispositivos más lentos.
Compresión Gzip y Brotli
En PageSpeed.ONE a menudo discutimos problemas muy específicos. Aun así, me sigue sorprendiendo el nivel de detalle al que llegamos. Lo mismo ocurre con la compresión de datos, que exploraremos en este artículo.
Tipos de Navegación
Conocer los diferentes tipos de navegación es crucial, ya que algunos son mucho más rápidos que otros. El objetivo desde la perspectiva de la optimización de velocidad web es mover el máximo de usuarios hacia los tipos de navegación rápidos.
Reglas de Especulación
El API de Reglas de Especulación nos ofrece la posibilidad de precargar, o incluso pre-renderizar, otra página. De esta manera, podemos lograr una carga casi instantánea de la página a la que el usuario navega, mejorando así su experiencia general en la web.
Cloudflare
Cloudflare actúa como intermediario entre tu sitio web y sus visitantes. A diferencia de una CDN común (Red de Entrega de Contenidos), no es solo un sistema para distribuir imágenes y archivos.
Optimización de Webfonts
El mundo de las fuentes web es como un salón de belleza: todos queremos lo mejor, pero no siempre estamos dispuestos a esperar a que el estilista termine su trabajo. ¿Y tus visitantes? Ellos son especialmente impacientes.
Optimización del DOM
Una estructura de página grande e ineficiente (Modelo de Objeto de Documento, o DOM) puede ralentizar significativamente tu sitio web y afectar negativamente las métricas de Core Web Vitals. Mantenerla en un tamaño razonable y lo más eficiente posible es absolutamente crucial para el rendimiento técnico general de tu proyecto y afectará la velocidad de respuesta de las interacciones (métrica INP).
Carga diferida de imágenes
Recomendamos la carga diferida de imágenes y otros elementos como uno de los métodos básicos y al mismo tiempo muy efectivos para optimizar la velocidad de carga de la página. Le recomendamos posponer conservadoramente la carga de todas las imágenes fuera del primer viewport. Tenga cuidado de aplicar la carga diferida a las imágenes que son elementos LCP, ya que esto puede empeorar la velocidad.
CLS: ¿Cómo mantener la altura?
En este texto aprenderás por qué y cómo es necesario asegurarse de las dimensiones de los elementos que se insertan de forma asíncrona en la página, como elementos <img>, <iframe> o componentes de JavaScript, a nivel de HTML o CSS.
Web Vitals en navegador
Core Web Vitals son métricas que utilizamos para evaluar el rendimiento de las páginas web en áreas como la velocidad de carga, la interactividad y la estabilidad del diseño. Estas métricas son cada vez más importantes para garantizar una buena experiencia de usuario y Google las utiliza como uno de los criterios para el posicionamiento en los resultados de búsqueda.
INP y setTimeout()
El método utilizando la función setTimeout() sirve para optimizar tareas largas en JavaScript que bloquean interacciones del usuario y deterioran métricas como Total Blocking Time (TBT) o Interaction to Next Paint (INP), que es una parte crucial de Core Web Vitals.
Optimización de imágenes
Incluso ustedes, simples mortales, pueden domar sus imágenes y hacer que trabajen a su favor, no en su contra. Solo necesitan usar WebP o AVIF, comprimir bien y no olvidar la carga diferida.
Optimización de React
React es una herramienta popular para el desarrollo de sitios web modernos, pero la velocidad y la interactividad no siempre están garantizadas. En este artículo, presentamos técnicas clave para optimizar Core Web Vitals, desde la hidratación hasta <Suspense> y el manejo del DOM, y le mostramos cómo utilizarlas para acelerar sus proyectos de React.
Optimización de Vue.js/Nuxt.js
Mejora la velocidad de tu sitio web Vue.js con SSR, carga diferida y otros consejos. Un rendimiento superior significa usuarios más satisfechos y mejores conversiones.
Optimización del Backend
El backend juega un papel crucial en la optimización de la velocidad web, ya que una correcta optimización del código y el servidor puede eliminar retrasos que a menudo surgen en el procesamiento de solicitudes y la entrega de contenido.
Optimización de la velocidad de WordPress
La velocidad del sitio web no es solo un detalle estético, es un factor crucial que afecta el éxito de tu negocio en línea. Un WordPress lento a menudo se debe a una mala elección de plugins, plantillas voluminosas o falta de conocimiento sobre la optimización de velocidad del sitio.
Optimización de Shoptet
Shoptet es rápido, siempre que no lo frenes. Te mostramos cómo optimizar la velocidad: qué perjudica, qué ayuda y cómo vigilar tu tienda.
Barras de cookies y velocidad
¿Tienes optimizada la velocidad de tu web? Excelente, pero quizás aún no has implementado la barra de cookies.
HTML <head> y velocidad
Te gusta WebExpo y te gusta el rendimiento. Además, nos gusta Harry Roberts porque sus charlas y artículos siempre profundizan.
Imágenes WebP
La velocidad de carga de una página web suele depender de unos pocos segundos. El formato de imagen WebP puede ser tu arma secreta para ahorrar kilobytes y acercarte al rendimiento óptimo.
Imágenes AVIF
El formato AVIF ofrece una compresión aún mejor que WebP. Veamos cuándo tiene sentido utilizarlo y cómo implementar un fallback para navegadores más antiguos.
Estudio: Chats y velocidad
El chat en vivo es utilizado por el veinte por ciento de los operadores de tiendas en línea checas. Pero, ¿cómo afectan estos componentes a la velocidad del sitio web?
Estudio: ¿CSS uno o varios?
En el equipo de PageSpeed.ONE, hay varias discusiones "perennes" en las que no todos estamos de acuerdo. Una de las preguntas eternas es: ¿es más rápido tener muchos archivos CSS pequeños divididos por componentes, o uno grande?
Synth vs. CrUX vs. RUM
Aclaremos las diferencias entre los distintos tipos de medición de velocidad web. Hablemos de la sintética («synth»), datos de usuarios de Google («CrUX») y datos de todos los usuarios («RUM»).
Chrome UX Report (CrUX)
Chrome UX Report (CrUX) es un conjunto de datos públicos proporcionado por Google que recopila y analiza de forma anónima datos sobre la experiencia real del usuario al navegar por la web utilizando el navegador Chrome.
Google Search Console
Cómo interpretar los datos de velocidad web y Core Web Vitals en Google Search Console. Guía práctica para desarrolladores, especialistas en marketing y propietarios de sitios web: dónde encontrar los informes, cómo interpretarlos correctamente y qué limitaciones tiene GSC.
Presupuestos de rendimiento
Los presupuestos de rendimiento son una metodología que ayuda a mantener la velocidad de las páginas web en el nivel que definimos. Imaginemos el "presupuesto" como un límite de valores para diferentes métricas.
Lighthouse Diff
Lighthouse Diff es una herramienta para la comparación visual de dos informes de Lighthouse. Ayuda a descubrir qué cambió específicamente en el sitio web: desde la puntuación general hasta las métricas y las recomendaciones individuales.