Iframes in CMS crash Safari

Hey everyone,

I’ve stumbled across an issue with my clients latest site and would love some help trying to figure out a solution. The issue crashes Safari and only Safari, all other browsers run it fine on both PC and Mac.

When going to the live site on a Mac using Safari and navigating to a team-member page, the first page loads (but takes an enormous time to load) but then if you navigate to another team-member page from that page it crashes Safari. To reproduce the error go to the live site:

www.melbournefunctionalmedicine.com.au

Then in the navbar go ABOUT>MEET THE TEAM>
and click on anybody’s name.
This will create the super long load, then from there go to one or two more team-member pages and it’ll crash Safari.
After some troubleshooting we’ve narrowed it down to the Spotify iframes in the HTML embeds. When removing this section it all worked gloriously.

HERE is the read-only-link

Inside the TEAM-MEMBER CMS collection template I’ve got a section with Spotify podcast embeds using iframe inside an HTML element. It’s only visible on Jabe and Rebecca’s pages due to the con-vis I’ve set.

It would appear that Safari runs into an issue with HTML iframes inside the Webflow CMS and I would love some help figuring out a way to mitigate the issue since the client needs these podcasts

Thanks in advacne :smile:

hi @Geeza I have done some testing and it is really bad. 9.04s to finish Spotify load.

As you have suggested it is Spotify that cause long load. Because Im not expert on implementing Spotify iFrames here is only my first impression suggestion as your content rendereing is blocked .

In Chrome and Firefox is natively implemented/supported lazy loading but not in Safari

So you can read these articles
Basic informations

In this article is section How do I handle browsers that don’t yet support lazy-loading?

But I believe that you can find more on internet
Good luck

Thanks so much for your insights @Stan I’ve noticed the same through lighthouse and GT metrix. Having removed the lazy load seems to have no effect on the issue, which was surprising. So I’ve since reached out to Spotify and will also try alternative iframes to see if it is exclusive to them or to iframes in general. What’s odd is that I have two other static pages on the site which use the smae podcast grid element and have no problems loading, it appears to be only an issue when using the Spotify embed in the CMS. Will require more digging I fear.

Thanks again for the links to the articles as well, great read :smiley:

Hi @Geeza there was some misunderstanding I have never mentioned to “remove” lazy load (this will cause problems in any browser) instead I have point on part of article how to handle it in in browsers that do not support lazy load natively.

The problem is that page is waiting until whole content is loaded into page and after starts page rendering the content as text, hero image etc. So you should add custom code to to prevent loading Spotify iframes when out of viewport. Something like async / await

But even that it take ages to load all of them as initiation is at the same time but they load one after each other. Dit you try to place iframe directly to your RTE if there will be any difference? I don’t thing that will have any effect but it can narrow down where problem is and where to look.

EDIT: I have now checking live page again and I have send you video PM with some of my notes.

hi @Geeza I have done some search as I do not use Spotify at all and here is one post that mentioning how link should look like. as you can see they referencing in URL embed and you have open It is different approach (URI) and I do not know if it helps as it is from 2016 and rules may changed but…

I have even recreated simple example in WF with help of your links but I do also getting in Safari some wired 404 error related to Spotify you should investigate.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.