Heatmap WordPress Setup: Pick Tools That Won’t Bloat Your Site

A person at a home-office desk with a hand on a computer mouse, facing a laptop shown from behind.

A heatmap on WordPress shows where visitors click, how far they scroll, and which parts of a page they ignore. You can add one with a plugin or a hosted script. The choice that matters most is not free versus paid. It is where the data is stored. Plugins that write every click into your WordPress database make it grow quickly and slow your admin. Hosted tools keep that load off your server.

TL;DR:

  • Where heatmap data is stored matters more than the price: in-database plugins can add hundreds of thousands of rows a month on a modest site.
  • Scroll heatmaps are the most dependable type for content sites, click heatmaps are best for landing pages, and mouse-movement maps are the weakest evidence.
  • Page builders, sliders, sticky headers and lazy-loaded images often shift heatmap overlays, so always check desktop and mobile maps separately.
  • Going "cookieless" does not automatically exempt you from Article 5(3) of the ePrivacy Directive, and session replays should mask form fields by default.
  • Wait for roughly 1,000 views per page per device type before you redesign anything based on a heatmap.
REPLASTATS

Want analytics that stay off your database?

See how ReplaStats keeps data on a separate server, installs with a 4.7 KB script or WordPress plugin, and needs no consent banner.

Visit →

Table of Contents

Three Heatmap Types, and the One Most WordPress Sites Misread

Every heatmap tool for WordPress produces some version of three maps. They are not equally useful. Choosing the wrong one for your page type is the most common way people draw confident conclusions from weak data.

Heatmap type What it records Best for How much to trust it
Click (tap) map Clicks and taps on page elements Landing pages, pricing pages, navigation menus High, because a click is a deliberate action
Scroll map How far down the page each visitor got Blog posts, long sales pages, documentation High, if desktop and mobile are split
Move (hover) map Where the mouse cursor traveled Rough layout checks on desktop Low. Cursor position is a loose proxy for attention, and it does not exist on touch screens

The one people misread is the move map. Hover data looks impressive because it produces a warm, colorful blob over your headline. But many people read without moving the mouse at all, and mobile visitors produce no hover data. If most of your traffic comes from phones, a move map describes a minority of visitors.

Scroll maps are where WordPress publishers get the most value. Nielsen Norman Group's research on scrolling and attention found that users spent 57% of their page-viewing time above the fold and 74% within the first two screenfuls. A scroll map tells you exactly where your own page falls off that curve. That is far more actionable than a general rule.

For a fuller walkthrough of what each map can and cannot prove, see our guide to heatmaps for WordPress and what they actually show you.

Where Heatmap WordPress Plugins Store Your Data, and Why It Matters

Rows of server racks in a dim data center, lit by small green and blue status lights.

This is the question none of the "best plugin" lists ask, and it decides how your site feels six months from now. A heatmap records many small events per pageview: clicks, scroll depth markers, viewport size, and the element selector that was clicked. Those events have to be stored somewhere.

There are three broad approaches:

  • In-database plugins. The plugin creates custom tables in your WordPress MySQL database and writes events there. Setup is easy and the data stays on your server, but your database now handles analytics writes on every pageview.
  • Self-hosted open-source tools. You find these when you search GitHub for WordPress heatmaps. You run a separate application on your own server and connect WordPress to it. The data stays yours and stays out of WordPress, but you take on updates, backups and security for a second piece of software.
  • Hosted services. A small script sends events to someone else's servers. Nothing is added to your database, and nothing for you to maintain. In exchange, you trust a vendor with the data and usually pay once traffic grows.

Here is the arithmetic that should shape your choice. Take a modest site with 10,000 pageviews a month, where the heatmap logs an average of 8 events per view. That is 80,000 new rows a month, or close to a million a year. At a few hundred bytes per row including indexes, that adds up to hundreds of megabytes of analytics data inside the same database that serves your pages and your checkout.

10,000 pageviews × 8 events = 80,000 database rows a month, written into the same MySQL instance that serves your pages.

The cost does not stay inside the heatmap. Your nightly backups get larger and slower. Migrations to a new host take longer. Cheap shared hosting plans with database size limits can start throwing warnings. If you already run a stats plugin that stores data locally, the problem compounds. Our breakdown of choosing a WordPress statistics plugin that won't bloat your site covers the same trade-off for traffic analytics.

Our position: an in-database plugin is fine for a short, one-off test on a low-traffic page, as long as you delete its tables afterward. For anything you plan to leave running, keep heatmap data off your WordPress database.

If you search for a free WordPress heatmap, you will find plenty of plugins in the WordPress.org plugin directory, open-source projects on GitHub, and Reddit threads where developers recommend their favorites. Free options are real. The cost usually just shows up somewhere other than an invoice.

Free plugins in the WordPress directory

Most free directory plugins are in-database plugins, so the storage math above applies. Before you install one, check the "Last updated" date and the "Tested up to" WordPress version on its listing. A heatmap plugin that hasn't been updated in a year is a plugin injecting JavaScript into every page with nobody maintaining it.

Open-source projects on GitHub

Self-hosted tools give you full control and no session caps. They also make you the operations team. Budget for a server, plus an hour or two a month for updates. If you would not happily patch a web application at 11 p.m. after a security advisory, this route is not free for you.

Freemium hosted tiers

Hosted services often have free tiers with limits on sessions recorded per day, data retention, or the number of pages you can map. The data-retention limit matters most. A heatmap that deletes data after a short window cannot give you a before-and-after comparison around a redesign.

What Reddit threads get right, and what they miss

Developer forums are good at spotting plugins that break themes or conflict with caching. They are weaker on scale. A recommendation from someone running a 500-visit hobby blog tells you little about how a tool behaves at 50,000 visits a month.

Pro Tip: Before you commit to any free heatmap plugin, open phpMyAdmin (or your host's database tool), note the total database size, and let the plugin run for seven days. Multiply the growth by 52. If the yearly projection is larger than the rest of your database, you have your answer before your backups find it for you.

Speed Cost: What a Heatmap Script Does to Core Web Vitals

A hand holding a silver stopwatch above a desk beside a closed laptop.

A heatmap is unusual among analytics scripts. It listens to every click, tap and scroll on the page. That is exactly the kind of work that can affect responsiveness, so it is worth checking before you leave a heatmap running permanently.

Google's Core Web Vitals guidance on web.dev sets the "good" thresholds at a Largest Contentful Paint of 2.5 seconds or less, an Interaction to Next Paint (INP) of 200 milliseconds or less, and a Cumulative Layout Shift of 0.1 or less. INP replaced First Input Delay as a Core Web Vital in March 2024. It is the metric most exposed to heavy event listeners, because it measures how quickly the page responds when someone clicks or taps.

Here is what to check:

  • Script size and loading. A tracking script should load with defer or async so it never blocks the first render. Scripts measured in tens of kilobytes deserve more scrutiny than ones measured in single digits.
  • Main-thread work on interaction. Open Chrome DevTools, go to the Performance panel, record a session, and click around. If the heatmap's handler appears as a long task after each click, it is costing you INP.
  • Snapshot capture. Some tools capture the page's full structure (its DOM) so they can redraw it later. On long pages built with heavy page builders, that capture can be expensive. Ask whether the tool captures once per page or on every visit.
  • Run it per page, not sitewide. Most heatmap questions concern a handful of pages. Limiting the script to those pages reduces both the performance cost and the amount of data you collect.

Why Your WordPress Heatmap Looks Wrong, and How to Fix It

A heatmap is an overlay of visitor events drawn on top of a picture of your page. When the picture and the live page differ, the overlay drifts. WordPress sites are especially prone to this.

Page builders and responsive layouts

Builder-based themes often rearrange whole sections between breakpoints. A click recorded on a 390-pixel-wide phone screen, drawn on a 1440-pixel desktop rendering, will land on the wrong element. Always view desktop, tablet and mobile maps separately. Prefer tools that attach clicks to the element that was clicked, rather than to raw x/y coordinates.

Sliders, tabs and accordions

A click on slide three of a carousel gets drawn over slide one in the snapshot. Content inside collapsed accordions is invisible in the overlay. For these components, use your tool's element-level click counts instead of the visual map.

Fixed-position elements move with the visitor, so clicks on a sticky header can be spread down the page in the overlay. Consent banners also cover content in the snapshot and attract a block of clicks that tells you nothing about your design.

Lazy-loaded images and caching

If images load only as the visitor scrolls, the snapshot may show a shorter page than visitors actually saw, which pushes scroll data upward. Caching and optimization plugins that combine or delay JavaScript can also delay the heatmap script past the first interactions. Exclude the heatmap script from "delay JS" settings if your optimizer has them.

Two colleagues talking across a meeting table in a bright office, with a closed laptop between them.

Heatmaps sit closer to the line on privacy than plain traffic counts, because they record behavior on the page rather than just visits. Two rules shape what you can do.

The first is Article 5(3) of the EU ePrivacy Directive. It requires consent before you store information on, or read information from, a visitor's device, unless doing so is strictly necessary for the service the visitor asked for. The rule is not limited to cookies. The European Data Protection Board's guidelines on the technical scope of Article 5(3) make clear that techniques such as local storage and some tracking pixels can fall under it too. A tool calling itself "cookieless" is a good start, not a legal guarantee. Ask the vendor what, if anything, it stores or reads on the device.

The second is the GDPR and similar laws elsewhere, which apply when the data can identify a person. Heatmaps that only aggregate clicks are low risk. Session replays, which reconstruct an individual visit, are a different matter. Without masking, a replay can capture what someone typed into a form.

A heatmap aggregates thousands of visits into one picture. A session replay reconstructs one person's visit, which is a different privacy question.

The practical rules:

  • Mask all form inputs by default. Unmask specific fields only after a deliberate decision.
  • Keep heatmaps off account and checkout pages unless you have a specific reason and a legal basis.
  • Set a retention period so you don't keep behavioral data longer than you need it.

If you plan to watch individual sessions as well as aggregate maps, our guide to picking a session replay tool by the job you need it to do covers masking and retention in more depth. For the broader question of running analytics without a banner, see website analytics tools that work without a consent banner.

How Many Visits a Heatmap Needs Before You Act on It

Heatmaps are persuasive because they are visual, which is also why they mislead people on low-traffic pages. A click map built from 60 sessions can show a "hot" button that is really three people who clicked twice.

Our working rule is to collect about 1,000 views per page, per device type, before you change a layout based on a heatmap. Treat any result from fewer than 300 views as a hint to investigate, not a finding. This is a rule of thumb rather than a statistical test, but it filters out most of the noise.

A few more habits keep the data honest:

  • Change one thing at a time. If you rewrite the headline and move the call-to-action in the same week, the next heatmap cannot tell you which change worked.
  • Compare against a fixed window. Run the "before" and "after" maps for the same number of days, covering the same weekdays.
  • Pair the map with a number. A scroll map showing that 40% of visitors reach your pricing table becomes useful when you track whether that share rises after the change.

Reading patterns help you interpret what you see. Nielsen Norman Group's eyetracking work on the F-shaped reading pattern explains why attention clusters along the top and left edge of text-heavy pages. If your scroll and click maps show that pattern, your content is probably being scanned, not read. Subheadings and front-loaded sentences will usually help more than a redesign.

Get Heatmaps for WordPress Without Touching Your Database

ReplaStats solves the storage problem described above. It installs with a single 4.7 KB deferred script or a pre-connected WordPress plugin. Every click and scroll event goes to a separate server, so your MySQL database, backups and migrations stay the same size. It is cookieless and built to run without a consent banner. Heatmaps and session replays sit alongside visitors, sources, top pages and live traffic, and you can read the reports inside wp-admin. If you manage several sites across WordPress and other platforms, the Pro and Agency plans put them all on one board.

The honest limit is that heatmaps and replays start on the Starter plan, not the free single-site tier. A heatmap is also only as good as your traffic: low-volume pages will take weeks to reach a trustworthy sample. Check the current plan details on the ReplaStats pricing page before you commit.

Frequently Asked Questions

Is there a free heatmap for WordPress?

Yes. The WordPress.org plugin directory lists free heatmap plugins, and open-source tools are available on GitHub. Most free plugins store data in your WordPress database, and self-hosted tools need your own server and maintenance, so check database growth and update history before relying on one.

Do WordPress heatmap plugins slow down a site?

They can, because a heatmap listens to every click and scroll on the page. Make sure the script loads deferred, test Interaction to Next Paint in Chrome DevTools, and load the heatmap only on the pages you are studying.

It depends on what the tool stores or reads on the visitor's device. Article 5(3) of the EU ePrivacy Directive covers cookies and similar technologies such as local storage. A truly cookieless, aggregate heatmap is much lower risk, but session replays need masking and more care.

How many visits does a heatmap need to be reliable?

A practical rule is about 1,000 views per page, per device type, before making layout changes. Results from fewer than 300 views are best treated as hints to investigate rather than conclusions.

Why does my WordPress heatmap show clicks in the wrong place?

The overlay is drawn on a snapshot of the page. Responsive layouts, sliders, sticky headers and lazy-loaded images can make the snapshot differ from what visitors saw. View device types separately and use element-level click counts for dynamic components.

Sources