In this tutorial, I am going to show you how I improved website performance by just adding attribute
loading="lazy" to iframes. Tutorial.tips is built on GatsbyJS, a blazing fast static site generator. I never thought that website is going to have any performance issues since I was using GatsbyJS however, I was wrong as my assumption ignored other factors that might impact performance.
Below is screenshot network calls and DOMContent loaded before the issue was fixed
To fix the issue I, added
loading="lazy" to the iframe element. Since I was using a common component for CodePen it was easy to fix the issue across the site with a small change in component code.
The loading attribute on an
<img>element (or the loading attribute on an
<iframe>) can be used to instruct the browser to defer loading of images/iframes that are off-screen until the user scrolls near them.
Once the fix was deployed I was able to save approximately 1.2 MB of network resources and I see improvement in lighthouse score as well.
Following screenshot was taken after the issue was fixed
If we compare before and after screenshots, we can see the following differences
|No. of requests||52||39|
|Resource downloaded||2.7 MB||1.5 MB|
|Time to load||4.4s||4.1s|
Even after the fix, I see a lot of room for improvement, which could be achieved by optimizing images and also load them lazily.