Inline CSS for Burger Menu

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.

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?

.. 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

Your screenshots aren't loading - can you double check them?

ok sry - they should work now

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?

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

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 ;)

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?