Om du någonsin har kört din WordPress-sajt via Google PageSpeed Insights har Google förmodligen sagt att du måste eliminera renderingsblockerande resurser på din WordPress-sajt. Det kan vara därför du läser det här inlägget just nu.

Det skapar förmodligen två frågor:

  1. Vad är renderingsblockerande resurser i första hand?
  2. Hur kan du eliminera renderingsblockerande resurser på WordPress?

I det här inlägget kommer vi att svara på båda frågorna åt dig. Här är allt vi kommer täcka i det här inlägget:

Föredrar du att titta på videoversionen?

Vad betyder ”eliminera renderingsblockerande resurser”?

För att förstå vad renderingsblockerande resurser är och varför de skadar webbplatsens laddningstider, måste vi börja med en grundläggande titt på hur en webbläsare renderar en webbsida.

När en besökare landar på din webbplats börjar deras webbläsare i princip högst upp av webbplatsens kod och läser neråt. Från topp till tå.

Om webbläsare i den processen stöter på en CSS- eller JavaScript-fil, måste den stoppa ”läsningen” medan den väntar på att ladda ner och bearbeta den filen. Den tid som den spenderar ”pausad” för att ladda ner och parsa dessa resurser kan spenderas på något mycket mer produktivt, som att ladda den del av webbplatsens innehåll som är omedelbart synligt när någon landar på sidan.

Låt oss titta på ett extremt exempel för att visa varför detta kan vara ett problem.

Låt oss säga att du har en cool JavaScript-effekt i webbplatsens sidfot. Den drivs av ”coolfooter.js”, som är ett skript som refereras överst på webbplatsens kod (även om effekten ligger i sidfoten, så besökarna kommer inte att se den förrän de bläddrar ner till sidfoten).

Så en mycket grov layout för webbplatsens kod skulle kunna vara något i stil med detta:

Och här är anledningen till att det här är ett problem:

När en besökare landar på din webbplats börjar webbläsaren läsa med start högst upp. Så innan den kan parsa och rendera HTML för ovanstående innehåll på din webbplats, måste den vänta för att ladda ner och parsa coolfooter.js-filen.

Slutresultatet? Det tar längre tid att visa HTML-koden för innehållet högst upp, vilket innebär att dina besökare kommer att uppfatta din webbplats som långsammare.

När Google säger att du ska eliminera renderingsblockerande resurser betyder det i princip: ”ladda inte onödiga resurser högst upp på webbplatsens kod eftersom det kommer att ta längre tid för besökarnas webbläsare att ladda ner den synliga delen av ditt innehåll”.

Med tipsen i det här inlägget kan du vänta med att ladda vissa CSS- och JavaScript-resurser tills den synliga delen av din sida redan har laddats.

Vad är renderingsblockerande resurser?

När vi hänvisar till renderingsblockerande resurser talar vi vanligtvis om:

Det är viktigt att förstå att inte alla CSS-och JavaScript-filer är renderingsblockerande.

Det är till exempel viktigt att ladda ditt viktiga CSS nära toppen, annars kan dina besökare uppleva vad som kallas en blixt av ostylat innehåll (Flash of unstyled content, eller FOUC).

Är bilder renderingsblockerande resurser?

Nej, bilder är inte renderingsblockerande. Det är fortfarande viktigt att optimera dina bilder för att minska deras filstorlekar, men du behöver inte oroa dig för att optimera leveranssökvägen för dina bilder.

Så testar du om din webbplats har renderingsblockerande resurser

För att bedöma om din WordPress-sajt för närvarande har renderingsblockerande resurser kan du använda Google PageSpeed Insights.

Allt du gör är att ange webbadressen du vill testa. Om du har problem med renderingsblockerande resurser kommer PageSpeed Insights sedan att lista varje enskild resurs i avsnittet Eliminera renderingsblockerande resurser under Möjligheter:

Meddelandet Eliminera renderingsblockerande resurser i PageSpeed Insights

Meddelandet Eliminera renderingsblockerande resurser i PageSpeed Insights

Hur eliminerar du renderingsblockerande resurser?

Oroa dig inte, du behöver inte göra det manuellt. Vi pratar om WordPressplugins som kan hjälpa dig att eliminera renderingsblockerande resurser i nästa avsnitt.

Det är dock bra att förstå vad dessa plugins gör bakom kulisserna för att eliminera renderingsblockerande resurser.

Så eliminerar du renderingsblockerande JavaScript

Det finns några olika strategier för att eliminera renderingsblockerande JavaScript. Vi täcker dessa i detalj i vår artikel om hur man skjuter upp parsning av JavaScript, men här är de viktigaste metoderna:

Denna illustration från Growing with the Web gör ett bra jobb med att visa skillnaden:

JavaScript async vs defer

JavaScript async vs defer

Fördelen med att använda defer är att dina skript garanterat kommer exekveras i den ordning som de visas i koden.

Async använder inte detta tillvägagångssätt, vilket ibland kan orsaka problem om du använder async för alla JavaScript-resurser eftersom det ofta kan bryta resurser som är beroende av resurser som visas tidigare i dokumentet. Det vanligaste problemet async producerar är brutna jQuery-resurser som försöker ladda innan jquery.js har lagts till i dokumentet.

Så eliminerar du renderingsblockerande CSS

Att eliminera renderingsblockerande CSS kan vara lite svårare eftersom du måste vara noga med att inte fördröja CSS som behövs för att rendera det översta innehållet. Det ideala arrangemanget är att:

How to Eliminate Render-Blocking CSS and JavaScript Resources with WordPress Plugins

För att visa hur man eliminerar renderingsblockerande resurser på WordPress har vi skapat en enkel testplats som inkluderar renderingsblockerande CSS och JavaScript och sedan tar vi dig igenom hur du använder två olika pluginlösningar för att eliminera renderingsblockerande CSS och JavaScript:

Så här ser vår testsida ut innan vi optimerade CSS- och JavaScript-leveransen:

Meddelandet Eliminera renderingsblockerande resurser i PageSpeed Insights

Meddelandet Eliminera renderingsblockerande resurser i PageSpeed Insights

Om du testar hur effektiva ändringarna är med Google PageSpeed Insights bör du vara medveten om att Google cachar resultaten i flera minuter. I huvudsak innebär detta att om du snabbt…

  1. Testar din optimerade webbplats
  2. Aktiverar ett av pluginsen i det här avsnittet
  3. Testar om din webbplats

… ser du fortfarande resultaten för din optimerade webbplats tills Google återställer cacheminnet. Så se till att du väntar några minuter för att Google ska rensa cacheminnet innan du tänker att pluginet inte fungerar.

Så eliminerar du renderingsblockerande resurser med Autoptimize + Async JavaScript-pluginet

Autoptimize och Async JavaScript är två separata gratisplugins från samma utvecklare. Tillsammans hjälper de dig att optimera leveransen av både CSS och JavaScript.

När du har installerat båda plugins, gå till Inställningar → JavaScript Async och:

Så här konfigurerar du Async JavaScript-pluginet

Så här konfigurerar du Async JavaScript-pluginet

Om Async-alternativet orsakar problem på din webbplats rekommenderar vi att du testar Defer eller att exkludera jQuery, vilket pluginet ger dig ett alternativ för.

När du har ställt in Async JavaScript-pluginet, gå till Inställningar → Autoptimize och:

Så här konfigurerar du pluginet Autoptimize

Så här konfigurerar du pluginet Autoptimize

Om du är en avancerad användare kan du leka med de extra JavaScript-och CSS-optimeringsinställningarna, men för de flesta webbplatser kommer det räcka med standardinställningarna.

Efter att ha konfigurerat Autoptimize och Async JavaScript gick vår testwebbplats PageSpeed Insights igenom ”Eliminera renderingsblockerande resurser”-granskning utan anmärkning.

PageSpeed Insights resultat med Autoptimize och Async JavaScript

PageSpeed Insights resultat med Autoptimize och Async JavaScript

Om du vill eliminera ännu fler av dessa filer kan du också använda Autoptimize för att manuellt anpassa de viktigaste CSS-elementen. Detta kräver viss utvecklingskunskap, dock, så det är inte något icke-utvecklare bör testa.

Du kan också använda pluginsen separat om du föredrar det. Men med tanke på att båda pluginsen kommer från samma utvecklare och är byggda för att fungera väl med varandra, är det bäst att kombinera dem för de flesta webbplatser.

Så eliminerar du renderingsblockerande resurser med WP Rocket

WP Rocket är ett populär premiumplugin för WordPress prestanda och cachning.

Normalt tillåter vi inte cachningsplugins på WordPress-sajter som hostas på Kinsta eftersom vi redan hanterar cachning åt dig på servernivå via snabb Nginx FastCGI-cache.

WP Rocket har dock en särskild integration med Kinsta som låter WP Rocket fungera bra med din Kinsta-cachning. Det är bra eftersom WP Rocket gör mycket mer för WordPress prestanda än bara lagring, inklusive att hjälpa dig att eliminera renderingsblockerande CSS- och JavaScript-resurser på din WordPress-sajt.

Använder du WP Rocket? Sätt tillägget i arbete för att ytterligare optimera din webbplats med vår sömlösa integration. Prova Kinsta gratis.

När du har installerat och aktiverat WP Rocket, gå till fliken Filoptimering. Aktivera sedan dessa två alternativ:

Så här konfigurerar du WP Rocket

Så här konfigurerar du WP Rocket

Efter att ha aktiverat dessa två funktioner gick vår testplats också igenom granskningen ”Eliminera renderingsblockerande resurser” i PageSpeed Insights. WP Rocket lyckades också eliminera fler renderingsblockerande resurser än Autoptimize/Async JavaScript-kombinationen:

PageSpeed Insights resultat med WP Rocket

PageSpeed Insights resultat med WP Rocket

Och det är så du kan eliminera renderingsblockerande resurser på din WordPress-sajt!

Vill du bli av med renderingsblockerande resurser i #WordPress? Det är super lätt med rätt plugins... Kolla in hur du finjusterar deras inställningar och göra din webbplats snabbare! ⚙️🏃‍♀️Click to Tweet

Sammanfattning

Renderingsblockerande resurser saktar ner de upplevda sidladdningstiderna på din WordPress-sajt genom att tvinga besökarnas webbläsare att skjuta upp rendering högst upp på sidan medan webbläsaren hämtar filer som inte behövs direkt.

För att hjälpa besökare att ladda den synliga delen av din sida snabbare bör du skjuta upp laddning av resurser som inte omedelbart krävs.

För att eliminera renderingsblockerande resurser på WordPress, kan du använda flera vanliga plugins.

För en gratis lösning kan du använda kombinationen Autoptimize och Async JavaScript, två plugins från samma utvecklare.

Om du är villig att betala, kan du använda WP Rocket, som erbjuder en speciell integration med Kinsta och kan hjälpa till med massor av andra prestandajusteringar för WordPress.

Har du några ytterligare frågor om hur man eliminerar renderingsblockerande resurser på WordPress? Låt oss veta i kommentarerna!


If you enjoyed this article, then you’ll love Kinsta’s WordPress hosting platform. Turbocharge your website and get 24/7 support from our veteran WordPress team. Our Google Cloud powered infrastructure focuses on scalability, performance, and security. Let us show you the Kinsta difference! Kolla in våra paket