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, una técnica podría ser mostrar una fachada hasta que el usuario interactúe con el recurso.
• 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.