Wilt u het blokkeren van JavaScript en CSS-weergave in WordPress elimineren?

Als u uw website test op Google PageSpeed ​​Insights, ziet u waarschijnlijk een suggestie om script- en CSS-renderingblokken te verwijderen. Het geeft echter geen details over hoe u dit op uw WordPress-website kunt doen.

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

Maar laten we eerst samen ontdekken Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog.

Wat is JavaScript en CSS Render-Blocking?

Het blokkeren van JavaScript- en CSS-weergaven zijn bestanden die voorkomen dat een website een webpagina weergeeft voordat ze worden geladen.

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

Hoe blokkerende javascript-weergaven css wordpress blogpascher 1 te repareren

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

Deze scripts en stylesheets worden JavaScript- en CSS-renderblokkers genoemd.

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

Wat is de Google PageSpeed-score?

Google PageSpeed ​​Insights is een snelheidstesttool gemaakt door Google om website-eigenaren te helpen bij het optimaliseren en testen van hun websites. Deze tool test uw website aan de hand van de snelheidsrichtlijnen van Google en biedt suggesties om de laadtijd van uw webpagina te verbeteren.

Het toont u een score op basis van het aantal regels dat uw website doorstaat. De meeste websites zijn tussen de 50 en 70. Sommige website-eigenaren voelen zich echter onder druk gezet om 100 te halen.

Heeft u echt een score van "100" nodig op Google PageSpeed?

Het doel van Google PageSpeed-inzichten 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 is waarmee Google kan bepalen hoe uw website moet worden gerangschikt. De reden waarom snelheid zo belangrijk is, is dat het verbetert de gebruikerservaring op uw website.

Een betere gebruikerservaring vereist veel meer dan snelheid. U moet ook nuttige informatie aanbieden, betere gebruikersinterface en betrek inhoud met tekst, afbeeldingen en video's.

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

Tijdens het laatste nieuwe ontwerp van BlogPasCher hebben we ons zowel op snelheid gericht als op het verbeteren van de gebruikerservaring.

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

Met dat gezegd, laten we eens kijken wat u kunt doen om JavaScript- en CSS-renderingblokkering in WordPress te verhelpen.

We gaan twee methoden bespreken om dit probleem op te lossen. U kunt degene kiezen die het beste werkt op uw website.

1. Herstel renderblokkerende scripts en CSS met WP Rocket

Voor deze methode gebruiken we de WP Rocket-plug-in. Dat is de beste plug-in voor WordPress caching in de markt en stelt u in staat om snel de prestaties van uw website te verbeteren zonder technische of complexe vaardigheden.

Allereerst 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 activeert zijn cache met optimale instellingen. Standaard zijn er geen JavaScript- en CSS-optimalisatie-opties ingeschakeld. Deze optimalisaties kunnen mogelijk van invloed zijn op deuitstraling van uw website of bepaalde functies, daarom kunt u met de plug-in die instellingen als optie inschakelen.

Om dat te doen, moet je doorgaan Instellingen »WP Rocketen schakel vervolgens over naar de 'Bestandsoptimalisatie '. Scrol vanaf daar omlaag naar de sectie CSS-bestanden en vink de vakjes aan  Verklein CSS, Combineer CSS-bestanden et Optimaliseer CSS-levering.

Hoe blokkerende javascript-weergaven css wordpress blogpascher 2 te repareren

Opmerking : WP Rocket zal proberen al uw CSS-bestanden te verkleinen, ze te combineren en alleen de benodigde CSS voor het zichtbare deel van uw website te laden. Dit kan gevolgen hebben voor deuitstraling van uw website, dus u moet uw website grondig testen op meerdere apparaten en schermformaten.

Dan moet je naar de sectie scrollen JavaScript-bestanden. Vanaf hier kunt u alle opties aanvinken voor maximale prestatieverbetering.

Hoe blokkerende javascript-weergaven css wordpress blogpascher 3 te repareren

U kunt JavaScript-bestanden verkleinen en combineren, net als CSS-bestanden.

U kunt ook voorkomen dat WordPress het bestand uploadt. jQuery Migreren. Dit is een script dat WordPress laadt om compatibiliteit te bieden voor plug-ins en thema's die oudere versies van jQuery gebruiken.

De meeste websites hebben dit bestand niet nodig, maar het is een goed idee om uw website te controleren om er zeker van te zijn dat de verwijdering geen invloed heeft op uw thema of plug-ins.

Scroll dan wat verder naar beneden en check de opties 'Laad JavaScript uitgesteld'en'Veilige modus voor jQuery'.

Hoe blokkerende javascript-weergaven css wordpress blogpascher 4 te repareren

Deze opties vertragen het laden van niet-essentieel JavaScript, en met jQuery Veilige modus kunt u jQuery laden voor thema's die het inline kunnen gebruiken. 

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

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

Op onze testwebsite konden we een score van 100% behalen op desktops en het probleem met vastgelopen render werd opgelost in zowel mobiele als desktopscores.

Hoe blokkerende javascript-weergaven css wordpress blogpascher 5 te repareren

2. Herstel het blokkeren van JavaScript en CSS-rendering met autoptimize

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

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

Bij het activeren moet u de pagina bezoeken Instelling »Autoptimize om de plug-ininstellingen te configureren.

Allereerst moet u de optie 'Optimaliseer JavaScript-code'onder het blok JavaScript Opties. Zorg ervoor dat de optie 'Alle gekoppelde JS-bestanden samenvoegen' niet is aangevinkt.

Hoe blokkerende javascript-weergaven css wordpress blogpascher 6 te repareren

Scrol vervolgens omlaag naar het gebied CSS-opties en vink de optie ' CSS-code optimaliseren?'. Zorg ervoor dat de optie 'Verzamel alle gekoppelde CSS-bestanden'is niet aangevinkt.

Hoe blokkerende javascript-weergaven css wordpress blogpascher 7 te repareren

U kunt nu op de knop 'Wijzigingen opslaan en cache wissen' klikken om uw instellingen op te slaan.

Ga je gang en test je website met Page Speed ​​Insights. Op onze demo-website hebben we het probleem met het renderen met deze basisinstellingen kunnen oplossen.

Hoe blokkerende javascript-weergaven css wordpress blogpascher 9 te repareren

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

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

Klik op de knop 'Wijzigingen opslaan en cache wissen' om uw wijzigingen op te slaan en de cache van de plug-in te wissen.

Als je klaar bent, ga je gang en bekijk je je website opnieuw met de tool Page Speed ​​Insights.

Hoe werkt het

Autoptimize bundelt alle JavaScript- en CSS-bestanden. Daarna creëert hij verkleinde CSS- en JavaScript-bestanden en geeft op gesynchroniseerde of uitgestelde basis kopieën van uw website in de cache weer.

Hiermee kunt u het blokkeerprobleem oplossen renderings scripts en blokkeerstijlen. Houd er echter rekening mee dat dit ook de prestaties kan beïnvloedenuitstraling van uw website.

helpen

Afhankelijk van hoe de plug-ins en uw WordPress-thema JavaScript en CSS gebruiken, kan het behoorlijk moeilijk zijn om alle problemen volledig op te lossen met blokkeren dynamische JavaScript- en CSS-weergaven.

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

Google kan u nog steeds enkele problemen laten zien, zoals optimalisatie van CSS-bezorging. Met WP Rocket kunt u dit oplossen door handmatig de kritieke CSS toe te voegen die nodig is om uw WordPress-thema perfect weer te geven.

Het kan echter behoorlijk moeilijk zijn om te weten welke CSS-code u moet weergeven.

Ontdek ook enkele thema's en premium WordPress-plug-ins  

U kunt andere WordPress-plug-ins gebruiken om een ​​moderne look te geven en de grip van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. WordPress Speed ​​Optimization Plugin

Heeft u moeite om meerdere plug-ins voor het optimaliseren van de websitesnelheid te beheren? Bent u bang dat ze de uitvoeringssnelheid van uw website belemmeren? dan is deze WordPress-plug-in de ultieme oplossing voor al uw zorgen.WordPress-plug-in voor snelheidsoptimalisatie

Deze plug-in is ontworpen om u de functionaliteit te geven van bijna 6-8 verschillende WordPress-plug-ins. U hoeft het alleen maar te installeren en configureren om een ​​duidelijke verbetering te zien bij het laden van uw pagina's.

We willen erop wijzen dat dit geen cache-plug-in of CDN, maar het resultaat is niettemin indrukwekkend. Aarzel niet om deze WordPress-plug-in te proberen om te zien waartoe deze in staat is.

Downloaden | demonstratie | web hosting

2. Social Share & Locker Pro

De Social Share & Locker Pro-extensie is ontworpen om uw website beter zichtbaar te maken op sociale netwerken. Met slechts een paar klikken kunt u de positie van uw sociale pictogrammen instellen of uw inhoud vergrendelen door te delen op een van de sociale netwerken die door u worden aangeboden.

Social share locker pro wordpress plug-in

U hebt vooraf gedefinieerde 10-thema's en deze zouden de meest voorkomende wensen moeten dekken. Al haar thema's zijn Retina en werken wonderen. 

Bovendien kunt u met Social Share & Locker Pro de volledige naam van sociale netwerken of alleen het pictogram weergeven. Het hangt af van uw ontwerp, de beschikbare ruimte of uw wensen.

Downloaden | demonstratie | web hosting

3. WordPress PDF-afbeeldingen Lightbox

WordPress PDF Lightbox is een WordPress-plug-in waarmee u viewers van PDF-bestanden kunt maken. Een PDF-viewer is een verzameling foto's die kan worden opgeslagen als PDF's.Wordpress afbeeldingen pdf lightbox plugin wordpress

Met deze extensie kunt u zoveel PDF-viewers maken als u wilt. Voor elke kijker kan de beheerder enkele opties instellen, zoals:

  • Omslagafbeelding: deze wordt toegevoegd als de eerste pagina van de door de gebruiker gemaakte pdf
  • Maximaal aantal afbeeldingen per kijker
  • Een watermerkafbeelding: toe te passen op PDF-pagina's
  • Verzenden via e-mail: als deze functie is geactiveerd, a Contact formulier wordt net na de afbeeldingengalerij aangeboden. Via dit formulier kunnen gebruikers de gemaakte PDF naar iedereen e-mailen.

Downloaden | demonstratie | web hosting

Aanbevolen bronnen

Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.

Conclusie

Alstublieft ! Dat is het voor deze tutorial. We hopen dat dit artikel u heeft geholpen om te leren hoe u blokkering van JavaScript en CSS-rendering in WordPress kunt oplossen. U kunt ook onze zien ultieme gids voor het versnellen van WordPress-prestaties voor beginners.

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Aarzel niet om deel met je vrienden op je favoriete sociale netwerken. En als u suggesties of opmerkingen heeft, laat ze dan achter in onze sectie commentaires.

...