Redesigning my TYPO3 portfolio – what actually moved the Lighthouse scores

stefan andres — Thu, 29 Oct 2026 14:49:17 +0000

I recently rebuilt my personal site, www.stefan-andres.at, from scratch. It runs on TYPO3 13.4 with the Bootstrap Package, and the goal was simple: a light, calm design – and a site that scores well where it matters for users, not just in screenshots.

This isn't a "look at my new website" post. It's a list of the things that actually changed the numbers, with code you can copy.

Where I ended up (mobile, PageSpeed Insights):

Accessibility: 100
Best Practices: 100
SEO: 100
Performance: 96 (88 at launch, 95 after the font and contrast fixes, 77 after adding Analytics – more on that below)

1. Self-host your fonts – and get the file names right

The biggest single render-blocking item was Google Fonts: one CSS request to fonts.googleapis.com, then a chain to fonts.gstatic.com for every weight. Roughly 750 ms on a throttled mobile connection.

I downloaded the .woff2 files, put them in fileadmin, and wrote one @font-face per weight:

@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-display:swap;src:url(/fileadmin/Daten/fonts/PlusJakartaSans-Regular.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url(/fileadmin/Daten/fonts/PlusJakartaSans-Bold.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-display:swap;src:url(/fileadmin/Daten/fonts/PlusJakartaSans-ExtraBold.woff2) format("woff2")}
/* … 500, 600 and the italic display face */

Two lessons:

Check the file names. My first version pointed to a single plus-jakarta-sans-latin.woff2 that didn't exist – the site silently fell back to system fonts.
Remove the old @import. It was still sitting at the top of the main stylesheet and kept loading Google Fonts in parallel.

Then preload only the fonts visible above the fold:

page.headerData.5 = TEXT
page.headerData.5.value (
<link rel="preload" href="/fileadmin/Daten/fonts/PlusJakartaSans-ExtraBold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fileadmin/Daten/fonts/PlayfairDisplay-Italic.woff2" as="font" type="font/woff2" crossorigin>
)

Bonus: no third-party font requests means one less entry in the privacy policy and a simpler Content-Security-Policy.

2. Load page-specific CSS and JS only where it's needed

My site has ten free browser tools (contrast checker, favicon generator, minifiers, …). Their CSS and JavaScript were loaded on every page – including the home page, where none of them run.

TypoScript conditions make this a one-liner. All tools live below one page (uid 174):

[174 in tree.rootLineIds]
  page.includeCSS.tools = fileadmin/Template/css/cust03-tools.css
  page.includeJSFooter.customtools = fileadmin/Template/js/tools.js
  page.includeJSFooter.customtools.defer = 1
[END]

tree.rootLineIds matches the page itself and everything below it, so new tools are covered automatically.

3. Load Google Analytics only after consent

Adding GA4 the "standard" way dropped my performance score from 95 to 77. gtag.js is ~177 KB and Lighthouse flags most of it as unused.

But my cookie banner is opt-in anyway – until someone clicks "Allow", GA doesn't collect anything. So why load it?

<script>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{'ad_storage':'denied','ad_user_data':'denied','ad_personalization':'denied','analytics_storage':'denied'});

function loadGA(){
  if(window.gaLoaded)return; window.gaLoaded=1;
  gtag('consent','update',{'analytics_storage':'granted'});
  var s=document.createElement('script');
  s.async=1; s.src='https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX';
  document.head.appendChild(s);
  gtag('js',new Date()); gtag('config','G-XXXXXXX');
}

// returning visitors who already agreed
if(document.cookie.indexOf('cookieconsent_status=allow')>-1){loadGA();}
// first-time visitors clicking "Allow"
document.addEventListener('click',function(e){if(e.target.closest('.cc-allow')){loadGA();}});
</script>

cookieconsent_status and .cc-allow are the defaults of the cookie banner shipped with the Bootstrap Package – check your own cookie name in DevTools → Application → Cookies.

Result: Lighthouse (which never clicks "Allow") doesn't see GA at all, real visitors who consent are tracked normally, and it's cleaner from a GDPR point of view. Score back to 96.

4. Accessibility: contrast was the whole story

The audit flagged two things: contrast and heading order.

Contrast

My brand orange #df532e with white text sits at about 3.6:1 – below the WCAG AA minimum of 4.5:1 for normal text. Instead of changing the brand colour, I added a second token just for text and button backgrounds:

:root{
  --sa-orange:#df532e;       /* decoration: dots, lines, borders */
  --sa-orange-a11y:#c74523;  /* text and filled buttons: ~4.9:1 on white */
}

The less obvious trap: grey on dark. My footer used the same muted grey as the light sections. Darkening that grey (to fix light backgrounds) made the footer worse. Dark backgrounds need their own, lighter muted tone.

Heading order

Two culprits:

A card in the hero used an <h3> right after the <h1> – visually fine, semantically a skipped level. It's now a <p> with a class.
The Bootstrap Package constant defaultHeaderType = 5 turned every content element without an explicit header type into an <h5> – including my footer. Setting it to 2 fixed that globally.

5. Small things that added up

Images as WebP with explicit width/height → CLS dropped to 0.
fetchpriority="high" on the first visible image, loading="lazy" on the rest.
One CSS custom-property system (--sa-ink, --sa-gray, --sa-shadow-card, …) instead of hard-coded values. That made the contrast fixes a two-line change.
Mobile menu on iOS: a position:fixed menu inside a header with backdrop-filter rendered invisible in Safari. Anchoring it with position:absolute; top:100% relative to the header fixed it.

What's on the site now

Besides services and a portfolio, the site doubles as a small toolbox:

10 free browser tools – palette & contrast checker, favicon generator, image optimizer, SEO check, CSS/JS/SVG minifiers, a clamp() calculator, JSON formatter, a TYPO3 Fluid ViewHelper generator and a client-briefing generator
3 apps for iPhone & Mac – no account, no ads, data stays on the device
A glossary of print, web and video terms

If you work with TYPO3 or just want a quick contrast check, have a look: 👉 stefan-andres.at/tools

I'd love to hear what you'd improve – or what moved your Lighthouse scores the most.

Hey DEV! I'm Stefan — TYPO3 dev, and I just launched a page of free browser tools

stefan andres — Mon, 24 Aug 2026 05:33:10 +0000

Hey, I'm Stefan

I'm a freelance web designer & developer based in Klagenfurt, Austria — though these days most of my work happens for clients well beyond Austria's borders. My focus is TYPO3: building and maintaining sites end-to-end, from branding and visual identity through to a finished, working website. Alongside that I do graphic design and video editing, so a project usually has me moving between code, layout, and media in the same afternoon.

I'm mostly self-taught on the dev side, which means I've spent a lot of time in the last few years pulling apart how things work under the hood — TypoScript, page performance, and lately the more technical end of SEO (security headers, structured data, Core Web Vitals). This post is partly an excuse to talk about the result of that: a small toolset I just shipped on my site.

What I built

I wanted a set of quick, no-nonsense tools I could point clients (and myself) to instead of juggling five different sketchy websites full of ads. So I built my own, all living at stefan-andres.at/tools:

Palette & Contrast Checker — pick colors and instantly check contrast ratios for accessibility.
Icon & Favicon Generator — drop in a logo (PNG, SVG, even AI/PDF/EPS) and get every icon size you need, ready to download.
Web Image Optimizer — compress images for the web without leaving your browser.
CSS Minifier and JS Minifier — paste your code, get a minified version back.
SEO & Performance Check — enter a URL and get an on-page SEO report plus real Google PageSpeed metrics (LCP, FCP, CLS) with plain-language suggestions.

Most of these run entirely client-side — nothing you upload leaves your browser. Under the hood I'm using libraries like Terser and csso for minification and pdf-lib / pdf.js to handle vector file rendering for the icon generator. The SEO checker is the one exception — it calls a small PHP backend on my own server, which in turn talks to the Google PageSpeed Insights API.

What I learned building it

A few things stuck with me:

Bilingual UX is more work than it looks. The whole tools page runs in English and German, including the dynamically generated SEO report text — which meant threading a lang parameter all the way from the front-end fetch call through to the PHP backend's string tables.
Client-side file processing has come a long way. Being able to minify JS/CSS or rasterize a vector PDF entirely in the browser, with no server round-trip, still feels a little magical.
Security headers and structured data are underrated. Once I started running my own SEO tool against my own site, I found (and fixed) my own gaps — missing CSP, missing JSON-LD, missing an apple-touch-icon. Nothing dramatic, just easy wins that add up.

Say hi

I'm always happy to talk TYPO3, front-end tooling, or technical SEO — and I'm open to freelance work and collaborations, wherever you're based. Feel free to check out the tools, break them, and tell me what's missing. 🙂

Cheers,
Stefan

DEV Community: stefan andres