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
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
VS Code Update for GitHub Copilot
74th
2
650
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Team operations that are not burdened by SRE
kazatohiei
1
310
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
ニーリーにおけるプロダクトエンジニア
nealle
0
840
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
XP, Testing and ninja testing
m_seki
3
250
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
Code Reviewing Like a Champion
maltzj
524
40k
Bash Introduction
62gerente
613
210k
Rails Girls Zürich Keynote
gr2m
95
14k
GraphQLとの向き合い方2022年版
quramy
49
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Ace a Technical Interview
jacobian
278
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
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.