Lazy Loading & Code Splitting

How should lazy loading be implemented for third-party widgets or social media embeds?

const loadFacebookWidget = () => {
  const script = document.createElement('script');
  script.src = 'https://connect.facebook.net/en_US/sdk.js';
  script.async = true;
  script.defer = true;
  document.body.appendChild(script);
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadFacebookWidget();
      observer.disconnect();
    }
  });
});

Load all widgets immediately
Never use third-party widgets
Use Intersection Observer and load on visibility
Using Intersection Observer to load third-party widgets when they become visible is the best practice because: 1) It prevents unnecessary loading of widgets that may never be seen, 2) Improves initial page load performance by deferring non-critical resources, 3) Provides a good balance between functionality and performance, 4) Can be combined with placeholder content for better user experience. The example shows how to implement this pattern with proper async/defer attributes and cleanup through observer disconnection once the widget is loaded.
Load widgets after 5 seconds

Next Question (15/20)