Förminska / kombinera WordPress CSS + Javascript-filer = snabbare webbplats

WordPress minifierar JS- och CSS-filer

En av de bästa sakerna vi lärde oss när vi forskade efter vår artikel om hur man får Joomlas webbplats att laddas snabbt (1.29 sekunder för att vara exakt), vi upptäckte en fantastisk pärla av ett verktyg. 

Som många gör när de strävar efter att göra en webbplats laddad snabbare hänvisar de till Googles PageSpeed-rekommendationeroch med rätta, för om Google gör ett uttalande är det vanligtvis värt att lyssna på. Ibland är det dock ganska rörigt att göra alla optimeringar, och du kanske inte har färdigheterna att utföra dessa ändringar.

Innehåll[Show]

Som du kanske vet finns det en massa optimeringar när du gör din WordPress-webbplats snabbare. En av dem är att veta hur man utnyttjar webbläsarens cachning korrekt i WordPress, något som CollectiveRay har en bra artikel om här.  

Men det räcker inte alls om CSS- och Javascript-filerna är ganska stora. Det är vad minifiering handlar om. 

Vad är minifiering? (och hur det kan gynna din webbplats)

Minifiering är funktionen att ta en kodning och ta bort alla tecken från den (som mellanslag, radbrytningar, flikar och annat) som inte förmedlar någon mening, förutom att göra texten mer läsbar. Förminskade WordPress-filer utförs på samma sätt som den ursprungliga koden, med den enda skillnaden att de tar upp lite less utrymme eftersom de skär ut extra information. Av denna anledning blir filen mindre att ladda ner, vilket resulterar i en snabbare webbplats totalt sett.

Minifiering är särskilt viktig och användbar för skript (som Javascript-filer), CSS-formatmallar och andra liknande webbplatskomponenter.

Läs mer: Hur man anställer (STOR) Javascript-utvecklare - Topp 5-webbplatser, klicka här - https://www.collectiveray.com/hire-javascript-developer

Den främsta anledningen till detta och fördelarna med din webbplats är:

  • Minskar laddningstiderna och gör din webbplats snabbare totalt sett. Med tanke på att de flesta webbplatser använder flera skript och stilarkfiler, vilket resulterar i MYCKET extra utrymme. Även om du kanske tror att borttagning av mellanslag inte kommer att resultera i många förändringar, kan den fullständiga minifieringsprocessen för alla filer i en WordPress-installation ge en betydande fördel.
  • Skymma koden från tillfälliga läsare. Medan den resulterande minifieringen inte döljer webbplatsens kod (dvs. det här skiljer sig från kodfördunkning), men det gör det ganska svårare för avslappnade användare att förstå, om det är något som berör dig. 

Medan minifiering av din kod är det osannolikt att det blir en stor skillnad mot din webbplats laddningstider, sett som en del av en komplett optimeringsstrategi, skulle det vara en av de många sakerna du bör göra. Det kan minska sidens laddningstider med ett par procentenheter, vilket gör det till en bra taktik att implementera icke -deless.

Vad händer under minifieringsprocessen?

I huvudsak går minifieringsprocessen igenom sådana textfiler och tar bort allt som bara är avsett att användas som livsmedel, eftersom maskinen som analyserar filen trots allt inte är läsbar för människor. WordPress minify-processen tar bort alla saker som extra vitt utrymme (mellanslag, nya rader, flikar), kommentarer eller annan text som ökar filens storlek utan att minska "semantiken" för filen för webbläsaren. Meningen finns kvar, filerna är bara mindre.

Så här ser till exempel en vanlig CSS-fil ut:

kropp {
marginal: 30px;
padding: 30px;
färg: #FFFFFF;
bakgrund: # f7f7f7;
}
h1 {
font-size: 12px;
färg # 222222;
margin-bottom: 5px;
}

Medan den minifierade versionen av den här koden skulle se ut så här:

body{margin:30px;padding:30px;color:#fff;background:#f7f7f7}h1{font-size:12px}

Du kan se att textinformation är exakt densamma, den är bara borttagen från saker som finns för läsbarhetsändamål. Samma koncept gäller för Javascript-filer.

Slutresultatet av att använda plugins eller medel för att minifiera Javascript WordPress skulle vara att HTML-utdata, tillsammans med CSS-filer och JS-filer som används av din webbplats och dess plugins skulle se ut så här:

minifierad kod

Även om detta kan se ut som en massa skräp, är faktiskt all betydelse kvar - det har just "minifierats" för att ta bort alla onödiga saker som är uppblåsta i sin storlek.

Det finns många plugins som kan hjälpa dig att uppnå denna process, vilket kommer att nämnas nedan.

Förminska Javascript WordPress

Processen för att minifiera Javascript WordPress är ganska enkel. Du behöver helt enkelt installera ett av plugin-programmen nedan. Du kanske också vill notera att kärnan i WordPress Javascript-filer redan är minifierade som standard.

Om du tittar på källkoden på din WordPress-webbplats ser du faktiskt .min.js-tillägget, som visar att de faktiska filerna redan är minifierade.

core minify javascript wordpress-filer

Detta är inte nödvändigtvis fallet för plugins och teman från tredje part.

Du kanske också vill ta det extra steget att ta bort eventuella extra plugins och generera skript som du kanske inte behöver.

Om du är helt fixerad över prestanda kan du också välja att skapa versioner av Javascript-filerna som ENDAST innehåller skriptet som används av din webbplats. Se som standard, de flesta skriptfiler har extra kod som ingår "bara om det behövs".

Du kanske vill lära dig mer om hur man gör det här.

Förminska CSS WordPress

Återigen är processen med Minify CSS WordPress enkel. Du kan bara installera ett plugin och detta gör minifieringen av dina CSS-filer automatiskt. Medan de flesta av WordPress-kärnfilerna har en förminskad version av CSS-filerna, gäller detta inte nödvändigtvis alla plugins och teman.

Återigen rekommenderar vi att du utför en CSS-kodtäckningsövning för att ta bort överflödig CSS-kod som helt enkelt är dödvikt.

Vi kommer att nämna ett antal plugins som förminskar CSS WordPress i nästa avsnitt nedan. 

5 bästa WordPress Minify-plugins

Vi diskuterar både generiska produkter som används i allmänhet för att göra din webbplats snabbare genom minifiering och specifika plugins vars enda funktion är minifieringsprocessen.

1. WP Rocket

Detta är vårt favoritplugin överlägset.

Anledningen är enkel, det här är den överlägset bästa produkten som kan utföra flera hastighetsoptimeringsuppgifter, på ett riktigt enkelt sätt, men med ett utmärkt resultat av att göra din webbplats snabbare, inklusive att utföra en minifiering av CSS- och Javascript WordPress-filer.

Verkligen och verkligen är det bara en av de saker som detta plugin gör, men när du har installerat det kommer du att upptäcka att du inte behöver göra något annat.

Som du kan se nedan är denna förminskning ett av de grundläggande alternativen för optimering. Med det ser du att det finns sammanfogning, det här är en sekundär optimeringsprocess som skapar en fil av alla CSS- och JS-filer (eftersom det också gör det snabbare att ladda ner filerna)

minifiera javascript css wordpress plugin

Plugin är inte gratis, men priset är mycket billigt till bara $ 49. Med tanke på den tid det sparar dig och resultatet av att din webbplats laddas snabbare, bokstavligen på några minuter, rekommenderar vi starkt att du väljer detta.

WP Rocket vittnesmål

Vi installerar detta plugin på varje WordPress-webbplats som vi ställer in, helt enkelt för att det sparar oss så mycket optimeringstid.

Klicka här för det lägsta priset på WP Rocket

2. JCH Optimera

 

Här är ett litet knep för att hjälpa dig riktigt mycket - använd JCH Optimize - detta är ett verktyg som fungerar på flera plattformar som WordPress, Joomla, Drupal och Magento.

Det fantastiska med JCH Optimize är att det implementerar ett stort antal Google Page Speed och andra rekommendationer för att få din webbplats att ladda så snabbt som möjligt.

Det är fantastiskt eftersom det behöver nästan noll konfiguration och ingripande från en användare.

Om du letar efter en snabb värdtjänst, ta en titt på vår värd, vi har granskat dem helt här: https://www.collectiveray.com/inmotion-hosting-review

JCH optimera

Och du behöver inte röra dig med någon kod, allt detta görs av pluginet - det bevarar all din ursprungliga kodning, så du kommer inte att bryta någonting genom att röra. Vanligtvis gör det också de optimeringar som vanligtvis är svårast att utföra. För att nämna några är det de som görs bra

  • Kombinerar CSS-filer från alla dina mallar, moduler och plugins till en enda fil, vilket minskar antalet förfrågningar som skickas till din webbplats
  • Kombinerar Javascript-filer, som vanligtvis är väldigt svåra att kombinera utan att bryta webbplatsen
  • Zipar CSS och Javascript så att de blir mindre och överföringstiden minskas
  • Förminskar Javascript och CSS för att göra det mer kompakt och minska dess storlek ytterligare (minskar extra utrymme, kommentarer, etc.)
  • Lägger till en DEFER-tagg, så att din sida laddas först och kör Javascript efter att sidan har laddats, vilket gör webbplatsen snabbare att ladda. Med tanke på att denna specifika implementering är avgörande för en snabb webbplats, har vi täckt det här mycket: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
  • Skapar IMAGE Sprites - detta minskar också antalet förfrågningar som skickas till din webbplats med en mycket stor mängd och är en av de svåraste optimeringarna att uppnå manuellt

Det låter dig också justera några avancerade alternativ som att exkludera vissa filer för att säkerställa att om någon förlängning inte fungerar efter att ha kört den genom JCH Optimize, så fungerar det ändå.

Du har nu möjlighet PRO-version, som är tillgänglig för en vansinnig $ 29, ger dig tillgång till flera andra optimeringsalternativ som att inkludera inline CSS och Javascript och ladda Javascript asynkront för att inte blockera laddningen av webbplatsen.

Ta mitt ord för det, installera plugin, aktivera det och kolla in dina resultat före och efter. Om du inte får en förbättring med en hel del, kom tillbaka hit och klaga, men jag är ganska säker på att du inte kommer tillbaka :)

Klicka här för att ladda ner JCH Optimize

3. W3 Total Cache

Det här är ett annat plugin som du ser är en generisk mjukvara som gör en massa saker som är relaterade till att göra WordPress snabb, inklusive minifiering av CSS-, JS- och HTML-filer.

Även om du kommer att upptäcka att detta nämns mycket ofta när det gäller sådana plugins, bör det noteras att den här produkten absolut inte är en bra idé för människor som inte är tekniska.

Inställningar för sidcache i W3 Total cache

Det har varit känt att skapa betydande problem, med några fel kvar även efter att programvaran avinstallerats och raderats från webbplatsen.

Vi själva kl CollectiveRay har försökt använda denna plugin flera gånger, men vid denna tidpunkt och i nuvarande tillstånd rekommenderar vi inte längre att detta används för minifieringsändamål eller för att göra webbplatser snabbare, unless du vet exakt vad du gör.

4. WP Super Minify

Detta plugin använder Förminska PHP Framework och använder den kombinerar, förminskar och cachar inbyggda JavaScript- och CSS-filer på begäran för att påskynda sidladdningar.

Genom att aktivera detta plugin, källan till din HTML, inline JavaScript och CSS är nu borttagen från extra saker, vilket resulterar i att deras storlek blir mindre.

Vad som skiljer sig från andra plugins som nämns här är att detta plugin ENDAST utför minifieringsprocessen och inga andra optimeringar, vilket är ett utmärkt val för dem som bara vill utföra den här funktionen och inget annat av någon anledning.

5. Snabb hastighetsminifiering 

Även om det finns många andra WordPress minify-plugins som vi kan rekommendera, kommer det att vara den sista som vi nämner här. 

Plugin för snabb hastighet kombinerar alla CSS- och JavaScript-filer så att webbservern måste hantera färre förfrågningar. Samtidigt minifierar det också filerna och skapar cachade kopior för snabbare laddningstider.

Detta plugin möjliggör automatiskt alternativen för att minifiera din HTML, JavaScript och CSS, men du Kan inaktivera en eller flera av dem manuellt genom att gå in i Inställningar → Fast Velocity Minify fliken.

Du kan välja att utesluta specifika filer från att minifieras om någon av dina plugins går sönder efter att du har aktiverat detta.

 

Snabb hastighetsminifiering

Inslag Up 

Även om minifieringsprocessen inte är banbrytande, bör den implementeras som en av flera uppgifter för att göra din WordPress snabbare och vi rekommenderar starkt att du implementerar en av de produkter som nämns ovan.

Ladda ner listan över 101 WordPress-trick som alla bloggare borde veta

101 WordPress-tricks

Klicka här för att ladda ner nu

 

Om författaren
David Attard
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...