Beperk niet-gebruikte CSS

Beperk niet-gebruikte CSS om minder te laden en zo pagespeed en Web Vitals te verbeteren. Veel zaken zal je op elke pagina nodig hebben, denk bijvoorbeeld aan de CSS voor de header en footer die op iedere pagina getoond worden. Ook voor content kan veel standaard zijn maar bijvoorbeeld de CSS voor een contactpagina heb je alleen op deze pagina nodig.

Vaak worden er ook verschillende css-files geladen door plugins. Elke plugin heeft altijd zijn eigen CSS-file. Elke file moet apart geladen worden en dit kan ook voor vertraging zorgen tijdens het laden. Waarschijnlijk zijn deze files ook niet nodig op elke pagina van je website.

Laad alleen wat je nodig hebt op de desbetreffende pagina en meer niet.

Beperk niet-gebruikte css

Er zijn hier veel zaken die je kan doen. Om direct je hoofd CSS-file te strippen is waarschijnlijk niet de beste oplossing. Wat wel mogelijk is dat je andere CSS-files van plugins verwijderd die niet overal nodig zijn. Laad deze files alleen op de pagina’s waar deze echt nodig zijn. Denk bijvoorbeeld aan een slider die misschien alleen op de homepage wordt gebruikt. Deze CCS-file hoef je niet op alle pagina’s te laden.

In Chrome DevTools kan je bij de tab coverage zien welke CSS niet gebruikt wordt. Je kan dan zien wat je zou kunnen verwijderen. Probleem is dat je dit voor alle pagina’s moet doen en dat is erg veel werk. Voor de perfectionisten die hier de tijd voor willen nemen is dit een mogelijkheid.

Andere mogelijkheid is om de CSS inline in de header te plaatsen. Het is dan niet nodig om de CSS-file aparte te laden. Vergeet niet dat je alleen moet laden dat je nodig hebt, dus probeer hier niet direct alle CSS van alle plugins samen te voegen en inline te plaatsen.

Voor de gebruikers van WordPress is het een mogelijkheid om de Gutenberg blocks te gebruiken. Vanaf 5.7 is dit verbeterd en wordt de CSS op een betere manier geplaatst, afhankelijk van de blokken die je gebruikt.

Beperk niet-gebruikte CSS Freelance website ontwikkeling

Vraag vrijblijvende een offerte aan.

Offert Aanvragen

Niet-gebruikte CSS beperken of niet

Het is geheel aan een ieder hierover te beslissen. Dit is een verbetering voor FCP (First Contentful Paint) en LCP (Largest Contentful Paint). Dit zijn belangrijke onderdelen van Web Vitals.

Als je gaat kijken naar hoeveel je echt kunt besparen door het beperken van niet-gebruikte CSS dan zal je verbazen dat het niet zo heel veel is meestal. Je zou kunnen overwegen om meer te verbeteren met betrekking tot afbeeldingen.

Als we kijken naar het verwijderen van plugins is dat meestal wel interessant. Als men zorgen dat bepaalde files alleen geladen worden op de pagina’s waar ze nodig zijn is meestal ook al voldoende om dit te verbeteren.

Er zijn nog geen reacties. Wees de eerste..!!

Reageer

E-mailadres wordt niet gepubliceerd.
Verplichte velden zijn gemarkeerd met *

*
*
*