Welke valkuilen kunnen ontstaan bij het optimaliseren van de prestaties van CSS?

Niet-geoptimaliseerde selectors. De browser parseert CSS van rechts naar links, dus complexe en overbodige selectors, vooral met de universele selector * of de descendant selector >, vertragen de stijlberekening.

Een groot aantal @import regels in CSS. Ze blokkeren de parallelle laden van stijlen, wat de pagina-rendering vertraagt.

Gebruik van complexe of resource-intensieve CSS-eigenschappen, zoals schaduwen (box-shadow, text-shadow) of vervaging (filter: blur), tijdens animaties of met veel elementen.

Onleesbaar of overbodig CSS, geschreven zonder rekening te houden met specificiteit en erfelijkheid, wat leidt tot overschrijving van regels en vergroting van de bestandsgrootte.

Ongebruikte CSS (“dead CSS”) — regels die niet worden toegepast op de huidige structuur. Verhoogt de bestandsgrootte en de parsing-tijd.

Achtergrondafbeeldingen van grote omvang of in ongeschikte formaten, die langzaam laden en de rendering blokkeren.

Gebruik van frameworks die veel niet-gebruikte stijlen toevoegen.

Slecht ontworpen layout met teveel elementen of diepe geneste structuur, wat de herteken- (repaint) en herberekeningsduur (reflow) verhoogt.

Onjuist gebruik van will-change — kan leiden tot overmatig GPU-geheugengebruik of onnodige laagcreatie.

Ontbreken van compressie (Gzip of Brotli) bij het overdragen van CSS-bestanden vanaf de server.