Odd behaviour - site delay on load

Hi all.

Quick one - when I view my site www.sataybar.co.uk there is a delay and nothing is displayed until all the elements are loaded. I don’t know why this is because I have no interactions (legacy or otherwise) on there. Can anyone offer a suggestion as to why?

https://preview.webflow.com/preview/satay-bar?utm_source=satay-bar&preview=a192a609d2663836ec36fe5c17cf5357

@BUMPandHUSTLE
https://gtmetrix.com/reports/www.sataybar.co.uk/efjcOxFM

Look at your waterfall tab for your first PAINT and first RENDER.

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.sataybar.co.uk%2F

I might suggest lowering homepage payload to under 4mb if possible

If you have BG video playing, try using a static image, then defer video loading 2000ms after first paint.

Thanks - yes video on home page BUT all other pages (without video) have the same effect. Why would that be?

@BUMPandHUSTLE
Looking at designer preview link? {loading}

Yes i did above - here it is again

https://preview.webflow.com/preview/satay-bar?utm_source=satay-bar&preview=a192a609d2663836ec36fe5c17cf5357

BTW - I do think this might be a video issue but as it is not on the subsequent pages I don’t know why. It did used to function without delay.

Thanks for looking

@BUMPandHUSTLE

does your webflow.io preview site have different load than your main published site?

Something is delaying your final paint (above fold render), best way to test is process of elimination.

Can you make the following
Test Page 01
/test-page-01
Section

  • Container
    – Rich Text Block
    Test Load

/test-page-02
Duplicate of Home page

    • Remove Booking engine widget
    • Remove Background

/test-page-03
Duplicate of Home page

    • Remove Booking engine widget / all dmn-form code
      Test Load

/test-page-04
Duplicate of Home page

    • Remove BG Video
      Test Load

/test-page-05
Duplicate of Home page

    • Remove CMS items
      Test Load

image

I can do better than that - I have made a page with just a body and h3 header and there is still a delay. Have a look at this link https://satay-bar.webflow.io/test

What is going on here?

OK - I have solved this. It was a GOOGLE OPTIMIZE !!

The Google Optimize Container ID was causing the site to render with a delay - i.e. blank page and then after a few seconds, the whole page appears. Why this is I have no idea and I won’t be using it until I know why this is the case.

As a process of elimination (as you suggested also), I ended up removing all pages apart from one, all elements apart from a single div block, all fonts uploaded, all collections (CMS) and still there was a delay. I am not sure if this has been discussed elsewhere but it was a real head scratcher.

Thanks for helping me out.

4 Likes

@BUMPandHUSTLE
thanks for sharing

Curious if you updated anti flickr code if that made any difference:

@BUMPandHUSTLE I’ve been struggling with trying to solve this issue for about 3 hours, thank you so much for posting your solution. I also had the Google Optimize integration enabled, and sure enough, I was having the same issue.

I can confirm that there is definitely a weird delay between loading and the first paint on my site as well (without optimize), but haven’t figured out what it is either. Without optimize it’s a super short delay though, so I can live with it.

I tested the anti-flicker code from Google Devs, and it greatly increased the load time and the delay until first paint on my site.

Thanks again for figuring out it was Optimize, I was about ready to give up.

1 Like

Hi @BUMPandHUSTLE and @yHohmeyer I’m trying to get Google Optimize working as smooth as possible but the delay is page load is seriously horrible. It’s killing the user experience. We’re loading the experiment through GTM. Any suggestions on how to make it more smooth?

nope! I trashed google optimise in the end as I could not find a workaround.

Loading Optimize through GTM is always slower than loading it directly on the page. At a minimum you could try switching it to load directly on the page (right after your dataLayer is defined but before other tags are fired). You can also optionally add in the anti-flicker snippet before loading the optimize script.

One issue though is that webflow doesn’t allow you to place code at the beginning of which is really where it should go. Hopefully they add that functionality.

Simple You can add CSS

.anti-flicker-hide {
    opacity: 7 !important;
}