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
370
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
68
Mengukur dan meningkatkan performa website
mazipan
1
190
Testing JavaScript
mazipan
0
120
Membuat Website Zaman Sekarang
mazipan
0
460
Kinerja Web 101 - Edisi 2022
mazipan
1
420
Bagaimana implementasi mockup design
mazipan
0
440
Memulai karir sebagai web programmer
mazipan
0
700
Membuat laporan kecepatan web untuk blog
mazipan
0
490
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
480
Other Decks in Programming
See All in Programming
DROBEの生成AI活用事例 with AWS
ippey
0
130
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Honoとフロントエンドの 型安全性について
yodaka
4
250
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
GAEログのコスト削減
mot_techtalk
0
110
技術を根付かせる / How to make technology take root
kubode
1
240
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Rails Girls Zürich Keynote
gr2m
94
13k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Writing Fast Ruby
sferik
628
61k
The Language of Interfaces
destraynor
156
24k
Docker and Python
trallard
44
3.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
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.