My new home page of Michael.team has always been fast. It’s built on Jekyll engine and I love the fact that I get to tinker with it, learn new HTML, CSS and JavaScript techniques with it. And I get to edit it on my iPad. More details about this here.

However, recently I checked that my page doesn’t load as fast as I thought on mobile devices, because whenever I embed a YouTube or Vimeo video, their heavy JS files are pulled together and slow down my site. Even though I was using the “youtube-nocookie.com” embed.

So I searched on the web for “lazy loading YouTube” and found this article and then this article with a great hack that explains that when embedding an iFrame you can use “srcdoc” parameter and embed the static image of the video first without loading the video.

I implemented it on my site and then looked for options to do something similar for Vimeo, and found out this free service of Vumbnail that helps get Vimeo thumbnails.

Now look at my vlog about pricing:

Michael.team/pricing

And it loads freaking fast and the results on Google Page Speed is 97

Same goes for this page on my remote work webinar (with Vimeo embed):

Michael.team/remotework

Also result of 97 percent on mobile

Which is awesome.

So I’ve learned something new today. That we should totally speed things up by not loading videos directly on the page first load.

— sent from an iPhone by me, the founder of Nozbe to-do app for teams. Here’s what I’m up to now.