Want more timely Centmin Mod News Updates?
Become a Member

WebPerf CSS PageSpeed Css :not Pseudo Elements (bad)

Discussion in 'Web Development & Web Performance' started by Brad393, Nov 15, 2020.

  1. Brad393

    Brad393 New Member

    Oct 6, 2020
    Local Time:
    7:03 AM
    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 :wtf: on PageSpeed Insights.
  2. eva2000

    eva2000 Administrator Staff Member

    May 24, 2014
    Brisbane, Australia
    Local Time:
    1:03 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    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