CSS takes split second to kick in when page loads

Is this a problem?

[TomSnow]

Hi guys,

I asked my development team to load non-essential css and java in order to get our page speed up.

This worked, but now it takes a split second for css to kick in above the fold, so users can see that bare bones view of the web page before the page fully loads.

Is this normal? Will it lead to bounce rates?

I'm assuming a higher page speed is worth the momentary glitchiness.

Thanks!

[tangor]

Is any part of that js making calls to third parties? CSS is usually pretty instant!

[not2easy]

I asked my development team to load non-essential css and java

If the "non-essential" css features are "loaded" does that mean they are not loaded with the pages? I'm afraid the "loaded" confuses me. If your styling does not kick in while the page is served, it appears they have a different concept of what "non-essential" means.

It makes sense to include essential (layout) css with the page load and then add in the details for the footer font colors and such in a separate css file but it sounds like they've removed some essential css.

Many css files are bloated, using the same fonts by name repeatedly rather than assigning a font and only adding variances to that to the specific elements where it would be used. There is nothing wrong with grouping elements to save repeating the same settings 12 times. Compacting the css files also saves loading time, it can reduce file size over 20% in some cases.

[lucy24]

non-essential css

Seems to me that if missing css has a strikingly visible effect on page display, it can hardly be called “non-essential”.

[tangor]

To me CSS is part of the render process ... java or js is an action script sometimes wrongly used for display purposes. Might check that out. I load all css at once ... then again the styles I use are pretty dirt simple, entire file is just shy of 1k.

[TomSnow]

I asked them to defer non-essential css or js where possible.

But it looks like they deferred the loading of all css.

Thanks for your tips!

[tangor]

Okay! That makes sense! Happy there was a resolution.

[TomSnow]

@tangor

Not really a solution :/

According to dev, CSS is already loaded after the page is loaded and pushed as early as possible. So it is already optimized. Unfortunately, since they have put the page images into lazy loading mode it compounded the issue.

[tangor]

Is there any particular reason for lazy load, other than a miliisecond here or there? Given the majority of connection speeds this USUALLY does not make that much difference ... and if it does, you might want to take a look at HOW many images and WHAT SIZE/RES!

Query, you are coding for responsive/mobile, right?

Observation: Eyeblink (delay) to pretty site is far better than Ugly Jumps To Pretty---which makes the site look amateur. Pick your poison and go for it!

[lucy24]

CSS is already loaded after the page is loaded

Well, it could hardly be loaded before the page is loaded.

[brotherhood of LAN]

Try put your CSS before any JS you load

[TomSnow]

Hi Tangor.

Google Page Speed Insights gave us a 30/100 score, largely because of non-essential JS and CSS loading at same time or before above the fold content, which is why we made the change.

Our score is now 70/100 and we're about 1 second load time from maybe 3 seconds.

We are aiming for better mobile performance because 90% traffic is from mobile.

@brotherhoodoflan

Will do, thanks!

[tangor]

Curious ... have you tested the speed mark with NO images included? The above are improved numbers, but still sound "slow:".

Might be time to take the graphics person to task (kind of a joke!). Note: if your JS and CSS is that large you might not be doing it right.