In het gedeelte 'Kansen' van uw Lighthouse-rapport worden alle URL's weergegeven die de eerste weergave van uw pagina blokkeren. Het doel is om de impact van deze render-blokkerende URL's te verminderen door essentiële resources inline te plaatsen, niet-essentiële resources uit te stellen en alles wat niet wordt gebruikt te verwijderen.
Welke URL's worden aangemerkt als render-blocking resources?
Lighthouse markeert twee soorten URL's die de weergave blokkeren: scripts en stylesheets.
Een <script> -tag die:
- Staat in de
<head>van het document. - Heeft geen
deferattribuut. - Heeft geen
asyncattribuut.
Een <link rel="stylesheet"> tag die:
- Heeft geen '
disabledattribuut. Als dit attribuut aanwezig is, downloadt de browser het stylesheet niet. - Heeft geen
mediaattribuut dat specifiek overeenkomt met het apparaat van de gebruiker.media="all"wordt beschouwd als render-blocking.
Hoe identificeer je cruciale resources?
De eerste stap om de impact van render-blocking resources te verminderen, is vaststellen wat essentieel is en wat niet. Gebruik het tabblad 'Coverage' in Chrome DevTools om niet-essentiële CSS en JS te identificeren. Wanneer je een pagina laadt of uitvoert, laat het tabblad zien hoeveel code er is gebruikt en hoeveel er is geladen.
Je kunt de grootte van je pagina's verkleinen door alleen de code en stijlen te verzenden die je nodig hebt. Klik op een URL om het betreffende bestand in het paneel Bronnen te bekijken. Stijlen in CSS-bestanden en code in JavaScript-bestanden zijn in twee kleuren gemarkeerd:
- Groen (kritiek): Stijlen die nodig zijn voor de eerste weergave; code die essentieel is voor de kernfunctionaliteit van de pagina.
- Rood (niet-kritiek): Stijlen die van toepassing zijn op inhoud die niet direct zichtbaar is; code die niet wordt gebruikt in de kernfunctionaliteit van de pagina.
Hoe verwijder je scripts die de weergave blokkeren?
Zodra je de cruciale code hebt geïdentificeerd, verplaats je die code van de URL die de weergave blokkeert naar een inline script tag in je HTML-pagina. Wanneer de pagina laadt, beschikt deze over de benodigde code om de kernfunctionaliteit van de pagina af te handelen.
Als er code in een render-blokkerende URL staat die niet essentieel is, kunt u deze in de URL laten staan en de URL vervolgens markeren met async of defer -attributen (zie ook Interactiviteit toevoegen met JavaScript ).
Code die helemaal niet wordt gebruikt, moet worden verwijderd (zie Ongebruikte code verwijderen ).
Hoe verwijder je render-blocking stylesheets?
Net zoals je code inline plaatst in een <script> -tag, plaats je kritieke stijlen die nodig zijn voor de eerste weergave in een <style> -blok in 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 plaatsen van CSS "boven de vouw" te automatiseren met behulp van de Critical-tool .
Een andere manier om render-blocking stijlen te elimineren, is door deze stijlen op te splitsen in verschillende bestanden, georganiseerd per mediaquery. Voeg vervolgens een media-attribuut toe aan elke stylesheetlink. Bij het laden van een pagina blokkeert de browser alleen de eerste weergave om de stylesheets op te halen die overeenkomen met het apparaat van de gebruiker (zie Render-Blocking CSS ).
Tot slot is het raadzaam om je CSS te minimaliseren door overtollige witruimte of tekens te verwijderen (zie CSS minimaliseren ). Dit zorgt ervoor dat je de kleinst mogelijke bundel naar je gebruikers stuurt.
Stack-specifieke richtlijnen
AMP
Gebruik tools zoals AMP Optimizer om AMP-layouts aan de serverzijde te renderen .
Drupal
Overweeg om een module te gebruiken om essentiële CSS en JavaScript inline te plaatsen, en gebruik het `defer`-attribuut voor niet-essentiële CSS of JavaScript.
Joomla
Er zijn diverse Joomla-plugins die je kunnen helpen om belangrijke elementen inline te plaatsen of minder belangrijke elementen uit te stellen .
WordPress
Er zijn diverse WordPress-plugins die je kunnen helpen om belangrijke elementen direct in je content te plaatsen of minder belangrijke elementen uit te stellen .