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

CSS Performance

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Giacomo "Giko" Zinetti Giacomo "Giko" Zinetti
November 24, 2015
Programming
2
82

CSS Performance

Slides for the first meetup of Frontend in Milan
Presentazione per il primo meetup di Frontend a Milano
November, 24th 2015

Avatar for Giacomo "Giko" Zinetti

Giacomo "Giko" Zinetti

November 24, 2015
Tweet

More Decks by Giacomo "Giko" Zinetti

See All by Giacomo "Giko" Zinetti
Super Smooth Animations
Avatar for Giacomo "Giko" Zinetti gcmznt
1
100
Cmd Alt I - Chrome Dev tools
Avatar for Giacomo "Giko" Zinetti gcmznt
0
76
ES2015 new features
Avatar for Giacomo "Giko" Zinetti gcmznt
0
54
CSS from the future
Avatar for Giacomo "Giko" Zinetti gcmznt
0
38
Web performance & Http2
Avatar for Giacomo "Giko" Zinetti gcmznt
0
59
CSS variables
Avatar for Giacomo "Giko" Zinetti gcmznt
2
110

Other Decks in Programming

See All in Programming
AIに任せる範囲を安全に広げるためにやっていること
Avatar for Masashi Fukuzawa fukucheee
0
140
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
Avatar for n4mlz n4mlz
0
150
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記：那些困在 Alpha 加護病房太久的 Metrics
Avatar for ChengHao Yang tico88612
0
200
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
200
new(1.26) ← これすき / kamakura.go #8
Avatar for utagawa kiki utgwkk
0
2.4k
Docコメントで始める簡単ガードレール
Avatar for Keisuke Ikeda keisukeikeda
1
120
[SF Ruby Feb'26] The Silicon Heel
Avatar for Vladimir Dementyev palkan
0
110
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
Avatar for Mitsui maroon8021
3
980
AI 開発合宿を通して得た学び
Avatar for ニフティ株式会社 niftycorp
PRO
0
130
OTP を自動で入力する裏技
Avatar for Megabits_mzq megabitsenmzq
0
110
エラーログのマスキングの仕組みづくりに役立ったASTの話
Avatar for Kenichi Shihota kumoichi
0
230
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
270

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
42
3.8k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.5k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
110
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
140
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
130
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
88
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
410
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.1k
How to make the Groovebox
Avatar for あそなす asonas
2
2k

Transcript

  1. CSS PERFORMANCE 24 NOVEMBRE 2015 FRONTEND MILANO MEETUP

  2. GIACOMO "GIKO" ZINETTI NERD FRONTEND WEB DEVELOPER @GIACOMOZINETTI

  3. PERFORMANCE Qualcosa da misurare Target / Riferimento

  4. PARLANDO DI CSS Velocità scroll Velocità trasformazioni

  5. MISSION: 60FPS 1 FRAME = 16.66MS

  6. FRAME The pixel pipeline

  7. STRUMENTI Devtools Timeline con Capture Paint Paint flashing

  8. DEMO TIME

  9. TRASFORMAZIONI Ridurre le operazioni del browser COME? Transform e Opacity

    evitano le fasi di Layout e Paint

  10. SCROLL Sfruttare i layer Supporto della GPU, ma non troppo

    COME? will-change: transform; transform: translateZ(0);

  11. RISULTATO Miglior UX Consumi minori

  12. BONUS window.requestAnimationFrame(callback); window.requestIdleCallback(callback);

  13. None

  14. LINKS Performance exercise Rendering performance | Web Fundamentals CSS Triggers

    requestAnimationFrame requestIdleCallback

  15. THANK YOU #perfmatters @giacomozinetti