Så här fixar du renderingsblockerande JavaScript och CSS i WordPress

Försöker du eliminera renderingsblockerande JavaScript och CSS i WordPress?

Om du testar din website på Google PageSpeed insights, kommer du troligen att se ett förslag om att eliminera renderingsblockerande skript och CSS. Det finns dock inga detaljer om hur du gör det på din WordPress site.

I den här artikeln visar vi dig hur du enkelt fixar renderingsblockerande JavaScript och CSS i WordPress för att förbättra din Google PageSpeed-poäng.

Vad är renderingsblockerande JavaScript och CSS?

Renderingsblockerande JavaScript och CSS är filer som hindrar en website från att displayed en page innan dessa filer har hämtats.

Varje WordPress-webbplats har ett theme och tillägg som add to JavaScript och CSS-filer till front-enden av din website.

Dessa skript kan öka din sites sidladdningstid och de kan också blockera renderingen av sidan.

En användares webbläsare måste ladda dessa skript och CSS innan den hämtar resten av HTML på sidan. Detta innebär att användare med en långsammare anslutning måste vänta några millisekunder längre för att se sidan.

Dessa skript och stylesheets kallas renderingsblockerande JavaScript och CSS.

WordPress-webbplatsägare som försöker uppnå en Google PageSpeed-poäng på 100 måste fixa det här problemet för att uppnå den perfekta poängen.

Vad är Googles PageSpeed Score?

Google PageSpeed Insights är ett verktyg för hastighetstest av webbplatser som skapats av Google för att hjälpa webbplatsägare att optimera och testa sina webbplatser. Verktyget testar din website mot Googles riktlinjer för hastighet och ger förslag på hur du kan förbättra laddningstiden för din page.

Det visar dig en poäng baserat på antalet revisioner som din site passerar. De flesta websites får någonstans mellan 50-70. Vissa website-ägare känner sig dock tvungna att uppnå 100 (den högsta poäng en page kan få).

Behöver du verkligen den perfekta ”100” Google PageSpeed-poängen?

Syftet med Googles PageSpeed-insikter är att ge dig riktlinjer för att förbättra hastigheten och prestandan på din website. Du är ej obligatorisk att följa dessa regler strikt.

Kom ihåg att hastighet bara är en av de många metrics för optimering av webbplatsens sökmotorsoptimering (SEO) som hjälper Google att avgöra hur din site ska rankas. Hastigheten är så viktig eftersom den förbättrar användarnas upplevelse på din site.

En bättre upplevelse för användarna är obligatorisk, och inte bara hastighet. You måste också erbjuda användbar information, ett bättre användargränssnitt och ett engagerande content med text, images och videoklipp.

Your goal should be to create a fast website that offers a great user experience.

Vi rekommenderar att du använder Googles PageSpeed-regler som förslag. Om du kan implementera dem enkelt utan att förstöra upplevelsen för användarna är det bra. Annars bör du försöka göra så mycket du kan, och sedan inte oroa dig för resten.

Med detta sagt, låt oss ta en titt på vad du kan göra för att fixa renderingsblockerande JavaScript och CSS i WordPress.

Vi kommer att täcka två metoder som kommer att eliminera renderande blockerande resurser i WordPress. Du kan välja den som fungerar bäst för din website:

Metod 1: Fixa Render Blocking Scripts och CSS med WP Rocket

För den här metoden kommer vi att använda WP Rocket plugin. Det är det bästa WordPress caching och optimering plugin på marknaden som tillåter dig att snabbt förbättra din website prestanda utan några tekniska färdigheter eller en komplicerad installation.

Först måste du installera och aktivera WP Rocket plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

WP Rocket fungerar direkt från boxen och aktiverar caching med optimala Settings för din website. Du kan läsa mer om det i vår kompletta guide om hur du installerar och konfigurerar WP Rocket på rätt sätt i WordPress.

Som standard aktiveras inte alternativen för JavaScript- och CSS-optimering. Dessa optimeringar kan potentiellt påverka din websites appearance eller vissa funktioner, vilket är anledningen till att pluginet tillåter dig att aktivera dessa inställningar valfritt.

För att göra det måste du besöka Settings ” WP Rocket page och sedan byta till tabben ’File Optimization’.

Härifrån rullar du till CSS Files section och kontrollerar boxarna bredvid ”Minify CSS”, ”Combine CSS Files” och ”Optimize CSS Delivery”.

För inställningen ”Optimize CSS Delivery” rekommenderar WP Rocket att du väljer metoden ”Remove Unused CSS”.

Förutom att erbjuda bästa möjliga prestanda kan det bidra till att minska sidstorleken och HTTP requests.

Därefter måste du rulla till JavaScript Files section. Härifrån kan du kontrollera alla alternativ för maximal prestandaförbättring.

Du kan minifiera och kombinera JavaScript-filer gillar du gjorde för CSS.

Du kan också hindra WordPress från att hämta filen jQuery Migrate. Det är ett skript som WordPress hämtar för att ge kompatibilitet för tillägg och themes som använder gamla versioner av jQuery.

De flesta webbplatser behöver inte den här filen, men du vill ändå kontrollera din website för att se till att temat eller tilläggen inte påverkas om du tar bort den.

Därefter rullar du ner lite längre och kontrollerar boxarna bredvid alternativen ”Load JavaScript Defered” och ”Safe Mode for jQuery”.

Dessa alternativ fördröjer att icke-väsentliga JavaScript hämtas, och jQuery safe mode allow you to load jQuery for themes that may use it inline. Du kan låta det här alternativet vara avmarkerat om du är säker på att ditt theme inte använder inline jQuery någonstans.

Glöm inte att klicka på knappen ”Save Changes” för att spara dina inställningar.

Efter det kanske du också vill cleara cachen i WP Rocket innan du testar din website igen med Google PageSpeed Insights.

På vår testsite kunde vi uppnå 100% poäng på stationära enheter, och render-blocking issue löstes i både mobila och stationära poäng.

Metod 2: Fixa renderingsblockerande skript och CSS med Autoptimize

För den här metoden kommer vi att använda ett separat plugin som är speciellt framtaget för att förbättra leveransen av din websites CSS- och JS-filer. Även om detta plugin får jobbet gjort, har det inte de andra kraftfulla funktionerna som WP Rocket har.

Det första du behöver göra är att installera och aktivera Autoptimize, ett gratis plugin som snabbar upp prestandan på din website. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Efter aktivering måste du besöka Settings ” Autoptimize page för att konfigurera plugin-inställningarna.

Först måste du kontrollera boxen bredvid ”Optimize JavaScript Code” under JavaScript Options block. Se till att alternativet ”Aggregate JS-files” är avmarkerat.

Därefter rullar du ner till CSS Options box och kontrollerar alternativet ”Optimize CSS Code”.

Se till att alternativet ”Aggregate CSS-files” är avmarkerat.

Du kan nu klicka på knappen ”Save Changes and Empty Cache” för att lagra dina inställningar.

Gå vidare och testa din website med PageSpeed Insights tool. På vår demo site kunde vi fixa render-blocking issue med dessa grundläggande inställningar.

Om det fortfarande finns skript som blockerar rendering kan du gå tillbaka till pluginets inställningar page och reviewer inställningarna under både JavaScript och CSS alternativ.

You kan till exempel allow the plugin to include inline JS and remove scripts that are excluded by default, like seal.js or jquery.js. Sedan klickar du bara på knappen ”Save changes and Empty Cache” för att spara dina ändringar och tömma plugins cache.

När du är klar kan du kontrollera din website igen med verktyget PageSpeed Insights.

Hur fungerar Autoptimize?

Autoptimize samlar ihop all JavaScript och CSS som står i kö. Därefter skapar den minifierade CSS- och JavaScript -filer och serverar cachelagrade kopior till din website som asynkron eller uppskjuten.

This allows you to fix the render-blocking scripts and styles issue. Tänk dock vänligen på att det också kan påverka prestandan eller appearance på din website.

Vad ska man göra om JavaScript och CSS som blockerar rendering fortfarande finns kvar?

Beroende på hur tilläggen och ditt WordPress tema använder JavaScript och CSS kan det vara svårt att helt fixa alla renderande blockerande JavaScript- och CSS-problem.

Även om ovanstående tools kan hjälpa, kan dina tillägg behöva vissa skript på en annan prioritetsnivå för att fungera korrekt. I så fall kan lösningarna ovan leda till att sådana tillägg inte fungerar som de ska, eller att de beter sig oväntat.

Istället för att försöka eliminera problem med blockering av rendering helt rekommenderar vi att du använder alternativa metoder för att snabba upp din website. Till exempel kan du använda en CDN-tjänst för att servera dina statiska JavaScript- och CSS-filer och minska laddningstiden.

För mer information kan du läsa vår ultimata guide för att öka WordPress hastighet och prestanda.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du fixar renderings-blockerande JavaScript och CSS i WordPress. Du kanske också vill se vår artikel om hur WPBeginner ökar sidans laddningshastighet med 6 tips och vår jämförelse av de bäst hanter ade webbhotellen för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.