Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
De 45 a 85
Search
Eva Ferreira
July 29, 2020
Programming
0
83
De 45 a 85
Charla de web performance para Women Who Code - Buenos Aires
Eva Ferreira
July 29, 2020
Tweet
Share
More Decks by Eva Ferreira
See All by Eva Ferreira
Bulletproof your Design System
evaferreira
0
69
Tales of Accessibility Failures
evaferreira
0
30
Tales of Accessibility Failures
evaferreira
0
140
La accesibilidad de todos los días - HackAcademy
evaferreira
0
110
Rescue the Dead Horse
evaferreira
0
120
Oda a la década++
evaferreira
1
96
Take on me
evaferreira
3
530
Video edition with CSS & JavaScript
evaferreira
1
210
Take on me - NationJS
evaferreira
1
190
Other Decks in Programming
See All in Programming
Ruby製社内ツールのGo移行
bgpat
2
270
マイ隙間家具OSSたちのご紹介
karupanerura
2
160
設計の知識と技能で駆動するソフトウェア開発
masuda220
PRO
18
11k
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
5
2.4k
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
3
1.4k
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
5
1.1k
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
Introduction for Open Source Swift Workshop
giginet
PRO
0
290
Featured
See All Featured
The Invisible Side of Design
smashingmag
293
49k
Side Projects
sachag
451
41k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Designing for Performance
lara
601
67k
Documentation Writing (for coders)
carmenintech
59
3.8k
How to name files
jennybc
62
92k
BBQ
matthewcrist
78
8.7k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Clear Off the Table
cherdarchuk
82
310k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Transcript
De 45 a 85 Performance en el Front-end
¡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
Performance “Que tu sitio carga rápido”
Performance • Conexión a Internet • Tipo de dispositivo
Auditando performance Firefox o Chrome
Análisis avanzado WebPageTest.org
¿Por qué 45 a 85?
https://hitrecord.org/records/1682099
None
✨ 5 recomendaciones ✨
1. Fuentes
Usar font-display: swap;
@font-face { font-family: Test; src: url(fuente.woff) format('woff'); font-display: swap; }
h1 { font-family: Test, sans-serif; }
Grupos de fuentes • Serif • Sans-Serif • Monospace •
Cursive
Cursive Comic Sans es la alternativa para los tipos de
fuente “Cursive”
Google fonts
None
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
None
2. Imágenes responsive
None
None
Imágenes • Como fondo, desde CSS • En HTML, con
la etiqueta <img>
CSS, como imagen de fondo • Usar media queries con
distintas imágenes • Distintos recortes • Distintos tamaños • … Menor peso para mobile
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>
None
None
3. Realmente achicar las imágenes
None
https://tinypng.com/
Webp https://developers.google.com/speed/webp
https://siipo.la/blog/is-webp-really-better-than-jpeg
Usando webp con <picture> <picture> <source srcset="logo.webp" type="image/webp"> <img src="logo.png"
alt="logo"> </picture>
None
4. Mejor que performance, es aparentar performance
None
None
None
None
None
None
None
None
None
♥Firefox ♥ Color picker
None
Mención especial
Lazy loading https://www.smashingmagazine.com/2018/01/deferring-lazy-loading- intersection-observer-api/
https://css-tricks.com/native-lazy-loading/
None
5. Mantener una buena performance
https://motherfuckingwebsite.com/
Medir performance a través del tiempo https://web.dev/measure
None
Mejoras (o no) a través del tiempo
None
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
¡Gracias!