När det gäller webbprestanda är en av de kritiska faktorerna att eliminera renderingsblockerande resurser. Renderingsblockerande resurser fördröjer renderingen av en sida och kan inkludera saker som JavaScript- och CSS-filer. Dessa resurser måste läsas in innan webbläsaren kan börja rendera sidan. Detta inkluderar externa CSS- och JavaScript-filer och allt annat som kan fördröja webbläsarens visning i början.
Medan vissa renderingsblockerande resurser är nödvändiga, till exempel CSS-filer som säkerställer att din sida ser korrekt ut, kan andra optimeras eller elimineras. För att maximera din webbplats laddningshastighet är det viktigt att identifiera och minimera eller eliminera renderingsblockerande resurser där det är möjligt. Du kanske har lagt märke till denna rekommendation när du testade din WordPress-webbplats med PageSpeed-verktyget .
Hur identifierar man en renderingsblockerande resurs?
När du försöker förbättra din webbplats prestanda kan du stöta på termen "render-blocking resources". Detta hänvisar till alla resurser som måste laddas innan webbläsaren kan börja rendera sidan. Vanligtvis inkluderar detta externa CSS- och JavaScript-filer.
Du kan använda Google Chromes utvecklarverktyg för att identifiera en renderingsblockerande resurs . Ladda din webbplats i Chrome och öppna sedan utvecklarverktygen. Klicka på fliken Täckning och se till att alternativet "Inaktivera cache" är markerat. Detta säkerställer att du ser den mest uppdaterade versionen av din webbplats.
Ladda nu om din webbplats. Utvecklarverktygen visar en lista över alla resurser som laddats medan din sida renderas. Leta efter resurser som har en röd linje bredvid sig. Dessa är renderingsblockerande resurser.
3 sätt att eliminera en renderingsblockerande resurs i WordPress?
Det finns några olika sätt att göra detta i WordPress.
Metod 1:
En är att infoga kritisk CSS , vilket innebär att bädda in CSS-koden direkt i HTML-filen istället för att anropa ett externt stilark. Detta kan vara effektivt för små webbplatser med bara ett fåtal sidor men är inte praktiskt för större webbplatser. När du har identifierat de renderingsblockerande resurserna måste du ta bort eller infoga dem. Inlining innebär att bädda in resursen direkt i koden, så att den inte behöver laddas separat. Detta kan göras med JavaScript- och CSS-filer. Plugins som Flyingpress, WP Rocket, Swift Performance eller LiteSpeed-cache kan hjälpa dig att automatisera detta.
Metod 2:
Ett annat alternativ är att läsa in icke-kritiska resurser efter den första sidans inläsning. Detta kan göras med hjälp av asynkrona inläsningstekniker , till exempel att läsa in JavaScript-filer efter att dokumentet har parsats eller med hjälp av defer-attribut.
Metod 3:
Slutligen kan du också försöka minska antalet resurser som behövs på varje sida. Detta kan innebära att kombinera flera CSS- eller JavaScript-filer till en fil eller använda mindre bilder som laddas snabbare. Genom att minska antalet renderingsblockerande resurser kan du avsevärt förbättra din webbplats laddningshastighet och ge en bättre användarupplevelse för dina besökare. Om du behöver mer tid för att bli bekväm med att arbeta med kod kan vissa plugins hjälpa till att automatisera denna process, till exempel Autoptimize, WPRocket etc.
I vissa fall kan renderingsblockerande resurser vara nödvändiga för att din webbplats ska fungera korrekt. I dessa fall måste du hitta ett sätt att optimera dem så att de laddas snabbare.
Vira in
Om du följde råden ovan borde du nu ha eliminerat de flesta, om inte alla, renderingsblockerande resurser på din webbplats. Om du fortfarande behöver hjälp kan du kolla in vår professionella WordPress-hastighetsoptimeringstjänst . Vi hjälper dig att förbättra din webbplats prestanda och hastighet, vilket är avgörande för att skapa en högkvalitativ och användarvänlig webbplats.
Kom ihåg att andra faktorer kan påverka din webbplats prestanda, såsom serverns svarstid, filstorlekar och kodkvalitet. Att eliminera renderingsblockerande resurser är dock ett utmärkt sätt att förbättra din webbplats hastighet och prestanda samt Core Web Vitals -betyg.
