Hur du fixar återgivande blockering av JavaScript och CSS i WordPress

Vill du eliminera renderingsblockerande JavaScript och CSS i WordPress? Om du testar din webbplats på Google PageSpeed-insikter, kommer du förmodligen att se ett förslag att eliminera render-blockerande skript och CSS. I den här artikeln kommer vi att visa dig hur du enkelt fixar renderingsblockerande JavaScript och CSS i WordPress för att förbättra din Google PageSpeed-poäng.


Hur man fixar renderblockering av JavaScript och CSS i WordPress

Vad är Render-Blocking JavaScript och CSS?

Varje WordPress-webbplats har ett tema och plugins som lägger till JavaScript- och CSS-filer i framsidan av din webbplats. Dessa skript kan öka sidans laddningstid och de kan också blockera rendering av sidan.

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

Dessa skript och formatmallar kallas renderingsblockerande JavaScript och CSS.

Webbplatsägare som försöker uppnå Google PageSpeed-poäng på 100 kommer att behöva åtgärda problemet för att uppnå den perfekta poängen.

Vad är Google PageSpeed ​​Score?

Google PageSpeed ​​Insights är ett onlineverktyg skapat av Google för att hjälpa webbplatsägare att optimera och testa sina webbplatser. Det här verktyget testar din webbplats mot Googles riktlinjer för snabbhet och erbjuder förslag för att förbättra din webbplats laddningstid.

Det visar dig en poäng baserat på antalet regler som din webbplats passar. De flesta webbplatser får någonstans mellan 50-70. Vissa webbplatsägare känner sig dock tvungna att uppnå 100 (den högsta sidan kan göra poäng).

Behöver du verkligen det perfekta “100” Google PageSpeed-resultatet?

Syftet med Google PageSpeed-insikter är att ge dig riktlinjer för att förbättra hastigheten och prestandan på din webbplats. Du är inte skyldig att följa dessa regler strikt.

Kom ihåg att hastighet bara är en av de många SEO-statistik som hjälper Google att avgöra hur du rankar din webbplats. Anledningen till att hastigheten är så viktig är att den förbättrar användarupplevelsen på din webbplats.

En bättre användarupplevelse kräver mycket mer än bara hastighet. Du måste också erbjuda användbar information, bättre användargränssnitt och engagerande innehåll med text, bilder och videor.

Ditt mål borde vara att skapa en snabb webbplats som erbjuder bra användarupplevelse.

Vi har nyligen omarbetat WPBeginner, och vi höll vårt fokus på hastighet och förbättrade användarupplevelsen.

Vi rekommenderar att du använder Google Pagespeed-regler som förslag, och om du enkelt kan implementera dem utan att förstöra användarupplevelsen är det bra. Annars bör du sträva efter att göra så mycket du kan och sedan inte oroa dig för resten.

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

Vi kommer att täcka två metoder som fixar renderingsblockerande JavaScript och CSS i WordPress. Du kan välja den som fungerar bäst för din webbplats.

1. Fixa Render Blocking Scripts och CSS med Autoptimize

Denna metod är enklare och rekommenderas för de flesta användare.

Det första du behöver göra är att installera och aktivera plugin Autoptimera. Mer information finns i vår steg för steg-guide för hur du installerar ett WordPress-plugin.

Vid aktivering måste du besöka Inställningar »Autoptimera för att konfigurera insticksinställningarna.

Automatisera inställningarna

Du kan börja med att kryssa i rutan bredvid JavaScript-alternativ och CSS-alternativ och sedan klicka på knappen Spara ändringar.

Nu kan du testa din webbplats med hjälp av PageSpeed-verktyget. Om det fortfarande finns renderingsblockerande skript måste du komma tillbaka till inställningssidan för insticksprogrammet och klicka på ‘Visa avancerade inställningar’ överst.

Avancerade JavaScript-alternativ

Här kan du tillåta plugin att inkludera inline JS och ta bort skript som som standard är uteslutna som seal.js eller jquery.js.

Bläddra sedan ner till CSS-alternativet och låt plugin samla inline CSS.

Klicka på knappen “Spara ändringar och töm cache” för att spara dina ändringar och töm plugin-cache.

När du är klar går du vidare och kontrollerar din webbplats igen med PageSpeed-verktyget.

Se till att du testar din webbplats noggrant för att se att ingenting är trasigt genom att optimera dina JavaScripts eller CSS.

Hur fungerar det?

Autoptimera aggregat för alla inställda JavaScript och CSS. Efter det skapar det minifierade CSS- och JavaScripts-filer och serverar cachade kopior till din webbplats som async eller uppskjuten.

Detta gör att du kan fixa renderingsblockerande skript och stilar. Kom dock ihåg att det också kan påverka prestandan eller utseendet på din webbplats.

2. Fixa Render Blocking JavaScript med W3 Total Cache

Den här metoden kräver lite mer arbete och rekommenderas för användare som redan använder W3 Total Cache-plugin på sin webbplats.

Först måste du installera och aktivera W3 Total Cache-plugin. Om du behöver hjälp, se vår guide om hur du installerar och konfigurerar W3 Total Cache för nybörjare.

Därefter måste du besöka Prestanda »Allmänna inställningar och bläddra ner till avsnittet Minifiera.

W3 Total Cache aktivera minifiera

Först måste du markera ‘Aktivera’ bredvid Minify-alternativet och sedan välja ‘Manuell’ för att minifisera läget.

Klicka på knappen Spara alla inställningar för att lagra dina inställningar.

Därefter måste du lägga till skript och CSS som du vill minifiera.

Du kan få webbadresserna till alla skript och formatmall som blockeras från Google PageSpeed ​​Insights-verktyget.

Under förslagen där det står: ‘Eliminera renderingsblockerande JavaScript och CSS i innehåll ovanför mitten’ klickar du på ‘Visa hur du fixar’. Det visar dig listan med skript och stilark.

Hämta JavaScript och stilark-webbadresser från Google PageSpeed-verktyget

Ta musen över till ett skript så kommer den att visa hela URL: n. Du kan välja denna URL och sedan använda tangentbordets CTRL + C (Kommando + C på Mac) för att kopiera URL: n.

Gå nu över till ditt WordPress admin-område och gå till Prestanda »Minify sida.

Först måste du lägga till JavaScript-filer som du vill minifieras. Rulla ner till JS-avsnittet och ställ sedan in inbäddningstypen under ‘Operationer i områden’ till ‘Icke-blockerande async’ för avsnittet.

Lägg till skript för att förminska

Därefter måste du klicka på knappen “Lägg till skript” och sedan börja lägga till skriptadresser som du kopierade från Google PageSpeed-verktyget.

När du är klar, bläddra ner till CSS-avsnittet och klicka sedan på knappen “Lägg till en stilark”. Börja nu lägga till typsidans webbadresser som du kopierade från Google PageSpeed-verktyget.

Lägg till mallar för att förminska

Klicka nu på knappen “Spara inställningar och rensa cache” för att lagra dina inställningar.

Besök Google PageSpeed-verktyget och testa din webbplats igen.

Se till att du också testar din webbplats noggrant för att se att allt fungerar bra.

Felsökning

Beroende på hur plugins och dina WordPress-teman använder JavaScript och CSS, kan det vara ganska utmanande att helt fixa alla renderingsblockerande JavaScript- och CSS-problem..

Medan ovanstående verktyg kan hjälpa kan dina plugins behöva vissa skript på en annan prioritetsnivå för att fungera korrekt. I så fall kan ovanstående lösningar bryta dina plugins eller de kan uppträda oväntat.

Google kan fortfarande visa dig vissa problem som att optimera CSS-leverans för innehållet ovanför vikningen. Autoptimera låter dig fixa det genom att manuellt lägga till inline CSS som krävs för att visa det ovanstående vikningsområdet för ditt tema.

Det kan emellertid vara ganska svårt att ta reda på vilken CSS-kod du behöver för att visa ovanför vikningsinnehållet.

Det är allt, vi hoppas att den här artikeln hjälpte dig att lära dig hur du fixar renderingsblockerande JavaScript och CSS i WordPress. Du kanske också vill se vår ultimata guide öka WordPress-hastighet och prestanda för nybörjare.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map