Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. ¡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
  2. CSS, como imagen de fondo • Usar media queries con

    distintas imágenes • Distintos recortes • Distintos tamaños • … Menor peso para mobile
  3. 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>
  4. 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