Total Browser Processing Time
Time To First Layout
Layout Rendering Time
CSS Processing Time
CSS Calculations
Javascript Execution Time
Javascript Event Listeners
CSS Calculations
Target Less than 300 calculations
Like taking the time to mix new paint for each brush stroke
CSS calculations are required to style elements, like background colors, fonts, paddings and margins.
The more CSS that is evaluated on a page, the slower it will perform.
More CSS calculations will slow down layout rendering and re-rendering. Re-rendering can happen when elements are resized, scrolls occur, or third-party apps inject elements into the DOM to be rendered after initial page load.
Re-renders and recalculations should be considered silent killers of page performance.
