Issue With Search Options Loading

[jesseslam]

Hi,

When navigating between pages of the website for a split second a large drop down appears below the search box showing all the search options in the header do you know how we can stop this from happening?

Regards,

James Isles

[Ernest Marcinko]

Hi!

It’s extremely hard to tell unless I see the problem.

I believe this might be an example of Flash of unstyled content. It basically happens when the browser parses the HTML faster, than loading the CSS files, and it displays the content unstyled for a split second. I believe some solutions exist to this issue, but it’s not plugin related.

I might be wrong though. If you have an url to look at, then I might be able to tell more.

[jesseslam]

I put the url in the ticket details can you not see it? This is the domain http://www.duracomposites.com/.

[Ernest Marcinko]

Okay, thank you!

The problem is exactly what I was suspecting. I looked at the page source and some CSS is printed as inline into the site header – which is all right, it should not cause the flash. However there is lots of other plugin CSS in the site footer. I see rev slider and other plugin CSS there as well.

If you look closely you can also see the logo and the button styles flash if empty the browser cache.

The cause might be a cache or CSS minification plugin possibly. Pushing CSS into the site footer makes your site faster, however it may also cause a flash of unstyled content. Try to re-configure the cache/minification plugin to print the CSS to the site header, it should solve this problem.

[jesseslam]

OK great thanks Ernest I’ll give that a try.

[jesseslam]

I’ve had a play and can’t see to fix the issue. We are using W3 Total Cache with Memcache enabled on our server, do you have any idea as to which setting we need to stop this happening?

[Ernest Marcinko]

I believe it’s going to be W3TC. It has a minify option where I think you can define where to put the minified CSS.

Try to disable W3TC and test it by refresh your homepage by pressing CTRL + SHIFT + R a few times on google chrome or firefox. If the site “flashing” doesn’t stop, then it’s something else.

[Author]

Posts