Skip to content

Landing Page Performance Degradation Due to Direct YouTube Iframe Embed #113

@nandu-99

Description

@nandu-99

The landing page currently experiences significant performance degradation, as identified in the Google PageSpeed Insights report.
A major cause is the direct embedding of a YouTube video using an iframe, which introduces multiple performance issues:

Key Problems

  • Excessive and render-blocking external requests:
    The YouTube iframe triggers several heavy network requests — scripts, images, and tracking resources — on initial page load, even when the user doesn’t play the video.

  • Poor Core Web Vitals:
    Metrics such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP) are noticeably delayed, leading to a sluggish first impression and reduced user engagement.

  • High network payload and unused resources:
    The page loads a substantial amount of unused JavaScript and CSS, further worsening Total Blocking Time (TBT) and overall performance score.

Optimizing how the YouTube video is embedded and addressing other heavy resources is critical to improving load time, user experience, and SEO performance.


Supporting Evidence

Attach the following PageSpeed Insights screenshots to clearly illustrate the problem:

  1. Overall Performance Summary
Image
  1. Render-Blocking Requests
Image
  1. JavaScript Execution Time
Image
  1. Unused JavaScript

  2. Unused CSS

  3. Image Delivery

  4. Network Payload Summary


Recommended High-Level Approach

1. Optimize YouTube Embed Strategy

  • Replace the direct iframe with a lightweight static thumbnail placeholder.
  • Load the actual YouTube iframe only after user interaction (e.g., clicking the play button).
  • Optionally use a lite YouTube embed or implement a custom lazy-load mechanism for the iframe.

2. Reduce Render-Blocking Resources

  • Defer or inline critical CSS and JavaScript.
  • Load non-essential scripts using async or defer attributes.
  • Consider code splitting or bundling for faster initial loads.

3. Optimize Static Assets

  • Compress and resize images according to their display dimensions.
  • Audit and remove unused CSS and JS to minimize the network payload.

4. Continuous Performance Monitoring

  • Re-run PageSpeed Insights after each optimization step.
  • Track improvements in FCP, LCP, and the overall performance score.

Assignment Request

Please assign this issue to me so I can refactor the landing page’s YouTube embed implementation and perform performance optimizations based on the PageSpeed Insights findings.

I’m also open to feedback and suggestions from the team — happy to discuss and finalize the best possible approach before implementation.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions