NOTE this issue occurs on mobile devices only
I uploaded a website using surge to view it live on the web but was disappointed by its load time (~3s). I used google speedtest and pingdom to see what was happening. Google speed test said I should place CSS styling of above the fold content into the header. So that is what i did. i also compressed and resized many images being used. It is definitely a lot faster to load but i still have the same issue that has been bothering me for days now. The center logo is appearing before the background image is appearing on the screen. It just looks odd to me. Ideally i would want the logo to appear once the background image has finished loading. I have the background image declared in a style tag in the head of the html as i thought this would make the background image load first and then in the body of the html doc i have the logo appearing. This issue is occurring on mobile only. Please view the site on a mobile device to see what I’m talking about http://tacosmockup7.surge.sh/. The Html doc can be found here at paste bin https://pastebin.com/pfNy5Y0J. Do you think if i delay the loading of the logo the background image will load first?
Any help is greatly appreciated!