Unusual render-blocking CSS case within International phone number input clonable

If you are using a "International phone number input clonable" (or one of handful of similar ones) on your Webflow site, this might be a story for you. We reported the issue to the Webflow and to the component author, not sure how long will it take to fix it. Recently I was working with my new client that has a website on the Webflow, usual stuff: speeding up metrics on Google pagespeed, that kind of things. All went smooth, except for one thing: for some reason, the render time on google pagespeed was slower than expected. Sometimes firt render took like 5-10 seconds more. On my browser it was closer to 1-2s range. So I recorded a profile in Chrome's DevTools and saw a loooong element render delay. There was no network data transfer, no Javascript running, no styles calculations. It was just hanging in there for some reason and I could not pin it down. I then zoomed in even more and noticed a thin microsecond-sized task that mentioned some demo.css. Okay at least that's something, CSS will block page from rendering, let's go and find it, I thought. There it was. Notice the domain name there. That's an expired domain that was owned by the library author on github. The thing is, domain has expired and someone bought it, and it now redirects to some sketchy page. Now, I'm not sure what different browsers do when they get a sketchy webpage instead of a CSS file: most likely they will fail parsing that file right away and discard it. What I do know is that new domain that we're being redirected to is slow to respond, and that's what blocks the render. When I blocked the CSS in my devtools, the Element render delay went down to just 200ms! After we updated the Webflow website code to not include that component, the pagespeed score for mobile skyrocketed from 50-ish into 80+! So yeah, if you use that international phone number component, you might wanna check if you have that demo.css stuff pointing to a sketchy domain and disable it while WF and component author are fixing that. Shameless plug time: if you want me to help you out with improving website performance then get in touch, I'm available!

Apr 6, 2025 - 23:42

Unusual render-blocking CSS case within International phone number input clonable

If you are using a "International phone number input clonable" (or one of handful of similar ones) on your Webflow site, this might be a story for you. We reported the issue to the Webflow and to the component author, not sure how long will it take to fix it.

Recently I was working with my new client that has a website on the Webflow, usual stuff: speeding up metrics on Google pagespeed, that kind of things. All went smooth, except for one thing: for some reason, the render time on google pagespeed was slower than expected. Sometimes firt render took like 5-10 seconds more. On my browser it was closer to 1-2s range. So I recorded a profile in Chrome's DevTools and saw a loooong element render delay.

There was no network data transfer, no Javascript running, no styles calculations. It was just hanging in there for some reason and I could not pin it down. I then zoomed in even more and noticed a thin microsecond-sized task that mentioned some demo.css. Okay at least that's something, CSS will block page from rendering, let's go and find it, I thought. There it was.

Notice the domain name there. That's an expired domain that was owned by the library author on github. The thing is, domain has expired and someone bought it, and it now redirects to some sketchy page.

Now, I'm not sure what different browsers do when they get a sketchy webpage instead of a CSS file: most likely they will fail parsing that file right away and discard it. What I do know is that new domain that we're being redirected to is slow to respond, and that's what blocks the render.

When I blocked the CSS in my devtools, the Element render delay went down to just 200ms!

After we updated the Webflow website code to not include that component, the pagespeed score for mobile skyrocketed from 50-ish into 80+!

So yeah, if you use that international phone number component, you might wanna check if you have that demo.css stuff pointing to a sketchy domain and disable it while WF and component author are fixing that.

Shameless plug time: if you want me to help you out with improving website performance then get in touch, I'm available!