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
410
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
110
Mengukur dan meningkatkan performa website
mazipan
1
210
Testing JavaScript
mazipan
0
140
Membuat Website Zaman Sekarang
mazipan
0
490
Kinerja Web 101 - Edisi 2022
mazipan
1
450
Bagaimana implementasi mockup design
mazipan
0
480
Memulai karir sebagai web programmer
mazipan
0
730
Membuat laporan kecepatan web untuk blog
mazipan
0
520
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
510
Other Decks in Programming
See All in Programming
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
4.1k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.6k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
Featured
See All Featured
It's Worth the Effort
3n
185
28k
A Tale of Four Properties
chriscoyier
160
23k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Navigating Team Friction
lara
187
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Statistics for Hackers
jakevdp
799
220k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Thoughts on Productivity
jonyablonski
69
4.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Code Review Best Practice
trishagee
69
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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.