Thread by @fmontes

¿Mal performance en tu #webapp o #paginaweb?

13 tips rápidos, fáciles y accionables para mejorar el #webperf

❤️ RT para repartir amor!

🧵 HILO

📊 Lo que no se mide no lo puedes arreglar.

Tienes que medir la performance de tu website.

Mis tools favoritas:

@____lighthouse
@gtmetrix
@pingdom Speed Test

Usa las recomendaciones en los resultados para mejorar.

@____lighthouse @gtmetrix @pingdom 🌄 Imágenes 1

Usa el tamaño correcto, si tienes que mostrar la imagen en 300px de width no metas una imagen de 5000px que pesa 5mb te afecta la performance.

@____lighthouse @gtmetrix @pingdom 🌄 Imágenes 2

Usa el formato correcto para reducir el tamaño sin perder calidad:

- webp
- O en su defecto JPG (pero mejor webp)
- Y pronto avif cuando esté soportado

@____lighthouse @gtmetrix @pingdom 🌄 Imágenes 3

Nunca olvides agregarle width y height para que el navegador ya sepa el espacio de la imagen que tiene que descargar y renderear.

Esto evitar "Layout Shift" o brincos en él UI que es mal #UX y Google te penaliza

@____lighthouse @gtmetrix @pingdom 🌄 Imágenes 4

Utiliza el atributo "lazy". Este atributo le dice al navegador NO cargue las imágenes al aparecer en la pantalla cuando el usuario haga scroll hacia ellas.

@____lighthouse @gtmetrix @pingdom 🌄 Imágenes 5

Herramientas:

🔻 squoosh .app: comprime tamaño del archivo
🐼 tinypng .com: resize, crop y comprime
☁️ cloudinary .com: alojamiento con muchas opciones

@____lighthouse @gtmetrix @pingdom 💻 JavaScript 1

Cargar archivos de #JavaScript es un proceso "pesado" y bloquea el renderizado de tu página, porque el browser tiene que:

1. Detener el análisis del HTML
2. Descargar el archivo JavaScript
3. Ejecutar el código JavaScript
4. Seguir con el análisis HTML

@____lighthouse @gtmetrix @pingdom 💻 JavaScript 2

Por eso es que el primer tip y más simple es:

Cargar el archivo JavaScript al final de tu documento justo antes de cerrar el </body>

Esto, solo si es posible para tu caso de uso.

@____lighthouse @gtmetrix @pingdom 💻 JavaScript 3

Para bloquear lo menos posible el proceso del browser puedes usar dos atributos en la etiqueta <script> cuando cargas tu JavaScript

- async
- defer

Sigue...

@____lighthouse @gtmetrix @pingdom 💻 JavaScript 4

<script src="file.js" async />

El archivo se descarga de forma asíncrona, sin bloquear el render y se ejecuta inmediatamente al terminar la descarga.

Sigue habiendo un bloqueo.

@____lighthouse @gtmetrix @pingdom 💻 JavaScript 5

<script src="file.js" defer />

El archivo se descarga de forma asíncrona, sin bloquear el render, pero se ejecuta hasta el final del análisis del HTML.

No hay bloqueo.

@____lighthouse @gtmetrix @pingdom 💻 JavaScript 6

Una regla general para usar async o defer:

async cuando el código JavaScript interactúe con elementos del DOM antes de que todo el documento esté cargado y parseado (evento DOMContentLoaded) y defer cuando no.

@____lighthouse @gtmetrix @pingdom 🔷 VSCode 1

La extensión de Import Cost te permite ver mientras programas si una librería o archivo que estás importando a tu #webapp es muy pesada.

Sí, es muy pesada...

@____lighthouse @gtmetrix @pingdom 🔷 VSCode 2

Para arreglarlo, de ser posible

1. Importa solo lo que vas a usar y no toda
2. Si es una utilidad, créala internamente en tu proyecto
3. Reemplázala, busca otra alternativa.

@____lighthouse @gtmetrix @pingdom 💥 Extra "Priority Hints"

Google está trabajando en una nueva API que te permite señalarle al browser la prioridad (o importancia) de los recursos que carga la página para que el browser decida mejor.

Todavía falta para que salga, pero viene en camino.

@____lighthouse @gtmetrix @pingdom 🔖 En resumen:

1. Mide
2. Imágenes comprimidas y width / height
3. Controla la carga del JavaScript

@____lighthouse @gtmetrix @pingdom ❤️ Si te gustó este contenido ayúdame con un RT al primer tweet.

Si quieres lucirte en las entrevistas tengo dos libros que te ayudan: fmontes.com/99 o 99.tips

🌅 En mi Instagram comparto tips sobre diseño, desarrollo y empleos.

instagram.com/fmontes