An uptime check answers one question: did the server respond? Visitors ask a different one: can I use this page? After a few years of looking after client sites, the gap between those two answers was the thing I hit most often. A CSS deploy left a blank white screen. A WordPress plugin update broke checkout. An SSL certificate expired while the uptime dashboard still showed green.
I am Rai Ansar, a developer and DevOps engineer in Islamabad. I have worked on websites and servers since May 2019, and I built Visual Sentinel to close that gap. Here is what the visual part taught me.
The diff is the easy part
The core of a visual monitor fits in a few lines. This is a minimal sketch with Playwright, not our production code:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1366, height: 900 } });
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({
path: 'current.png',
fullPage: true,
mask: [page.locator('.ad-slot'), page.locator('time')],
});
await browser.close();
Compare current.png with a stored baseline pixel by pixel and you have a change detector. Left like this it will also alert on pages that change on every load, which leads to the lessons below.
Lesson 1: the baseline is the last confirmed good capture
If you compare against the previous screenshot, a broken page becomes the new normal after one run. Compare each capture against the most recent confirmed baseline instead. Keeping the screenshot history then tells you when the break was introduced.
Lesson 2: the threshold decides whether anyone trusts the alert
Ads, timestamps and rotating banners change on every load. Each monitor has a mismatch threshold, 5% by default, calculated over the whole rendered page. A tightly designed landing page or a checkout flow can go lower. A news homepage needs a higher number. For elements that always move, exclude them by CSS selector rather than raising the threshold for the whole page, because a high threshold hides real breakage.
Lesson 3: a change is evidence, not a verdict
On bdifferent.ie, a real customer site (recorded July 2026, shared with permission), 62.23% of the homepage changed while the uptime check still reported that the page loads. That is an easy case. Many diffs are a new hero image or a seasonal banner. The alert should carry a before and after capture so a person can decide in a few seconds. We treat a visual change as evidence to review and never as an automatic outage.
Lesson 4: pixels and text answer different questions
A screenshot tells you the page looks different. It does not tell you the price changed from one number to another. For that we run a separate content check: it extracts text from CSS selectors you define in the fetched source HTML and alerts when it changes. It does not run page JavaScript, so a price rendered client-side needs the visual check instead. Knowing which check covers which case saved me from promising more than either one does.
Lesson 5: capture frequency is a cost decision
Rendering a full page in Chromium costs more than a ping. On our Solo plan visual captures run every 30 minutes, and on Starter and above every 15 minutes, while uptime checks are much cheaper and run more often. A deploy regression is visible on the next capture, so a short interval matters most on sites that ship often.
Lesson 6: group the alerts
When three sites on the same server go down together, three separate 3 a.m. alerts help nobody. Visual Sentinel links sites to a server and sends one grouped incident when they fail together, with the likely shared cause.
What I would build first if I started again
Start with the screenshot, the baseline and the threshold. Add the content check once someone asks about a specific price or sentence. Add server grouping when you run more than one site per machine.
If you want to see the visual side on a live page, Visual Sentinel's visual monitoring shows a captured diff with the last good version beside the current one. Your first check is free when you add a site.
Top comments (0)