Render-blocking JavaScript och CSS i WordPress: 5 plugins för att fixa det

Det var inte länge sedan Google meddelade att webbplatserna som tar mer än tre sekunder att ladda inte är SEO-vänliga.

I denna era av internet och digital marknadsföring måste du ha den snabbaste webbplatsen om du vill konkurrera med tusentals rivaler över hela världen effektivt. Det råder ingen tvekan om att en snabbare webbplats har bättre chanser att locka besökare och öka deras engagemang i deras innehåll.

Att driva en WordPress-webbplats innebär ett betydande antal skript som körs samtidigt för att göra din webbplats tillgänglig.

Men alla dessa artiklar är inte alltid viktiga att ladda. Om du någonsin har kontrollerat din webbplats prestanda med Google Insights PageSpeed, har du förmodligen stött på det renderingsblockerande JavaScript- och CSS-alternativet som påverkar dess hastighet.

Idag ska vi prata om dessa främmande filer och upplysa dig om hur du kan ta bort dem för att förbättra din webbplats.

 

Vad är renderingsblockerande JavaScript och CSS?

Sammanfattningsvis är renderingsblockerande JavaScript och CSS en serie stilmallar och skript som krävs för att köras helt innan en webbplats laddas och blir synlig.

De teman och plugins du installerar på din WordPress-webbplats lägger till många av dessa filer till front-end-delen av din webbplats. Och som du kanske har gissat saktar en del av dem ner sidladdningstiden och förhindrar att dina sidor renderas.

När en webbplatsbesökare öppnar din webbplats, laddar webbläsaren först de nödvändiga JavaScript- och CSS-filerna före HTML.

Detta är en vanlig procedur eftersom en sida utan dessa väsentliga element kommer att vara oanvändbar. Problemet är att webbläsaren inte kan rendera sidan innan dessa filer är helt laddade.

Tricket här är att du kan skjuta upp laddningen av vissa skript utan att orsaka några problem för vad besökarna ser när de öppnar en sida hos dig.

Webbplatsägare kan göra ändringar på sin webbplats för att förhindra att webbläsarna laddar några koder utanför vad som är nödvändigt för den övre delen av sidan som en användare ser omedelbart.

Med andra ord, webbläsarna laddar bara de väsentliga filerna för det avsnittet innan en användare rullar ner på sidan. Detta område av webbsidor kallas ATF som står för Above the Fold. Andra delar som kräver att användare scrollar ner för att kunna se är icke-ATF-sektionen.

Om din webbplats laddar JavaScript- och CSS-koder som är relaterade till de icke-ATF-sektioner, tar det därför längre tid för sidorna att laddas. Och det är därför Google försöker säga åt dig att sluta köra de onödiga resurserna i din webbplatss koder.

 

Hitta renderingsblockerande JavaScript och CSS

Det enklaste sättet att ta reda på det här problemet är att köra ett hastighetstest med Google PageSpeed ​​Insights. När du väl har besökt sidan behöver du bara ange din URL-adress i det obligatoriska fältet och klicka sedan på knappen "Analysera".

Om du har det här problemet på sidan kommer du att se ett förslag som säger att du ska eliminera renderingsblockerande JavaScript och CSS i innehåll ovanför mitten.

Det skulle vara bäst om du inte glömde det mest webbplatser poäng någonstans mellan 70 och 90, och till och med de som presterar bäst når sällan en siffra nära 100. Så du bör aldrig tvinga din webbplats att nå 100. Gör så mycket du kan för att uppnå högsta poäng utan att påverka användarupplevelsen negativt.

Beroende på tema och verktyg du använder på din webbplats, är vissa skript avgörande för den perfekta UX du ska erbjuda till din publik. Därför är det helt oklokt att ta bort dem i ett försök att nå en lite högre poäng på resultatsidan för detta Google-verktyg.

 

Fixa renderingsblockerande JavaScript och CSS

Det finns gott om strategier för att eliminera renderingsblockerande JavaScript. De huvudsakliga metoderna är Async och Defer. Den första metoden låter användarens webbläsare ladda ner JavaScript samtidigt som andra HTML-delar analyseras.

Även om det inte helt slutar tolka under tiden som filen laddas ner, HTML-tolkare pausar för att köra skriptet när det laddas ned. Å andra sidan låter Defer-metoden webbläsaren ladda ner JavaScript medan den analyserar andra HTML-delar och exekverar inte skriptet om inte HTML-tolkningen är över.

Att eliminera renderingsblockerande CSS är mer utmanande eftersom du kan fördröja de nödvändiga koderna för att ladda ATF-innehållet. Proceduren är lite komplicerad och kräver en god förståelse för webbutveckling.

Ändå vänder vi oss till de genomsnittliga användarna som driver sin webbplats på egen hand.

Vi vet alla att WordPress är ett modulärt system som tillåter genomsnittliga användare att justera allt utan att skriva en enda rad kod. Att lösa det här problemet är också detsamma, och du kan snabbt lösa problemet genom att installera lämplig plugin.

 

Bästa WordPress-plugins för att fixa renderingsblockerande JavaScript och CSS

I nästa stycke kommer vi att presentera fem topppresterande WordPress-plugins som hjälper dig att lösa det här problemet mest djupgående.

Försiktighet: Innan du använder något av följande verktyg, se till att säkerhetskopiera din webbplats för att förhindra eventuell förlust av data.

 

Autoptimize

Smakämnen Autoptimize plugin är uttryckligen gjord för att lösa problemen som föreslås av webbplatsanalysverktyg som Google PageSpeed ​​Insights. Det förbättrar leveransen av JavaScript och CSS-filer utan mycket fokus på andra aspekter av webbplatsens prestanda.

Om du letar efter grundläggande optimeringsfunktioner kommer detta plugin att ge dig det du behöver. En bra del av detta verktyg är att det konverterar din webbplats bilder till det optimerade WebP-formatet.

När du har installerat och aktiverat Autoptimize måste du markera rutorna för "Optimera JavaScript-kod" och "Optimera CSS-kod" som finns i plugin-inställningarna. Var försiktig så att du inte markerar rutorna under dessa två alternativ som samlar CSS- och skriptfilerna.

Även om detta plugin är tillgängligt gratis, kan du också köpa premiumpaket som hjälper dig med webbkonfiguration.

 

WP Rocket

WP Rocket är ett välkänt namn bland WordPress optimeringsverktyg som hjälper dig i olika aspekter som JavaScript och CSS modifiering, lazy loading inställningar. Installationsprocessen för WP Rocket är ganska enkel, men du kan ha svårt att i första hand förstå hur saker görs i gränssnittet.

Den är klar direkt ur lådan och tillämpar optimala inställningar på din webbplats direkt efter installationen. Med tanke på oundvikligheten av webbplatsfel på grund av skriptändringar, aktiverar inte plugin de renderingsblockerande JavaScript- och CSS-inställningarna som standard.

Men du kan enkelt slå på den här funktionen genom att gå över insticksprogrammets inställningar och leta efter de relaterade alternativen i avsnitten "CSS-filer" och "JavaScript-filer".

Huvudpluginet kostar $49 per år som också kommer med ett års support. Dessutom kan du hitta flera gratis extramaterial för kärnpluginen på WordPress också.

 

RabbitLoader

RabbitLoader är ett banbrytande WordPress-plugin för prestandaoptimering som är utformat för att få en webbplats att köras snabbare, smidigare och mer effektivt.

I likhet med den mycket hyllade WP Rocket tar RabbitLoader inte bara din sajts prestanda till nyare höjder utan introducerar också några innovativa funktioner som skiljer den från andra spelare i spelet.

Cachingmagi: RabbitLoader tar det upp ett snäpp genom att erbjuda ett dynamiskt cachingsystem som anpassar sig i realtid till förändringar på din webbplats, och ser till att dina besökare alltid ser det senaste innehållet utan att ge avkall på hastigheten.

Bildoptimering: Bilder kan avsevärt sakta ner en webbplats, men RabbitLoaders bildoptimeringsfunktion är en spelomvandlare. Den komprimerar och storleksändrar automatiskt bilder till en optimal storlek utan att kompromissa med kvaliteten, vilket säkerställer att din webbplats laddas snabbt utan att offra visuellt tilltalande.

Lat laddning: Både WP Rocket och RabbitLoader erbjuder lat laddning för bilder och iframes, men RabbitLoader går längre genom att erbjuda uppskjuten JavaScript-laddning.

Kompatibilitet: RabbitLoader är designad för att fungera felfritt med ett brett utbud av WordPress-teman och plugins, precis som WP Rocket. Oavsett om du har en enkel blogg eller en komplex e-handelswebbplats, är RabbitLoader konstruerad för att förbättra din webbplats prestanda utan konflikter.

 

W3 Total Cache

W3 Total Cache är en robust prestandaförbättrare som inte bara hanterar cachningsproblem utan även problem som orsakas av skript och stilmallar.

Du kan enkelt ta bort renderingsblockerande JavaScript och CSS genom att först aktivera alternativet Minify från pluginens inställningar och ställa in det i manuellt läge.

Därefter bör du klicka på fliken "Eliminera renderingsblockerande resurser" och kopiera de nödvändiga filernas fullständiga länkadress för att blockera skript och stilmallar. Nu kan du använda dessa länkar och ange dem i 'JS-sektionen' i Prestanda>Minifiera fliken.

W3 Total Cache har mer än en miljon aktiva installationer, och du kan ladda ner den till din webbplats gratis från webbplatsen WordPress.org.

 

Speed ​​Booster Pack

Speed ​​Booster Pack är ett tillförlitligt verktyg för att optimera stilmallar, JavaScript, lat inläsning och borttagning av skräp. Utvecklarteamet uppdaterar kontinuerligt detta plugin för att hålla det uppdaterat med de senaste uppdateringarna och säkerhetsåtgärderna.

Om du säljer produkter och tjänster online, WooCommerce-specifik optimering funktioner i Speed ​​Booster Pack kommer att hjälpa dig mycket med att öka synligheten för din butik på internet.

Du kan snabbt fixa renderingsblockerande JavaScript och CSS på din WordPress-webbplats genom att klicka på fliken "Avancerat" från Speed ​​Booster Pack-menyn på din adminpanel.

För JavaScript, aktivera alternativen "Flytta skript till sidfoten" och "Skjut upp analysen av JavaScript-filer". Gå sedan till menyn "CSS-optimering" och välj bland de tillgängliga alternativen för att förbättra din webbplats prestanda.

Speed ​​Booster Pack är en gratislösning tillgänglig på WordPress.org-webbplatsen.

 

JCH Optimera

JCH Optimera är det sista objektet på den här listan över föreslagna plugins som är utrustade med användbara verktyg för att snabba upp sidladdningen. Det hjälper dig till exempel att minska hur många HTTP-förfrågningar som krävs för att ladda dina sidor och samtidigt minska storleken på dessa sidor.

Sprite Generator är en annan spännande funktion tillgänglig i detta plugin som minskar antalet HTTP-förfrågningar för att ladda bakgrundsbilderna.

Med JCH Optimize kan du ta bort renderingsblockerande JavaScript och CSS om du uppgraderar till en premiumplan. Allt du behöver är att aktivera "Premium" eller "Optimum" alternativen i avsnittet "Automatiska inställningar". CSS-leveransinställningar är också endast tillgängliga i Pro-versionen.

Du kan installera detta plugin gratis från WordPress.org, men du måste köpa en premiumplan för att låsa upp dess fulla potential. Prisplanerna börjar från $29 för sex månader och når $99 för livstidsåtkomst.

 

Sammanfattning

Webbplatsens laddningshastighet är en av de mest kritiska delarna för att attrahera, engagera och behålla publik. Du bör ge det hög prioritet när du optimerar din webbplats för sökmotorer och använda verktyget Google PageSpeed ​​Insights för att mäta hur bra du presterar inom detta område.

Det renderingsblockerande JavaScript- och CSS-objektet är ett av de vanligaste förslagen du kan se när du använder Googles kraftfulla verktyg. Du kan enkelt lösa det här problemet genom att installera en av de fem plugins som vi introducerade i den här artikeln och snabba upp laddningshastigheten för dina sidor i stora drag.

Vi hoppas att du tycker att den här handledningen är till nytta och att du kan njuta av en snabbladdad webbplats för bästa möjliga resultat.