What the comparison does
We open both pages in the same real Chrome browser with identical settings: the same window size, the same wait for network activity and web fonts, and animations and transitions switched off so that moving parts do not count as changes. Each page is captured at a desktop width of 1440 px and a phone width of 390 px, from the top down to at most 6,000 px.
The two screenshots for each width are compared with pixelmatch, the open-source image comparison library also used by many visual regression testing tools, at a colour threshold of 0.1 with anti-aliasing ignored. If one page is shorter, it is padded with white so the comparison covers the full length of the longer one.
- An A/B slider to wipe between the two pages at each width.
- A diff image: changed pixels in red over a faded copy of the first page.
- The share of pixels that differ and where on the page the changes cluster.
- Page height of each version, which reveals added or removed sections.
- A diff of the accessibility tree: headings, links, buttons and text that were added or removed.
Why compare the accessibility tree
Two pages can look almost the same and still differ in what matters to search engines and screen readers. We read each page's accessibility tree — the roles and names that assistive technology announces — and list the lines that were added or removed. A heading that turned into styled text, a button that lost its label after an icon update or a missing image description shows up here even when the pixel diff is tiny.
When to use it
Before publishing a theme, plugin or CMS update, compare your staging copy with the live site. After a redesign, compare the new page with the old one to make sure nothing important disappeared. You can also compare two language versions of the same page to spot missing sections. Both addresses must be public: we cannot log in or pass a staging password.
Dynamic content such as rotating banners, cookie notices, dates and live chat widgets can produce differences even between two loads of the same page. If the diff is unexpectedly large, look at the diff image first: a single shifted section at the top pushes everything below it, so fix or ignore that first difference before reading the rest.