Thread by @joaocunha

THREAD: 1 RT = 10 consejos de #Performance ⚡️

Versión en 🇪🇸!

Vamos? 👇 #webperf

1. 👀 @SpeedCurve fue la mejor herramienta que encontré para ayudar a crear una cultura de performance a través del monitoreo. Él te da los insights, apunta cuales son los principales problemas de forma automatizada — e incluso los compara con los competidores.

2. 🔡 A veces la mejor estrategia de font-loading es no cargar ninguna fuente: el tal “System Font Stack”:

iPhone = San Francisco
Android = Roboto
Linux = Ubuntu
Windows = Segoe UI

… y así por el estilo. ¡Experiencia nativa para todo el mundo!

3. 💈 Las animaciones son un excelente recurso para ganar tiempo mientras se carga algo. Ese concepto se llama “Espera activa” y hablo más sobre él en mi talk sobre Psicología de la Performance (adelante hasta 15:30): es.eventials.com/Globalcode/eve…

Lee también: smashingmagazine.com/2015/09/why-pe…

4. 🗺 Use herramientas como el Request Map Generator de @simonhearne para auditar los scripts de terceros (analytics, ads, etc) en su site.

Por ejemplo, este es el mapa de requests del Amazon.

5. ♿️ Ella también es una herramienta de ética y accesibilidad. Tenemos el privilegio de ingresar a la web a través de conexiones rápidas e ilimitadas, pero esa no es la realidad de la mayoría. YouTube alcanzó nuevas poblaciones cuando se hizo más ligero.

blog.chriszacharias.com/page-weight-ma…

6. Use los Resource Hints para precargar assets o “calentar” la conexión en background.

👀 ‘dns-prefetch’ hace un lookup en el DNS
📦 prefetch cargas un asset
🤝 ‘preconnect’ hace el handshake
🖥 ‘preload’ carga a la página de destino entera

medium.com/reloading/prel…

7. 🧠 ¡Siga mi lista de especialistas en Web Performance en Twitter para mantenerse al día!

twitter.com/joaocunha/list…

8. 📏 Con el Size Limit se puede saber qué libs son las “big offenders” del tamaño total de su bundle JS. Se puede hasta colocar en su pipeline de CI (Jenkins, Travis, etc.) para que muestre error cuando pase de un cierto límite.

github.com/ai/size-limit

9. 🏹 Tenga un Performance Budget. Puede parecer contraproducente al inicio, pero te va a ayudar a definir de manera clara lo que se debe incluir y remover de su stack o de 3rd-party scripts.

10. 📊 Conozca las principales métricas de performance de renderización: FCP, FMP, TTI, FID y otras siglas son muy importantes y necesitan ser seguidas de cerca.

medium.com/@addyosmani/th…

11. 🖼 100KB de JS “pesan” hasta 100x más que 100KB de una imagen. Mientras una imagen necesita pasar por procesos de decode, rasterize y paint (proceso rápidos), el JS pasa por parse, compile y execute que son mucho mas costosos.

(image por @addyosmani)

12. 📱 Incluso sobre el JS, el tiempo de procesamiento en un celular mediano (MotoG4) es SEIS VECES MAYOR que en un iPhone 8. En un celular de entrada (ALCATEL1X), e VEINTIÚN VECES MAYOR. Salgan de la burbuja personal a la hora de testear la usabilidad.

(image por @addyosmani)

13. 🤓 A la hora de testear, tenga en cuenta quién usa el producto. Priorice los perfiles de usuarios y usuarias más populares. Es sólo ingresar en Google Analytics:

Público → Dispositivos Móviles → Dispositivos.

Verá una lista parecida a esta.

14. 🥳 ¿Sabe qué pasa cuando hace clic en “like” de Twitter? La respuesta visual aparece incluso antes de la API ser consultada. Trabaje como si todo fuese a salir bien, removiendo estados intermediarios —  el nombre de ese concepto es Optimistic UI.

smashingmagazine.com/2016/11/true-l…

15. 🛣 Siga el padrón PRPL:

👉 P: Push los recursos críticos para la ruta de la URL inicial
👉 R: Render la ruta inicial
👉 P: Pre-cache las otras rutas
👉 L: Lazy-load el resto y cree rutas restantes on-demand

developers.google.com/web/fundamenta…

16. 🚂 Ya que todo aquí son siglas, aproveche para seguir el modelo RAIL:

👉 R: Response (feedback en menos 100ms)
👉 A: Animation (60fps = 16ms por frame)
👉 I: Idle (estado intermediario, bloques de 50 ms)
👉 L: Load (FMP el más rápido posible)

smashingmagazine.com/2015/10/rail-u…

17. 🌳 Use Tree shaking para eliminar dead code de la aplicación. Todos los module bundlers populares (Webpack, Parcel, Rollup, etc) ya ofrecen ese feature.

developers.google.com/web/fundamenta…

18. 🔗 Active el Scope Hoisting en el Webpack. Él va a identificar cadenas de imports que pueden ser convertidas en una función inline sin comprometer el código.

medium.com/webpack/brief-…

19. 🔪 Haga Code Splitting de su bundle. La “regla de oro” era reducir todo en un único archivo JS, pero eso está lejos de ser ideal. Envíe lo que la persona necesita solamente cuando lo necesita. Eso es hecho con Dynamic Importing  — mira la promise:

hackernoon.com/lessons-learne…

20. 🧹 De la misma forma que puede hacer Tree Shaking en JS, puede usar herramientas como el UnCSS para remover selectores CSS que no son utilizados, algo muy común en bases de código grandes o en component libraries.

github.com/uncss/uncss

21. 🔥 Hablando de CSS, ahí va una controversia: optimizar selectores CSS pensando en performance es inútil. No se puede prever el impacto porque el engine del browser reorganiza, divide, colecta y compila los selectores de manera imprevisible.

benfrain.com/css-performanc…

22. 😔 "¡Santo cielo, João, es tanto que no se por dónde empezar!"

☝️ ¡Comience por el @____lighthouse! Los reports son muy intuitivos y ya muestran varios “pastos altos” para cortar.

23. 🔡 Se puede reducir bastante el tamaño de una fuente usando la técnica de Font Substetting: remueva los caracteres desnecesarios/ilegibles/de otros alfabetos.

thenewcode.com/878/Slash-Page…

24. 🔡 Cuando se usa custom fonts es importante pensar en la estrategia de carga para evitar el FOIT (Flash Of Invisible Text). Aquí va una guía de @zachleat con algunas estrategias (“FOUT with a class” es mi favorita).

zachleat.com/web/comprehens…

25. 👨‍🚀 Hablando de @zachleat, él es la persona que más admiro en el tema de Web Fonts. Èl escribió casi 50 artículos — cuando tenga una duda cobre el asunto, de una hojeada a ese link que su duda probablemente ya fue respondida. You rock, Zach!

zachleat.com/web/fonts/

26. 🖼 A pesar de que el WebP ofrece un tamaño de archivo menor que el JPEG, este no dispone de progressive loading — o sea, a veces la percepción de performance puede ser inferior. Más allá de eso, es más complejo de ser implementado en función del soporte. Testee con cariño! 💛

27. 🚫 Cuando vaya a trabajar con JPEGs, use siempre MozJPEG y habilite progressive loading. No use JPEG-XR en la Web porque no salió bien: o decode trabaja en la main thread junto con el JS y traba todo.

calendar.perfplanet.com/2018/dont-use-…

28. 🖼 Cargue las imágenes debajo de la primera dobla con lazy load. Existen algunas técnicas: placeholder fixo, placeholder de color dominante, versión de baja calidad (LQIP/SQIP), etc. El @Medium usa LQIP.

Aprenda como hacerlo:
imagekit.io/blog/lazy-load…
y
developers.google.com/web/fundamenta…

29. ⏱x🧠 El tiempo puede ser dividido de dos maneras: Objetivo y Subjetivo. El primero es medible como un reloj, mientras el segundo es la percepción de como este transcurre. Estudios del @NNgroup muestran que hay métricas de tiempo subjetivo también.

smashingmagazine.com/2015/09/why-pe…

30. ⚡️ Sea 20% más rápido que su principal competidor. Existe un concepto interesante na Psicofísica llamado “Umbral diferencial” que determina a partir de qué punto el cerebro percibe diferencias. En tiempo, ese gatillo es de aproximadamente 20%.

smashingmagazine.com/2015/09/why-pe…

31. 🐌 ¿Sabía que puede simular 3G y reducir la velocidad del procesador para testear su site como se fuese en un dispositivo antiguo? En la pestaña “Performance” de Chrome Dev Tools, haga clic en el engranaje y altere las configuraciones.

32. 🌍 Browsers ofrecen recursos que adicionan el request header “save-data: on”. Puede identificar eso en el server y en el front-end y ofrecer una experiencia más liviana. Pero acuérdese: Más liviana no significa menos features, y sí otra experiencia.

developers.google.com/web/fundamenta…

33. Siguiendo con el “save-data”, algunos consejos de lo que se puede hacer:

🔡 Remover custom fonts
🙈 Remover imágenes irrelevantes
🖼 Servir imágenes em menor resolución
🗺 Cambiar mapas interactivos por estadísticos
📊 Remover herramientas como HotJar y Optimizely

34. ⏯ Use los atributos ASYNC y DEFER para cargar el JS. Con ellos la carga de la página continúa mientras el browser baja el asset, pero en el async él es interrumpido en la ejecución y en el defer la ejecución es pospuesto para después de la carga.

flaviocopes.com/javascript-asy…

35. 💁‍♀️ Con la lib Perfume.JS podrá medir el First Paint, el First Contentful Paint y el First Input Delay. Este muestra la performance de los componentes en la timeline del Dev Tools y envía resultados para Google Analytics si usted lo quiere.

zizzamia.github.io/perfume/

¡Gracias por leer hasta aquí! Perdona si el español está mal traduzido, fue mi primer intento 🙇🏻‍♂️

🇪🇸 Y se prefiere leer en otro formato, publiqué también en @Medium: medium.com/@joaocunha/35-…

Compile los 35 consejos en un Moment :)

twitter.com/i/moments/1089…