Så här optimerar du enkelt WordPress CSS Delivery (2 metoder)

Vi letar alltid efter de bästa sätten att förbättra prestandan på våra webbplatser. Vi har upptäckt att optimering av leveransen av våra WordPress CSS-filer definitivt förbättrar våra webbplatsers hastighet och prestanda.

CSS-filer är responsiva för den visuella formateringen och stilen på din webbplats, men om de inte levereras effektivt kan de sakta ner sidans laddningstider. Detta kommer att påverka både användarnas upplevelse och sökmotorernas ranking negativt.

I den här artikeln kommer vi att visa dig två enkla men effektiva metoder för att optimera din WordPress CSS-leverans för att säkerställa en snabbare och smidigare upplevelse för dina besökare.

Hur WordPress CSS Delivery påverkar WordPress prestanda

CSS-filer används för att definiera det visuella appearance på din WordPress website. Ditt WordPress theme innehåller en CSS stylesheet-fil, och vissa av dina tillägg kan också använda CSS stylesheets.

CSS är nödvändigt för moderna webbplatser, men det är möjligt att CSS-filer kan sakta ner din sites hastighet och prestanda beroende på hur de är konfigurerade.

Även en liten fördröjning i hastigheten på din website skapar en dålig användarupplevelse och kan påverka din search ranking och konvertering, vilket resulterar i mindre trafik och försäljning.

Ett sätt som CSS-filer kan göra din website långsammare är om de måste hämtas innan sidan kan visas. Det innebär att dina besökare kommer att se en tom page tills CSS-filen har laddats. Detta är känt som render-blocking CSS.

En annan vanlig anledning till att CSS-filer kan göra din website långsammare är när de innehåller mer kod än vad som behövs för att displayed den synliga delen av den aktuella page. Den extra oanvända CSS-koden innebär att deras laddningstid blir längre.

Den goda nyheten är att du kan förbättra prestandan på din WordPress site genom att optimera hur CSS-koden utförs.

Det görs genom att identifiera den minsta CSS-kod som behövs för att visa den första delen av den aktuella webbsidan. Detta är känt som ”critical CSS”.

Denna critical-kod addas sedan inline till sidans HTML istället för i separata stylesheets, så att koden kan renderas utan att CSS-filen behöver hämtas först.

Resten av CSS kan sedan hämtas efter att dina besökare kan se innehållet på sidan. Detta är känt som ”uppskjuten hämning”.

Med detta sagt, låt oss ta en titt på två metoder för att optimera WordPress CSS delivery, så kan du välja den som fungerar bäst för dig:

Metod 1: Optimera WordPress CSS Delivery med WP Rocket

WP Rocket är det bästa WordPress caching plugin på marknaden. Det erbjuder det enklaste sättet att optimera din WordPress CSS delivery. Faktum är att det är lika enkelt som att kontrollera en box.

WP Rocket är ett premium plugin, men det bästa är att alla funktioner ingår i deras lägsta plan.

Det första du behöver göra är att installera och aktivera pluginet WP Rocket. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

När du är aktiverad måste du navigera till Settings ” WP Rocket page och växla till ”File Optimization” tabs.

Därefter måste du rulla ner till CSS-filer section.

När du är där måste du kontrollera boxen bredvid alternativet ”Optimera CSS delivery”.

Den här utvalda funktionen identifierar på ett intelligent sätt den kritiska CSS som behövs för att formatera den del av sidan som dina besökare ser först. Dina pages kommer att laddas snabbare och resten av CSS:en kommer att hämtas efter att dina visitors kan se innehållet.

Allt du behöver göra nu är att klicka på knappen ”Save Changes” och vänta på att WP Rocket ska generera den nödvändiga CSS-filen för alla dina poster och pages.

Det kommer också att automatiskt clear cachen för din webbplats så att dina besökare kommer att se den new optimerade versionen av din site istället för en ooptimerad version som är lagrad i cachen.

Det finns många andra sätt som WP Rocket kan hjälpa dig att förbättra din websites prestanda. Om du vill veta mer kan du läsa vår guide om hur du installerar och konfigurerar WP Rocket på rätt sätt i WordPress.

Metod 2: Optimera WordPress CSS Delivery med Autoptimize

Autoptimize är ett gratis plugin som är utformat för att förbättra leveransen av din websites CSS- och JavaScript-filer.

Autoptimize är ett gratis plugin, men det har inte lika många funktioner som WP Rocket och tar mer tid att installera.

Till exempel kan den inte automatiskt identifiera critical CSS som WP Rocket gillar. Istället kräver Autoptimize hjälp av en premium-tjänst från tredje part, vilket är en extra kostnad och kräver extra tid för att konfigurera.

Det kan dock vara ett bra alternativ om du har en stram budget och inte behöver alla de andra funktionerna i WP Rocket för att påskynda din webbplats.

Det första du behöver göra är att installera och aktivera pluginet Autoptimize. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Vid aktivering måste du besöka Settings ” Autoptimize page för att konfigurera plugin-inställningarna. Väl där måste du rulla ner till CSS Options section och kontrollera boxen ”Optimize CSS Code” högst upp.

När du har gjort det måste du se till att alternativet ”Aggregate CSS-files” är avmarkerat och sedan kontrollera ”Eliminate render-blocking CSS”.

Du kan nu klicka på knappen ”Save Changes and Empty Cache” för att lagra dina inställningar.

Men pluginet kommer inte att fungera korrekt förrän du registrerar dig för ett Critical CSS account. Detta är en premium prenumerationstjänst som kommer att ge Autoptimize den kritiska CSS-kod som den behöver för att optimera din WordPress CSS delivery.

För att göra det, navigera till Critical CSS tabs i Autoptimize’s settings. Här hittar du den information du behöver för att registrera dig hos Critical CSS. Du kan komma igång genom att clicka på registreringslänken i tredje stycket.

När du har fått din Critical CSS API key rullar du ner till API Key section så att du kan klistra in den i textboxen ”Your API key”.

Efter det, se till att du clickar på knappen ”Save Changes”.

Autoptimize har nu all information den behöver för att add to den critical CSS inline och skjuta upp hämtar stylesheets tills efter att sidan har renderats. Som ett resultat kommer din website att ha en snabbare hämtar hastighet.

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du optimerar WordPress CSS delivery. Du kanske också vill se vår ultimata guide om hur mycket det verkligen kostar att bygga en WordPress-webbplats och vårt expertval av de bäst hanterade webbhotellen för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.