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
350
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
4
Mengukur dan meningkatkan performa website
mazipan
1
170
Testing JavaScript
mazipan
0
110
Membuat Website Zaman Sekarang
mazipan
0
430
Kinerja Web 101 - Edisi 2022
mazipan
1
390
Bagaimana implementasi mockup design
mazipan
0
410
Memulai karir sebagai web programmer
mazipan
0
670
Membuat laporan kecepatan web untuk blog
mazipan
0
470
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
450
Other Decks in Programming
See All in Programming
Click-free releases & the making of a CLI app
oheyadam
2
120
cmp.Or に感動した
otakakot
3
200
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
RubyLSPのマルチバイト文字対応
notfounds
0
120
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
flutterkaigi_2024.pdf
kyoheig3
0
150
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
Jakarta EE meets AI
ivargrimstad
0
210
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Code Review Best Practice
trishagee
64
17k
Site-Speed That Sticks
csswizardry
0
28
Making Projects Easy
brettharned
115
5.9k
Typedesign – Prime Four
hannesfritz
40
2.4k
RailsConf 2023
tenderlove
29
900
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Docker and Python
trallard
40
3.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Faster Mobile Websites
deanohume
305
30k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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.