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
330
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
Mengukur dan meningkatkan performa website
mazipan
1
160
Testing JavaScript
mazipan
0
110
Membuat Website Zaman Sekarang
mazipan
0
410
Kinerja Web 101 - Edisi 2022
mazipan
1
360
Bagaimana implementasi mockup design
mazipan
0
380
Memulai karir sebagai web programmer
mazipan
0
650
Membuat laporan kecepatan web untuk blog
mazipan
0
440
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
430
Menjadi web developer di masa pandemi
mazipan
0
470
Other Decks in Programming
See All in Programming
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
180
Some more adventure of Happy Eyeballs
coe401_
2
190
How to Break into Reading Open Source
kaspth
2
210
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
630
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
Ruby Parser progress report 2024
yui_knk
2
230
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
Jakarta EE meets AI
ivargrimstad
0
390
Jakarta EE meets AI
ivargrimstad
1
520
API Platform for Laravel
dunglas
0
320
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Statistics for Hackers
jakevdp
794
220k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Infographics Made Easy
chrislema
239
18k
Code Review Best Practice
trishagee
62
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
We Have a Design System, Now What?
morganepeng
48
7.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
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.