Static embeds for tweets and videos
Posted March 11, 2021 with tags #site
Tweets and videos embedded in this site are now static, displayed using my own custom HTML/CSS! Previously I used the templates provided by Hugo, but I had a few motivations for going with own approach.
- Remove third-party iframes and scripts from my website
- Load content lazily, and without causing page reflow
- Generate embeds at build time, rather when clients load a page
Embeds from Vimeo and YouTube are pretty basic, with a thumbnail linking to the respective sites. While you can’t actually watch videos on my site, but in return mobile clients can now use their native app for viewing. I think this is more desirable.
Tweets are bit more interesting. They aren’t just plain text, and they can include images and video. The design and approach I use is based on work by Jane Manchun Wong in her own site.
Tweets embed on my blog are now statically-generated as part of the page and its images are optimized using Next.js 10’s <Image /> component
Meaning:
- the tweets are available at page load
- no more cumulative layout shift (page jumping around) caused by loading embed tweets
I still have a little more work to do before I’m completely satisfied with these static embeds, and then I’ll write more about how they work. For example, I still hotlink to media files like images and video. Fixing that is work for another day though.
