Save 37% off PRO during our Black Friday Sale! »

De 45 a 85

De 45 a 85

Charla de web performance para Women Who Code - Buenos Aires

32b23faedcb33ad2079ad33658ac56bb?s=128

Eva Ferreira

July 29, 2020
Tweet

Transcript

  1. De 45 a 85 Performance en el Front-end

  2. ¡Hola! Soy Eva • Front-end developer • Aunque a veces

    hago back-end • Organizadora CSSConf Argentina • Google Developer Expert • Mozilla Tech Speaker • Hice una capa de invisibilidad con JS • https://youtu.be/pAgDRCQLwQs
  3. Performance “Que tu sitio carga rápido”

  4. Performance • Conexión a Internet • Tipo de dispositivo

  5. Auditando performance Firefox o Chrome

  6. Análisis avanzado WebPageTest.org

  7. ¿Por qué 45 a 85?

  8. https://hitrecord.org/records/1682099

  9. None
  10. ✨ 5 recomendaciones ✨

  11. 1. Fuentes

  12. Usar font-display: swap;

  13. @font-face { font-family: Test; src: url(fuente.woff) format('woff'); font-display: swap; }

  14. h1 { font-family: Test, sans-serif; }

  15. Grupos de fuentes • Serif • Sans-Serif • Monospace •

    Cursive
  16. Cursive Comic Sans es la alternativa para los tipos de

    fuente “Cursive”
  17. Google fonts

  18. None
  19. Solo traer unas pocas letras https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello https://developers.google.com/fonts/docs/css2#optimizing_for_latency_and_file_size

  20. None
  21. 2. Imágenes responsive

  22. None
  23. None
  24. Imágenes • Como fondo, desde CSS • En HTML, con

    la etiqueta <img>
  25. CSS, como imagen de fondo • Usar media queries con

    distintas imágenes • Distintos recortes • Distintos tamaños • … Menor peso para mobile
  26. HTML, con la etiqueta <img> • Usar la etiqueta <picture>

    <picture> <source srcset="imagen-peque.png" media="(max-width: 800px)"> <img src="imagen-grande.png" alt="Texto alternativo"> </picture>
  27. None
  28. None
  29. 3. Realmente achicar las imágenes

  30. None
  31. https://tinypng.com/

  32. Webp https://developers.google.com/speed/webp

  33. https://siipo.la/blog/is-webp-really-better-than-jpeg

  34. Usando webp con <picture> <picture> <source srcset="logo.webp" type="image/webp"> <img src="logo.png"

    alt="logo"> </picture>
  35. None
  36. 4. Mejor que performance, es aparentar performance

  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. ♥Firefox ♥ Color picker

  47. None
  48. Mención especial

  49. Lazy loading https://www.smashingmagazine.com/2018/01/deferring-lazy-loading- intersection-observer-api/

  50. https://css-tricks.com/native-lazy-loading/

  51. None
  52. 5. Mantener una buena performance

  53. https://motherfuckingwebsite.com/

  54. Medir performance a través del tiempo https://web.dev/measure

  55. None
  56. Mejoras (o no) a través del tiempo

  57. None
  58. Performace en front-end 1. Fuentes con display: swap; 2. Distintas

    sources por cada dispositivo 3. Pasar tus imágenes por el panda 4. “Sensación” de performante 5. Intentar no perder lo logrado
  59. ¡Gracias!