Volver

Velocidad y Rendimiento

Lista de verificación

Imágenes - dimensiones ¿Las imágenes se redimensionan para que pesen menos? Por ejemplo, pasar de 2000x2000 a 1000x1000, 800x800, 500x500, etc. Esto mejora los tiempos de carga.
Imágenes - compresión ¿Las imágenes se comprimen para que pesen menos? Por ejemplo, pasar de 500 KB a 100 KB o menos. Esto ahorra ancho de banda.
Imágenes - vectorización ¿Se vectorizan imágenes como logos, íconos, formas, separadores? Los gráficos vectoriales son ligeros y mantienen nitidez al escalarse.
Imágenes - formato ¿Se utilizan formatos de última generación como WebP o AVIF? Estos formatos ofrecen mejor compresión que PNG o JPG.
Imágenes - carga diferida ¿Se utiliza el atributo loading=lazy en imágenes que se encuentran desde la mitad de la página hacia abajo? Esto ahorra ancho de banda.
Imágenes - versiones ¿Se entregan distintas versiones de la imagen según el dispositivo utilizado? Esto se puede hacer con CDNs como Cloudinary, o utilizando picture, srcset y sizes.
Reservar espacio ¿Se reserva el espacio correcto para elementos multimedia como imágenes, videos, iframe? Usar width, height o aspect-ratio reduce el CLS (Cumulative Layout Shift).
Videos - poster ¿Se utiliza el atributo poster en videos? Esto permite cargar una portada mientras el video no inicia.
Minificación ¿Se minifican los archivos CSS y JavaScript si es posible? Esto reduce el tamaño de los recursos y mejora los tiempos de carga.
CSS inutilizable ¿Se realiza un escaneo del CSS que no se utiliza para poder quitarlo? Esto se hace desde: Herramientas de desarrollo / Cobertura. Se recomienda hacerlo desde una ventana de incógnito.
@import ¿Se evita la declaración @import en CSS? Esto mejora la velocidad de carga de la página.
defer o async ¿Se cargan los scripts con defer o async según sea necesario? Estos atributos permiten que los scripts se carguen de forma no bloqueante.
preload ¿Se utiliza preload para cargar recursos críticos? Esto acelera el tiempo hasta que el recurso esté disponible.
fetchpriority ¿Se utiliza el atributo fetchpriority cuando es necesario? Esto permite aumentar la prioridad de carga de un recurso.
Recursos de terceros ¿Se aplican técnicas para minimizar el impacto de recursos de terceros como videos de YouTube y Vimeo, mapas de Google, widgets, etc? Por ejemplo, mostrando una fachada hasta que el usuario interactúe.
Fuentes - formato ¿Se utilizan formatos ligeros como WOFF2? Esto reduce el peso de las fuentes.
Fuentes - cantidad ¿Se utilizan pocas fuentes en el sitio? Preferiblemente una o dos para reducir el tiempo de carga.
Fuentes - precarga ¿Se precargan las fuentes con preload o preconnect? Esto agiliza su descarga.
Fuentes - crossorigin ¿Se utiliza el atributo crossorigin al cargar las fuentes? Esto mejora la carga de las fuentes.
Totalidad de recursos cargados ¿Se verifica cuántos recursos carga la página? Esto se hace desde: Herramientas de desarrollo / Red / Actualizar. Se recomienda hacerlo desde una ventana de incógnito.
Pruebas de red ¿Se realizan pruebas simulando distintas conexiones de red? Esto se hace desde: Herramientas de desarrollo / Red / 4G rápido, 4G lento, 3G / Actualizar. Se recomienda hacerlo desde una ventana de incógnito.