Så eliminerar du renderingsblockerande resurser på WordPress (CSS + JavaScript)

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:

• Vad renderingsblockerande resurser är och varför de är ett problem
• Så fixar du renderingsblockerande resurser generellt
• Så använder du gratis eller betalda plugins för att åtgärda problemet på WordPress

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:

• Rubrikmeta
• Coolfooter.js
• HTML för ditt översta innehåll. Detta är allt innehåll som en besökare ser direkt (innan de börjar interagera med sidan)

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:

• CSS
• JavaScript

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:

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:

• Async – låter HTML-tolken (exempelvis besökarens webbläsare) ladda ner JavaScript medan den fortfarande parsar resten av HTML-koden. Det betyder att den inte helt slutar parsa medan filen hämtas. Det kommer dock att pausa HTML-tolken för att exekvera skriptet när det hämtas.
• Defer – låter HTML-tolken ladda ner JavaScript medan den parsar resten av HTML-koden och väntar på att exekvera skriptet tills HTML-parsningen är klar.

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

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:

• Identifiera de stilar som krävs för att rendera det översta innehållet och leverera dessa stilar inline med HTML.
• Använd medieattributet på länkelementen som drar in CSS-filer för att identifiera CSS-resurser som är villkorliga, det vill säga endast nödvändiga för specifika enheter eller situationer.
• Återstående CSS-resurser bör laddas asynkront, ett drag som vanligtvis görs genom att lägga till dem med uppskjutet eller asynkront JavaScript. För att vara ärliga, det börjar bli lite komplicerat här, eller hur? Det här är definitivt något som en frontendingenjör borde sköta. Vilket är bra om du är en frontendingenjör, men de flesta av oss är inte det. Den goda nyheten är att detta är en artikel om WordPress, och du kan eliminera eller åtminstone avsevärt minska antalet renderingsblockerande JS- och CSS-resurser som påverkar din webbplats med rätt plugin.

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:

• Autoptimize + Async JavaScript (gratis)
• WP Rocket (kostar)

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

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:

• Markera rutan för att Aktivera Async JavaScript överst.
• Välj mellan Tillämpa Async och Tillämpa Defer i Snabbinställningarna.

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:

• Markera rutan för att Optimera JavaScript-kod
• Markera rutan för att Optimera CSS-kod

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.

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.

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

• Optimera CSS-leverans under avsnittet CSS-filer
• Ladda JavaScript uppskjutet under avsnittet JavaScript-filer. Du kan experimentera med att stänga av Säkert läge för jQuery . Men om du upptäcker problem på frontenden av din webbplats bör du återaktivera säkert läge för jQuery eftersom det är den troliga syndabocken.

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:

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!