You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've been cleaning my CSS selectors recently because Google dropped a new metric Interaction to Next Paint(INP).
The reason why my INP was high was because in my codebase they were complicated CSS selectors that for browsers, were hard to parse.
For example something like this .rvpContainer [class*='recentlyViewedProducts-title'].
What I also found is that selectors that are common for us like *, ::before, ::after are also complicated for the browser to parse that lead to high Recalculate style. See below screenshot.
So my proposal would be, is it possible to remove these selectors from the tailwind since they are bad for the performance?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I've been cleaning my CSS selectors recently because Google dropped a new metric Interaction to Next Paint(INP).
The reason why my INP was high was because in my codebase they were complicated CSS selectors that for browsers, were hard to parse.
For example something like this
.rvpContainer [class*='recentlyViewedProducts-title']
.What I also found is that selectors that are common for us like

*, ::before, ::after
are also complicated for the browser to parse that lead to high Recalculate style. See below screenshot.So my proposal would be, is it possible to remove these selectors from the tailwind since they are bad for the performance?
Beta Was this translation helpful? Give feedback.
All reactions