Website loads weird

[Saro_1]

Hi Daniweb,

I noticed that this website first loads the lists before it gets its css mark-up. Is there a way to prevent this from happening?

Thanks a lot!

[rproffitt]

There are a lot of bad sites out there. Why do you think this is yours to fix? Is it your site?

-> The link didn't work here.

[Dani]

The link is broken so I'm not quite sure what you're referring to. Perhaps prefetching the CSS in the HTTP header might help?

Further to Dani's suggestion - a nice article here on prefetching: https://css-tricks.com/prefetching-preloading-prebrowsing/

[Saro_1]

Hi guys, sorry I posted the wrong link. (Also it is a website that I'm working on, so it is mine to fix, sorry for being so unclear)

http://bit.ly/2dexmIs

I will take a look into prefetching, but maybe you still have specific explenations for why and how it happens here. It only start doing it after I changed the header design. The template is rather complex due to its responsiveness so maybe I missed some kind of markup.

Many thanks!

[Mickey_3]

You have pretty bad page loading speed. I think you need to fix some other things like add expires headers, optimize images...

Check your site with some online seo tools.

[Saro_1]

Hi Mickey,

Unfortunately the images are all saved for web and optimised but they still count towards 61% of the file loading. Regarding expires headers it's tricky because I have no access to the servers since they are hosted on Shopify.

I also have no real problem with the loading time since it's still around average, but it's the little flick in CSS that is a problem. Can you guys see the same flick of the navigation lists that gets styled?

[rproffitt]

@Saro_1. Any chance of a working URL?

[cereal]

@rproffitt hi, that bit.ly points to http://renardwatches.com/
(it seems to work for me)

[rproffitt]

@cereal, I'm using the Google DNS and Ublock Origin so I wonder. Nope, that's not it.
The bit.ly in the top post lands me at http://0391909013800000_pro_flt_frt_01_1108_1528.jpg/ which fails.

Anyhow, now that there's working links, we can get back on topic.

PS. Added with edit. I can't see an issue with the site. The images are IMO "heavy" in size so that may cause it to feel like the image load is taking so long. Also, smoking is rarely seen in modern sites today. You can debate that all you want but adverts with smokers unless you are selling smokes is best avoided.

[Saro_1]

The image from smoking is a screencap from a movie. Also, it's an european brand :) But maybe I'll suggest to photoshop in a pen instead.

Back on topic, i have managed to screenshot the problem. For a split second the webpage loads like this, which seems pretty unusual and only started happening after I made some edits to the header.

https://www.dropbox.com/s/1og3vhign7o9lnk/Screen%20Shot%202016-09-29%20at%2011.37.04.png?dl=0

I appreciate all the help!

[gentlemedia]

I think it has to do with the mobile navigation. If I resize the browser window to narrow to the point where your mobile navigation (hamburger icon) reveals, then a refresh doesn't shows the unstyled navigation flickr.

Does the mobile navigation gets populated with JS somewhere?

EDIT: I see there gets a class mobile_hiddenadded to the containing div nav, so if this is done by JS at a later point, then that's probably the cause of the flickr.

[gentlemedia]

After looking more deeper in Chrome DevTools I see that the mobile nav (off-canvas nav) is controled by the mmenu jQuery plugin which adds loads of mm- sufix classes dynamically to the HTML of the page. This takes probably longer than the rendering of the HTML of the mobile nav which causes the flickr of an unstyled mobile nav.

[Saro_1]

@gentlemedia

Thank you! I am a little bit lost on how to make sure the JS loads before the unstyled nav. Would you know where to start?

[gentlemedia]

I never did something with Shopify, so I'm not sure what's possible to do.
How much are you in control of adding or editing the core files or is there a way to override them the way like WordPress does with child themes?
Becausre I think you can solve it by wrapping the mmenu snippet (located at the top in app.js) in a document ready.

You see now this in app.js:

    $('#nav').mmenu({
        searchfield : {
            add: true,
            search: true,
            noResults: '<a href="/search?q=" class="search_link">' + "Advanced Search \u0026#8594;" + '</a>'
        },
        classes: "mm-white"
    });

Change that to:

$(function() {

    $('#nav').mmenu({
        searchfield : {
            add: true,
            search: true,
            noResults: '<a href="/search?q=" class="search_link">' + "Advanced Search \u0026#8594;" + '</a>'
        },
        classes: "mm-white"
    });

});

Because also all the js (functions and plugins) are in the same file (app.js) and the snippet above that initilizes the mmenu is before the mmmenu plugin code.

Anyway if you can try with wrapping it in document ready first and then we'll see further!

[Saro_1]

Hi @gentlemedia

Thanks a lot! Yes, Shopify allows full access to the files. I went ahead and changed the app.js file and wrapped it in a function. I also moved to the top of the script, but the problem persists. Any other thoughts?

[gentlemedia]

Like I said since that mobile off-canvas nav gets altered with JavaScript by adding all this mm- classes to certain elements and the mobile nav gets even moved with JS from its orginal spot to another spot in the DOM. This could have been done better by the developer of that theme if he had used the clone configureation that would just clone the original nav, that you have for wider screens, for that mobile nav.

So I looked what you have when JS is disabled in the browser and then you see indeed the mobile nav at the top of the page. This is what you see in a flickr with JS enabled, but is gone once it's taken out and moved with JS to the other spot in the DOM.

So I figured out an easy solution for you and that is by adding the following CSS block to your CSS file and I see you have also a custom.css file, so it can just go in there.

#header + div {
    display: none;
}

In that div tag sits the mobile nav & cart which gets taken out by JS and moved to the other spot, so with JS enabled that div tag will be empty anyway. By hiding it with CSS this will not show the mobile nav in a flickr.... well. that's the theory :) Just try it and let's see if I'm right this time.

[Saro_1]

Hi gentlemedia,

Thank you, it works! Appreciate the help! Any chance you also work as a freelancer / company? So I can keep you in file for future problems :D