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 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.