How to Use Chrome DevTools to Find Slow Resources

In this guide: How to use Chrome DevTools to find slow resources: open the Network tab, read waterfalls, use the Performance panel and Lighthouse, and turn findings into…

Speed test tools tell you that your site is slow. Chrome DevTools helps you find exactly why. It’s built into Google Chrome (and similar Chromium-based browsers like Edge), it’s free, and once you know a few panels, you can diagnose most performance problems yourself.

Opening DevTools

Open the page you want to analyze, then:

• Windows/Linux: press F12 or Ctrl + Shift + I.
• Mac: press Cmd + Option + I.
• Or right-click anywhere on the page → Inspect.

Tips before testing:

• Use an Incognito window so extensions don’t affect results.
• Log out of WordPress (logged-in pages often bypass caching and load admin scripts).
• Dock DevTools to the side or bottom as you prefer.

The Network tab

The Network tab shows every file the page loads.

1. Open the Network tab.
2. Check Disable cache (to simulate a first-time visitor).
3. Optionally select a throttling preset (like “Fast 4G” or “Slow 4G”) to simulate mobile networks.
4. Reload the page (Ctrl/Cmd + R).

What to look at:

• Bottom summary: total requests, transferred size, DOMContentLoaded, and Load times.
• Sort by Size: find the heaviest files — often large images, videos, or JavaScript bundles.
• Sort by Time: find slow files.
• Waterfall column: shows when each file starts and how long it takes. Hover over a bar to see phases like waiting (TTFB) and content download.
• Filter by type: JS, CSS, Img, Font, Doc — see which category dominates.
• Domain column (right-click headers to add it): reveals third-party scripts from ad networks, chat widgets, analytics, and social embeds.

Red flags:

• The first Document request taking a long time → slow server or no page caching.
• Images of several hundred KB or more → optimize them.
• Many scripts from external domains → consider removing or delaying them.
• Files returning 404 errors → broken references wasting requests.

Click any request to see its headers — useful for checking whether caching is working (look for cache HIT headers or Cache-Control values).

The Performance panel

The Performance panel records what the browser does over time.

1. Open Performance.
2. Click the reload/record button to profile page load, or click Record, interact with the page (open a menu, click a filter), and stop.
3. Review the results:
   – Timeline and screenshots show when content appears.
   – Main thread activity: long yellow blocks are JavaScript execution. Tasks longer than 50 ms are marked as long tasks with red corners — they hurt responsiveness (INP).
   – Layout shifts are highlighted, showing which elements moved (CLS).
   – LCP marker identifies the Largest Contentful Paint element.
   – Bottom-Up and Call Tree tabs show which scripts use the most time.

Modern versions of the Performance panel also show live Core Web Vitals metrics as you interact with the page — great for testing INP.

Lighthouse audits

The Lighthouse tab runs an automated audit (the same engine as PageSpeed Insights, but locally):

1. Open Lighthouse.
2. Choose Mobile or Desktop and categories (Performance, Accessibility, Best Practices, SEO).
3. Click Analyze page load.

You’ll get scores, metrics, and a list of opportunities like:

• Properly size images
• Eliminate render-blocking resources
• Reduce unused JavaScript and CSS
• Serve images in modern formats
• Avoid enormous network payloads

Lighthouse results depend on your computer and network, so compare runs on the same machine. See PageSpeed Insights vs GTmetrix vs Pingdom.

The Coverage tool (open the command menu with Ctrl/Cmd + Shift + P and type “Coverage”) shows how much of each CSS and JS file is actually used — helpful for spotting bloated plugins and themes.

Turning findings into fixes

Apply one fix at a time and re-test to measure the impact. For WordPress-specific steps, see How to Speed Up WordPress: 20 Proven Tips.

Further reading: MDN Web Docs learning area

Key Takeaways: Chrome DevTools

• DevTools shows exactly which resources slow your page.
• Use the Network tab to find heavy, slow, and third-party files.
• Use the Performance panel to find long tasks and layout shifts.
• Run Lighthouse and Coverage for prioritized opportunities.
• Fix one issue at a time and measure again.