Hur man eliminerar renderingsblockerande resurser i WordPress [Plugins or Manually]

I dagens konkurrensutsatta digitala landskap spelar webbplatsens hastighet mycket när det kommer till framgången för ett onlineföretag. Sökmotorjättar som Google prioriterar sajter som laddar snabbt och inser nödvändigheten av att ge en sömlös användarupplevelse.

Enligt studier ökar snabbare sidladdningar användarengagemang och konverteringsfrekvens. Faktum är att en fördröjning på en sekund av den tid det tar för en sida att laddas kan orsaka en minskning med 7 % i kundkonverteringar. Med tanke på detta är det uppenbart att webbplatsägare bör lägga ett högt fokus på webbplatsens prestanda.

Google tar webbplatsens prestanda på allvar och tar hänsyn till det när de bestämmer sökresultat. Följaktligen är det mer sannolikt att webbplatser som laddas snabbt visas först i sökresultaten, drar fler besökare och så småningom genererar mer intäkter. Men hur kan du uppfylla Googles krav och ladda din webbplats snabbt?

Du blir av med resurser som kan rendera-blockera en webbplatss laddningstid, såsom CSS- och JavaScript-filer.

Men att ta bort dessa resurser kan vara utmanande och tidskrävande, särskilt för individer som saknar tekniska färdigheter.

I den här artikeln kommer vi att förklara renderingsblockerande resurser och hur de påverkar webbplatsens prestanda och tillhandahålla en steg-för-steg-guide för att eliminera dem från din WordPress-webbplats. Så låt oss börja optimera din webbplats för snabbhet och framgång!

Render blockerande resurser

Alla resurser som måste laddas innan en webbsida kan visas anses vara en renderingsblockerande resurs. Dessa resurser påverkar en webbplatss prestanda och effektivitet och förlänger tiden det tar att ladda en sida.

En CSS- eller JavaScript-fil kan betraktas som en renderingsblockerande resurs om den filen blockerar renderingen av en webbsida. Men betydelsen av att ladda sidan kan variera beroende på deras omedelbara nödvändighet.

När en användare går in på en sida, bearbetar webbläsaren först HTML-koden för att visa dess innehåll ovanför mitten. När webbläsaren stöter på CSS- och JavaScript-filer laddar den ner och bearbetar dem också. Om resursfilerna innehåller ytterligare koder eller oanvända delar tar det längre tid att ladda webbsidan.

Typer av renderingsblockerande resurser

Generellt anses resursfiler som CSS och JavaScript som renderingsblockerande resurser i WordPress. Webbläsaren ser dessa resurser som kritiska och kräver laddning innan sidan kan visas. Men det är inte det; det finns fler resursfiler som blockerar renderingen av en webbsida.

Här är en lista över renderingsblockerande resurser:

CSS-formatmallar

En webbsidas design och presentation bestäms av CSS-stilmallar. En CSS-fil kommer att betraktas som en renderingsblockerande resurs om den placeras i avsnittet på en HTML-sida.

JavaScript-filer i avsnittet

JavaScript är ett skriptspråk som kan användas för att ge en webbsida dynamiskt beteende och interaktion. En JavaScript-fil kommer att betraktas som en renderingsblockerande resurs om den placeras i en HTML-sidas -sektion.

Teckensnitt

Texter på en webbsida visas med olika typsnitt. Teckensnitt betraktas också som en renderingsblockerande resurs om de ingår i en HTML-sidas -sektion och laddas från en lokal server eller ett CDN.

HTML-import

Dessa är den äldre HTML-funktionen som gör att webbsidor kan inkludera element från andra HTML-dokument. Även om HTML-importer inte används lika ofta längre, kan de fortfarande ses på vissa äldre webbplatser. HMTL-importer betraktas också som renderingsblockerande resurser.

Varför är renderingsblockerande resurser fruktansvärda för webbsidor

Om din WordPress-webbplats innehåller renderingsblockerande resurser kommer du att hamna efter i sökresultaten. Även om du för närvarande är i frontlinjen, kommer webbplatser med bättre prestanda så småningom att övermanna dig.

Webbplatser med resurser som blockerar renderingen kommer att ladda extra filer medan webbplatsen renderas. Innan de ser webbplatsen måste användarna vänta medan filerna bearbetas. Följande resultatindikatorer för webbplatser kommer att påverkas av dessa resurser:

  • Största innehållsrika färg: Detta bestämmer hur lång tid det skulle ta att ladda sidans primära innehåll.
  • First Contentful Paint: Den tid det tar för en webbläsare att producera det första dokumentets objektmodellinnehåll (DOM) på din webbplats.
  • Total blockeringstid: Detta utvärderar hur mycket tid det tar från Frist Contentful Pianto till hur lång tid det tar för en sida att bli helt interaktiv.

Även om renderingsblockerande resurser inte är nödvändiga för att ladda, kan de hindra renderingen av en webbplats eller webbsida. Därför är det viktigt att ta bort sådana resurser för att förhindra att det blir svårt för användare att navigera på din webbplats.

Låt oss ta en närmare titt på varför renderingsblockering är ett allvarligt problem för webbsidorna:

Långsam sidladdningstid

Återgivningsblockerande resurser kommer att göra att webbplatsen laddas långsammare, vilket är en av dess främsta nackdelar. En webbsida laddas långsamt när den innehåller resursfiler med onödiga element. Därför kommer det att påverka sökresultatens utseende, lägre användarengagemang och högre avvisningsfrekvens.

Blockerad rendering

Ofta slutar en webbläsare att rendera en webbsida när den stöter på renderingsblockerande resurser eftersom den vill att de renderingsblockerande resurserna ska hämtas och bearbetas.

I slutändan kommer användare att bli irriterade och lämna din webbplats på grund av att sidan inte svarar eller långsam rendering.

Dessutom, om en resurs laddas långsamt, kan webbläsaren också ge upp och sluta försöka ladda den. Detta kan leda till trasiga sidor eller saknad information.

Minskat användarengagemang

När renderingsförseningar uppstår sjunker användarupplevelsen med det. Användare förväntar sig alltid snabba laddningstider, och de lämnar vanligtvis en webbplats som laddar långsamt. Så de hamnar på en webbplats som laddas snabbare.

Sajter som laddar långsamt har en skadlig effekt på konsumentnöjdheten och varumärkets rykte. Med det minskar också webbplatstrafiken och konverteringsfrekvensen drastiskt.

Det finns olika metoder för att ta bort renderingsblockerande resurser från WordPress. Vi kommer dock att introducera dig för manuella metoder för att eliminera renderingsblockerande resurser. Sedan visar vi hur du kan göra det med några av de välkända plugins i WordPress.

Eliminera renderingsblockerande resurser manuellt

Du kan undvika att göra det manuellt, så bli inte frustrerad. Men att gå igenom det här avsnittet kommer säkert att hjälpa dig att lära dig några WordPress-prestandaoptimeringstekniker. Men först, titta på den här videon för att bekanta dig med de diskuterade termerna.

#1. Identifiera renderingsblockerande resurser

Du måste först ta reda på de renderingsblockerande resurserna innan du tar bort dem från din webbplats. Följ helt enkelt dessa steg för att ta reda på de renderingsblockerande resurserna på din WordPress-webbplats:

  • Gå till Google PageSpeed ​​Insights.
  • Ange webbadressen till din webbplats i sökfältet.
  • Klicka på knappen ”Analysera” för att få insikter om din webbplats.

  • Bläddra ner och kolla avsnittet Möjligheter.
  • Om din sida har några renderingsblockerande resurser kommer de att listas.

#2. Använda ”Defer” & ”Async”-attribut för JS

Efter att ha identifierat de renderingsblockerande resurserna är det dags att eliminera dem för bättre webbplatsprestanda. Från olika metoder är att använda metoden ”defer” eller ”async” för JavaScript-filer ett sätt att göra detta.

När det kommer till ”defer”-attributet tillåter det webbläsaren att ladda ner JS-filen och sedan köra den. Men det händer när sidan har laddats klart och är redo att visa innehållet.

Så resten av elementen på sidan kan laddas parallellt med JavaScript-filen. Som ett resultat minskar tiden det tar att ladda sidan.

Ett annat tillvägagångssätt är ”async”-attributet som gör att webbläsaren kan ladda ner JS-filen när den är tillgänglig. Detta sker utan att blockera några andra delar av sidan. Följaktligen kan JS-filen laddas parallellt med andra element, vilket påskyndar laddningsprocessen.

Du kan bli av med renderingsblockerande resurser och öka hastigheten på din webbplats genom att använda antingen attributet ”defer” eller ”async”.

#3. Använda ”Media”-attribut för villkorlig CSS

Att använda ”media”-attributen för villkorlig CSS är ett annat sätt att eliminera renderingsblockerande resurser. Med det här attributet kan du definiera unika CSS-filer för stationära och mobila webbläsare.

Du kan till exempel inkludera en CSS-fil som är dedikerad till stationära enheter och en annan CSS-fil som är skräddarsydd för mobila enheter. Du kan indikera för webbläsaren att CSS-filen för skrivbordet kommer att laddas när den nås via en stationär enhet.

På samma sätt bör den mobila CSS endast laddas när den nås via mobila enheter. Genom att ladda enhetsspecifik CSS för angivna enheter kan du minska de renderingsblockerande resurserna och öka laddningstiden för din webbplats.

#4. Uppskjutande av icke-kritisk CSS

Förutom att använda attributet ”media” för villkorlig CSS, försök att skjuta upp den icke-kritiska CSS. För detta tillvägagångssätt, måste du ladda den väsentliga CSS i första hand. Därefter laddar du resten av CSS när sidan laddas.

Till exempel kan du ha en enorm CSS-fil som innehåller alla stilar för din webbplats. Men bara en liten del av den CSS-filen krävs för att visa innehållet i området ovanför mitten på din webbplats. Innehållet ovanför mitten kan visas snabbt genom att fördröja den icke-kritiska CSS, och återstående CSS kan laddas när sidan laddas.

#5. Ta bort oanvänd CSS & JS

Att ta bort onödiga CSS- och JavaScript-filer är en annan teknik för att ta bort renderingsblockerande resurser. Dessa filer kan göra din sida tyngre och öka laddningstiden.

Genom att ta bort eventuella oanvända CSS- och JS-filer kan du minska antalet renderingsblockerande resurser. Du kan enkelt använda verktyg som PurifyCSS eller UnusedCSS för att ta bort eventuella oanvända CSS-filer från din webbplats.

#6. Lokalt laddar anpassade teckensnitt

Anpassade teckensnitt kan också innehålla resurser som begränsar renderingen. Istället för att vara beroende av externa källor som Google Fonts, bör du lokalt ladda dina egna anpassade typsnitt för att undvika att behöva dessa resurser.

Du kan garantera att dina anpassade typsnitt laddas snabbt och effektivt utan att sakta ner prestandan på din webbplats genom att ladda dem lokalt. Detta kan leda till en snabbare, mer responsiv webbplats och förbättra användarupplevelsen.

#7. Minifierar JS & CSS

Slutligen kan minifiering av dina CSS- och JavaScript-filer hjälpa din webbplats att fungera bättre. Minifiering tar bort onödiga tecken, som blanksteg och kommentarer, från din kod. Därmed minskar storleken på dina filer, vilket påskyndar laddningen.

För att förminska dina filer kan du använda verktyg som MinifyJS eller CSSNano. Behåll en kopia av dina originalfiler ifall du skulle behöva göra ändringar i dem.

Eliminera renderingsblockerande resurser med plugin

I det här avsnittet kommer vi att visa dig hur du kan eliminera renderingsblockerande resurser med WordPress-plugins. Dessa plugins är kända i WordPress och kan snabbt ta bort renderingsblockerande resurser. Det bästa är att du till och med kan förbättra din webbplats prestanda utan någon specialiserad expertis.

#1. W3 Total Cache

W3 Total Cache (W3TC) förbättrar hela användarupplevelsen av en WordPress-webbplats. Det eliminerar renderingsblockerande resurser och förbättrar SEO, grundläggande webbviktigheter och mer. Plugin-programmet använder funktioner som nätverksintegration för innehållsleverans för att implementera bästa praxis.

För att eliminera renderingsblockerande resurser, installera och aktivera W3 Total Cache-plugin och följ dessa steg:

  • Gå till avsnittet Prestanda i WordPress-instrumentpanelen och klicka på Allmänna inställningar.
  • Under rubriken Minifiera, aktivera Minify och välj Manuell som minify-läge.
  • Klicka nu på Spara alla inställningar.

  • Samla sedan alla renderingsblockerande Javascript- och CSS-filer via Google PageSpeed ​​Insights.
  • Följt av att gå tillbaka till Prestanda > Minifiera.
  • Nu, i js-avsnittet, klicka först på Aktivera för JS Minify-inställningarna. Välj sedan Icke-blockerande under avsnittet Operationer i områden med ”defer”-typen för Taggen Before .
  • Gå nu till JS-filhantering, välj det tema du har aktiverat och klicka på knappen Lägg till skript. Samla nu Javascript-webbadresserna som har problem som skannats av Google PageSpeed ​​Insights. Klistra in webbadresserna i det angivna fältet enligt bilden.

  • Scrolla nu ner lite till CSS-sektionen. Välj ditt tema från rullgardinsmenyn i avsnittet CSS-filhantering och klicka på Lägg till en stilmall. Nu följer du helt enkelt föregående steg och kopierar och klistrar in webbadresserna som samlats in från PageSpeed ​​Insight som har problem.

  • Eftersom alla inställningar är konfigurerade, klicka på knappen Spara inställningar och rensa för att köra.

#2. JCH Optimera

JCH Optimize förbättrar WordPress-webbplatsens prestanda mätt med Google PageSpeed-insikt. Insticksprogrammet förbättrar First contentful paint (FCP), Largest Contentful paint (LCP), Speed ​​Index (SI), Cumulative Layout Shift (CLS), Time to Interactive (TTI) och mer.

Således förbättras den övergripande användarupplevelsen och webbplatsens prestanda avsevärt.

När du har installerat och aktiverat JCH Optimize, följ dessa processer för att eliminera renderingsblockerande resurser:

  • Gå till Inställningar>JCH Optimera, scrolla ner lite och gå till inställningarna för grundläggande funktioner.
  • Aktivera Optimera CSS-leverans för att eliminera CSS-renderingsblockering. Den här funktionen bestämmer automatiskt vilken CSS som krävs för att visa innehållet ovanför mitten på varje webbsida. Dessutom infogas den i avsnittet i varje sidas HTML-innehåll.

  • Förladdningslänken används sedan för att ladda de sammanlänkade CSS-filerna asynkront.
  • För att ta bort Javascript-renderingsblockerande resurser måste du inkludera attributen async eller defer till