As a web developer running a small studio in Stockholm, I've spent the past two years building websites for construction and service companies across Sweden. Here's what I've learned about creating fast, effective websites for small businesses that actually generate leads.
Why Speed Matters for Local Businesses
When a homeowner in Stockholm searches for "renovering Nynäshamn" or "staket Stockholm," they're ready to hire. If your site takes more than 3 seconds to load, you've lost them to the competitor whose site loads in 1.
For our client Totalbyggarna, a renovation company south of Stockholm, we cut load time from 5.2s to 1.1s. The result? A 40% increase in contact form submissions.
The Tech Stack That Works
After building sites for various trades — from fence installation to foundation work and cleaning services — I've settled on a reliable stack:
Express.js + Server-Side Rendering
const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());
// Pre-render critical pages
app.get('/', (req, res) => {
res.render('index', {
title: 'Renovering Stockholm',
preloadImages: getCriticalImages()
});
});
Why Express over Next.js or Gatsby for these projects? Simple: these are 5-10 page sites. A full React framework is overkill. Server-rendered HTML with minimal JavaScript gives us:
- Sub-second Time to First Byte (TTFB)
- Perfect Lighthouse scores (90+)
- Zero client-side JavaScript dependency
Performance Tricks That Actually Work
1. Image Optimization Pipeline
Construction sites = lots of photos. We built a simple pipeline:
const sharp = require('sharp');
async function optimizeImage(input, output) {
await sharp(input)
.resize(1200, null, { withoutEnlargement: true })
.webp({ quality: 80 })
.toFile(output);
}
2. Critical CSS Inlining
For a site like ByggLog (our construction project management tool), we inline above-the-fold CSS directly in the HTML head:
<head>
<style>
/* Critical path CSS - only what's needed for first paint */
.hero { display: flex; min-height: 60vh; }
.nav { position: fixed; width: 100%; z-index: 100; }
</style>
<link rel="preload" href="/css/main.css" as="style">
</head>
3. Lazy Loading Everything Below the Fold
<img src="placeholder.svg"
data-src="project-photo.webp"
loading="lazy"
alt="Renovation project in Nynäshamn">
SEO for Local Businesses
Technical SEO for local Swedish businesses has its own quirks:
- Swedish characters matter: "ä", "ö", "å" in URLs and meta descriptions
- Google My Business integration: Schema markup for local businesses
- Mobile-first: 73% of our Swedish clients' traffic comes from mobile
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Totalbygg Nynäshamn",
"address": {
"addressLocality": "Nynäshamn",
"addressCountry": "SE"
}
}
Results
Across our portfolio at Apex Studio, here's what we've consistently achieved:
| Metric | Before | After |
|---|---|---|
| Page Load | 4-6s | 1-1.5s |
| Lighthouse Performance | 40-60 | 90-100 |
| Mobile Usability | Poor | Excellent |
| Organic Traffic | baseline | +120% (6 months) |
We also built a design portfolio site for our creative work at Son & Får, which showcases how the same performance principles apply to media-heavy creative sites.
Key Takeaways
- Don't over-engineer: Small business sites don't need React/Vue/Angular
- Optimize images aggressively: WebP + lazy loading + srcset
- Server-side render: Let the server do the heavy lifting
- Measure everything: Lighthouse CI in your deployment pipeline
- Think local: Schema markup + GMB + local keywords
I'm Mateusz, founder of Apex Studio in Stockholm. We build fast, modern websites for construction and service companies across Sweden. Check out our work or reach out if you want to chat about web performance.
Top comments (0)