Hur man eliminerar renderingsblockerande JavaScript och CSS i innehåll ovanför mitten

När du bygger en webbplats finns det några aspekter som är avgörande för att erbjuda användarna en smidig upplevelse. En av dessa aspekter representeras av laddningstid. En webbplats som laddas snabbt uppskattas alltid av besökare som vill hitta det de letar efter så snabbt som möjligt. För att få en snabb laddningstid bör du lära dig hur du eliminerar renderingsblockerande JavaScript och CSS i innehåll ovanför mitten.

Hastigheten på en webbplats kan påverkas av en mängd olika faktorer, men de faktorer som diskuteras i den här artikeln har störst inverkan. Den perfekta webbplatsekvationen kan vara svår att lösa, eftersom vissa element inte beror på dina handlingar. De dikteras av varje situation i synnerhet (t.ex. geografisk plats, internethastighet). Du kan dock optimera CSS-leveransen genom att modifiera de element som du kan kontrollera fullt ut. Läs mer om detta ämne nedan i den här artikeln skapad av vårt team på wpDataTables.

Definiera renderingsblockerande och ovanför mitten

Renderblockerande

Render-blocking hänvisar till de element som förhindrar en webbplatss avgörande innehåll (t.ex. en artikels huvudtext) från att laddas innan hela sidan laddas. Ett bra exempel på ett sådant element representeras av ytterligare JavaScript eller CSS som läggs till på en webbplats. Den här koden kan hindra användaren från att se något i sin webbläsare tills koden har körts helt, och därmed bli renderingsblockerande.

Innehåll ovanför mitten

När en besökare går in på en webbplats möts de av en viss del av sajten – alltså den översta delen. För att se resten måste användaren scrolla ner eller utföra andra åtgärder på webbplatsen. Innehållet som besökarna får se direkt efter att de kommit åt det kallas för innehåll ovanför mitten.

Om renderingsblockering i JavaScript och CSS

Webbläsare läser HTML för att visa en webbplats. Detta är en process som har flera steg. Om webbläsaren stöter på element som refererar till ett skript/stilmall krävs extra steg för att läsa koden. Webbläsaren kommer att behöva begära en fil, vänta på ett svar, ladda ner filen från servern och sedan köra filen.

Naturligtvis kan dessa ytterligare steg sakta ner laddningstiden. Tänk på att vissa WordPress-teman involverar mer än bara en CSS- eller en JavaScript-fil. Laddningstiden kan saktas ner dramatiskt på grund av dessa filer. Detta är anledningen till att du kommer att behöva eliminera renderingsblockerande resurser från din webbplats. Oftast är dessa inte kritiska filer, så du kan skjuta upp analysen av JavaScript för att minska blockeringen av sidrendering och på så sätt förbättra hastigheten på din webbplats.

Identifiera renderingsblockerande JavaScript och CSS

För att eliminera renderingsblockerande JavaScript och CSS i innehåll ovanför mitten måste du identifiera vilka dessa element är. Ett av de enklaste sätten att identifiera dem är att öppna din webbplats med ett verktyg för sidhastighet som talar om för dig vilka problem den möter vid laddning. Googles PageSpeed ​​Insights är ett sådant verktyg som borde hjälpa dig att hitta de filer som blockerar rendering på din webbplats. När du har räknat ut vilka filerna är kan du fortsätta att ta bort eller ordna om det renderingsblockerande JavaScriptet.

Hur eliminerar jag renderingsblockerande JavaScript och CSS i innehåll ovanför mitten?

Du har två alternativ i den här situationen: lär dig hur du själv eliminerar renderingsblockerande JavaScript och CSS i innehåll ovanför mitten eller använd en plugin för att göra det. Om du är tekniskt kunnig och är villig att lära dig hur renderingsblockerande resurser elimineras, använd någon av dessa metoder:

Rensa JavaScript från den kritiska renderingsvägen

Den kritiska renderingsvägen bör endast innehålla de element som är väsentliga för webbplatsen. Du kan flytta onödiga JavaScript-resurser från den här sökvägen. Detta görs genom att lägga till vissa attribut där JavaScript krävs. Attributen är:

• Async: det här attributet talar om för webbläsaren att den ska börja ladda ner resurserna omedelbart för att undvika långsamma laddningstider. När resurserna är tillgängliga pausas HTML-tolkningen tillfälligt och resurserna laddas.
• Defer:  det här attributet talar om för webbläsaren att skjuta upp nedladdningen av resurserna tills HTML-parsningsprocessen är klar. När det är klart kommer webbläsaren att ladda ner och rendera skripten i den ordning de visas på webbplatsen.

Kontrollera hur CSS-resurser levereras och optimera dem

För att eliminera renderingsblockerande resurser i CSS måste du:

• Identifiera resurserna som krävs för innehåll ovanför mitten och infoga CSS-stilarna med HTML.
• Använd ett annat attribut för att identifiera de CSS-resurser som är absolut nödvändiga (mediaattribut).
• Ladda CSS-resurserna asynkront (med attributen som diskuterats ovan).

En lista över plugins som kan hjälpa dig att eliminera renderingsblockerande JavaScript enklare

Autooptimera

För att eliminera renderingsblockerande JavaScript och CSS i innehåll ovanför mitten från WordPress kan du använda plugins som Autoptimize. Detta plugin gör laddningstiden för din WordPress-webbplats bättre genom att kombinera kodbitar, göra kodblocken mindre genom att ta bort onödiga tecken (komprimering) och så vidare. Genom att göra dessa ändringar blir koden lättare att läsa och filstorleken minskas, vilket gör att laddningstiden försvinner med några hundra millisekunder eller till och med sekunder.

För att installera detta plugin behöver du bara komma åt din WordPress-instrumentpanel och navigera till fliken Plugins. Välj sedan alternativet Lägg till ny som finns på den övre sidan av fönstret. Efter det kan du leta efter Autoptimize eller andra plugins i sökfältet. Klicka på Installera nu, aktivera den för den webbplats du vill ha, och du är bra att gå.

W3 Total Cache

Autoptimize har många andra alternativ som du kan använda för att ta bort renderingsblockerande resurser från WordPress. W3 Total Cache-plugin är en av de bättre. Det som är intressant med detta plugin är att det innehåller flera extra funktioner för att optimera WordPress. Caching representerar processen där vissa filer lagras på en användares dator för att göra hans upplevelse av webbplatsen bättre. Efterföljande besök blir lättare och laddningstiderna kommer att förbättras.

Speed ​​Booster Pack

Ett annat alternativ är Speed ​​Booster Pack. När du har installerat den kan du komma åt inställningarna och välja de alternativ som passar dina behov. Insticksprogrammet erbjuder några konfigurationsalternativ som att flytta skript till sidfoten eller skjuta upp JavaScript-filer från att analysera. Genom att välja dessa kan du ta bort renderingsblockerande JavaScript och CSS i innehåll ovanför mitten med bara ett par klick.

JCH Optimera

JCH Optimize är ett plugin som kombinerar JavaScript och CSS samtidigt som filerna minskas i storlek. Den har många andra funktioner som kan vara användbara i det långa loppet, men den är utmärkt för att eliminera renderingsblockerande resurser. Navigera genom dess inställningar och aktivera de funktioner som verkar relevanta för din webbplats.

Även om det kräver lite uppmärksamhet, kommer att lösa det här problemet ha stor inverkan på din webbplats. När du har lärt dig hur du tar bort renderingsblockerande JavaScript och CSS i innehåll ovanför mitten, se till att utrota alla element som kan sakta ner din webbplats så snart som möjligt.

Om du tyckte om att läsa den här artikeln om hur du eliminerar renderingsblockerande JavaScript och CSS i innehåll ovanför mitten, bör du kolla in den här om hur du ändrar teckensnitt i WordPress.

Vi skrev också om några relaterade ämnen som hur man bäddar in en WordPress iframe, hur man hittar sid-ID:t i WordPress, hur man laddar ner WordPress mediebibliotek, hur man stoppar en DDoS-attack och hur man döljer sidtitel i WordPress.