Minify / Combine WordPress CSS + Javascript Files = Raskere nettsted

WordPress minifiserer JS- og CSS-filer

En av de beste tingene vi lærte mens vi forsket i artikkelen vår hvordan få Joomla-nettstedet til å lastes raskt (1.29 sekunder for å være nøyaktig), oppdaget vi en flott perle av et verktøy. 

Som mange mennesker gjør når de prøver å få et nettsted til å lastes raskere, refererer de til Google PageSpeed-anbefalingsside, og med rette, for hvis Google kommer med en uttalelse, er det vanligvis verdt å lytte til. Noen ganger er det imidlertid ganske rotete å gjøre alle optimaliseringene, og du har kanskje ikke ferdighetene til å utføre disse endringene.

innhold[Forestilling]

Som du kanskje vet, når du gjør WordPress-nettstedet ditt raskere, er det en rekke optimaliseringer du må gjøre. En av dem er å vite hvordan man kan utnytte nettleserbufring i WordPress riktig, noe som CollectiveRay har en flott artikkel om her.  

Men det er ikke nær nok hvis CSS- og Javascript-filene er ganske store. Det er det som minifisering handler om. 

Hva er minifisering? (og hvordan det kan være til nytte for nettstedet ditt)

Minifisering er funksjonen til å ta et stykke koding og fjerne tegn fra det (for eksempel mellomrom, linjeskift, faner og annet) som ikke formidler noen betydning, bortsett fra å gjøre teksten mer lesbar. Minifiserte WordPress-filer utfører på samme måte som den opprinnelige koden, med den eneste forskjellen at de tar opp litt less plass fordi de kutter ut ekstra informasjon. Av denne grunn blir filen mindre å laste ned, noe som resulterer i et raskere nettsted generelt.

Minifisering er spesielt viktig og nyttig for skript (som Javascript-filer), CSS-stilark og andre lignende nettstedkomponenter.

Les mer: Hvordan ansette (GREAT) Javascript-utviklere - Topp 5 nettsteder, klikk her - https://www.collectiveray.com/hire-javascript-developer

Hovedårsaken til dette og fordelene for nettstedet ditt er:

  • Redusere lastetider og gjøre nettstedet ditt raskere generelt. Gitt at de fleste nettsteder bruker flere skript og stilarkfiler, noe som resulterer i MYE ekstra plass. Selv om du kanskje tror at fjerning av mellomrom ikke vil resultere i mange endringer, kan den fullstendige minifiseringsprosessen for alle filene i en WordPress-installasjon øke til en betydelig fordel.
  • Skjuler koden fra tilfeldige lesere. Selv om den resulterende minifiseringen ikke skjuler koden til nettstedet ditt (dvs. dette er forskjellig fra koden forvirring), men det gjør det ganske vanskeligere for tilfeldige brukere å forstå, hvis det er noe som gjelder deg. 

Selv om minifisering av koden din er usannsynlig å gjøre en stort forskjell på nettstedets lastetider, sett på som en del av en komplett optimaliseringsstrategi, ville det være en av de mange tingene du bør gjøre. Det kan redusere sidens lastetid med et par prosentpoeng, noe som gjør det til en god taktikk å implementere ikke -detless.

Hva skjer under minify-prosessen?

I hovedsak går minify-prosessen gjennom slike tekstfiler og fjerner alt som bare er ment for konsum, for når alt kommer til alt, maskinen som analyserer filen, er ikke filen som skal leses av mennesker. WordPress minify-prosessen fjerner ting som ekstra hvite mellomrom (mellomrom, nye linjer, faner), kommentarer eller annen tekst som øker størrelsen på filen uten å redusere "semantikken" til filen for nettleseren. Betydningen er fremdeles der, filene er bare mindre.

Slik ser for eksempel en normal CSS-fil ut:

kropp {
margin: 30px;
padding: 30px;
color: #FFFFFF;
bakgrunn: # f7f7f7;
}
h1 {
font-size: 12px;
farge # 222222;
margin-bottom: 5px;
}

Mens den minifiserte versjonen av denne koden ser slik ut:

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

Du kan se at tekstinformasjonen er nøyaktig den samme, den er bare fjernet for ting som er der for lesbarhetsformål. Det samme konseptet gjelder for Javascript-filer.

Sluttresultatet av å bruke plugins eller midler til å minifisere Javascript WordPress ville være at HTML-utdata, sammen med CSS-filer og JS-filer som brukes av nettstedet ditt, og dets plugins vil se omtrent slik ut:

minifisert kode

Selv om dette kan se ut som en haug med søppel, er faktisk all betydningen der - den har nettopp blitt "minifisert" for å fjerne unødvendige ting som oppblåser størrelsen.

Det er mange plugins som kan hjelpe deg med å oppnå denne prosessen, som vil nevnes nedenfor.

Miniser Javascript WordPress

Prosessen med å minifisere Javascript WordPress er ganske grei. Du trenger bare å installere en av pluginene nedenfor. Det kan også være lurt å merke seg at de viktigste WordPress Javascript-filene allerede er minifisert som standard.

Faktisk, hvis du ser på kildekoden til WordPress-nettstedet ditt, ser du .min.js-utvidelsen, som viser at de faktiske filene allerede er minifiserte.

kjerne minify javascript wordpress-filer

Dette er ikke nødvendigvis tilfelle for tredjeparts plugins og temaer.

Det kan også være lurt å ta det ekstra trinnet for å fjerne eventuelle tilleggsprogrammer og generere skript som du kanskje ikke trenger.

Hvis du er absolutt opptatt av ytelse, kan du også velge å lage versjoner av Javascript-filene som KUN inkluderer skriptet som brukes av nettstedet ditt. Se som standard, de fleste skriptfiler har ekstra kode som er inkludert "bare i tilfelle" det er nødvendig.

Det kan være lurt å lære om hvordan du gjør dette her.

Miniser CSS WordPress

Nok en gang er prosessen med Minify CSS WordPress grei. Du kan bare installere et plugin, og dette vil automatisk gjøre miniseringen av CSS-filene dine. Mens de fleste av de viktigste WordPress-filene har en minifisert versjon av CSS-filene, gjelder ikke dette nødvendigvis alle plugins og temaer.

Nok en gang, vil vi også anbefale å utføre en CSS-kodedekning for å fjerne overflødig CSS-kode som bare er dødvekt.

Vi nevner et antall plugins som minifiserer CSS WordPress i neste avsnitt nedenfor. 

5 beste WordPress Minify-plugins

Vi vil diskutere både generiske produkter som generelt brukes til å gjøre nettstedet ditt raskere gjennom minifisering, og spesifikke plugins hvis eneste funksjon er minify-prosessen.

1. WP Rocket

Dette er vår favoritt plugin.

Årsaken er enkel, dette er det klart beste produktet som kan utføre flere hastighetsoptimaliseringsoppgaver, på en veldig enkel måte, men med et utmerket resultat av å gjøre nettstedet ditt raskere, inkludert å utføre en minify av CSS- og Javascript WordPress-filer.

Virkelig og virkelig er det bare en av tingene som dette pluginet gjør, men når du først har installert det, vil du oppdage at du ikke trenger å gjøre noe annet.

Som du kan se nedenfor, er denne minifiseringen et av de grunnleggende alternativene for optimalisering. Med det ser du at det er sammenkobling, dette er en sekundær prosess for optimalisering, som lager en fil ut av alle CSS- og JS-filene (fordi dette også gjør det raskere å laste ned filene)

minify javascript css wordpress plugin

Plugin er ikke gratis, men prisen er veldig billig til bare $ 49. Gitt den tiden det sparer deg og resultatet av å få nettstedet til å lastes raskere, bokstavelig talt på få minutter, vil vi anbefale å velge dette.

WP Rocket attest

Vi installerer dette pluginet på alle WordPress-nettsteder vi oppretter, ganske enkelt fordi det sparer oss så mye optimaliseringstid.

Klikk her for den laveste prisen på WP Rocket

2. JCH Optimize

 

Her er et lite triks for å hjelpe deg veldig mye - bruk JCH Optimize - dette er et verktøy som fungerer på flere plattformer som WordPress, Joomla, Drupal og Magento.

Det som er bra med JCH Optimize er at det implementerer et stort antall Google Pagespeed og andre anbefalinger for å få nettstedet til å lastes så raskt som mulig.

Det er flott fordi det trenger nesten null konfigurasjon og intervensjon fra en bruker.

Hvis du leter etter en rask hostingtjeneste, ta en titt på verten vår, vi har gjennomgått dem fullstendig her: https://www.collectiveray.com/inmotion-hosting-review

JCH optimalisere

Og du trenger ikke å rote med noen kode, alt dette gjøres av pluginet - det bevarer all den opprinnelige kodingen, så du vil ikke ødelegge noe ved å rote rundt. Vanligvis gjør det også de optimaliseringene som vanligvis er vanskeligst å utføre. For å nevne noen få, er det de som gjøres bra

  • Kombinerer CSS-filer fra alle maler, moduler og plugins til en enkelt fil, og reduserer dermed antall forespørsler sendt til nettstedet ditt
  • Kombinerer Javascript-filer, som vanligvis er veldig vanskelige å kombinere uten å ødelegge nettstedet
  • Glidelåser CSS og Javascript slik at de blir mindre og overføringstiden reduseres
  • Reduserer Javascript og CSS for å gjøre det mer kompakt og redusere størrelsen ytterligere (reduserer ekstra hvitt mellomrom, kommentarer osv.)
  • Legger til en DEFER-tag, slik at siden din lastes først, og kjører Javascript etter at siden er lastet inn, noe som gjør nettstedet snappier å laste inn. Gitt at denne spesifikke implementeringen er avgjørende for et raskt nettsted, har vi dekket dette grundig her: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
  • Oppretter IMAGE Sprites - dette reduserer også antall forespørsler sendt til nettstedet ditt med et veldig stort beløp og er en av de vanskeligste optimaliseringene man kan oppnå manuelt

Det lar deg også tilpasse noen avanserte alternativer, for eksempel å ekskludere visse filer for å sikre at hvis noen utvidelse ikke fungerer etter å ha kjørt den gjennom JCH Optimize, vil dette fungere uansett.

De PRO-versjon, som er tilgjengelig for uhyre $ 29, gir deg tilgang til flere andre optimaliseringsalternativer som å inkludere inline CSS og Javascript og laste inn Javascript asynkront for ikke å blokkere lasting av nettstedet.

Ta ordet for det, installer pluginet, aktiver det og sjekk resultatene dine før og etter. Hvis du ikke får en forbedring med et godt beløp, kom tilbake hit og klag, men jeg er ganske sikker på at du ikke kommer tilbake :)

Klikk her for å laste ned JCH Optimize

3. W3 Total Cache

Dette er et annet plugin som du vil se, er et generelt programvare som gjør en rekke ting som er relatert til å gjøre WordPress raskt, inkludert minifisering av CSS-, JS- og HTML-filer.

Mens du vil finne ut at dette blir nevnt veldig ofte når det gjelder slike plugins, bør det bemerkes at dette produktet absolutt ikke er en god ide for folk som ikke er tekniske.

Innstillinger for sidecache i W3 total hurtigbuffer

Det har vært kjent å skape betydelige problemer, med noen feil igjen etter at programvaren er avinstallert og slettet fra nettstedet.

Selv kl CollectiveRay har prøvd å bruke denne pluginen flere ganger, men på dette tidspunktet og i nåværende tilstand, anbefaler vi ikke lenger at dette brukes til minifisering eller for å gjøre nettsteder raskere, unless du vet nøyaktig hva du gjør.

4. WP Super Minify

Dette pluginet bruker Miniser PHP Framework og bruker den kombinerer, minifiser og cacher innebygde JavaScript- og CSS-filer etter behov for å øke hastigheten på sidelastingen.

Ved å aktivere dette plugg inn, kilden til HTML, innebygd JavaScript og CSS er nå fjernet fra ekstra ting, noe som resulterer i at størrelsen blir mindre.

Det som er forskjellig fra andre plugins som er nevnt her er at dette pluginet KUN utfører minifiseringsprosessen, og ingen andre optimaliseringer, noe som er et godt valg for de som bare vil utføre denne funksjonen og ingenting annet av en eller annen grunn.

5. Rask hastighetsminifisering 

Selv om det er mange andre WordPress minify-plugins som vi kan anbefale, vil dette være den siste som vi nevner her. 

Fast Velocity-pluginet kombinerer alle CSS- og JavaScript-filer slik at webserveren må håndtere færre forespørsler. Samtidig minifiserer den også filene og lager hurtigbufrede kopier for raskere innlastingstider.

Dette pluginet gjør det automatisk mulig å minifisere HTML, JavaScript og CSS, men du kan deaktivere en eller flere av dem manuelt ved å gå inn i Innstillinger → Fast Velocity Minify fanen.

Du kan velge å ekskludere spesifikke filer fra å bli minifisert hvis en av pluginene dine går i stykker etter at du har aktivert dette.

 

Rask hastighet minify

Innpakning Up 

Selv om minifiseringsprosessen ikke er banebrytende, bør den implementeres som en av flere oppgaver for å gjøre WordPress raskere, og vi anbefaler på det sterkeste at du implementerer et av produktene nevnt ovenfor.

Last ned listen over 101 WordPress-triks hver blogger burde vite

101 WordPress-triks

Klikk her for å laste ned nå

 

om forfatteren
David Attard
Forfatter: David Attardnettside: https://www.linkedin.com/in/dattard/
David har jobbet i eller rundt den elektroniske / digitale industrien de siste 18 årene. Han har lang erfaring innen programvare- og webdesignindustrien ved å bruke WordPress, Joomla og nisjer rundt dem. Som digital konsulent er hans fokus på å hjelpe bedrifter med å få et konkurransefortrinn ved å bruke en kombinasjon av deres nettside og digitale plattformer som er tilgjengelige i dag.

En ting til... Visste du at folk som deler nyttige ting som dette innlegget også ser FANTASTISK ut? ;-)
Vær så snill forlate en nyttig kommenter med tankene dine, så del dette på Facebook-gruppen din (e) som synes dette er nyttig, og la oss høste fordelene sammen. Takk for at du delte og var hyggelig!

Avsløring: Denne siden kan inneholde lenker til eksterne nettsteder for produkter som vi elsker og anbefaler helhjertet. Hvis du kjøper produkter vi foreslår, kan vi tjene et henvisningsgebyr. Slike avgifter påvirker ikke våre anbefalinger, og vi godtar ikke betaling for positive anmeldelser.

Forfatter (e) Fremvist på:  Inc Magazine-logoen   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   og mange flere ...