Reading List
TIL: Iframes and performance from Oh Hello Ana RSS feed.
TIL: Iframes and performance
Last November I attended FFConf where I saw two talks about performance: one from Anna Migas and another one from Harry Roberts. I instantly memorised one particular thing from each of the talks. From Anna's I took a mental note to add font-display: swap; and from Harry's talk I was amazed that the order inside the head tag impacts performance.
While I learned that last November, last week I finally had the to chance to see the impact of making those changes on a client's website. This website's performance wasn't great but it seems like this was a very recent issue. I remember the same website actually having a decent performance a while back so something must have happened recently.
I decided to do the "quick wins" first and collect data to see if things had improved. I inspected Harry's personal website and tried to reproduce the ordering of the tags in the head along with adding the font-display: swap;. I don't know why I was so surprised when I compared the data and saw that it actually helped. However, it still had some strong hickups and when I was reading the suggestions for improvements from the testers I used, I realised that those issues were coming from third-party code.
This third party code was actually an iframe from a social media/media website and it was recently added at the top of the main page.
The window’s onload event doesn’t fire until all its iframes, and all the resources in these iframes, have fully loaded. In Safari and Chrome, setting the iframe’s SRC dynamically via JavaScript avoids this blocking behavior.
The above quote comes from a blog post written 10 years ago so I had an extra check to make sure it was still accurate. As a result of this, I also came across an experimental API that I wasn't aware of either.
It actually makes sense? I've never thought about it, come across a situation where the content of the iframe was so heavy, or even come across a project that used third party embeds besides YouTube, surprisingly.
So lesson learned I suppose: I will keep this in mind when working on projects especially when they allow content editors to embed from third parties.