Verwijder ongebruikte CSS code verkleinen snel laden

Logo cursus traing wordpress

Verwijder ongebruikte CSS code verkleinen snel laden

Verwijder ongebruikte CSS

Als je code in je stylesheets hebt die niet gebruikt wordt, waarom zou je die dan bewaren? Oude of ongebruikte code moet worden verwijderd, zodat deze niet wordt geladen telkens wanneer uw site wordt opgevraagd. Chrome DevTools (waarnaar we hierboven hebben gelinkt) kan u onder het tabblad Dekking laten zien welke delen van uw CSS worden geladen maar niet worden gerenderd.

Divi-gebruikers moeten er bovendien rekening mee houden dat we de manier waarop ons thema omgaat met CSS en dit soort style bloat volledig hebben herzien. De Divi performance update houdt CSS dynamisch gesorteerd in kleine, minified die zijn gebaseerd op de modules die u hebt gekozen op uw pagina. Bovendien identificeren we welke delen van die CSS boven de vouw worden geladen en renderen die als eerste. En dat vermindert uw FCP.

Dus we hebben niet alleen uw CSS automatisch geminificeerd, we hebben het ook in hapklare brokken gehakt voor uw browser en prioriteit gegeven aan de brokken die het FCP en de totale laadtijd van de pagina verhogen.

Weergaveblokkering door CSS

CSS is standaard een display blocker. Dat wil zeggen dat de hele CSS code eerst door de browser moet worden geladen voordat er überhaupt inhoud kan worden gezien.
Gelukkig zijn er manieren om de display blocker te omzeilen. Een voorbeeld:

/* Voor smartphone/kleine schermen */
@media only screen and (min-width: 768px) {
  /* Voor desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
}

Het CSS stukje code hierboven is een voorbeeld van Mobile First, wat betekent dat op kleine schermen (minder dan 768px breed) er minder CSS code geladen hoeft te worden. Hierdoor is het laden van de website op een smartphone geen display blocker door onnodige CSS code. Het CSS-gedeelte voor schermen groter dan 768px hoeft niet te worden geladen, wat resulteert in een lagere FCP-score.


Meer informatie over Verwijder ongebruikte CSS code verkleinen snel ladenof info?

Wil je meer weten? Veel lezers met interesse in Verwijder ongebruikte CSS code verkleinen snel laden bekeken ook de onderstaande artikelen:


WordPress cursus onderhoud

De meeste problemen met websites ontstaan door een combinatie van factoren. Van webhosting tot de inrichting van je site. Ik heb de laatste 15 jaar vele WordPress websites vast zien lopen, langzaam of gehackt zien worden door de verkeerde aanpak.

Deze problemen, ellende en schade is te vermijden door de juiste aanpak en strategie. Het is even werk en vergt een investering in tijd, geld en energie maar daarna heb je gegarandeerd minder problemen, meer plezier, meer controle en een betere WordPress site.

WordPress cursus onderhoud en beheer

Leer hoe je WordPress sites en webshops beter kan beheren en beveiligen in de speciale onderhoudscursus:
WordPress cursus Onderhoud en beheer

WordPress Bootcamp

Leer hoe je je website sneller en gestroomlijnder kan bouwen in de WordPress Bootcamp:
Web-development in WordPress Bootcamp

Nog vragen over Verwijder ongebruikte CSS code verkleinen snel laden?

Neem eventueel contact op met Arthur als je nog vragen hebt over onderhoud, beveiliging, Verwijder ongebruikte CSS code verkleinen snel laden en WordPress sites en webshops.

WordPress expert

Arthur Wentzel, web-developer

06 20 83 05 83

Scroll naar boven