Strideora is a walking-groups app. Friends, workmates or a club walk together, everyone sets their own private daily step goal, and the group wins when people hit theirs, whatever their fitness. I built the website to go with it.
The brief had two parts that usually pull against each other. The site had to look like the app: bright cartoon illustrations, chunky sticker-style cards, wavy hills between sections and a beagle mascot. It also had to be properly fast on a phone.
The result: 100 across the board on mobile
The homepage scores 100 for Performance, Accessibility, Best Practices and SEO in Google PageSpeed Insights on mobile. Mobile is the hardest test to pass, because Google throttles the connection and the processor. See the PageSpeed report.
That score comes from standard shared hosting, with no CDN in front of it and no page builder. It’s down to how the site is built rather than expensive infrastructure.
What got it to 100
- A hand-coded theme. The theme is a custom classic WordPress theme, with no page builder and no parent theme. The browser only downloads what the pages actually use.
- Critical CSS inlined in the head. The styles for the header, hero, waves and footer arrive inside the first HTML response, and the rest of the stylesheet is preloaded. Before this, the wavy footer was making the page jump as it loaded, with layout shift scores as high as 0.54. After the fix the page stays still.
- Self-hosted fonts. There are three small WOFF2 font files, all preloaded and self-hosted, so there are no Google Fonts requests. Size-matched fallback fonts mean the text doesn’t reflow when the real fonts arrive.
- Modern, right-sized images. Every illustration is served as AVIF with a WebP fallback, in several widths, so phones get small files. The hero image is preloaded at high priority, and everything below the fold is lazy loaded. The image savings PageSpeed flagged fell from 168 KiB to 25 KiB.
- Waves drawn in code. The hills and waves are inline SVG with fixed heights. They add no extra requests and can’t shift the layout.
- Lean JavaScript. There’s one small deferred script of about 3 KB zipped, no jQuery, and no third-party scripts on page load. Analytics stays off until the visitor accepts cookies.
- Long browser caching. CSS, JavaScript, fonts and images are cached for a year, so return visits are close to instant.
The beagle that doesn’t slow anything down
Live chat widgets are one of the most common reasons a site fails PageSpeed. Strideora uses Help Scout Beacon for contact, which normally loads a stack of scripts on every page.
Instead, a hand-drawn beagle button sits in the corner of every page. Nothing from Help Scout loads until someone actually clicks it. The first click pulls in Beacon and opens the message form with the subject already filled in. If an ad blocker stops Beacon from loading, the button falls back to a plain email link, so nobody gets stuck.
The trade-off is that the first open takes a moment, but every page loads without carrying any of the chat widget’s weight.
What was built
- A homepage covering How it works, Why it’s different, Features, the Monthly league, an FAQ and Get the app.
- Help, About, Contact, Privacy, Terms and Coming soon pages.
- The Step Stories blog, with category filters, single post and archive templates.
- A cartoon 404 page.
- The logo and a full favicon set, including the beagle’s head simplified by hand for 16px.
- Yoast SEO for meta, schema and sitemaps.
Is your site slow on mobile?
Most sites don’t need a rebuild to get faster, just the right fixes in the right order. If your WordPress or WooCommerce site drags on a phone, book a quick call and we’ll look at what’s holding it back.