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
88
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
Good intentions gone bad
evaferreira
0
140
Bulletproof your Design System
evaferreira
0
86
Tales of Accessibility Failures
evaferreira
0
33
Tales of Accessibility Failures
evaferreira
0
160
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
110
Take on me
evaferreira
3
540
Video edition with CSS & JavaScript
evaferreira
1
240
Other Decks in Programming
See All in Programming
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
How to use Macrobenchmark
veronikapj
0
160
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
CSC307 Lecture 14
javiergs
PRO
0
220
20240706_CDKConf
takuyay0ne
0
1.2k
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Featured
See All Featured
Making Projects Easy
brettharned
111
5.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
It's Worth the Effort
3n
181
27k
Happy Clients
brianwarren
94
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Agile that works and the tools we love
rasmusluckow
325
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Typedesign – Prime Four
hannesfritz
37
2.2k
What's new in Ruby 2.0
geeforr
338
31k
The Invisible Side of Design
smashingmag
294
50k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
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!