Here at eighteen73, we build a lot of websites. Because of this, we know first-hand the frustration that comes with third-party widgets. You spend weeks optimising a website to load in the blink of eye, only to drop in an external script that drags everything down, bloating the page size and harming the user experience. That is not to mention the potential harm to SEO.
When we proposed the idea of building a custom map and directory embed for Visit Herefordshire, we knew exactly what we did not want to build. We set out to create a embed that host websites would actively want to use: incredibly fast, lightweight, and respectful of the host site’s performance. The goal was to share directory listings seamlessly across various local websites without the usual performance penalties.
Let’s get straight to it. This is what we built…
To achieve this, we called upon out breadth of experience, bringing together a stack of modern, high-performance technologies across several interconnected projects. Here is a look under the covers, at how we built a embed that respects your website’s speed limit.
The Foundation: Lit and Sevalla
At the core of the embed is Lit, a lightweight web component framework developed by Google. It is the same technology used behind the scenes on YouTube and Google Maps. By using Lit, we ensure the embed itself is incredibly lean, meaning it downloads and executes in a fraction of the time a traditional framework might take. In fact, reload this page and note how fast the embed above actually loads!
To get this tiny package onto host websites as quickly as possible, we deliver the JavaScript via Sevalla. This worldwide Content Delivery Network (CDN) ensures that no matter where a user is located, the code loads almost instantly from a server near them.
Mapping on Our Terms: MapLibre and TileServer GL
Maps are notorious performance hogs and can come with unpredictable, escalating costs if you rely on commercial APIs like Google Maps. Years ago we decided to take control of both the cost and visual presentation for Visit Herefordshire’s own website to save them from that burden. Those same maps now power this embed.
We used MapLibre GL JS as our map renderer, providing a smooth, interactive experience. But the real magic happens behind the scenes with TileServer GL. Instead of paying for map views, we serve our own custom-generated maps of Herefordshire. This completely removes the need for commercial services and restrictions now we want to show them on more domains. More importantly, it gives us absolute control over the level of detail on the map, allowing us to strip away unnecessary clutter and deliver the clean, focused aesthetic you see on the screen.
While many would be nervous about running their own map tile server, it’s the kind of added value our development team relishes figuring out, and it really pays off. This map server has been running (at zero cost!) for over 5 years at the time of writing, without so much as a hiccup.
Powering the Data: Laravel and Meilisearch
A pretty map is nothing without data. The engine room of the Visit Herefordshire directory is built on Laravel, as a robust API extension to the existing purpose-built administrative interface that Herefordshire County BID members can use to manage their listing. Any BID member can sign in, create an customised embed, and get the code for their website.
As for the embed’s API: when a user searches for a listing on the map, that query is handled by Meilisearch. This is a lightning-fast search engine perfectly suited for location-based queries. It is incredibly performant, returning results in milliseconds. Crucially, Meilisearch gives us the headroom to introduce more complex, natural language searches in the future, ensuring the embed can evolve without slowing down.
Optimisation at the Edge: Thumbor and NGINX
Images are often the biggest culprit when it comes to slow websites. Directory listings come with photos, and we needed a way to serve these without dragging down the host site.
We integrated Thumbor to automatically resize, compress, and optimise listing images on the fly. This means a host website never has to load a massive, unoptimised photo. Finally, we placed NGINX in front of our services. NGINX provides smart, server-side caching of both the map tiles and the optimised images, ensuring that frequently requested assets are served instantly without putting extra burden on the underlying resources.
Privacy and Accessibility: Respectful by Design
Performance was only part of the brief. We also wanted the embed to be easy to trust and easy to use.
It is entirely cookieless and has no awareness of who has viewed it. We do not track individuals or build up viewer profiles. The only measurement retained is a simple load count for rough usage statistics. That means host websites do not need to revisit their GDPR wording, cookie banners, or consent tooling just to add the embed.
Accessibility has been an important consideration throughout. We have aimed for a clear, keyboard-friendly interface that works well with assistive technologies and remains usable in a wide range of real-world browsing conditions. Just like performance, accessibility is not an afterthought here. It is part of what makes the embed fit naturally and responsibly onto other people’s websites.
Performance and Flexibility: The Final Polish
We focused on “just-in-time” execution and visual flexibility. We implemented a strict lazy-loading strategy where the initial footprint is limited to a tiny, lightweight script: loader.js. This script acts as a silent observer and brief loading screen, only triggering the full render once the embed actually scrolls into the user’s viewport. This ensures the host site’s initial PageSpeed scores remain protected and bandwidth is only consumed when there is intent to interact.
On the visual side, we recognise that every website has unique layout requirements, so it was important that the embed could adapt to its surroundings. We built in support that allows developers to control the widget’s sizing and aspect ratio, ensuring it sits perfectly within its parent container without breaking the host site’s flow. There is even a dedicated, sharable instructions page for every entry. This allows business owners to simply send a single link to their web developer, providing them with the exact code snippets and documentation to removing any friction from the technical setup.
A Win for Everyone
By carefully selecting our technology stack and prioritising performance at every step, we have delivered a embed that works for everyone. End-users get a fast, interactive experience. Visit Herefordshire gets a cost-effective, future-proof platform to promote the county. And host websites can show off local attractions with confidence, knowing their hard-won performance scores remain intact.
This has been a genuinely fun project to work on, and we have only scratched the surface of the thinking and technology that went into it. If you would like to nerd out over the details, or chat about a smart little integration for your own website, get in touch.
