Optimize Your Website Performance & LCP with Lazy Loading

Recently, while optimizing my website, I received a notification from Google Search Console that many pages needed optimization for mobile experience. Upon further investigation, I found that the issue was with LCP (Largest Contentful Paint) being longer than 2.5 seconds on mobile devices. After researching this in detail, I resolved the issue by implementing lazy loading for embedded YouTube videos, analytics scripts, AdSense ads, and images.

By the time I wrote this article, I had successfully reduced the LCP time to below 2.5 seconds, and no further optimization warnings appeared. If you’re facing a similar problem, consider applying these changes. Let’s dive in and see how you can optimize your website’s LCP with lazy loading!

1. What is LCP?

LCP(Largest Contentful Paint) is a core web vital metric that measures the time it takes for the largest content element visible in the viewport to render. Essentially, it tracks how long it takes for users to see the main content of your page after they click a link. The faster this happens, the better the user experience.

LCP is one of the most important signals for Google’s page experience ranking. Google wants pages to load quickly, especially on mobile devices, where network conditions can vary. Therefore, reducing LCP times is crucial for improving your website’s performance and ranking.

2. How to Optimize Pages for LCP?

To optimize your website’s LCP, the key is to delay the loading of non-critical resources. By prioritizing critical resources, such as the images or elements that directly affect the first screen, we can improve the overall LCP time. Here are some effective ways to optimize LCP using lazy loading:

2.1 Optimize LCP Quickly Using the loading="lazy" attribute

Lazy loading is a technique that defers the loading of non-essential resources until they are needed. This can significantly reduce the time it takes to load critical resources, which helps to improve your LCP. Most modern browsers support the loading="lazy" attribute, which you can apply to images and iframes to delay their loading until they are about to appear in the viewport.

Key Points:

a. The lazy load process starts before the element is visible on the screen, based on a threshold distance. This ensures that by the time the user scrolls to the image or iframe, it’s already loaded.

b. The loading="lazy" attribute works in most modern browsers like Chrome, Firefox, and Edge. If a browser doesn’t support it, it simply ignores the attribute, causing no negative impact.

c. Lazy loading should only be used for offscreen content. Images or other elements visible above the fold should not have this attribute, as it may cause slower load times if the browser doesn’t know their position on the page yet.

Example:

Simply add loading="lazy" to the img or iframe tag:

<img src="image.jpg" alt="Product Image" width="600" height="400" loading="lazy">

You can also implement this with YouTube embeds or other third-party content to delay their load until necessary.

2.2 Lazy Load External Non-Critical Resources

While the loading="lazy" attribute works great for offscreen images, what if you have other non-critical resources like YouTube videos embedded in the first position? At this point, we need to use js to implement lazy loading.

Optimizing YouTube Video Embeds:

You can optimize the LCP by lazy loading YouTube videos. Instead of loading the video and its resources immediately, you can load only the thumbnail image first and only load the actual video when the user clicks on it.

Here’s an example of how you can implement lazy loading for YouTube videos using JavaScript:

<iframe class="feature_video" width="750" data-src="https://www.youtube-nocookie.com/embed/video-id" title="YouTube video" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen></iframe> <script>
window.addEventListener('load', function () {
  var videos = document.querySelectorAll("iframe.feature_video");
  videos.forEach((video) => {
    if (video.dataset.src) {
      video.src = video.dataset.src;
    }
  });
});
</script>

This approach ensures that the YouTube video doesn’t block the loading of critical content, improving your LCP.

Optimizing External Scripts and Ads:

Another area for improvement is external scripts like analytics codes or AdSense ads. These resources can also delay the loading of important content. Use a timeout to delay the execution of these scripts until after the page has loaded, ensuring that they don’t compete for bandwidth with critical resources.

Example of lazy loading a stat counter script:

<script type="text/javascript">
  var sc_project=xxx; 
  var sc_security="yyyyy"; 
  setTimeout(function() { loadScript('https://www.statcounter.com/counter/counter.js'); }, 2000);  // Lazy loading
  function loadScript(url) {
    var script = document.createElement('script');
    script.src = url;
    document.head.appendChild(script);
  }
</script>

This method ensures that analytics and tracking codes load after the main content, improving page speed.

2.3 Lazy Load Social Media and Other Embeds

In addition to video embeds and external scripts, other non-essential elements like social media buttons, comment sections, or share widgets can be lazy-loaded to further improve your page speed. Using JavaScript or third-party libraries like LazySizes, you can defer the loading of these components until they are needed.

3. Summary

By using loading="lazy" and lazy-loading JavaScript techniques, you can significantly improve your website’s LCP and overall performance. Prioritizing critical content and deferring the loading of non-essential resources helps ensure that your website meets Google’s Core Web Vitals standards.

You can combine the loading="lazy" attribute with JavaScript libraries or custom scripts to implement lazy loading across different types of resources, ensuring maximum compatibility and efficiency.

Start applying these techniques today to enhance your website’s user experience and boost your search rankings.