CAPTURE TIMING

Wait for the page state the screenshot is meant to prove

A fixed delay can handle predictable hydration, media, or animation, but it is not a universal readiness signal. Use the smallest measured wait and prefer an application condition when completion varies.

Delay
Fixed wait
DOM state
Condition-based readiness
Measured
No arbitrary sleep
Install:delay: 2 · waitForDom: true
Auth:SNAPSHOT_SITE_API_KEY
Get started for free
Screenshot readiness workflow
Snapshot Site themed screenshot delay API illustration
Good fits
Hydrated pages with predictable settling time
Charts and fonts that complete shortly after navigation
Marketing pages with entrance animation
Capture debugging that isolates an early screenshot

Timing must describe meaningful completion

Navigation completion does not guarantee that application data, fonts, media, or animations are ready. Choose a strategy from observable page behavior.

1

Fixed delay

Use a short delay when the page settles predictably after initial load.

2

DOM readiness

Prefer a stable application signal when completion depends on variable network or data work.

3

Targeted preparation

Avoid waiting for unrelated analytics or long-lived network connections.

4

Recorded configuration

Store the readiness rule and observed capture time with every artifact.

Implementation workflow

Tune screenshot readiness

1

Capture the page with no additional wait and identify missing state

2

Measure the element or application event that represents completion

3

Choose the smallest reliable delay or documented DOM strategy

4

Test representative fast and slow target conditions

Screenshot delay API example

cURL

Add a measured delay

The delay is explicit and should be justified by a tested page state rather than copied across every target.

curl --fail-with-body --request POST \
  --url https://api.prod.ss.snapshot-site.com/api/v1/screenshot \
  --header "Content-Type: application/json" \
  --header "x-snapshotsiteapi-key: $SNAPSHOT_SITE_API_KEY" \
  --data '{
    "url": "https://example.com/dashboard",
    "format": "png",
    "width": 1440,
    "height": 900,
    "fullSize": true,
    "delay": 2
  }'

A screenshot can be technically successful and visually early

The browser may finish navigation while the page still shows skeletons, fallback fonts, empty charts, or images waiting on client-side data. A delay moves the capture later, but its value comes from a specific observed state—not from being a round number.

Start by naming the evidence required in the image. For a dashboard, it may be a populated chart. For a product page, it may be the main media and price. This turns timing into a testable requirement.

Fixed time and application state solve different problems

A short delay is appropriate for predictable work such as a known entrance transition. Variable API calls are better represented by a DOM condition controlled by the page. Waiting for general network silence can be unreliable when analytics, streaming, or persistent connections remain active.

Do not hide a target performance failure with an ever-growing wait. Record capture timing separately and investigate why the intended state is slow or never appears.

Test the boundary conditions

Run the capture against representative target data and normal slow conditions. Verify both viewport and full-page results because lazy sections may behave differently below the fold. Check that the delayed state does not advance into a carousel frame or expiring notification that adds noise.

Store the delay or readiness setting beside the artifact. When a future image differs, reviewers can see whether the page changed or the capture schedule did.

Use JavaScript rendering for broader dynamic-page preparation and the lazy-loading guide for content that activates during scroll.

Screenshot Delay API FAQ

What does screenshot delay do?

It asks the renderer to wait a fixed amount of time after navigation before creating the screenshot.

How long should the delay be?

Use the smallest duration that reliably reaches the intended state on representative runs. There is no universal value for every page.

Is a large delay always safer?

No. It increases latency and can still miss content with variable completion. It may also capture a later rotating or personalized state.

When should I use DOM readiness?

Use a condition-based strategy when a known element or application state represents completion more accurately than elapsed time.

Does network idle guarantee the page is ready?

Not always. Long-lived connections can prevent idle, while a page can become idle before delayed application work or animation finishes.

Can delay load lazy images below the fold?

Elapsed time alone may not trigger viewport-based lazy loading. Test full-page behavior and use preparation suited to the page.

Should different routes share one delay?

Only after measurement. A static article, product grid, and analytics dashboard can have very different completion behavior.

What should timing diagnostics record?

Keep target identity, viewport, readiness strategy, delay, capture duration, output, and observed missing state.

Measure one dynamic page before setting a delay

Identify the content that defines completion, then use the narrowest readiness rule that captures it consistently.