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
99
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
Cryptography for lovers 💖
evaferreira
0
17
Bulletproof your Design system
evaferreira
0
38
Good intentions gone bad
evaferreira
0
250
Bulletproof your Design System
evaferreira
0
130
Tales of Accessibility Failures
evaferreira
0
63
Tales of Accessibility Failures
evaferreira
0
220
La accesibilidad de todos los días - HackAcademy
evaferreira
0
140
Rescue the Dead Horse
evaferreira
0
140
Oda a la década++
evaferreira
1
140
Other Decks in Programming
See All in Programming
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
400
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
120
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
0
170
Cache Me If You Can
ryunen344
1
500
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
Improving my own Ruby thereafter
sisshiki1969
1
160
Namespace and Its Future
tagomoris
6
700
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.2k
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
290
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Being A Developer After 40
akosma
90
590k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
55k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Building Adaptive Systems
keathley
43
2.7k
Practical Orchestrator
shlominoach
190
11k
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!