Hoe JavaScript en CSS voor renderen te blokkeren in WordPress - DeLaatbusiness
customer servcice chatbots

Hoe JavaScript en CSS voor renderen te blokkeren in WordPress

6 min


118

Wilt u JavaScript en CSS die het renderen blokkeren in WordPress elimineren?

Als u uw website test op Google PageSpeed ​​Insights, ziet u waarschijnlijk een suggestie om renderblokkerende scripts en CSS te verwijderen. Het geeft echter geen details over hoe u dat op uw WordPress-site moet doen.

In dit artikel laten we u zien hoe u eenvoudig JavaScript en CSS met renderblokkering in WordPress kunt oplossen om uw Google PageSpeed-score te verbeteren.

Hoe JavaScript en CSS voor renderblokkering in WordPress te repareren

Wat is het blokkeren van JavaScript en CSS?

Renderblokkering JavaScript en CSS zijn bestanden die voorkomen dat een website een webpagina weergeeft voordat deze bestanden worden geladen.

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

Probleem met blokkering van weergave gemarkeerd in Google Pagespeed Insights

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 tragere verbinding een paar milliseconden langer moeten wachten om de pagina te zien.

Deze scripts en stylesheets worden JavaScript en CSS voor renderblokkering genoemd.

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

Wat is de Google PageSpeed-score?

Google PageSpeed Insights is een website snelheid test tool gemaakt door Google om te helpen eigenaren van websites te optimaliseren en testen hun websites. Deze tool test uw website aan de hand van 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 doorstaat. De meeste websites halen ergens tussen de 50 en 70. Sommige website-eigenaren voelen zich echter gedwongen om 100 te behalen (het hoogste dat een pagina kan scoren).

Heeft u echt de perfecte ‘100’ Google PageSpeed-score nodig?

Het doel van Google PageSpeed ​​Insights is om u richtlijnen te geven om de snelheid en prestaties van uw website te verbeteren. U hoeft deze regels niet strikt te volgen.

Onthoud dat snelheid slechts een van de vele SEO- statistieken voor websites is waarmee Google kan bepalen hoe uw site moet worden gerangschikt. De reden waarom snelheid zo belangrijk is, is omdat het de gebruikerservaring op uw site verbetert.

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

Uw doel zou moeten zijn om een ​​snelle website te maken die een geweldige gebruikerservaring biedt.

Tijdens het laatste herontwerp van WPBeginner hielden we onze focus op snelheid en op het verbeteren van de gebruikerservaring.

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

Dat gezegd hebbende, laten we eens kijken wat u kunt doen om renderblokkerende JavaScript en CSS in WordPress te repareren.

We behandelen twee methoden die het renderblokkerende JavaScript en CSS in WordPress repareren. U kunt degene kiezen die het beste werkt voor uw website.

1. Fix Render Blocking Scripts en CSS met WP Rocket

Voor deze methode gebruiken we de WP Rocket- plug-in. Het is de beste WordPress-caching-plug-in op de markt en stelt u in staat om snel uw websiteprestaties te verbeteren zonder technische vaardigheden of ingewikkelde instellingen.

Eerst moet u de WP Rocket- plug- in installeren en activeren . Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

WP Rocket werkt direct uit de doos en schakelt caching in met optimale instellingen voor uw website. U kunt er meer over lezen in onze complete gids over hoe u WP Rocket correct installeert en configureert in WordPress .

Standaard worden JavaScript- en CSS-optimalisatieopties niet ingeschakeld. Deze optimalisaties kunnen mogelijk van invloed zijn op het uiterlijk van uw website of op sommige functies, daarom kunt u met de plug-in deze instellingen optioneel inschakelen.

Om dat te doen, moet je naar Instellingen »WP Rocket- pagina gaan en vervolgens overschakelen naar het tabblad ‘Bestandsoptimalisatie’. Blader vanaf hier naar het gedeelte CSS-bestanden en vink de selectievakjes aan naast CSS verkleinen, CSS-bestanden combineren en CSS-bezorging optimaliseren.

CSS-optimalisatie-instellingen in WP Rocket

Opmerking: WP Rocket zal proberen al uw CSS-bestanden te verkleinen, ze te combineren en alleen CSS te laden die nodig zijn voor het zichtbare deel van uw website. Dit kan van invloed zijn op het uiterlijk van uw website, dus u moet uw website grondig testen op meerdere apparaten en schermformaten.

Vervolgens moet u naar het gedeelte JavaScript-bestanden bladeren. Hier kunt u alle opties bekijken voor maximale prestatieverbetering.

JavaScript-optimalisatie

U kunt JavaScript-bestanden verkleinen en combineren zoals u deed voor CSS.

U kunt ook voorkomen dat WordPress het jQuery Migrate-bestand laadt. Het is een script dat WordPress laadt om compatibiliteit te bieden voor plug-ins en thema’s die oude versies van jQuery gebruiken.

De meeste websites hebben dit bestand niet nodig, maar u zou toch uw website willen controleren om er zeker van te zijn dat het verwijderen ervan geen invloed heeft op uw thema of plug-ins.

Blader vervolgens een beetje verder naar beneden en vink de selectievakjes aan naast ‘Load JavaScript Defered’ en ‘Safe Mode for jQuery’.

Optimaliseer JavaScript-levering

Deze opties vertragen het laden van niet-essentiële JavaScripts, en de jQuery veilige modus stelt je in staat jQuery te laden voor thema’s die het inline kunnen gebruiken. U kunt deze optie uitgeschakeld laten als u zeker weet dat uw thema nergens inline jQuery gebruikt.

Vergeet niet op de knop Wijzigingen opslaan te klikken om uw instellingen op te slaan.

Daarna wilt u misschien ook de cache in WP Rocket wissen voordat u uw website opnieuw test met Google Page Speed ​​Insights.

Op onze testsite konden we een score van 100% behalen op desktop en het probleem met het blokkeren van weergaven werd opgelost in zowel mobiele als desktopscores.

Probleem met renderblokkering opgelost om een ​​perfecte score voor paginasnelheid te bereiken

2. Herstel Render Blocking Scripts en CSS met Autoptimize

Voor deze methode gebruiken we een aparte plug-in die speciaal is gemaakt om de levering van de CSS- en JS-bestanden van je website te verbeteren. Hoewel deze plug-in de klus klaart, heeft deze niet de andere krachtige functies die WP Rocket heeft.

Het eerste dat u hoeft te doen, is de plug-in Autoptimize installeren en activeren . Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

Na activering moet u de pagina Instellingen »Autoptimize bezoeken om de instellingen van de plug-in te configureren.

Eerst moet u het vakje naast de optie ‘JavaScript-code optimaliseren’ onder het JavaScript-optiesblok aanvinken. Zorg ervoor dat de optie ‘Aggregate JS-files’ niet is aangevinkt.

Optimaliseer JS-bestanden in Autoptimize

Blader vervolgens omlaag naar het vak CSS-opties en vink de optie ‘CSS-code optimaliseren’ aan. Zorg ervoor dat de optie ‘Aggregate CSS-files’ niet is aangevinkt.

Optimaliseer CSS in Autoptimize

U kunt nu op de knop ‘Wijzigingen opslaan en cache legen’ klikken om uw instellingen op te slaan.

Ga je gang en test je website met de tool Page Speed ​​Insights. Op onze demosite konden we het probleem met het blokkeren van weergaven met deze basisinstellingen oplossen.

Probleem met renderblokkering in WordPress met de plug-in Autoptimize opgelost

Als er nog steeds scripts voor het blokkeren van de weergave zijn, moet u teruggaan naar de instellingenpagina van de plug-in en de opties bekijken onder zowel JavaScript- als CSS-opties.

U kunt bijvoorbeeld toestaan ​​dat de plug-in inline JS opneemt en scripts verwijdert die standaard zijn uitgesloten, zoals seal.js of jquery.js.

Klik op de knop ‘Wijzigingen opslaan en cache leegmaken’ om uw wijzigingen op te slaan en de cache van plug-ins te legen.

Als u klaar bent, gaat u verder en controleert u uw website opnieuw met de tool Paginasnelheid.

Hoe werkt het?

Autoptimize verzamelt alle JavaScript en CSS in de wachtrij . Daarna worden verkleinde CSS- en JavaScript- bestanden gemaakt en worden kopieën in de cache als asynchroon of uitgesteld naar uw website weergegeven.

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

Probleemoplossen

Afhankelijk van hoe de plug-ins en uw WordPress-thema JavaScript en CSS gebruiken, kan het een behoorlijke uitdaging zijn om alle JavaScript- en CSS-problemen met renderblokkering volledig op te lossen.

Hoewel de bovenstaande tools kunnen helpen, hebben uw plug-ins mogelijk bepaalde scripts met een ander prioriteitsniveau nodig om correct te werken. In dat geval kunnen de bovenstaande oplossingen de functionaliteit van dergelijke plug-ins verstoren of kunnen ze zich onverwacht gedragen.

Google kan u nog steeds bepaalde problemen laten zien, zoals het optimaliseren van CSS-bezorging voor inhoud boven de vouw. Met WP Rocketkun je dat oplossen door handmatig Critical CSS toe te voegen die nodig is om het bovenstaande vouwgebied van je thema weer te geven.

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

We hopen dat dit artikel je heeft geholpen om te leren hoe je JavaScript en CSS met blokkering van weergave in WordPress kunt oplossen. 


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
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