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

CSS Performance

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
770
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
170
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.8k
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
180
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
1.1k
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
500
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
660
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
180
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
230
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
8.5k
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
150
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
0
930

Featured

See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
77
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
520
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.9k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
490
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Between Models and Reality
Avatar for mayunak mayunak
1
180
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
930
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k

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