Joomla template performance: optimalisatie voor ontwikkelaars

1. De basis

1.1 Waar templateprestaties zitten

Het laden van een pagina heeft twee helften. Eerst de serverhelft: Joomla draait PHP, bevraagt de database en produceert HTML. Dat bepaalt de Time To First Byte (TTFB). Dan de browserhelft: de browser parset de HTML, downloadt de CSS, JavaScript, lettertypen en afbeeldingen waar de template naar verwijst, bouwt de layout op en tekent het scherm. Dat bepaalt First Contentful Paint, Largest Contentful Paint en hoe "vlot" de pagina aanvoelt.

De template domineert die tweede helft vrijwel volledig. Een template bepaalt:

• Hoeveel CSS- en JavaScript-bestanden er laden, en hoe groot ze zijn.
• Of lettertypen van je eigen server komen, van Google, of van het systeem van de bezoeker zelf.
• Hoeveel DOM-nodes de browser moet opbouwen en positioneren.
• Of afbeeldingen in de layout (logo, banners) direct of lui laden.
• Of assets op elke pagina laden of alleen waar ze gebruikt worden.

1.2 Denken in budgetten

Zie elke pagina als een budget: kilobytes om te downloaden, milliseconden om te renderen. Elke stylesheet, elk script, elk lettertype en elke wrapper-<div> geeft van dat budget uit. Een snelle template is geen template met slimme trucs; het is een template die weinig uitgeeft. Cassiopeia, de standaardtemplate van Joomla, is een goed studieobject: de eigen JavaScript is minder dan 1 KB geminificeerd, en lettertypen en kleuren zijn optionele extra's in plaats van standaardkosten.

1.3 Meet eerst

Meet voordat je iets verandert. Gebruik Lighthouse (in Chrome DevTools) of PageSpeed Insights voor de browserhelft, en Joomla's plugin Systeem - Foutopsporing voor de serverhelft. Is de TTFB traag, dan is de template niet je probleem - begin dan bij het algemene prestatie-artikel. Is de TTFB prima maar verschijnt de pagina toch laat, lees dan verder: de templatelaag is waar je gaat winnen.

3. De Web Asset Manager: laad alleen wat je nodig hebt

Sinds Joomla 4 zijn assets geen losse <link>- en <script>-tags meer, maar benoemde items in een afhankelijkheidsgraaf, beheerd door de Web Asset Manager. Dit is het belangrijkste prestatiegereedschap in de templatelaag.

3.1 Het assetregister: joomla.asset.json

Elke template en extensie kan een bestand joomla.asset.json meeleveren dat de assets declareert: een naam, een bestand, afhankelijkheden en opties. Het register van Cassiopeia (in templates/cassiopeia/joomla.asset.json) declareert onder andere:

• template.cassiopeia.ltr - de hoofdstylesheet, met een afhankelijkheid van fontawesome.
• template.cassiopeia - het templatescript, geladen met "type": "module" zodat het het parsen nooit blokkeert.
• template.user - de optionele user.css / user.js, met "weight": 500 zodat hij altijd als laatste laadt en de cascade wint.
• template.active - een leeg "dummy"-asset waar extensies van kunnen afhangen om na de actieve template te laden.

Omdat afhankelijkheden gedeclareerd zijn, laadt Joomla elk asset een keer, in de juiste volgorde, hoeveel extensies er ook om vragen. Je beheert scriptvolgorde nooit meer met de hand.

3.2 Presets: een schakelaar voor een bundel

Een preset groepeert meerdere assets onder een naam. De index.php van Cassiopeia zet de hele frontend aan met een aanroep:

$wa = $this->getWebAssetManager();
$wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'));

De preset haalt de stylesheet en het script binnen, en hun afhankelijkheden komen automatisch mee. Let op het detail: de RTL-stylesheet laadt alleen voor talen die van rechts naar links lezen. Dat is conditioneel laden op templateniveau - de LTR-bezoeker betaalt nooit voor RTL-regels.

3.3 Conditioneel laden in overrides

De grootste winst voor echte sites: laad een asset alleen op pagina's die hem gebruiken. Een template-override is daarvoor de perfecte plek, want die draait alleen wanneer die view rendert:

<?php
// In een override, bijv. templates/cassiopeia_child/html/com_content/article/default.php
$wa = $this->getDocument()->getWebAssetManager();

$wa->registerAndUseScript(
    'mysite.gallery',                       // assetnaam
    'templates/cassiopeia_child/gallery.js', // bestand
    ['version' => 'auto'],                  // opties
    ['defer' => true]                       // attributen
);

Het galerijscript laadt nu alleen op artikelpagina's. Je homepage, contactpagina en categorielijsten zien het nooit. Dit ene patroon - paginaspecifieke assets verplaatsen van index.php naar overrides - levert vaak meer op dan welke minificatieplugin dan ook.

3.4 Cache busting met version: auto

De optie ['version' => 'auto'] plakt Joomla's mediaversie achter de URL (bijvoorbeeld template.min.css?a1b2c3). De hash wordt gegenereerd in libraries/src/Version.php uit de Joomla-versie, je secret en een datum, en verandert bij elke update en cache-leging. Zo kun je lange browsercache-tijden instellen voor statische assets zonder ooit een verouderd bestand te serveren na een update.

5. CSS-strategie

5.1 Weet wat je verstuurt

Cijfers van een standaard Joomla 6-installatie: Cassiopeia's template.min.css is ongeveer 247 KB ongecomprimeerd (hij bevat heel Bootstrap), en de fontawesome-afhankelijkheid voegt zo'n 100 KB icoon-CSS toe. Compressie maakt dit op de lijn veel kleiner - Joomla levert zelfs voorgecomprimeerde .gz-bestanden naast elk geminificeerd asset - maar de browser parset nog steeds het volledige bestand. Een maatwerktemplate die alleen de CSS bevat die hij gebruikt, kan een tiende van die omvang zijn.

5.2 Een bestand verslaat vele - meestal

Met HTTP/2 is de oude regel "combineer alles in een bestand" versoepeld, maar een stapel kleine stylesheets kost nog steeds ontdekkingstijd, en @import-ketens zijn het slechtste geval: elke import wordt pas ontdekt nadat het vorige bestand gedownload is. Houd het simpel: een gecompileerde, geminificeerde templatestylesheet, plus user.css voor sitespecifieke aanpassingen. Groeit je user.css voorbij een paar honderd regels, dan is het tijd om de regels te verhuizen naar de gecompileerde stylesheet van een child template.

5.3 Inline het kritieke, stel de rest uit

Cassiopeia inlinet zijn CSS custom properties (kleuren, lettertypen) met $wa->addInlineStyle() direct in index.php - een klein kritiek blok dat geen extra request nodig heeft. Hetzelfde idee schaalt op: inline de kleine hoeveelheid CSS die nodig is om de bovenkant van de pagina te tekenen, en laad de rest zonder te blokkeren. Joomla heeft voor dat niet-blokkerende deel een ingebouwd mechanisme, dat je in de lettertypesectie ziet: het attribuut rel="lazy-stylesheet".

5.4 Moderne CSS: laat de browser werk overslaan

Twee nieuwere CSS-features geven templates directe renderwinst, zonder JavaScript:

/* Render secties buiten beeld pas als de bezoeker in de buurt scrollt */
.site-footer,
.below-fold-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px; /* reserveer ruimte, voorkom layoutverschuiving */
}

/* Vertel de browser dat de binnenkant van een widget de buitenkant niet raakt */
.module-card {
    contain: layout style;
}

content-visibility: auto laat de browser layout en paint overslaan voor content buiten beeld - op lange pagina's verbetert dat de eerste weergave meetbaar. contain beperkt hoe ver layoutherberekeningen doorwerken. Beide zijn veilig toe te voegen in user.css of een child template en degraderen netjes in oudere browsers.

7. Lettertypestrategie: de les van Cassiopeia

Lettertypen zijn vaak de grootste renderblokkerende kostenpost in een template - en de lettertype-aanpak van Cassiopeia is een masterclass die je kunt kopieren. Er zijn vier keuzes, in oplopende volgorde van kosten:

7.1 Optie nul: geen lettertypeschema

De standaard. De template gebruikt zijn ingebouwde stack en downloadt niets. Nul requests, nul bytes, nul layoutverschuiving.

7.2 Systeemfontstacks: gratis en direct

De optie useFontScheme in de templatestijl biedt samengestelde systeemfontstacks (Transitional, Humanist, Geometric, Monospace en meer). Die verwijzen naar lettertypen die al op het apparaat van de bezoeker staan - bijvoorbeeld Inter, Roboto, 'Helvetica Neue', Arial, sans-serif. De tekst rendert direct bij de eerste paint. Voor de meeste zakelijke sites is een goed gekozen systeemstack visueel niet te onderscheiden van een webfont en kost hij niets.

7.3 Lokale lettertypen: zelf gehost, voorgeladen

De optie "Roboto (local)" laadt een stylesheet van je eigen server (media/templates/site/cassiopeia/css/global/fonts-local_roboto.css). Kijk hoe index.php hem laadt:

$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme,
    ['version' => 'auto'], ['rel' => 'lazy-stylesheet']);
$this->getPreloadManager()->preload(
    $wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(),
    ['as' => 'style']
);

Twee trucs tegelijk: de stylesheet wordt voorgeladen (de browser begint direct met ophalen) maar gelinkt als rel="lazy-stylesheet", zodat hij het renderen niet blokkeert. Joomla's StylesRenderer genereert bovendien een <noscript>-fallback voor bezoekers zonder JavaScript. Zelf hosten houdt je ook aan de veilige kant van de AVG - er gaan geen IP-adressen van bezoekers naar een derde partij alleen om een lettertype op te halen.

7.4 Google Fonts: de volledige schadebeperking

Kies je toch voor de webfont-optie, dan laat Cassiopeia zien hoe je de schade beperkt: het roept preconnect aan voor zowel fonts.googleapis.com als fonts.gstatic.com (zodat DNS, TCP en TLS vroeg gebeuren), laadt de stylesheet voor, en linkt hem opnieuw lui met de noscript-fallback. Kopieer dit patroon voor elke externe resource die je niet kunt vermijden. En in je eigen @font-face-regels: gebruik alleen WOFF2, voeg font-display: swap toe en subset de tekenset als het fontbestand dat toelaat. Overweeg meteen een variabel lettertype: een variabel WOFF2-bestand dekt elk gewicht van licht tot vet, en vervangt zo drie of vier aparte downloads.

9. Resource hints en de Preload Manager

Joomla verpakt browser-resource-hints in een kleine API op het document: de PreloadManager (libraries/src/Document/PreloadManager.php). Je zag hem al in de lettertypesectie; dit is de volledige gereedschapskist:

<?php
$doc = Joomla\CMS\Factory::getApplication()->getDocument();
$pm  = $doc->getPreloadManager();

$pm->preconnect('https://cdn.example.com/');       // open de verbinding vroeg
$pm->dnsPrefetch('https://stats.example.com/');    // los DNS vroeg op (goedkoper)
$pm->preload('/media/.../hero.woff2',              // haal een kritiek bestand nu op
    ['as' => 'font', 'crossorigin' => 'anonymous']);
$pm->prefetch('/waarschijnlijke-volgende-pagina'); // ophalen in luwe tijd, voor later

Een detail dat de meeste ontwikkelaars missen: Joomla print deze hints niet als <link>-tags in de head. De methode preloadAssets() in libraries/src/Document/Document.php serialiseert ze naar een HTTP Link-responseheader. De browser ziet de hints in de headers voordat hij ook maar een byte HTML geparsed heeft - eerder dan welke head-tag dan ook. Het betekent ook dat goed geconfigureerde servers er HTTP 103 Early Hints van kunnen maken.

Gebruik hints spaarzaam. Alles voorladen is niets voorladen: elke hint concurreert om dezelfde bandbreedte als de pagina zelf. Twee of drie hints voor echt kritieke resources (het hoofdlettertype, een externe origin) is de juiste maat.

11. De template meten

11.1 Scheid de twee helften

Splits in je meettool de statistieken: TTFB hoort bij de serverhelft; alles daarna (First Contentful Paint, Largest Contentful Paint, totale blokkeertijd, layoutverschuiving) hoort vooral bij de templatehelft. Een pagina met een TTFB van 200 ms en een LCP van 4 seconden heeft een templateprobleem, en geen enkele servertuning lost dat op.

Scheid ook labdata van velddata. Lighthouse draait een eenmalige test op een gesimuleerd apparaat (lab); het Core Web Vitals-rapport in Google Search Console en het bovenste blok van PageSpeed Insights tonen wat echte bezoekers de afgelopen 28 dagen hebben gemeten (veld). Een goede labscore in combinatie met falende velddata betekent meestal dat je echte publiek tragere apparaten of netwerken gebruikt dan je test. Vertrouw de veldcijfers - die tellen voor de ranking.

11.2 Drie browsertools die zichzelf terugverdienen

• Lighthouse - de totaalscore, plus concrete signalen: renderblokkerende resources, ongebruikte CSS/JS, DOM-omvang, ontbrekende afbeeldingsafmetingen.
• Coverage-paneel (DevTools) - toont per CSS/JS-bestand het percentage dat op de huidige pagina echt gebruikt wordt. Genadeloos eerlijk over frameworkballast.
• Netwerkthrottling - test op "Slow 4G" met CPU-throttling. De telefoons van je bezoekers zijn trager dan je ontwikkelmachine; een template is pas snel als hij daar snel is.

11.3 Joomla's eigen blik

Zet de plugin Systeem - Foutopsporing aan en lees de profilerbalk: afterRenderModule-regels tonen wat elke modulepositie kost in milliseconden, en de assetlijst toont elk bestand dat de Web Asset Manager besloot te laden, met de afhankelijkheidsketen. Het is de snelste manier om die ene module of asset te vinden die niet op deze pagina thuishoort.

13. SEO en metadata

Core Web Vitals zijn een rankingsignaal, en de template bepaalt alle drie: de Largest Contentful Paint (lettertypen, renderblokkerende CSS, de heroafbeelding), Cumulative Layout Shift (afbeeldingsafmetingen, fontwissels, laat ladende banners) en de reactiesnelheid op interactie (JavaScript-gewicht). Een templateverbouwing is daarmee net zo goed een SEO-project als een designproject.

Twee templatespecifieke SEO-details: houd de <meta name="viewport">-tag intact (Cassiopeia zet width=device-width, initial-scale=1; zonder die tag zakt je site direct voor mobielvriendelijkheid), en zorg dat inhoud achter accordeons of tabs gewoon in de HTML staat - zoekmachines indexeren die prima, maar inhoud die pas na interactie door JavaScript wordt ingeladen is riskanter. Slanke, semantische markup met een enkele <h1> en een logische koppenboom helpt crawlers en schermlezers allebei.

15. Best practices

Als je maar een paar dingen uit dit artikel onthoudt, onthoud dan deze:

• Meet eerst, en splits de helften: TTFB is de server, alles daarna is vooral de template.
• Registreer elk asset via de Web Asset Manager, met defer of type="module" voor scripts en ['version' => 'auto'] voor cache busting.
• Laad paginaspecifieke assets in overrides, niet in index.php.
• Zet countModules()-controles om moduleposities en kies de lichtste chrome die werkt.
• Kies bij voorkeur systeemfontstacks; heb je webfonts nodig, host ze dan zelf en kopieer Cassiopeia's patroon van preload plus lazy-stylesheet.
• Lazy-load nooit het LCP-element; zet altijd afbeeldingsafmetingen.
• Gebruik content-visibility: auto op lange secties onder de vouw - een CSS-regel voor echte renderwinst.
• Houd de eigen JavaScript van de template piepklein; Cassiopeia redt het met minder dan 1 KB.
• Test met throttling, en lees het Coverage-paneel voordat je een nieuwe bibliotheek toevoegt.

17. Samenvatting

• De server bepaalt de TTFB; de template bepaalt bijna alles wat de bezoeker daarna ervaart.
• Joomla rendert eerst het component, draait dan je templatebestand en vervangt daarna de <jdoc:include>-tags - modules renderen op dat moment, de head als laatste.
• De Web Asset Manager is het centrale prestatiegereedschap: benoemde assets, afhankelijkheidsvolgorde, presets, conditioneel laden in overrides en automatische cache busting.
• Slanke markup betaalt dubbel uit: minder DOM-nodes renderen sneller en zijn makkelijker toegankelijk te maken. countModules() en lichte chromes houden de boom klein.
• Lettertypen volgen een kostenladder van "geen" tot Google Fonts; Cassiopeia demonstreert het schadebeperkingspatroon (preconnect, preload, lazy stylesheet) als je die ladder beklimt.
• Resource hints reizen als een HTTP Link-header, voor de HTML zelf uit - krachtig, en het best spaarzaam gebruikt.
• Modulecache-modi, loading-attributen op afbeeldingen en moderne CSS zoals content-visibility maken de gereedschapskist compleet.

Een snelle template is vooral de som van kleine, bewuste beslissingen: een stylesheet minder, een script met defer, een overgeslagen modulewrapper. Blijven je scores laag na het tunen en vermoed je dat de template of zijn extensies de oorzaak zijn, dan loont het om de renderpijplijn systematisch te laten doormeten - de bottleneck zit meestal op de laatste plek waar de sitebouwer keek.