[Resolved] Inline CSS for Burger Menu

[Vision64 GmbH & Co KG]

Hi folks.

I try to get “good mobile values” for my website.

Google Page Speed and varvy.com tell me both “Visible content not prioritized”

This happends because it takes to long to load the burger menu – screenshot:

I would like to add some inline css code in the meta-header to force the design of hamburger menu of the primary+secondary navigation.

I tested to add the the whole css inline into the header (which worked for the burger menu) but the pages are way to big then 🙁

Could you please tell me just the css code I need to swap the menu style to burger for mobile devices (resolution below 768px)?

thanks very much
Uwe

[Tom]

That screenshot looks like the style.css file isn’t loading.

I just ran your site through this system, and all looks good: https://search.google.com/test/mobile-friendly

I also tried it on my phone and didn’t get the same results as your screenshot.

[Vision64 GmbH & Co KG]

Hello Tom

thanks for getting back to me.

Yes that is right – the website loads fully and is mobile friendly overall.

But not in the first “roundtrip” which I try to solve.

Please take a look at Google Page Speed insights:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.vision64.de%2F&tab=mobile

If you click on the area “Visible content not prioritized” and then on “see screenshot” it shows my problem.

The menu is already visible after the first roundtrip but without the proper css style it takes almoste the full height of the mobile screen.

Could you tell me which css code I need to pre-load the styles inline to display both navigations as burger menu?

[Vision64 GmbH & Co KG]

.. after another couple hours of trying I give up – I can’t solve this on my own.

Need your help….:)

Here is the current status of my website http://www.vision64.de

I am using the autooptimize plugin with the settings you mentioned here:
https://generatepress.com/fastest-wordpress-theme/

Problem:
“Above the fold” problem because of the huge css file ;( … Screenshot: https://www.vision64.de/no-css-inline.png

A solution but not good:
Using the function in autooptimize to inline the all css ends up in better results but shows another problem: “Visible content not prioritized” …screenshot: https://www.vision64.de/all-css-inline.png
the whole css code is to much to load the pictures also in the first PSI roundtrip.

My need:
instead of inline all of the css code I would like just add the styles which is necessary to display the menues (header)proper.

Thanks very much 😉
Uwe

[Tom]

Your screenshots aren’t loading – can you double check them?

[Vision64 GmbH & Co KG]

ok sry – they should work now

[Tom]

They still don’t seem to be loading for me.

If you use the settings we suggest, you shouldn’t have any issues (we’re using them here on this site).

Do you have any other caching or minifying plugins activated?

[Vision64 GmbH & Co KG]

no I haven’t got any other plugins for caching active.

I published the screenshots on google now:

This with no inlince css: https://drive.google.com/file/d/1e4ARqMHTPwf7CKBg_gm81mx5WsAnVKvQ/view?usp=sharing

this is the result when I inline the whole css: https://drive.google.com/file/d/1aP2qGlznJ_JSamTJZQz2Z7PalXcwJBqi/view?usp=sharing

I can also provide you the wordpress logins if it helps.

Kind Regards
Uwe

[Vision64 GmbH & Co KG]

found a solution!

I think the problem is because I use a big featured image at the beginning of the content instead of a page-header.

When I remove the featured image or when I use a page-header instead – the google page speed values are ok.

But maybe this is something you want to take a look because I originally have not planned to use page headers 😉

[Tom]

I’m not sure I understand. Using a big featured image causes the mobile menu not to appear on first paint during that test? How big is the featured image?

[Author]

Posts