Mobile content stops displaying when I inline and defer CSS

[Zetland]

I recently installed the Autoptimize plugin and signed up with CriticalCSS to generate the CSS for the above-the-fold content. This improved my PageSpeed score and worked really well for the desktop version – but for the mobile version it stopped the content below the header from displaying.

When I asked the CriticalCSS author about it, he couldn’t find why the mobile content below the header wouldn’t display, but sent me this:

“I don’t see any difference for mobile, however your site hides all your main content in the html, and only shows in when JavaScript loads, due to this css rule:

#title-area .inner, #custom-title-area .inner, #content, .sidebar-right-nav, .sidebar-left-nav {
opacity: 0;
}

You would be much better removing it and showing your users your site content as soon as possible (on the first render).”

Do you know how I can do this? I can’t find that exact code in my style.css file (there’s a similar one without “opacity: 0;”). Do you also know why deferring my CSS might be hiding the mobile content too?

Thanks

vocularapp.com

[Raghavendra]

If you disable smooth load and animations on the page(general tab of theme options), the above code mentioned should not trigger.

Also, pls disable rev slider and check if that resolves the issue. I see on some pages have produced console errors and this could be the root cause of this issue.

[Zetland]

Thanks for your response. I’ve just done both of those things, although weirdly now when I ‘inline and defer CSS’ none of the content shows for any version – desktop or mobile. Any idea why this might be happening…? Sorry for such a difficult one…

[Raghavendra]

Hard to debug this. I see now that your site is back. Need to simulate this to know if I can help – a temp login and instructions to simulate this issue would help. Thanks.

[Zetland]

[quote quote=26550]Hard to debug this. I see now that your site is back. Need to simulate this to know if I can help – a temp login and instructions to simulate this issue would help. Thanks.

[/quote]

Sure, could I email you a temp login?

[Zetland]

I mean, could you send me an email address that I could use to send you a temp password?

[Veena]

You can share the temp login here itself as a private msg . You should tick the box “set as private reply” while replying.

[Zetland]

This reply has been marked as private.

[Veena]

We ll get back to you shortly on this.

[Zetland]

Thanks. Any luck yet?

[Raghavendra]

This reply has been marked as private.

[Zetland]

Well, I appreciate the effort anyway. I’m only doing this to improve my PageSpeed score and, therefore, my Google ranking. And inlining and deferring my CSS did improve the score quite a lot. Thanks for your help.

[Raghavendra]

That is a worthy goal to pursue – hope you will be able to meet the same without these extensive tweaks. Wish you the best with your site.

[Author]

Posts