In today's article, I'm going to cover lazy loading as part of our speed optimization series. If you haven't heard about lazy loading, let me explain what it is and how it can make your website faster.
What Is Lazy Loading?
Very simply, when you visit a webpage—like this demo site I'm using—you initially see only a portion of the content. If you scroll down, there are more images and content that aren't immediately visible. Lazy loading specifies that images and videos should only load when you start scrolling to their area.
For example, images that are further down the page won't download or affect the speed when the page first loads. They're only downloaded when the user scrolls to them. This reduces the initial load time, decreases bottlenecks, and minimizes processing time.
Why Use Lazy Loading?
Implementing lazy loading makes your website faster because there's less to download upfront. It improves the user experience and can significantly boost your PageSpeed Insights score, which is crucial for SEO and user satisfaction.
How to Implement Lazy Loading
You can implement lazy loading in many ways, including using special JavaScript code to handle complex situations. However, today's focus is on the simplest method that works for 90% of websites: using the loading attribute in your HTML.
Even if you're not a developer, you can implement this yourself or hand it off to your developer or engineer.
Step-by-Step Guide
-
Identify Images and Iframes Below the Fold
"Below the fold" means any content that requires the user to scroll down to see it. Conversely, "above the fold" refers to content visible without scrolling.
-
Add the
loading="lazy"AttributeFor every image (
<img>) and iframe (<iframe>) tag that's below the fold, add theloading="lazy"attribute.Example for an Image:
<img src="image.jpg" width="600" height="400" loading="lazy" alt="Description">Example for an Iframe (e.g., Embedded YouTube Video):
<iframe src="https://www.youtube.com/embed/your-video-id" width="560" height="315" loading="lazy" frameborder="0" allowfullscreen></iframe> -
Specify Width and Height
It's important to specify the
widthandheightattributes for images and iframes. This helps the browser allocate the correct amount of space on the page before the content loads, preventing layout shifts.
Example with YouTube Embed
Let's say you want to embed a YouTube video that's below the fold. Here's how you can do it:
-
Get the Embed Code from YouTube:
- Go to the YouTube video.
- Click on "Share" and then "Embed."
- Copy the iframe code provided.
-
Modify the Iframe Code:
- Add
loading="lazy"to the iframe tag. - Ensure
widthandheightare specified.
Modified Iframe Code:
<iframe src="https://www.youtube.com/embed/your-video-id" width="560" height="315" loading="lazy" frameborder="0" allowfullscreen></iframe> - Add
By doing this, the heavy video player and scripts will only load when the user scrolls to that part of the page.
Benefits of Lazy Loading
- Improved Load Times: Reduces the initial load time of your webpage.
- Better Performance Scores: Enhances your PageSpeed Insights score.
- Enhanced User Experience: Users can interact with your site faster without waiting for all assets to load.
