1. Home
  2. Forums Index
  3. Browser Side / CSS 11:19 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Why Do elements Move And Text "Blink" During Loading?

         

Planet13

8:23 pm on Nov 17, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Ok, got another mystery:

When I am viewing a particular site, elements tend to move and / or change change colors while the page is loading.

This is more noticeable in firefox than in opera or chrome (have not mustard up the courage to look at it in IE).

For instance, a header that is styled in my child-theme style sheet will appear with the styling from the MAIN style sheet, then after a quarter second, will blink to the color that is defined in the child-theme style sheet.

I know this is kind of wordpress specific, but I thought someone here might let me know if there are things outside of the way wordpress loads style sheets that might be affecting this.

My child-theme style sheet IS loaded after the main theme style sheet. It is not huge, either: only 14k

The main style sheet, on the other hand (which loads first) is nearly 300k in size.

And I double checked and my child-theme style sheet is only being called once.

Is it because I am on DSL and the site is on a kind of slow server?

Or did my CSS break the internets?

Arrgghh... Is a Winky-frown ;( a legitimate emoticon, anyone?

not2easy

10:19 pm on Nov 17, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Have you validated your css? That would let you know if it has errors and what they are. It is not necessarily your css, but it is a suspect along with many other factors. It generally means less than ideal conditions at both ends of the request. If your connection speed and computer are all working right, it can be blamed on the site and its images and its external images, blame the host too, and the order of loading (and since it is WP) blame plugins too.

Before deciding what to blame, first be sure it is repeatable. It can happen during momentary server burps due to totally unrelated things and clear up on its own in 5 minutes. This can happen at the host end or in some setups, in the room next to your computer where someone is busy downloading a video.

If it is repeatable and it happens regularly on your site, there are lots of ways to narrow it down, the fast and easy way is to go to one of the site speed checkers. They will point out the delays and the causes for each little delay. It sounds like there is undue delay in loading your css or images. If you use LiveHeaders you can use the results to help see where it is too slow.

lucy24

11:27 pm on Nov 17, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The main style sheet ... is nearly 300k in size.
Excuse me while I pick my jaw off the floor. Three hundred kilobytes? For a stylesheet? My fattest one-- involving a whole slew of different color choices in one directory-- is 10k.

I realize this is a CMS, but isn't there some alternative? Please say "300" was a typo for "30".

graeme_p

4:48 am on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



It sounds like a variant on the "flash of unstyled content" problem.

Possible solutions:

1) @import the child style sheet
2) load javascript (in the <head>) after the child style sheet.
3) find some way of merging the style sheets into one.
3)

Planet13

6:24 am on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@ Lucy24:

"Excuse me while I pick my jaw off the floor."

Yeah, that is what I thought. But I didn't want to sound like a noob (just in case a 300k style sheet is NOT something to be worked up about.)

Actually, there are a few other style sheets called as well by the main theme, so that brings it up to about 350k + my 14k style sheet.

BTW: Did I mention the functions.php file is 300k as well?

;(

Planet13

7:30 am on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@ not2easy:

"Have you validated your css?"

I am only getting one css error (and a handful of warnings). The error relates to some columns, and it is this:

162 .group Property zoom doesn't exist : 1

And here is the line of css that it pertains to:

.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

As for the warnings, there are 28 of them that are (more or less) like this:

293 Property -webkit-border-radius is an unknown vendor extension
293 Property -webkit-font-smoothing is an unknown vendor extension
293 Property -moz-osx-font-smoothing is an unknown vendor extension

"...the fast and easy way is to go to one of the site speed checkers. ..."

I went to one and they said:

Perf. Grade: 84/100
Requests: 37
Load Time: 1.84s
Page Size: 1.4mb

They state that this site is faster than 74% of all the sites out there.

The biggest files are the main them style sheet at almost 300k, jquery ver. 1.11.1 at 94k, custom.js?ver=2.2 at 98k, and it looks like some TTFs at almost 100k.

there are a couple of photos I could whittle down from around 80K to about 60k, but that's where the main bulk of the site is coming from.

lucy24

8:01 am on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You can ignore any validator blips involving vendor extensions. These are, by their nature, not supposed to be recognized by an all-purpose validator.

Do you really need a property that is only recognized by MSIE <= 7?

I don't suppose there's much you can do about functions.php. This is intrinsic to WP isn't it? Personally I get antsy when a file of any kind passes 50k, and seriously agitated if it passes 100k. Then again, it gives me the willies when any non-page file (besides big pictures) is fatter than the HTML itself. Not to say it doesn't happen.

some TTFs at almost 100k.

More than one? That's a hell of an overhead. Are custom fonts really needed? It may or may not be practical to strip down the file: if a font is only used for headers, it shouldn't need much more than ASCII plus some punctuation. You might also tweak the CSS so for example bold and non-bold share the same physical file (sometimes useful in headings).

roshaoar

10:16 am on Nov 18, 2014 (gmt 0)

10+ Year Member



I've seen this when I define an element in too many ways in a css file. Ie through div#, but also p, p selector then p with a couple of classes on there. they all inherit from each other and I guess there's a point at which the browser holds up its hands and says whoah too much, refresh and it'll all be good.

graeme_p

10:25 am on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Jquery gzips down to 32kb (assuming its minified) so if your server gzips it, its not too bad.

functions.php is not sent to the browser, so I would not worry about it.

I do not see how the problem can be invalid CSS - that would fail to change the colour, rather than change it after a delay surely?

Does anything else load between the main css and the child css? Have you tried that nice water fall view that FF gives you (Ctrl-shift-Q on Linux) or the web console (ctrl-shift-K).

Planet13

2:55 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@ Lucy24

"You can ignore any validator blips involving vendor extensions. These are, by their nature, not supposed to be recognized by an all-purpose validator."


Good to know. Thanks for clarifying that for me.

"Do you really need a property that is only recognized by MSIE <= 7?"


Probably not, no. I will see about removing it (it came with some CSS column code I took off the net).

I am sure that if I knew what I were doing, I would have removed it.

"I don't suppose there's much you can do about functions.php. This is intrinsic to WP isn't it?"


Yeah, it is intrinsic. Actually, it is based on a theme-by-theme level, so one theme might have a functions.php file of only 10k. This particular theme has a built in "drag and drop" layout feature.

"More than one?"


Well, technically, it is just one call to a .tff

"/wp-content/themes/Divi/fonts/ETmodules_v2.ttf" at 101k

There are 8 requests to fonts.gstatic.com for .woff files though, at about 40k each, so that is another 320k. And I guess that kind of makes me dependent on how much the .gstatic.com server likes me, huh?

Far and away the slowest loading INDIVIDUAL piece is the built-in style.css file (as in built into the theme), which as mentioned, is just under 300k (there are a total of 8 css files loaded, and none of them are from plugins, so I can't just disable a plugin and reduce the amount of css being loaded).

I could - in theory - hack it down.

But the way wordpress is set up, when you do an update of the theme (for security reasons, or for an added feature), it writes over EVERYTHING, including the style sheet that you so meticulously carved down to improve load times.

Hence, you are STRONGLY encouraged to create a child theme (basically, a second style sheet that gets loaded after the native style sheet, to override the default styes).

So modifying the style sheet leads to short-time gain and long-term pain.

Planet13

2:58 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@ roshaoar

I've seen this when I define an element in too many ways in a css file. Ie through div#, but also p, p selector then p with a couple of classes on there. they all inherit from each other and I guess there's a point at which the browser holds up its hands and says whoah too much, refresh and it'll all be good.


Thanks for the heads up about this.

Is there a relatively easy way to see if I have done this?

When I look at the css insepctor, I do see lots of entries that are struck through. Don't know if that means anything though.

Planet13

3:13 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@ graeme_p

Thanks for the responses!

Jquery gzips down to 32kb (assuming its minified) so if your server gzips it, its not too bad.


I will have to see if there is a way to do this. I don't think the server that this site is on does it automatically though.

Does anything else load between the main css and the child css? Have you tried that nice water fall view that FF gives you (Ctrl-shift-Q on Linux) or the web console (ctrl-shift-K).


Thanks for the suggestion to use the waterfall view. I had never seen it before.

It is a little bit hard for me to tell for certain since I am new to the waterfall view, but the DEFAULT css file SOMETIMES seems to be the first thing to load (meaning, the bar that represents the default css file starts furthest to the left). Then there are 6 other css files (all part of the default theme) that get loaded, and then my child css gets loaded.

But sometimes it looks like the default theme css gest loaded a little bit later (just before my child css gets loaded). So it appears that sometimes the other 6 css files get loaded, then the default theme css (at nearly 300k), then my style sheet (at 14k)

Load times for the whole page vary quite a bit - between 4.5 seconds up to 17 seconds. Most of the loads I have done ave been in the 5 to 9 second range.

Planet13

3:28 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Just breaking it down using the profiler in firefox:

Total CSS = 407k

Total JS = 312k

Total Images (15 images) = 238k

HTML = 41k

Fotiman

3:31 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



What about minimizing the CSS? There are Wordpress plugins that will minify CSS.

Fotiman

3:33 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



And minimizing the JavaScript as well.

not2easy

3:51 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I use a Minimizer app and it cuts back 20 - 22% on average. But those are little 7k css files to start with. The larger the file is to start, the higher % reduction a minimizer offers.
Warning: if your process is: edit > minimize > upload, keep the mini versions separate as they are very hard to edit in the minimized format. If you are working in the WP editor, save a copy before you start and after you complete your edits so editing it later doesn't become a nightmare.

Planet13

5:04 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@ Fotiman:

What about minimizing the CSS? There are Wordpress plugins that will minify CSS.

Thanks for the suggestion. I have been looking into it this morning.

I see there are a couple out there. My concern is whether it might affect google analytics or google ADWORDS scripts.

I have seen reports of both - affecting and NOT affecting those reporting scrips, and I don't know which to believe.

@ not2easy:

Thanks for the note, and for the warning.

not2easy

7:07 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



For most of their javascripts, Google offers "asynchronous" versions of their scripts. Don't bother minimizing those, just go get the correct version. Google says asychronous javacript does not slow page loading.

I haven't tried a plugin for minimizing, but if the choice is all or nothing I would look for one that lets you have settings. The bad part of using a lot of plugins is that you have no control over their resource handling.

Planet13

7:17 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@ not2easy:

thanks for the tips. Ok, I will look for either a plugin that allows me to select which files to minify, or I will try to figure out how to do it by hand.

Thanks again.

lucy24

7:34 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I thought about the minifying question too. But honestly, if the file starts out at 300k, it can't possibly minify below about 250k and that's still insanely oversized.

The flip size of the MSIE <= issue is ... embedded fonts aren't even recognized by earlier MSIE versions, are they? For a long time they only used .otf but finally had to cave in and accept ordinary .ttf. I hope the browser at least has the sense not to download files it can't use.

:: insert trite witticism about use of "MSIE" and "sense" in the same paragraph ::

not2easy

9:22 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Minimizers can take out a lot - how much depends on the overhead in the original. At 300kb I would guess a lot of overhead in the form of
/* For IE 6/7 (trigger hasLayout) */
- comments and reminders.

The snippet mentioned above: 
.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

would condense to: 
.group{zoom:1}

for about 75% reduction. Not that I would count on getting 75% out of every line.

Planet13

11:49 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks for the suggestion.

I tried an online compressor, and unfortunately it reduced the main theme style sheet by only 11% (from 298K down to 267K).

I think one of the problems is that it is supposed to be "ready" to work with a popular wordpress shopping cart system (don't know if I am allowed to mention it here specifically), so it looks like there is a whole bunch of css that is in the style sheet JUST IN CASE you one day desire to use that shopping cart in your theme (I guess so that the styling will be consistent).

Why didn't the theme designers make that optional instead of mandatory?

BillyS

11:56 pm on Nov 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I use a popular CMS that uses Bootstrap as its template framework. I think Bootstrap's css is around 187K or so. After removing all of the "bells and whistles" that I don't use and compressing, I got it down to 27K.

Planet13

12:08 am on Nov 19, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks for the suggestion, Billy.

Unfortunately, bootstrap isn't an option for this site.

It has a built-in drag and drop functionality for layout, which is part of the theme itself.

Fotiman

12:40 am on Nov 19, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@BillyS
bootstrap.min.css = 113k
bootstrap.theme.min.css = 20k
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:19 am May 1, 2026