In het gedeelte Mogelijkheden van uw Lighthouse-rapport worden alle URL's vermeld die de eerste verf van uw pagina blokkeren. Het doel is om de impact van deze weergaveblokkerende URL's te verminderen door kritieke bronnen inline te plaatsen, niet-kritieke bronnen uit te stellen en alles wat ongebruikt is te verwijderen.
Welke URL's worden gemarkeerd als bronnen die weergave blokkeren?
Lighthouse markeert twee typen URL's die weergave blokkeren: scripts en stylesheets.
Een <script> -tag die:
- Staat in de
<head>van het document. - Heeft geen
defer. - Heeft geen
asyncattribuut.
Een <link rel="stylesheet"> tag die:
- Heeft geen
disabledkenmerk. Wanneer dit attribuut aanwezig is, downloadt de browser het stylesheet niet. - Heeft geen
mediadat specifiek overeenkomt met het apparaat van de gebruiker.media="all"wordt beschouwd als weergaveblokkering.
Hoe kritieke hulpbronnen te identificeren
De eerste stap op weg naar het verminderen van de impact van render-blocking resources is het identificeren van wat cruciaal is en wat niet. Gebruik het tabblad Dekking in Chrome DevTools om niet-kritieke CSS en JS te identificeren. Wanneer u een pagina laadt of uitvoert, vertelt het tabblad u hoeveel code er is gebruikt en hoeveel er is geladen:
U kunt de grootte van uw pagina's verkleinen door alleen de code en stijlen te verzenden die u nodig heeft. Klik op een URL om dat bestand te inspecteren in het Bronnenpaneel. Stijlen in CSS-bestanden en code in JavaScript-bestanden zijn gemarkeerd in twee kleuren:
- Groen (kritisch): stijlen die vereist zijn voor de eerste verf; code die cruciaal is voor de kernfunctionaliteit van de pagina.
- Rood (niet-kritiek): Stijlen die van toepassing zijn op inhoud die niet direct zichtbaar is; code wordt niet gebruikt in de kernfunctionaliteit van de pagina.
Hoe render-blocking scripts te elimineren
Zodra u kritieke code heeft geïdentificeerd, verplaatst u die code van de weergaveblokkerende URL naar een inline script op uw HTML-pagina. Wanneer de pagina wordt geladen, beschikt deze over alles wat nodig is om de kernfunctionaliteit van de pagina te verwerken.
Als er code in een weergaveblokkerende URL staat die niet essentieel is, kunt u deze in de URL laten staan en de URL vervolgens markeren met async of defer (zie ook Interactiviteit toevoegen met JavaScript ).
Code die helemaal niet wordt gebruikt, moet worden verwijderd (zie Ongebruikte code verwijderen ).
Hoe render-blocking stylesheets te elimineren
Vergelijkbaar met inline code in een <script> -tag, zijn inline-kritische stijlen vereist voor de eerste verf in een <style> -blok aan de head van de HTML-pagina. Laad vervolgens de rest van de stijlen asynchroon met behulp van de preload link (zie Ongebruikte CSS uitstellen ).
Overweeg om het proces van het extraheren en inline-CSS van 'Above the Fold' te automatiseren met behulp van de Critical-tool .
Een andere manier om weergaveblokkerende stijlen te elimineren is door deze stijlen op te splitsen in verschillende bestanden, geordend op mediaquery. Voeg vervolgens een media-attribuut toe aan elke stylesheet-link. Bij het laden van een pagina blokkeert de browser alleen de eerste verf om de stylesheets op te halen die overeenkomen met het apparaat van de gebruiker (zie Render-Blocking CSS ).
Ten slotte wilt u uw CSS verkleinen om extra witruimte of tekens te verwijderen (zie CSS verkleinen ). Dit zorgt ervoor dat u de kleinst mogelijke bundel naar uw gebruikers verzendt.
Stapelspecifieke begeleiding
AMP
Gebruik tools zoals AMP Optimizer om AMP-lay-outs op de server weer te geven .
Drupal
Overweeg het gebruik van een module om kritische CSS en JavaScript inline te plaatsen, of mogelijk assets asynchroon te laden via JavaScript, zoals de module Advanced CSS/JS Aggregation .
Joomla
Er zijn een aantal Joomla-plug-ins die u kunnen helpen bij het inline plaatsen van kritieke middelen of het uitstellen van minder belangrijke bronnen .
WordPress
Er zijn een aantal WordPress-plug-ins die u kunnen helpen bij het integreren van kritieke middelen of het uitstellen van minder belangrijke bronnen .