Energie Plus
Website for a solar panel and home battery installer, redesigned and made considerably faster.
A new identity over an existing site, with the CMS behind it, the content moved along, and mobile speed as a hard requirement.
Schema in git, content in the database
Collections and blueprints live in the repository, but entries, globals, alt text and publication status live per environment in the database. A deploy therefore moves code and no content. Anything touching content became an artisan command you run per environment, safe to repeat, and throw away afterwards. On rollout that command rebuilt six main pages, converted thirteen old galleries and published sixteen pages that were sitting as drafts.
The biggest speed win was one line
The homepage scored 81 with a layout shift of 0.184. The cause was not the video and not the weight: the font was only discovered after the stylesheet arrived, so text sat in a fallback for seconds and the page jumped once the real font landed. One line announcing the font up front took the shift to zero on every page and the score to 95.
Images: missing sizes and quality nobody sees
There was no size at all between 1024 and 1920, while a phone with a dense screen needs around 1170 pixels; the browser kept picking the largest. Adding 1280 and 1536 took the hero from 580 to 238 kB. Quality went from 82 to 70: 28 percent fewer bytes at a measured similarity of 0.96. AVIF was tried and reverted, because the encoder in the container produced 86 kB where webp sat at 52 kB.
Measuring belongs to the rollout
After a push the pipeline waits until the new container reports its commit on a health route, then measures four pages. If accessibility or SEO drops under 95 the step fails. When production later turned out slower than staging, blocking individual requests found the cause: not the hero video everyone was looking at, but the Analytics script costing 1.8 seconds of largest contentful paint.
A logo that turned black on iPhones
The supplied logo laid its gradients over the letters as a pattern with percentage dimensions. On iOS Safari that failed to resolve and the fill fell back to black. The gradients are now a clipped image inside the SVG: placed beside the original that gives a similarity of 0.998, and on a real iPhone the logo is in colour again.
What is in it
- Statamic inside Laravel One application: editors in /beheer, visitors on the same app. No separate API, no worker.
- Blocks Twenty-six block types, each a Blade file plus a set in the blueprint.
- Images through Glide Everything via the asset layer, with srcset per size and cache headers on the bucket.
- Hero video Two files, desktop and mobile, without audio; the still doubles as the sharing image.
- Forms Address completion through the Dutch PDOK location service, reCAPTCHA switchable per form.
- Structured data LocalBusiness with rating and service area, FAQ pages, breadcrumbs per subpage.
- Two environments Staging and production with their own bucket and database; a deploy moves code only.
Screens
