Navigation menu appears unformatted briefly before page load

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Agiss's picture

Hi all, I am using the MMenu library for both the Navigation and User menus. I've noticed that sometimes, depending on connection speed and browser, the Navigation Menu appears unformatted briefly before the page load. I am not using the MMenu module instead have embedded it directly in my theme. Has anyone experienced this before?

Please see attached screenshots, you can also view this live at www.swapific.co.uk

Cheers
Agis

AttachmentSize
Unformatted-before-page-load.png45.53 KB
Full-page-load.png338.79 KB
formatted-after-page-load.png221.38 KB

Comments

AdvAgg might be able to help here

mikeytown2's picture

If you inline critical css that might help with the menu flashing. Here's a guide on how to get a higher score with AdvAgg
https://groups.drupal.org/node/517292

You are loading a lot on your frontpage
http://www.webpagetest.org/result/180102_J4_1c779b69ece4674c19418009798a...
This shows what you're seeing
http://www.webpagetest.org/video/compare.php?tests=180102_J4_1c779b69ece...

Google Page Speed also complains about the site
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%...

Thanks Mikey, I will try

Agiss's picture

Thanks Mikey, I will try inline CSS.

I am actually using AdvAgg, awesome library, cheers for that. I also have implemented, most, of the How to get a higher score with AdvAgg guide. Unfortunately some the recommended JS settings breaks the site- I am working on it.

Indeed there's a lot loading on the front page, more than half of the requests are images- I am on a proccess to combine them into one file and control image positions with CSS.

Cheers

HTTP 2

mikeytown2's picture

I am on a proccess to combine them into one file and control image positions with CSS.

If I where you I'd spend time on getting H2 working as there's a lot of connections and it's so much easier to do vs image sprites
http://www.webpagetest.org/result/180102_J4_1c779b69ece4674c19418009798a...
https://geekflare.com/http2-implementation-apache-nginx/