Hur man eliminerar renderingsblockerande resurser i WordPress (mycket enkelt)

Återgivningsblockerande resurser kan vara en stor smärta för bloggare. Google varnar hela tiden för att eliminera dem. Det finns många sätt att ta bort dem men här är ett väldigt enkelt sätt som inte kräver kodning.

Att ha en snabb blogg eller hemsida är mycket viktigt. Det är viktigt om du vill ranka högt i sökmotorerna. Om din webbplats är väldigt långsam kommer det definitivt att skada din SEO.

Dessutom kan en långsam webbplats få avvisningsfrekvensen att bli hög, vilket tekniskt sett kommer att skada ditt varumärke på många sätt. En långsam webbplats kan påverka inkomst och konvertering.

De flesta användare är otåliga, om din webbplats tar för lång tid att ladda kommer de att överge den och gå till ett snabbare alternativ. Det är en potentiell kund eller intäktsförstärkare borta.

Om du har försökt att snabba upp din webbplats och du använder ett testverktyg som Google PageSpeed ​​Insight, en varning du troligen kan få är att eliminera renderingsblockerande resurser.

I den här artikeln kommer du att lära dig hur du enkelt eliminerar renderingsblockerande resurser.

Vad är renderingsblockerande resurser?

Resurser som blockerar renderingen är CSS och JavaScript som saktar ner laddningstiden för en webbplats eftersom den måste laddas ner av webbläsaren innan sidans innehåll kan renderas.

När en besökare försöker komma åt en webbplats börjar webbläsaren omedelbart läsa webbplatsen uppifrån och ned. Om det finns någon CSS eller JavaScript kommer webbläsaren att sluta läsa tills den laddar ner och bearbetar filerna. Innan webbläsaren kan återge innehållet ovanför mitten måste den ladda ner CSS- eller JavaScript-filerna.

Plugins eller teman som du installerar kan lägga till några av dessa CSS och JS. Vissa behöver inte ladda först, de kan ladda senare. Men eftersom de är där i toppen saktar de ner din webbplats.

Så vad Google menar med "eliminera renderingsblockerande resurser" är att du tar bort onödiga resurser från toppen av din webbplats eftersom det saktar ner laddningen av webbplatsinnehåll.

Hur man hittar renderingsblockerande resurser

Innan du kan lösa ett renderingsblockerande problem måste du veta var det kommer ifrån. Du kan ta reda på vilka resurser som blockerar renderingen genom att köra ett test på Google PageSpeed ​​Insight or Web.Measure.

Du kan följa stegen nedan för att hitta renderingsblockerande resurser:

1. Besök Google PageSpeed ​​Insight

2. Ange din webbadress och klicka på analysera

3. Bläddra nedåt och håll utkik efter varning för eliminera renderingsblockerande resurser.

Sök efter det i både mobil- och skrivbordstryck.

PageSpeed ​​Insight Desktop
För BloggingTools har vi 100 på skrivbordet, som tur är har vi inget problem med renderingsblockering

För Blogging Tools, vi har inga renderingsblockerande problem för Desktop, men vi har för mobila enheter. Så för detta kommer vi att använda Mobile som du kan se nedan.

PageSpeed ​​Insight Mobile-resultat
PageSpeed ​​Insight mobil
Vi har 2 nummer för mobil

För mobil, som du kan se ovan, har vi två renderingsblockeringsproblem. Med en poäng på 2. Poängen var högre, men för detta inläggs skull var jag tvungen att inaktivera Autoptimize-plugin.

BloggingTools.org uppnådde denna poäng utan optimering eftersom vi använder ett väldigt snabbt och lättviktigt tema som heter GeneratePress. Vi är även värd för ett mycket snabbt webbhotell som kallas Cloudways.

Anmärkningar: Du bör inte vara besatt av att få 100 på PageSpeed-insiktspoängen. Det är bara en guide. Vanligtvis är en genomsnittlig poäng på 65 till 80 bra för de flesta. Ta inte bort filer som är viktiga för ditt företag.

Det som är bra med WordPress är att du inte behöver göra allt manuellt. Det finns några välkodade plugins som hjälper.

Så här fixar du eliminera problem med renderingsblockerande resurser i WordPress

Följ dessa steg för att åtgärda problemet med renderingsblockerande resurser:

1. Installera och aktivera Autoptimize

Det finns många WordPress-plugins som kan göra detta, till exempel W3 total cache. WP Rocket och så vidare. Men av min erfarenhet med många webbplatser hanterar Autoptimize det alltid mycket bättre än någon av dem. Det fantastiska är att Autoptimize är kompatibelt med nästan alla WordPress cache-plugins och det är gratis.

Gå över till WordPress-pluginkatalogen för att installera och aktivera Autoptimize

2. Besök Autoptimize-inställningarna

Om du någonsin behöver var du kan hitta Autoptimize-inställningar, klicka på din WordPress-instrumentpanel på inställningar och klicka sedan på Autoptimize.

3. Optimera JavaScript

Under JavaScript-alternativ, välj Optimera skriptkod och välj även sammanställda JS-filer. Du hittar inställningarna jag använder för BloggingTools nedan.

Autooptimera JavaScript

4. Optimera CSS

Under alternativen Optimera CSS väljer du Optimera CSS-kod. Välj även sammanställda CSS-filer och "Aggregera även inline CSS." Se alternativen jag använder för BloggingTools nedan.

Autooptimera CSS

5. Optimera HTML

Om du vill ha bättre prestanda kan du även använda Autoptimize för att optimera HTML. Under HTML-alternativ väljer du optimera HTML-kod. Du kan se inställningarna jag använder för BloggingTools nedan.

Autooptimera HTML

6. Markera Övriga alternativ

Du kan kontrollera de olika alternativen och justera några inställningar eftersom det fungerar för dig. Du hittar inställningarna för BloggingTools nedan.

Autooptimera Övriga alternativ

7. Spara och töm cacheminnet.

Klicka sedan på Spara och töm cacheminnet. Det är allt!

Efter allt detta kan du kontrollera din webbplats igen på Google PageSpeed ​​Insight. För BloggingTools, omedelbart efter att ha gjort detta, hoppade vår poäng upp till 95 och alla varningar om eliminering av renderingsblockerande resurser försvann helt. Se nedan.

Google PageSpeed ​​Insight mobil
Google PageSpeed ​​Insight Mobile-poäng

Observera att beroende på hur många renderingsblockerande resurser du har och hur viktiga de är för din webbplats, kan några av dem finnas kvar. Försök inte att ta bort dem.

Om du vill eliminera ytterligare kan du använda Asynkroniserad JavaScript, ett plugin av samma författare som Autoptimize. De arbetar tillsammans. Jag rekommenderar inte detta eftersom det kan skada din webbplats. Enbart autooptimera är okej!

Slutsats

Hastighet är viktig och att eliminera renderingsblockerande resurser kan hjälpa din webbplats att laddas snabbare och ge din webbplats bättre resultat på verktyg för hastighetstestning. Men du bör aldrig vara besatt av dessa poäng eftersom de bara är till för att vägleda.

Om din webbplats fortfarande är väldigt långsam efter detta. De tre mest troliga problemen kan vara att ditt tema eller din webbvärd är dålig, eller att du har dåliga plugins installerade. Jag rekommenderar Coudways som bästa webbhotell och GeneratePress som det bästa temat. Om du är nybörjare, Bluehost kan hantera men om du har råd är Cloudways bäst. Du kan börja gratis. Jag använder GeneratePress och Coudways för TargetTrend

Läs också:

Hur man gör WordPress väldigt snabbt

Hur man driver trafik till din blogg

Hur man tjänar pengar på bloggning

Så här startar du en blogg

Mfon Abel Ekene

Mfon Abel Ekene

Jag tycker om att skapa innehåll som är användbart. Min passion är att hjälpa internetbefolkningen att hitta vad de behöver genom att peka dem i rätt riktning. Det är vad jag älskar att göra och jag lägger ner många timmars forskning och testning för att säkerställa att jag gör just det genom mitt innehåll på TargetTrend.

Artiklar: 51

Ta emot tekniska prylar

Tekniska trender, uppstartstrender, recensioner, onlineintäkter, webbverktyg och marknadsföring en eller två gånger i månaden