Lazy loading in HTML and OSS Contribution
Ever heard of the term lazy loading? How does it help? Where do we implement or use it? Is it a new tag or an attribute? If you’re familiar with HTML you already know what is the difference between a tag and an attribute. In this post, we will learn lazy loading in HTML and how I contributed to the open-source project JetPack (WordPress Plugin) and fixed the lazy loading issue for the Spotify shortcode.
Let’s understand what is lazy loading in general
Lazy loading is the practice of delaying load or initialization of resources or objects until they’re actually needed to improve performance and save system resources. … Bandwidth conservation — Lazy loading conserves bandwidth by delivering content to users only if it’s requested.
In HTML, img and iframe support loading="lazy" attribute. Here is the example:
<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!" loading="lazy"><iframe src="video-player.html" title="..." loading="lazy"></iframe>
Now we know lazy loading. If you want to learn more in detail about lazy loading you can visit this link: https://web.dev/fast/#lazy-load-images-and-video
Recently, I started contributing to open-source projects and after searching online I decided to contribute to Jetpack. Those who don’t know what is Jetpack. Please check this link: https://wordpress.org/plugins/jetpack/#description
How I was able to merge my first Open-source PR
After fiddling around for some time understanding Jetpack and its purpose I checked the issues tab in the Github repo. I searched for the labels something like this
After applying these labels I found an issue I want to work on. Issue link:
https://github.com/Automattic/jetpack/issues/16454
To translate my understanding into implementation I decided to work on this issue. At this point, I was thinking about how, to begin with, such a large codebase and I don’t even have any clue about Jetpack and its code and so on.
Time to create a mindmap and raise a good working PR
To begin with, I went through the contribution document present in the repo and did the initial setup of WordPress and JetPack. After spending some time I was able to run Jetpack on my system locally. Yayy!!
Not able to reproduce the issue 😞
Yes, initially I was not able to reproduce the issue. This was my first comment on the issue as seen in the below image. After going through the code and understanding the feature. I was able to reproduce this issue in my local.
To understand how lazy loading works I tested on the same platform Medium that’s the reason, I published a random article.
Time to make changes 👨💻
Keeping best practices in mind. To begin with, I wrote a test case for my expected changes. This is how my test case looks like:
Now I know what changes are required to make this test case pass. Adding loading="lazy"` in the iframe tag will make the test case pass. I ran the test case and it passed 😇
Time to test it on WordPress 😅
By now, I was very much sure what changes I did and what steps were needed to validate my changes. I followed that and hurrah my changes were working as expected. Here is the video of that.
As you can see in the above video, Spotify network calls were made when we reach there. It will save bandwidth and load the page a bit faster.
By now I was sure my changes were correct. I raised my first PR 🚀
Here is my PR link:
After some review comments and replies, my first PR got successfully merged.
What's left?
One of the things that any contributor feels proud of is when their changes are pushed into production and used by millions of people. Recently, JetPack published its update. Here is a changelog screenshot and I can see my changes in release notes.
PROUD MOMENT, MISSION ACCOMPLISHED!!!😎🚀
If you’ve made it this far, please consider leaving a comment with your thoughts or suggestions.
There will be future instalments of such posts, so stay tuned!
