外部JS脚本拖累PageSpeed得分，寻求谷歌评估后加载方案

Great question—this is such a common headache with third-party ad scripts and PageSpeed Insights. Let’s first unpack why your current window.onload approach still impacts scores, then dive into actionable fixes.

Why window.onload isn’t enough #

PageSpeed Insights uses Lighthouse under the hood, which simulates a real user’s page load flow—including waiting a few seconds after onload to measure metrics like Cumulative Layout Shift (CLS) and Total Blocking Time (TBT). Even if your ad script loads after onload, its download and execution still consume browser resources during this measurement window, dragging down your score.

Strategies to load ads after PageSpeed testing #

Here are the most reliable methods to keep your PageSpeed high while still serving ads to real users:

1. Load on user interaction (scroll/click)

Lighthouse runs an automated test with no user input, so triggering the ad script only after a user scrolls or clicks ensures it won’t be loaded during the speed assessment. This has minimal impact on real users, since they’ll likely interact with the page before reaching the bottom ad.

// Define your script loader function
function loadAdScript() {
  const tag = document.createElement("script");
  tag.src = "externalscript.js";
  document.head.appendChild(tag);
}

// Trigger on first scroll (use { once: true } to run only once)
window.addEventListener('scroll', loadAdScript, { once: true });

// Optional: Add click fallback for users who don't scroll
window.addEventListener('click', loadAdScript, { once: true });

2. Use Intersection Observer to load when the ad container enters view

If your ad is in the page footer, you can wait until the ad’s div is about to enter the viewport before loading the script. This is even more user-friendly than interaction triggers, as it loads the ad just in time for the user to see it.

const adContainer = document.getElementById('your-ad-div-id'); // Replace with your ad div's ID

// Set up the observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadAdScript();
      observer.disconnect(); // Stop observing after loading
    }
  });
}, { threshold: 0.1 }); // Trigger when 10% of the container is visible

// Start observing the ad container
observer.observe(adContainer);

// Reuse the same loadAdScript function from above
function loadAdScript() {
  const tag = document.createElement("script");
  tag.src = "externalscript.js";
  document.head.appendChild(tag);
}

3. Detect Lighthouse/PageSpeed test environments (less reliable)

You can check if the page is being tested by looking for specific user agent strings. Note that this is less robust—Google might change these strings over time, and some real users could have matching UAs. Use this as a fallback only if the above methods don’t work for your use case.

function isPageSpeedTest() {
  return navigator.userAgent.includes('Lighthouse') || navigator.userAgent.includes('Chrome-Lighthouse');
}

window.onload = function() {
  // Only load the script if it's not a test environment
  if (!isPageSpeedTest()) {
    loadAdScript();
  }
};

function loadAdScript() {
  const tag = document.createElement("script");
  tag.src = "externalscript.js";
  document.head.appendChild(tag);
}

Final Recommendation #

Stick with either the user interaction trigger or Intersection Observer method—they’re the most reliable ways to separate PageSpeed testing from real user ad delivery. Both will keep your score above 90 while ensuring real users still see your ads.

内容的提问来源于stack exchange，提问作者Vlasis Kosmas