[Resolved] first input delay

[olusegun]

hello guys i am trying to reduce the time for the first input delay for my site to get below 100ms and i have been reading alot of text on how to improve this figure but i have got nothing special.
But i want to attain is to make the header part of my site render faster than the content of my page. what i mean is how to structure the css so it rendering the header regardless of the content.
From my observation it seems my website waits for all css to load before rendering while i want it to load in splits

[Tom]

Hi there,

I’m not too sure I understand. All of your CSS should load before the HTML, so as your HTML loads, it should all be styled and ready to go.

You can look into critical CSS, but you’ll likely need a plugin to achieve that.

[olusegun]

yes tom, when i used chrome dev tool to analyze my site under coverage i found that my site loads a whole lot of css that are not needed in the rendering of the current page (reds) so its increasing fid. I am using swiftperformance for cache and i decided to turn on critical css just as you adviced, it increased the total page load speed but it didnt reduce to fid(first input delay) its still above 100ms

[David]

Hi there,

PageSpeed insights reports that 95% of your site visitors experience a <100ms FID. Which i can’t see getting much better then that. In addition FID is measured against actions that require JS so minimizing CSS load would not reduce the FID.

[Author]

Posts