Hoe Render-Blocking JavaScript en CSS in WordPress te repareren

5 min


120

Laat, E.W.M. de (Erwin)

all rights reserved

DeLaatbusiness

Hoe Render-Blocking JavaScript en CSS in WordPress te repareren

Hoe Render-Blocking JavaScript en CSS in WordPress te repareren

Wilt u JavaScript en CSS voor weergaveblokkering in WordPress verwijderen? Als u uw website test op insights van Google PageSpeed, ziet u waarschijnlijk een suggestie om scripting en CSS voor renderblokkering te verwijderen. In dit artikel laten we u zien hoe u gemakkelijk JavaScript en CSS voor weergaveblokkering in WordPress kunt corrigeren om uw Google PageSpeed-score te verbeteren.

Hoe render JavaScript en CSS in WordPress te blokkeren

Wat is Render-Blocking JavaScript en CSS?

Elke WordPress-site heeft een thema en plug-ins die JavaScript- en CSS-bestanden aan de voorkant van uw website toevoegen. Deze scripts kunnen de laadtijd van uw site verhogen en kunnen ook de weergave van de pagina blokkeren.

De browser van een gebruiker moet die scripts en CSS laden voordat de rest van de HTML op de pagina wordt geladen. Dit betekent dat gebruikers met een langzamere verbinding enkele milliseconden meer moeten wachten om de pagina te bekijken.

Deze scripts en stylesheets worden JavaScript en CSS voor renderen geblokkeerd.

Website-eigenaren die proberen de Google PageSpeed-score van 100 te behalen, moeten dit probleem oplossen om die perfecte score te behalen.

Wat is Google PageSpeed ​​Score?

Google PageSpeed ​​Insights is een online hulpmiddel gemaakt door Google om website-eigenaren te helpen bij het optimaliseren en testen van hun websites. Deze tool test uw website volgens de richtlijnen van Google voor snelheid en biedt suggesties om de laadtijd van uw site te verbeteren.

Het toont u een score op basis van het aantal regels dat uw site doorgeeft. De meeste websites komen ergens tussen 50-70. Sommige website-eigenaren voelen zich echter gedwongen om 100 te behalen (de hoogste die een pagina kan scoren).

Heeft u werkelijk de perfecte “100” Google PageSpeed-score nodig?

Het doel van Google PageSpeed-inzichten is om u richtlijnen te geven om de snelheid en prestaties van uw website te verbeteren. U bent niet verplicht om deze regels strikt te volgen.

Vergeet niet dat snelheid slechts één van de vele SEO- statistieken is waarmee Google kan bepalen hoe u uw website kunt rangschikken. De reden waarom snelheid zo belangrijk is, is omdat het de gebruikerservaring op uw site verbetert.

Voor een betere gebruikerservaring is veel meer nodig dan alleen snelheid. U moet ook nuttige informatie, een betere gebruikersinterface en boeiende inhoud bieden met tekst, afbeeldingen en video’s.

Uw doel moet zijn om een ​​snelle website te maken met een geweldige gebruikerservaring.

We hebben onlangs WPBeginner opnieuw ontworpen en we hebben onze focus op snelheid gehouden en de gebruikerservaring verbeterd.

We raden u aan Google-paginasnelheidregels als suggesties te gebruiken en als u ze gemakkelijk kunt implementeren zonder de gebruikerservaring te verpesten, dan is dat geweldig. Anders zou je ernaar moeten streven om zoveel mogelijk te doen en dan hoef je je geen zorgen te maken over de rest.

Laten we echter eens kijken naar wat u kunt doen om JavaScript en CSS voor weergaveblokkering in WordPress te verhelpen.

We zullen twee methoden behandelen die de weergave blokkeren van JavaScript en CSS in WordPress. U kunt degene kiezen die het beste werkt voor uw website.

1. Fix Render Blocking Scripts en CSS met Autoptimize

Deze methode is eenvoudiger en wordt aanbevolen voor de meeste gebruikers.

Allereerst moet u de Autoptimize- plug-in installeren en activeren . Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-invoor meer informatie .

Na activering, moet je de Instellingen »Autoptimaliseer pagina bezoeken om de plugin-instellingen te configureren.

Autoptimize-instellingen

U kunt beginnen door het vakje naast JavaScript-opties en CSS-opties aan te vinken en vervolgens op de knop Wijzigingen opslaan te klikken.

U kunt nu uw website testen met de tool PageSpeed. Als er nog script voor renderblokkering is, moet je teruggaan naar de instellingenpagina van de plug-in en boven aan de knop ‘Geavanceerde instellingen weergeven’ klikken.

Geavanceerde JavaScript-opties

Hier kunt u de plug-in toestaan ​​inline JS op te nemen en scripts te verwijderen die standaard zijn uitgesloten, zoals seal.js of jquery.js.

Scrol vervolgens naar de CSS-optie en laat plugin toe om inline CSS te aggregeren.

Klik op de knop ‘Wijzigingen opslaan en lege cache leegmaken’ om uw wijzigingen en lege plug-in cache op te slaan.

Als je klaar bent, ga je gang en controleer je je website opnieuw met de PageSpeed-tool .

Zorg ervoor dat u uw website grondig test om te zien dat niets wordt verbroken door uw JavaScripts of CSS te optimaliseren.

Hoe werkt het?

Autoptimize aggregeert alle in de wachtrij geplaatste JavaScript en CSS . Hierna maakt het geminimaliseerde CSS- en JavaScript- bestanden en worden in de cache kopieën van uw website asynchroon of uitgesteld.

Hiermee kunt u het probleem met scripts voor render-blokkering en stijlen repareren. Houd er echter rekening mee dat dit ook van invloed kan zijn op de prestaties of het uiterlijk van uw website.

2. Fix Render Blocking JavaScript met behulp van W3 Total Cache

Deze methode vereist wat meer werk en wordt aanbevolen voor gebruikers die al de W3 Total Cache-plug-in gebruiken op hun website.

Eerst moet u de W3 Total Cache- plug- in installeren en activeren . Als u hulp nodig hebt, raadpleegt u onze handleiding voor het installeren en instellen van W3 Total Cache for Beginners .

Vervolgens moet je om te bezoeken Prestatie »Algemene instellingen pagina en scroll naar beneden naar kleineren sectie.

W3 Total Cache maakt verkleinen mogelijk

Eerst moet u de optie ‘Inschakelen’ naast Verkleinen aanvinken en vervolgens ‘Handmatig’ selecteren voor optie verkleinen.

Klik op de knop Alle instellingen opslaan om uw instellingen op te slaan.

Vervolgens moet u de scripts en CSS toevoegen die u wilt verkleinen.

U kunt de URL’s ophalen van alle scripts en stijlbladen die renderen blokkeren via de tool Google PageSpeed ​​Insights.

Onder de suggesties waar staat: ‘Schakel JavaScript en CSS voor renderen in inhoud boven de vouw uit’ uit, klik dan op ‘Laten zien hoe te repareren’. Het toont u de lijst met scripts en stylesheets.

JavaScript- en stylesheet-URL's ophalen via de tool Google PageSpeed

Ga met je muis naar een script en het zal je de volledige URL tonen. U kunt deze URL selecteren en vervolgens de toetsen CTRL + C (Command + C op Mac) van uw toetsenbord gebruiken om de URL te kopiëren.

Ga nu naar je WordPress-beheergebied en ga naar de Performance »Minify-pagina.

Eerst moet je JavaScript-bestanden toevoegen die je wilt verkleinen. Blader naar JS-sectie en stel onder ‘Bewerkingen in gebieden’ het insluittype in op ‘Non-blocking async’ voor het <head> -gedeelte.

Voeg scripts toe om te verkleinen

Vervolgens moet u op de knop ‘Script toevoegen’ klikken en vervolgens script-URL’s toevoegen die u vanuit de tool Google PageSpeed ​​hebt gekopieerd.

Als u klaar bent, bladert u omlaag naar de CSS-sectie en klikt u vervolgens op de knop ‘Een stylesheet toevoegen’. Begin nu met het toevoegen van stylesheet-URL’s die u hebt gekopieerd met de tool Google PageSpeed.

Voeg stylesheets toe om te verkleinen

Klik nu op de knop ‘Instellingen opslaan en de cache leegmaken’ om uw instellingen op te slaan.

Ga naar de Google PageSpeed-tool en test uw website opnieuw.

Zorg ervoor dat u ook uw website grondig test om te zien dat alles goed werkt.

Probleemoplossen

Afhankelijk van hoe de plug-ins en uw WordPress-thema’s JavaScript en CSS gebruiken, kan het behoorlijk lastig zijn om alle JavaScript- en CSS-problemen met de weergaveblokkering volledig te verhelpen.

Hoewel de bovenstaande hulpprogramma’s kunnen helpen, hebben uw plug-ins mogelijk bepaalde scripts op een ander prioriteitsniveau nodig om correct te werken. In dat geval kunnen de bovenstaande oplossingen uw plug-ins doorbreken of kunnen ze zich onverwacht gedragen.

Google kan u nog steeds bepaalde problemen laten zien, zoals het optimaliseren van CSS-bezorging voor boven de inhoud van de vouw. Met Autoptimize kunt u dit corrigeren door handmatig inline CSS toe te voegen om het bovenstaande vouwgedeelte van uw thema weer te geven.

Het kan echter heel moeilijk zijn om erachter te komen welke CSS-code u boven de inhoud van de vouw moet weergeven.

Dat is alles, we hopen dat dit artikel u heeft geholpen bij het oplossen van JavaScript en CSS voor weergaveblokkering in WordPress. Wellicht wilt u ook dat onze ultieme gids WordPress-snelheid en -prestaties voor beginners stimuleert .


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format