Menu not loading fast enough – How to optimize?

1 Views

When viewing this dev site on a mobile, the menu doesn’t appear to load very quickly, leaving a white space right at the top of the site. The JS is loaded in the header (and minified), and all others scripts in the footer so am not sure what the issue or fix is.

Your advice and input is greatly appreciated.

Read More

Link: http://website-test-lab.com/sites/fm/

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. Further to the answer from @atmd: you’re using JS (specifically site-scripts-min.js) to handle your media queries. This is what’s making the menu slow. It looks like it’s loading fast enough, but isn’t executing immediately. Without digging through it all, my first guess is that it’s bound to the document.ready event, which means it waits until everything is loaded before it gets to work. You can either refactor the JS so that it fires earlier, or – my recommended solution – would be to use CSS media queries instead of JS.

  2. The site is taking 4 seconds for me on desktop, so I can imagine it being slow on mobile.

    the main slowdown for me was the mp3 file. This should be lazy loaded after all the other content.

    Also, you have a lot of scripts that can be combined into 1/2. All you scripts can (and should) be loaded in the footer too. I see you are using wordpress, disable any plugins you dont need as they can really slow a site down

    You can easily add html elements once the rest of the page has loaded on a doc ready:

    $(function () {
    var audio = document.createElement('audio');

       [set up audio attributes]   

    var audioContainer = [some other div etc]
    audioContainer.appendChild(audio);
});