CSS-weergave optimaliseren

Deze regel wordt geactiveerd wanneer PageSpeed Insights detecteert dat een pagina externe stylesheets bevat die de weergave blokkeren en waardoor het weergeven van de inhoud op het scherm wordt vertraagd.

Overzicht

Browsers worden gestopt bij externe CSS-bestanden voordat de inhoud op het scherm wordt weergegeven. Dit heeft extra netwerkwachttijd tot gevolg, waardoor het langer duurt voordat inhoud op het scherm wordt weergegeven.

Aanbevelingen

Als de externe CSS-resources klein zijn, kunt u die rechtstreeks invoegen in het HTML-document. Dit wordt inline plaatsen genoemd. Als u kleine CSS-resources op deze manier inline plaatst, kan de browser doorgaan met het weergeven van de pagina. Als het CSS-bestand groot is en u dit volledig inline plaatst, kan PageSpeed Insights via Prioriteit geven aan zichtbare inhoud een waarschuwing geven dat het gedeelte van uw pagina boven de vouw te groot is. In geval van een groot CSS-bestand moet u de CSS die nodig is voor het weergeven van de inhoud boven de vouw, identificeren en inline plaatsen en het laden van de resterende stijlen uitstellen tot na de inhoud boven de vouw.

Voorbeeld van het inline plaatsen van een klein CSS-bestand

Als het HTML-document er als volgt uitziet:
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

En de resource small.css is als volgt:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

Dan kunt u de essentiële CSS-resource als volgt inline plaatsen:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

De oorspronkelijke resource small.css wordt geladen nadat de pagina is geladen. De toepassingsvolgorde van CSS-regels wordt behouden door alle <style>- en <link>-elementen via JavaScript in het document in te voegen.

Plaats grote gegevens-URI's niet inline

Wees voorzichtig wanneer u gegevens-URI's inline plaatst in CSS-bestanden. Hoewel het selectief gebruik van kleine gegevens-URI's in uw CSS logisch kan zijn, kan het inline plaatsen van grote gegevens-URI's het formaat van uw CSS boven de vouw vergroten, waardoor het langer duurt voordat de pagina wordt weergegeven.

Plaats CSS-kenmerken niet inline

CSS-kenmerken inline plaatsen in HTML-elementen (zoals &lt p style=...&gt) moet zo veel mogelijk worden vermeden, omdat dit vaak onnodige codeduplicatie tot gevolg heeft. Daarnaast wordt inline CSS in HTML-elementen standaard geblokkeerd door Content Security Policy (CSP).