GoogleChrome / GoogleChrome/lighthouse

Wait for page to finish loading

Open
#10,594 3 comments 4 reactions 0 assignees View on GitHub
feature P2
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 14h
Merged PRs (30d)
20

Description

Lighthouse sometimes stops collecting data before the page has finished loading. As a result some requests/user timing metrics/CPU times are not included in the report, or are only included intermittently.

(We talked about this before, but I wanted to document it since it keeps coming up. Not sure if it's something that can be fixed, might just build a custom solution.)

## Why does it happen?

Lighthouse waits until the page is interactive, based on the TTI definition:

- no more than 2 requests in progress for a certain amount of time (0s for simulated throttling, 5s otherwise)
- CPU idle for a certain amount of time

Sometimes that's different from when a user would say that the page has finished loading. If a page only renders after a slow Ajax request has finished, Lighthouse stops collecting data before the main page content has loaded.

This is often a problem with apps, where the most of the action only happens after a JavaScript bundle or JSON response has loaded.

I'm also seeing this occasionally when there's a chat widget on the page, sometimes it will be counted in the Lighthouse metrics, other times Lighthouse stops waiting before it's loaded.

## Possible solutions

### 1. Add a `--waitForExpression` option that forces Lighthouse to wait for a DOM element or user timing

Easy to implement, but means users have to opt in and identify a condition that makes sense for their site.

### 2. Allow the site to emit an event indicating it has finished loading

Suggested here: https://github.com/GoogleChrome/lighthouse/issues/3748

@patrickhulce mentioned there was a proposal at some point to let sites emit an event that indicates the page has finished loading.

This might make it easy for sites to game metrics. Needs work by website owners.

### 3. Use smarter logic to decide that the page has finished loading

For example, this could mean waiting for no requests to be in progress. (@paulirish brought up waiting only for non-media requests, or only waiting for requests with a priority higher than medium.)

Maybe we could only wait for requests that are still sending data, not requests that are long polling or just timing out?

#### Interactive vs finished loading

Most users would assume they are the same thing, and for most sites they are. But by definition TTI will be at the point where the page is idle for a while, even if the main content is still loading.

If we keep collecting data after the page is interactive we'd be might be reporting 25s of JS execution but a TTI of 4s. This could be confusing for users who don't understand the difference to "finished loading".

## Related issue: waiting for too long

When several requests are timing out Lighthouse will wait a long time for all of them, even if the page is otherwise completely idle.

Contributor guide

Open the contributing guide

Research direction

No file or test is named. Start by tracing Lighthouse's page-loading wait logic and its TTI-based collection boundary, then compare the proposed wait-for-expression, site-emitted event, and smarter request-idle approaches. Done would require an agreed behavior that captures late-loading metrics without making reports misleading or waiting indefinitely.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.