Blue Shield: an exterior property firm's website, rebuilt off WordPress

The brief

Blue Shield is an exterior property firm in Southampton. It cleans roofs, gutters, render and UPVC, fits gutter and pigeon guards, and replaces soffits, fascias and gutters, for homes across Hampshire and the South Coast and for facilities managers and housing providers further afield.

Its website ran on WordPress. On a phone, the home page took about 14 seconds to show its main content, because the largest thing on it was an autoplaying background video, and it downloaded between 5 and 8 MB. The page also loaded reCAPTCHA and Google Fonts from Google's servers.

The brief was a new design that stayed loyal to Blue Shield's own content and services, and that presented the business as exterior property specialists rather than a cleaning company. The site also needed room for things the old one couldn't hold: pages for commercial and housing clients, buying guides and simple calculators.

Before and after, on the first screen

Blue Shield's work is easy to show and hard to describe, so the home page leads with a real job. A drone photo of a mossy roof sits under a slider; drag it and the same roof comes back clean. The slider is a native range control laid over the photo, so it works with a mouse, a finger or the arrow keys, and a screen reader announces it as a slider. The page renders it on the server at the half-way point, so nothing waits for JavaScript.

Every photo on the site is of Blue Shield's own work, most of them cropped from its old before-and-after composites. There are no stock photos. Where a service has no photos yet, its page shows a short list of the signs to look for instead.

The look comes from the trade: one typeface, Archivo, set condensed and heavy for headlines like sign-writing on a van, and the crews' hi-vis yellow for the slider handle and the phone button.

Eleven services, one source

The site has 11 services in three groups: cleaning, protection, and access and replacements. Each service is one content file. From those files the site builds the menu, the services page, the footer, the quote form's options, the structured data search engines read, and each page's social card, so a new service is one new file.

Guides and checkers

Beyond the services, there are pages for the people who buy differently: housing associations, facilities managers with commercial gutters and roofs, and homeowners comparing costs. Nine help guides answer questions customers ask, such as when to clear gutters and whether to cap or replace fascias. The guides on Awaab's Law and on pigeon fouling are written from GOV.UK's and the Health and Safety Executive's own guidance.

The exterior damp risk checker asks six yes-or-no questions about the gutters, roof, walls and fascias, and gives a low, medium or high risk with what to do next. It says plainly that it is a guide, not a survey. A second page works out roof area from the pitch, lengths of guttering and fascia, and wall and patio areas, so a customer can describe their house in the numbers a quote needs. The FAQ page has a search box and topic filters across about 70 questions.

Getting a quote

Every page ends with a quote section. Most exterior jobs are easier to price from a photo, so customers can send photos on WhatsApp: on a phone that's a button, and on a computer it's a QR code to scan with the phone in their pocket.

The quote form doesn't pretend. If a message can't be delivered, it says so plainly and gives the phone number and email address, never a false "thanks, we'll be in touch".

Rules the site keeps

• Only confirmed claims. The figures, accreditations and reviews on the site are the ones Blue Shield confirmed, and the reviews are quoted word for word. Anything not yet confirmed shows as a marked "to confirm" box on the preview, and the build that launches the site refuses to finish while any remain, so an unconfirmed fact can't reach the launched site by accident.
• Old addresses will keep working. Every page on the old site already has a home on the new one: the same page at the same address, or a single 301 redirect to the nearest page, as for services Blue Shield no longer offers. At launch the old domain redirects each address to its new home.
• Nothing tracks visitors. The home page sets no cookies and makes no requests to anyone else's servers. The old site's reCAPTCHA, Google Fonts and map embeds are gone.
• Every page is built ahead of time, and each has its own share card, so a link sent in a chat shows that service's before and after photos, or its list of signs.

The stack

Next.js and React, with Tailwind CSS, built into a Docker image. Every code change pushed to the main branch runs the type checker, the linter, a dependency audit, the build, an SEO check, a sweep of the old addresses and an accessibility check on key pages, then releases the new image on the client's own server. The release is health-checked before it takes traffic, and if the live site doesn't report the new version, it rolls back to the last good one.

The numbers

Lighthouse on mobile, three runs each against the live home pages on 29 October 2026:

• Largest contentful paint 3.6 s, against 13.8 to 14.0 s on WordPress. Most of the 3.6 s is spent rendering before the hero text paints, not downloading, so that's where the remaining time is.
• 462 KB for the whole page in 20 requests, against 5 to 8 MB in 114.
• Performance 90, against 59 to 66. Accessibility 100, against 89.

These are lab runs from our own machine, not field data from real visitors.

Where it is now

The site is live at blueshieldadvanced.com. Next, search engines are let in and the old address moves across, with every old page redirecting to the same page on the new site. A few facts for the commercial and housing pages are still with Blue Shield to confirm, and pages for individual towns wait until there's genuinely local work to show on them.

The first version was designed and built in three days, from 27 to 29 October 2026. If your website no longer describes the business you run, tell us what it should say.