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 bestanden 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.