{"id":40192,"date":"2021-10-07T13:43:45","date_gmt":"2021-10-07T11:43:45","guid":{"rendered":"https:\/\/kinsta.com\/?p=102244"},"modified":"2023-05-23T10:24:56","modified_gmt":"2023-05-23T08:24:56","slug":"optimaliseer-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/optimaliseer-css\/","title":{"rendered":"Zo optimaliseer je CSS voor maximale siteprestaties"},"content":{"rendered":"

Zelfs in 2021 blijven webprestaties een probleem. Volgens HTTP Archive vereist de gemiddelde pagina een download van 2MB<\/a>, doet deze meer dan 60 HTTP verzoeken en kan het 18 seconden<\/a> duren om volledig op een mobiel apparaat te laden. Stylesheets zijn goed voor slechts 60 kB – verdeeld over zeven verzoeken – dus ze zijn zelden een topprioriteit bij het oplossen van prestatieproblemen.<\/p>\n

Toch heeft CSS wel degelijk een effect, hoe klein het ook lijkt. Zodra je je JavaScript<\/a> hebt geoptimaliseerd, zou het leren om CSS op de juiste manier te optimaliseren de volgende prioriteit moeten zijn.<\/p>\n

Laten we ermee bezig gaan!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Zo be\u00efnvloedt CSS de prestaties van je pagina’s<\/h2>\n

CSS ziet er misschien onschuldig uit, maar het verwerken ervan kan zeker wat verwerkingskracht kosten.<\/p>\n

CSS is render-blocking<\/h3>\n

Wanneer je browser een <link><\/code> tag tegenkomt, stopt het alle andere browserdownloads en -verwerkingen terwijl deze het CSS ophaalt en parset.<\/p>\n

JavaScript kan ook het renderen van de browser blokkeren<\/a>, maar asynchrone verwerking is mogelijk met:<\/p>\n

    \n
  1. Het async<\/code> attribuut om scripts parallel te downloaden, die worden uitgevoerd zodra ze klaar zijn.<\/li>\n
  2. Het defer<\/code> attribuut om parallel te downloaden en vervolgens op volgorde uit te voeren wanneer de DOM gereed is.<\/li>\n
  3. Het type=\"module\"<\/code> attribuut om een ES module te laden (die zich gedraagt als defer<\/code>).<\/li>\n<\/ol>\n

    Assets zoals afbeeldingen vereisen vaak meer bandbreedte, maar er zijn effici\u00ebnte formats beschikbaar<\/a> en je kan ze lazyloaden<\/a> (loading=\"lazy\"<\/code> attribuut) zonder de browserweergave te blokkeren.<\/p>\n

    Dit is allemaal niet mogelijk met CSS. Het bestand wordt in de cache opgeslagen, dus volgende pagina’s zouden<\/em> sneller moeten worden geladen, maar het render-blocking proces blijft een issue.<\/p>\n\n

    Het verwerken van grote CSS bestanden kost tijd<\/h3>\n

    Hoe groter je stylesheet, hoe langer het duurt om deze te downloaden en te verwerken in een CSS Object Model (CSSOM), dat de browser en JavaScript API’s kunnen gebruiken om de pagina weer te geven. Hoewel CSS stylesheets kleiner zijn dan de meeste andere websitebestanden, zijn ze niet immuun voor de vuistregel ‘kleiner is beter’.<\/p>\n

    CSS bestanden groeien<\/h3>\n

    Het kan moeilijk zijn om stijlen te identificeren die niet meer worden gebruikt, en het verwijderen van de verkeerde kan grote schade aanrichten op een site. Ontwikkelaars kiezen doorgaans voor de benadering van “alles houden”. Paginastijlen<\/a>, componenten<\/a> en widgets die niet meer worden gebruikt, blijven dus achter in de CSS. Het resultaat? De bestandsgrootte, complexiteit \u00e9n de tijd die het kost om alles te onderhouden groeit exponentieel, waardoor ontwikkelaars steeds minder snel overbodige code zullen verwijderen.<\/p>\n

    Stylesheets kunnen verwijzen naar andere assets<\/h3>\n

    CSS kan verwijzen naar andere stylesheets met behulp van @import regels. Deze imports blokkeren de verwerking van de huidige stylesheet en het laden van verdere CSS bestanden in serie<\/strong>.<\/p>\n

    Er kan ook naar andere assets worden verwezen, zoals lettertypen en afbeeldingen. De browser zal proberen downloads te optimaliseren, maar bij twijfel haalt hij ze onmiddellijk op. Inline base64-encoded bestanden worden nog verder verwerkt.<\/p>\n

    CSS be\u00efnvloedt rendering<\/h3>\n

    Browsers hebben drie rendering-fasen<\/a>:<\/p>\n

      \n
    1. De layout<\/strong> (of reflow<\/strong>) fase berekent de afmetingen van elk element en hoe dit de grootte of positionering van elementen eromheen be\u00efnvloedt.<\/li>\n
    2. De paint<\/strong> fase haalt de visuele delen van elk element naar afzonderlijke lagen: tekst, kleuren, afbeeldingen, randen, schaduwen, etc.<\/li>\n
    3. De composite<\/strong> fase plaatst elke laag op de pagina in de juiste volgorde, op basis van stackingcontexts, positionering, z-indexen, etc.<\/li>\n<\/ol>\n

      Als je niet oppast, kunnen wijzigingen in CSS properties en animaties ervoor zorgen dat alle drie de fasen opnieuw moeten worden gerenderd. Sommige eigenschappen (properties), zoals schaduwen en gradients, kosten meer computerkracht dan bijvoorbeeld blokkleuren en marges.<\/p>\n

      Analysetools CSS performance<\/h2>\n

      Toegeven dat je een CSS prestatieprobleem hebt, is de eerste stap op weg naar herstel! Het vinden en verhelpen van de oorzaken is een andere zaak.<\/p>\n

      De volgende tools en diensten (niet in willekeurige volgorde gerangschikt) kunnen je helpen bij het identificeren van knelpunten in je code.<\/p>\n

      1. DevTools Network paneel<\/h3>\n

      Specialisten op het gebied van webprestaties besteden veel tijd binnen DevTools<\/a> en het Network<\/strong> paneel in het bijzonder. DevTools is ingebouwd in de meeste moderne browsers<\/a>, hoewel we in onze voorbeelden Google Chrome zullen gebruiken.<\/p>\n

      DevTools kan worden geopend vanuit het browsermenu, normaal gesproken via More tools<\/strong> > Developer tools<\/strong> of via de sneltoetsen Ctrl | Cmd + Shift + I<\/strong> of F12<\/strong>.<\/p>\n

      Schakel over naar het Network<\/strong> tabblad en zorg ervoor dat Disable cache<\/strong> is aangevinkt om te voorkomen dat gecachete bestanden het rapport be\u00efnvloeden. Je kan ook de “throttling” optie wijzigen om langzamere mobiele netwerken te simuleren.<\/p>\n

      Vernieuw de pagina om de watervalgrafiek van downloads en verwerking te bekijken:<\/p>\n

      \"DevTools<\/a>
      DevTools Network paneel<\/figcaption><\/figure>\n

      Elke lange balk is een reden tot bezorgdheid, maar je moet vooral op je hoede zijn voor lange geblokkeerde\/vastgelopen balkjes (weergegeven in het wit). In dit voorbeeld konden de gemarkeerde rij en alle volgende rijen niet worden gedownload totdat de render-blocking CSS- en JavaScript bestanden bovenaan de HTML pagina waren verwerkt.<\/p>\n

      Met het Filter<\/strong> vak kan je specifieke items weergeven of verbergen:<\/p>\n