How to Fix Lighthouse Performance Drop on a Post Page

This guide explains why a single post page may have dropped to a performance score of 39 in Lighthouse and provides a step-by-step method to identify and fix the most common culprits. You’ll learn how to audit the page, prioritize fixes, and verify improvements—no advanced coding knowledge required, though basic familiarity with browser developer tools helps.

What You’ll Need

Access to the page’s HTML/CSS/JS files (via a CMS, code editor, or hosting file manager).
Chrome or Edge browser (Lighthouse is built into both).
Optional: a staging environment to test changes without affecting the live site.

Step-by-Step

Run a Lighthouse audit to get a baseline. Open the post page in Chrome, press F12 to open DevTools, go to the “Lighthouse” tab, select “Mobile” and “Performance”, then click “Analyze page load”. Wait for the report to finish.
Identify the biggest performance opportunities. In the report, scroll to “Opportunities” and “Diagnostics”. These list specific issues like “Eliminate render-blocking resources” or “Reduce unused JavaScript”. Note the estimated time savings for each.
Check for render-blocking CSS and JS. In the Opportunities section, look for “Eliminate render-blocking resources”. If you see CSS or JS files that are not critical for the initial view, you can defer them. For CSS, inline the critical styles (above-the-fold) and load the rest asynchronously. For JavaScript, add defer or async attributes to non-essential scripts.
Optimize images. In the report, look for “Properly size images” and “Serve images in modern formats”. Compress images, resize them to the displayed dimensions, and convert them to WebP or AVIF. Use a plugin like ShortPixel or manually via an image editor.
Reduce unused JavaScript and CSS. Under “Diagnostics”, look for “Remove unused JavaScript” and “Remove unused CSS”. Use Chrome’s Coverage tool (Ctrl+Shift+P, type “Coverage”, click “Start instrumenting coverage”) to see which code is actually used. Remove or lazy-load unused libraries.
Enable text compression. Check if your server is sending Gzip or Brotli compression. In DevTools, go to the Network tab, reload the page, and look at the “Content-Encoding” column for your JS/CSS files. If it says “gzip” or “br”, you’re good. If not, enable compression in your server config or via a plugin.
Preload key requests. If you have a hero image or a critical font, add <link rel="preload"> tags in the head to fetch them earlier. In the report, look for “Preload key requests” to see which resources benefit.
Minify HTML, CSS, and JavaScript. Remove unnecessary characters (spaces, comments, line breaks) from your code. Use a minifier tool or a plugin like Autoptimize (WordPress) or a build step in your framework.
Implement lazy loading for below-the-fold content. Add loading="lazy" to images and iframes that are not visible initially. This prevents them from loading until the user scrolls near them.
Re-run Lighthouse after each change. After making a few fixes, run the audit again to see if the score improves. Make one change at a time if possible to know what worked.

Common Mistakes

Ignoring the “Diagnostics” section. Many users focus only on “Opportunities” and miss issues like “Avoid enormous network payloads” or “Serve static assets with an efficient cache policy”.
Deferring all JavaScript. If you defer critical scripts that are needed for initial interactivity, the page may appear broken or fail to render. Only defer non-essential scripts.
Not testing on a staging site. Making changes directly on the live site can cause downtime or user-facing errors if something goes wrong.
Over-optimizing images. Compressing images too much can result in blurry visuals. Aim for a balance between size and quality.

Tips

Use Lighthouse’s “View Original Trace” to see a detailed timeline of the page load. This helps pinpoint exactly where time is spent.
Consider using a CDN (Content Delivery Network) to serve static assets from servers closer to your visitors. This can improve TTFB (Time to First Byte) and overall load time.
Set up a caching plugin (if using a CMS like WordPress) to serve cached versions of your pages, reducing server response time.
Regularly monitor performance after making changes, as new plugins or content can regress the score.

Troubleshooting

If your score doesn’t improve after following these steps, try the following:

Check for third-party scripts. Ads, analytics, and social media widgets often add significant overhead. Try removing them temporarily to see if the score jumps. If so, consider loading them asynchronously or replacing them with lighter alternatives.
Review your hosting. A slow server can cap your performance. Run a speed test on a simple HTML file to see if the server response time is the bottleneck.
Clear your cache. Sometimes Lighthouse tests a cached version. Use an incognito window or disable caching in DevTools (Network tab > Disable cache) to get a fresh load.
Ensure you’re testing on a consistent connection. Lighthouse simulates a slow 4G connection, but if your internet is unstable, results may vary. Run the test multiple times and take the median score.

Frequently Asked Questions

Why did my page drop to 39 suddenly?

Common causes include adding a heavy plugin, uploading unoptimized images, or a recent code update that introduced render-blocking resources. Run a Lighthouse audit to see the specific issues.

Do I need to fix every issue Lighthouse lists?

No. Focus on the items with the highest “estimated savings”. Fixing the top 3-5 opportunities often yields the biggest improvement.

Will using a caching plugin hurt my SEO?

No, caching improves page speed, which is a ranking factor. Just ensure the plugin is configured correctly and that dynamic content (like comments) is excluded from caching.

How long does it take to see a score improvement?

Immediately after you make the changes and re-run Lighthouse. However, if you use a CDN or caching, it may take a few minutes for the changes to propagate.

Can I get a perfect 100 score?

It’s possible but often impractical, especially with ads or third-party embeds. Aim for a score above 80, which is considered good.

Should I hire a developer to do this?

If you’re not comfortable editing code, yes. But many fixes can be done with plugins or CMS settings. Start with the easiest steps and see how far you get.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.

More cards in this drawer

The whole Numbers and Powers drawer →