Så här minskar du CSS / JavaScript-filer i WordPress

Så här minskar du CSS / JavaScript-filer i WordPress / WordPress-plugins

Vill du minska filer på din WordPress-webbplats? Minifiera dina WordPress CSS och Javascript-filer kan göra att de laddas snabbare och snabbare på din WordPress-webbplats. I den här guiden kommer vi att visa dig hur man minskar CSS / Javascript-filer i WordPress för att förbättra prestanda och hastighet.

Vad är Minify och när behöver du det?

Termen "Minifiera" används för att beskriva en metod som gör att din webbplatsfilstorlek blir mindre. Det uppnår detta mål genom att ta bort vita mellanslag, linjer och onödiga tecken från källkoden.

Vanligtvis rekommenderas det att endast användas för filer som skickas till användarens webbläsare. Detta inkluderar HTML, CSS och JavaScript-filer. Du kan också begränsa PHP-filer, men PHP är ett programmeringsspråk för serverprogram och minifiera det kommer inte att förbättra sidladdningshastigheten för dina användare.

Den uppenbara fördelen med att minimera filer är förbättrad WordPress-hastighet och prestanda. Kompakta filer är snabbare att ladda och förbättra din webbplats hastighet.

Vissa experter tror emellertid att prestandaförbättringen är mycket liten för de flesta webbplatser och inte värt besväret. Minifiering minskar bara några kilobytes data på de flesta WordPress-sidor. Du kan minska tiden för pageladdning genom att helt enkelt optimera bilder för webben.

Här är ett exempel på vanlig CSS-kod:

kropp
margin: 20px;
padding: 20px;
color: # 333333;
Bakgrund: # f7f7f7;

h1
font-size: 32px;
färgen # 222222;
margin-bottom: 10px;

Efter minifiering av koden kommer det att se ut så här:

kropp margin: 20px; padding: 20px; color: # 333; bakgrund: # f7f7f7 h1 font-size: 32px; margin-bottom: 10px

Om du försöker uppnå 100/100 poäng i Google Pagespeed eller GTMetrix-verktyget, förbättrar minifiering av CSS och JavaScript avsevärt din poäng.

Med det sagt, låt oss ta en titt på hur du enkelt kan minska CSS / JavaScript på din WordPress-webbplats.

Minifiera CSS / Javascript i WordPress

Det första du behöver göra är att installera och aktivera plugin för bättre WordPress Minify. För mer information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.

Vid aktivering kommer plugin att lägga till ett nytt menyalternativ med beteckningen "BWP Minify" till din WordPress-administratörsfält. Genom att klicka på det tar du dig till plugins inställningssida.

På inställningssidan måste du kontrollera de två första alternativen för att automatiskt kunna begränsa JavaScript och CSS-filer på din WordPress-webbplats.

Du kan nu klicka på knappen Spara ändringar för att spara dina inställningar.

Det finns många andra avancerade alternativ på den här sidan. Standardinställningarna fungerar för de flesta webbplatser, men du kan granska och ändra dessa alternativ från fall till fall.

Därefter måste du gå över till din webbplats. Högerklicka var som helst och välj sedan "Visa sidkälla" från webbläsarmenyn.

Du kommer nu att se HTML-källkoden som genereras av din WordPress-webbplats. Om du tittar noga märker du att det här pluginet laddar CSS / JavaScript-filer från plugins egen mapp i stället för dina WordPress-teman och plugins.

Dessa är de minifierade versionerna av dina ursprungliga CSS- och JavaScript-filer. Bättre WordPress Minify plugin kommer att hålla dem cachade och betjäna de minifierade versionerna till webbläsare.

Det här är allt, vi hoppas att den här artikeln hjälpte dig att lära dig att minska ditt WordPress-webbplats. Du kanske också vill se vår ultimata guide för hur du snabbar upp WordPress för nybörjare.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.