Website Builder Studio
Learn

The moment your page looks like it arrived

This measures how long somebody stares at a mostly empty screen before the main thing they came for appears. It is the most intuitive of the three page experience measures.

Short answer

This measurement records when the largest visible element finishes rendering, which is a proxy for when a page feels loaded. Usually that element is a hero image, a heading or a main block of text. Server response time, oversized images, and render blocking files are the common causes of delay.

What gets measured

The browser watches what appears in the visible part of the page and tracks the largest element by area. When that finishes rendering, the clock stops.

On a typical business page it is the hero image, the main heading, or a large block of introductory text.

It only counts what is visible without scrolling, so an enormous image further down the page is irrelevant to this measure.

It only counts what is visible without scrolling, so an enormous image further down the page is irrelevant to this measure.

Cause one: the server

Nothing can render until the first bytes arrive. A slow server response delays everything that follows, and no amount of front end work compensates.

Shared hosting under load, a database query on every request, or a server physically far from the visitor are the usual reasons.

Static files served from a network close to the visitor remove this category almost entirely, because there is nothing to compute.

Cause two: the hero image

If the largest element is an image, its file size is directly the measurement. An unresized photograph is the single most common cause of a poor result.

Resize it to the largest size it is actually displayed at, compress it properly, and serve a modern format.

Do not defer the loading of the main image. Deferring is right for images further down and wrong for the one the visitor is waiting for.

Do not defer the main image. Deferring is right for images further down and wrong for the one the visitor is waiting for.

Cause three: render blocking files

Stylesheets and scripts in the page head can stop rendering until they have downloaded and been processed. The browser is waiting rather than drawing.

Keeping the critical styling small, and loading anything non essential later, lets the page draw while the rest arrives.

Third party scripts in the head are the worst version of this, because you are waiting on somebody else's server before your own page appears.

Cause four: fonts

If your text is the largest element and it uses a downloaded font, the text may not render until the font arrives.

Telling the browser to show a fallback immediately and swap when the font is ready removes the wait, at the cost of a brief change in appearance.

Serving fonts from your own domain rather than a third party also removes one connection from the critical path.

Telling the browser to show a fallback immediately removes the wait at the cost of a brief change in appearance, which is usually the better trade.

What good looks like

The main content visible within a couple of seconds on a phone connection. Beyond that, visitors begin to leave in measurable numbers.

It is worth testing on a deep page rather than the homepage, because that is where most visitors arrive from search.

And test on a phone. A desktop on office broadband tells you almost nothing about the experience most of your audience has.

  • The main content visible within a couple of seconds on a phone
  • Tested on a deep page, not the homepage
  • Tested on a phone connection, not office broadband
  • Tested with an empty cache
  • The hero image sized for the space it occupies
  • Nothing in the head blocking the first paint

How ours behave

Pages here are static files with no server computation, served close to the visitor, with no third party script or font in the critical path by default.

Images declare their dimensions and are served in a modern format, so the largest element arrives as small as it can be.

Every page passes a check that runs before anything publishes, validated against Google Search Essentials and modern web standards.

Static files with no server computation remove the first third of the problem entirely, which is the point made in page speed and search.

What counts as a good result, as published

Figures are from the source named beside each one, as published there. None of them is a claim about this product.

Questions people ask

What counts as the largest element?

The biggest visible block in the initial view, usually a hero image, a main heading or a large paragraph. Content below the fold is not counted.

Does lazy loading help this measure?

For images further down, yes. Applying it to the main image makes this measurement worse, because you are deferring the thing being measured.

Why is my homepage fine and other pages slow?

Usually because the homepage was optimized and the templates behind other pages were not. Test the pages visitors actually arrive on.

Can hosting alone fix it?

Faster hosting improves the server portion, which is often a third of the problem. An unresized hero image remains unresized whatever the hosting.

See your website built from a conversation

15-day free trial. Card required. Cancel before day 15 and you pay nothing.

Build my website
Every plan starts with a 15-day free trial. Card required.See plans and pricing