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
Layout Repaint & The Lessons Learned
Search
Irfan Maulana
January 03, 2022
Programming
0
390
Layout Repaint & The Lessons Learned
The lessons learned from the real case we face related with layout repainting problem on the web
Irfan Maulana
January 03, 2022
Tweet
Share
More Decks by Irfan Maulana
See All by Irfan Maulana
Panduan untuk mempublikasikan kode ke publik
mazipan
0
87
Mengukur dan meningkatkan performa website
mazipan
1
190
Testing JavaScript
mazipan
0
130
Membuat Website Zaman Sekarang
mazipan
0
470
Kinerja Web 101 - Edisi 2022
mazipan
1
430
Bagaimana implementasi mockup design
mazipan
0
460
Memulai karir sebagai web programmer
mazipan
0
710
Membuat laporan kecepatan web untuk blog
mazipan
0
500
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
490
Other Decks in Programming
See All in Programming
Vibe Codingをせずに Clineを使っている
watany
7
1.8k
国漢文混用体からHolloまで
minhee
1
120
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.6k
エンジニア未経験が最短で戦力になるためのTips
gokana
0
240
JavaOne 2025: Advancing Java Profiling
jbachorik
1
320
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
250
Going Structural with Named Tuples
bishabosha
0
180
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
14
2.9k
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
4
1.4k
DomainException と Result 型で作る型安全なエラーハンドリング
karszawa
0
830
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
270
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
1.3k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
45
14k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
360
Side Projects
sachag
452
42k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
Speed Design
sergeychernyshev
28
870
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How GitHub (no longer) Works
holman
314
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Ace a Technical Interview
jacobian
276
23k
Transcript
Layout Repaint & The Lessons Learned Irfan Maulana Principal Engineer
Web Platform, Tokopedia Semarang
mazipan.space
Loading Performance Lighthouse CLS LCP Speed Index TTI TTFB
Runtime Performance DevTools FPS CPU Usage Main Thread GC
Pixel Pipeline
Visual Change Trigger (JS/CSS) Common pixel pipeline Style Calculation Layout
Paint Composite
How to debug?
Paint Flashing On Chrome DevTools
Timeline on Safari
Recommendation
Recommendations 1. Optimize JavaScript Execution 2. Reduce the Scope and
Complexity of Style Calculations 3. Avoid Large, Complex Layouts and Layout Thrashing 4. Simplify Paint Complexity and Reduce Paint Areas 5. Stick to Compositor-Only Properties and Manage Layer Count 6. Debounce Your Input Handlers
Lesson Learned
None
Unnecessary Rendering See: https://codesandbox.io/s/aloha-css-uyox7 Problems: - Box repainting on sliding
- Hello3 & Hello4 unnecessary repaint Hints: - Stacking context - will-change
Infinite hidden animation See: https://codepen.io/mazipan/details/gOGLpev Problems: - Skeleton loading for
hidden element triggering repaint Alternatives: - Remove skeleton loading, or - Only show before the element will showing
JS First Problems: - Countdown timer w JS approach will
always trigger repaint for every second Alternatives: - Use CSS/SVG transition w JS for only generating the initial state
50% * Reduce more than CPU usage *On idle state
None
ksana.in/learn-render-perf
ksana.in/udacity-render-perf
Key Takeaways 1. Stick to the compositor-only props 2. Double
check your Stacking Layer 3. Check the hidden element 4. CSS First 5. Measure periodically
Thank You.