While fixing images and CSS addresses the **Largest Contentful Paint (LCP)**, the main culprit behind a poor **First Input Delay (FID)** score is often unoptimized **JavaScript**. External scripts (like social media widgets or non-essential analytics) that load in the header are the primary **Render-Blocking Resources** that halt the entire page render.

This comprehensive guide details the final, critical step in achieving a perfect Lighthouse score: systematically identifying and relocating render-blocking JavaScript to the body or footer. By using the correct attributes and placement, you ensure core functionality loads instantly while background scripts load non-critically.

Diagram Showing Script Relocation from Header to Footer for Speed


💡 Essential Tool: Automated Minification

Beyond relocation, combining and shrinking your JavaScript and CSS files (minification) drastically reduces the total payload size. Use a high-quality automation tool to handle minification and deferral simultaneously.

Explore Minification Tools

The 3 Key Methods for Non-Critical Scripts

Each method serves a different purpose for scripts that are not essential for above-the-fold content:

  1. **Relocate to Footer:** The simplest method. Move the entire `