# What is a website heatmap?

> A heatmap shows where visitors click, move and scroll on a page. Here is how to read one, the main types, and how to use them to fix pages that don’t convert.

Source: https://cuttl.io/blog/what-is-a-heatmap/ · Last updated: 2026-10-15

A heatmap shows where visitors click, move and scroll on a page. Here is how to read one, the main types, and how to use them to fix pages that don’t convert.

## What a heatmap shows

A website heatmap is a picture of a web page coloured by what visitors did on it. Warm colours, like red and orange, mark the places where lots of people clicked or paused. Cool colours, like blue and green, mark the places few people touched.

Instead of a table of numbers, you see the page itself with the pattern of attention laid over it, which makes heatmaps one of the fastest ways to spot a layout problem.

## How a heatmap is made

A small script on your site notes where each visitor clicks, how far down the page they scroll and, on computers, where the mouse moves. It doesn’t need to know who the visitor is.

One session on its own tells you very little. A heatmap combines hundreds of sessions on the same page, so the patterns that most people share stand out and the odd one-off click fades away.

## The three main types of heatmap

- Click maps show where people click or tap. They answer “Do people notice my main button?” and “Are they clicking something that isn’t a link?”
- Scroll maps show how far down the page people get. Each band of colour tells you what share of visitors reached that point, so you can see where most of them stop reading.
- Hover maps show where the mouse moves and pauses on computers. The mouse tends to follow the eyes, but only roughly, so treat hover maps as a hint rather than a fact. Phones have no mouse, so phone heatmaps are about taps and scrolling.

Heatmaps in Journey Insights. See how Cuttl handles heatmaps.

## What a heatmap can tell you

- Your main call to action is being missed, because the clicks go somewhere else.
- People are clicking images, headings or icons that do nothing, which usually means they expected a link.
- Important content sits below the point where most visitors stop scrolling.
- Something on the page pulls attention away from what you want people to do.

## How to read a heatmap without fooling yourself

- Look at phones and computers separately. The same page can look completely different on each, and mixing them blurs both.
- Wait for enough views. A few dozen can mislead you. Aim for a few hundred views of the page before drawing conclusions.
- Check the scroll map first. A button with no clicks may simply be below the point most people reach.
- Compare groups. Visitors from ads often behave differently from visitors from search or email.
- Pair it with recordings. A heatmap shows what happened. Watching a few recordings shows why.

## Common mistakes

- Reading red as “good”. Lots of clicks on the wrong thing is a problem, not a success.
- Changing the page while you collect data, so the heatmap mixes two different versions.
- Judging a long page by its first screen only, when the scroll map shows most people never reach the end.

## Heatmaps in Cuttl

Cuttl builds click, scroll and hover heatmaps for your pages automatically. You can filter them by device, traffic source, country, any group of visitors or the elements they clicked, and see a separate heatmap for each version of an A/B test. Save the views you check often and get their numbers in Slack every morning or every Monday. When a page changes, Cuttl keeps the before and after apart, so you never compare two different layouts by mistake. The free plan includes heatmaps and session recordings, so you can try them on your own site.

## Common questions

### Are heatmaps privacy friendly?

Yes, when they’re set up well. Heatmaps combine many sessions, so no single person is shown. Cuttl masks form inputs by default and never stores visitors’ IP addresses.

### Do heatmaps work on mobile?

Yes. On phones and tablets, heatmaps show taps and how far people scroll. There’s no mouse, so hover maps only apply to computers.

### How many visitors do I need for a heatmap?

A few hundred views of a page is a good starting point. Heatmaps start filling in from the first session, but patterns get more reliable as more people visit.

### Will a heatmap tool slow down my website?

A well-built one shouldn’t. The Cuttl Tag loads in the background, so it doesn’t block your page from showing.

### New in heatmaps: live pages, first clicks, saved views and exports

### Heatmap examples: six patterns and what to do about each

### Hotjar alternatives that also test your fixes