WebPerf CSS PageSpeed Css :not Pseudo Elements (bad)

Brad393 · Nov 15, 2020

PSA, don't chain them together like :not(.class1):not(.class2):not(.class3). It kills your styling/layout time on mobile tests lighthouse/pagespeed insights where CPU is limited and can make it look like other stuff is taking a long time and block more than it really is. WPT iOS also improved well after the removal of those. I had two rules with like 5 or so :not or :not or :not etc.... Yeah probably was stupid to do that but I am a total amateur and it seemed the efficient way CSS wise at the time for what I was doing.

It took me a while to figure out that was the performance problem. Now that I rewrote the rules to instead target all the things I want only instead of too many things and then :not the things I didn't want, I am getting much improved times overall for FCP and blocking time because style and layout was over 2500ms sometimes before on PageSpeed Insights.

eva2000 · Nov 15, 2020

Thanks for the heads up though CSS isn't my wheel house

Another one related to CSS is CSS Containment Helping Browsers Optimize With The CSS Contain Property — Smashing Magazine

The CSS Containment Specification defines a single property, contain, and it can help you to explain to the browser which parts of your layout are independent and will not need recalculating if some other part of the layout changes.

While this property exists for performance optimization reasons, it can also affect the layout of your page. Therefore, in this article, I’ll explain the different types of containment you can benefit from, but also the things you need to watch out for if applying contain to elements in your site.

The Problem Of Layout Recalculation
If you are building straightforward web pages that do not dynamically add or change elements after they have loaded using JavaScript, you don’t need to worry about the problem that CSS Containment solves. The browser only needs to calculate your layout once, as the page is loaded.

Where Containment becomes useful is when you want to add elements to your page without the user needing to reload it.
Click to expand...

Log in / Register

Forums

Learn about Centmin Mod LEMP Stack today

WebPerf CSS PageSpeed Css :not Pseudo Elements (bad)

Brad393 New Member

eva2000 Administrator Staff Member

.

Log in / Register

Useful Searches

Learn about Centmin Mod LEMP Stack today

WebPerf CSS PageSpeed Css :not Pseudo Elements (bad)

Brad393 New Member

eva2000 Administrator Staff Member

.