$30 off During Our Annual Pro Sale. View Details »

De 45 a 85

De 45 a 85

Charla de web performance para Women Who Code - Buenos Aires

Eva Ferreira

July 29, 2020
Tweet

More Decks by Eva Ferreira

Other Decks in Programming

Transcript

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

    View Slide

  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

    View Slide

  3. Performance
    “Que tu sitio carga rápido”

    View Slide

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

    View Slide

  5. Auditando performance
    Firefox o Chrome

    View Slide

  6. Análisis avanzado
    WebPageTest.org

    View Slide

  7. ¿Por qué 45 a 85?

    View Slide

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

    View Slide

  9. View Slide

  10. ✨ 5 recomendaciones ✨

    View Slide

  11. 1.
    Fuentes

    View Slide

  12. Usar
    font-display: swap;

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. Google fonts

    View Slide

  18. View Slide

  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

    View Slide

  20. View Slide

  21. 2.
    Imágenes responsive

    View Slide

  22. View Slide

  23. View Slide

  24. Imágenes
    • Como fondo, desde CSS
    • En HTML, con la etiqueta

    View Slide

  25. CSS, como imagen de fondo
    • Usar media queries con distintas imágenes
    • Distintos recortes
    • Distintos tamaños
    • … Menor peso para mobile

    View Slide

  26. HTML, con la etiqueta
    • Usar la etiqueta




    View Slide

  27. View Slide

  28. View Slide

  29. 3.
    Realmente achicar las imágenes

    View Slide

  30. View Slide

  31. https://tinypng.com/

    View Slide

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

    View Slide

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

    View Slide

  34. Usando webp con




    View Slide

  35. View Slide

  36. 4.
    Mejor que performance,
    es aparentar performance

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. ♥Firefox ♥
    Color picker

    View Slide

  47. View Slide

  48. Mención especial

    View Slide

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

    View Slide

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

    View Slide

  51. View Slide

  52. 5.
    Mantener una buena
    performance

    View Slide

  53. https://motherfuckingwebsite.com/

    View Slide

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

    View Slide

  55. View Slide

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

    View Slide

  57. View Slide

  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

    View Slide

  59. ¡Gracias!

    View Slide