- This topic has 9 replies, 2 voices, and was last updated 3 years, 3 months ago by Tom.
February 4, 2018 at 12:38 pm #487944Vision64 GmbH & Co KG
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
UweGP Premium 1.5.6February 4, 2018 at 10:47 pm #488139TomLead DeveloperLead Developer
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.February 5, 2018 at 12:37 am #488162Vision64 GmbH & Co KG
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:
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?February 5, 2018 at 5:41 am #488283Vision64 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:
“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.
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 😉
UweFebruary 5, 2018 at 9:28 am #488587TomLead DeveloperLead DeveloperFebruary 5, 2018 at 9:44 am #488596Vision64 GmbH & Co KG
ok sry – they should work nowFebruary 5, 2018 at 8:33 pm #489075TomLead DeveloperLead Developer
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?February 6, 2018 at 8:03 am #489523Vision64 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.
UweFebruary 6, 2018 at 3:01 pm #489915Vision64 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 😉February 6, 2018 at 9:14 pm #490077TomLead DeveloperLead Developer
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?
- You must be logged in to reply to this topic.