Hvordan forminske CSS- og Javascript-filer i WordPress

Hvis du noen gang har utforsket de beste måtene å optimalisere nettstedet ditt på, har du sannsynligvis kommet over vilkårene forminske eller minifisering. Begrepet minify refererer til metoder som brukes for å redusere størrelsen på filene på nettstedet ditt. Dette oppnås ved å fjerne mellomrom, linjer og unødvendige tegn fra kildekoden.

I denne artikkelen vil vi forklare hva minifisering omfatter, hvilke fordeler den er, og noen av de mest populære minifikasjonsløsningene. Derfra vil du kunne bestemme den beste måten å takle ytelses- og hastighetsforbedringer for nettstedet ditt.

Hva er minifisering?

Nettsteder består av mange forskjellige filer ordnet i mapper på serveren. Disse filene inneholder kode som bestemmer utseendet og funksjonaliteten til nettstedet ditt. For å gjøre nettstedet ditt lett og raskt lastende, må koden den bruker optimaliseres. Nærmere bestemt JavaScript- og CSS-koden din. Å forminske filene dine er en måte å oppnå det på. Hvis du noen gang har prøvd å teste hastigheten på nettstedet ditt ved hjelp av GTmetrix eller PageSpeed ​​​​Insights, har du sannsynligvis fått en anbefaling om å forminske noen av nettstedsfilene dine – nemlig CSS- og JavaScript-filene.

Når vi sjekker koden i filene til et nettsted, forventer vi alle at den er skrevet på en forståelig måte for å gjøre den lettere å tolke. Imidlertid datamaskiner som kjører den koden bryr seg ikke om filene inneholder kommentarer, formatering, mellomrom eller nye linjer. Når de kommer over unødvendige tegn i nettsidefilene, ignorerer de dem – bare koden som må kjøres betyr noe.

Dette er når minifisering kommer inn på scenen. Minifisering er et databegrep det betyr i bunn og grunn fjerne overflødige tegn, de som ikke er nødvendige for å utføre den skrevne koden. Minifisering fungerer ved å analysere og omskrive koden. Dette reduserer den totale størrelsen på filene og, i forlengelsen, størrelsen på selve nettsiden, slik at den kan lastes raskere i brukerens nettleser.

For eksempel, hvis du har en stilarkfil beregnet på å style nettstedet ditt med CSS-kode som ser litt slik ut:

Den forminskede versjonen vil se slik ut:

Som du kan se er forskjellen betydelig – den minifiserte versjonen er på én linje og tar mye mindre plass enn den opprinnelige versjonen av koden.

Minifisering skjer på nettserveren før et svar på en klients (nettlesers) forespørsel sendes. Etter minifisering bruker webserveren mindre, minifiserte og mye raskere CSS- og JavaScript-filer i stedet for de originale. Dette resulterer i forbedret sidelastingshastighet uten tap av funksjonalitet.

Slik forminsker du WordPress CSS- og JavaScript-filer

Før du begynner å forminske nettstedfilene dine, anbefaler vi at du først sikkerhetskopierer hele nettstedet eller bare tar en sikkerhetskopi av individuelle filer. Dessuten, hvis du har et oppsamlingssted eller et lokalt testmiljø, ville det være greit å først forminske nettstedfilene dine der. På den måten kan du sjekk om alt fungerer som det skal før du gjør endringer på live-siden.

I tillegg bør du sjekke sidehastigheten på nettstedet ditt før og etter minifisering av filene. Sammenlign deretter resultatene og se om minifiseringen har hjulpet med forbedring. Du kan gjøre dette ved å bruke GTmetrix; det er et veldig nyttig testverktøy som genererer resultater og gir anbefalinger for nettstedoptimalisering forbedringer.

For å forminske filer kan du bruke en plugin eller gjøre det manuelt med et nettbasert verktøy. Vi skal forklare begge disse metodene mer detaljert i avsnittene nedenfor.

Redusere filer ved hjelp av plugins

Å bruke en WordPress-plugin for minifisering er enkleste måten å forminske CSS- og JavaScript-filer på nettstedet ditt. De mest brukte plugins er:

Autooptimaliser

Autooptimaliser er en av de mer populære pluginene for minifikasjon som du kan finne. Det er veldig enkelt å bruke og byr på mange muligheter, og på toppen av det er det gratis. Denne plugin kan kombiner skript, minifiser og bufre koden din.

Last ned og installer denne plugin-en via WordPress-administrasjonspanelet. Når du aktiverer den, finn Innstillinger > Autooptimaliser-alternativet, og i optimaliseringsalternativene huk av i boksene for CSS- og JavaScript-alternativene.

Du vil også legge merke til flere alternativer nedenfor for å optimalisere disse filene. Du kan aktivere dem og i tillegg tilpasse filminifisering. Til slutt er alt du trenger å gjøre Klikk på Lagre endringer og tøm buffer knapp.

Fast Velocity Minify

Fast Velocity Minify er en annen populær, gratis og nyttig plugin. Det fungerer ved forminske og kombinere CSS- og JavaScript-filene dine for å redusere HTTP-forespørslene til serveren din. Den slår sammen filene til en gruppe og prøver å bruke så få av dem som mulig. Det er ytterligere optimaliseringsalternativer tilgjengelig, men standardinnstillingene er nok for de fleste nettsteder.

Når du installerer og aktiverer denne plugin-en, nettstedfilene dine blir automatisk forminsket og optimalisert.

Du kan bruke de Innstillinger > Fast Velocity Minify alternativ i administrasjonspanelet for å få tilgang til plugin-innstillingene og sjekk alle tilgjengelige alternativer. Under Status-fanen kan du se en liste av JavaScript- og CSS-filer som Fast Velocity Minify behandlet.

Og du kan bruke Innstillinger fanen til skreddersy hvordan filene dine skal optimaliseres. Siden gruppering av CSS og JavaScript er aktivert som standard, kan du etter aktivering av plugin bruke innstillingene til juster standardalternativene eller deaktiver minifisering for visse typer kode. Du har til og med alternativet for å optimalisere Google Fonts og Font Awesome-ikoner.

WP Super Minify

WP Super Minify er en minifikasjonsplugin som kan minifisere, kombinere og bufre nettstedets CSS- og JavaScript-filer.

Etter å ha aktivert denne plugin, vil den automatisk komprimere all innebygd JavaScript og CSS-kode. Så filstørrelsen vil være mindre som vil bidra til å forbedre lastehastigheten til nettstedet ditt. Ved hjelp av de Innstillinger > WP Super Minify alternativ, du kan velge om du vil forminske både JavaScript og CSS eller bare én av disse to filtypene.

For å sikre at denne plugin-en fungerer som den skal, ganske enkelt undersøk nettstedets kildekode. Den enkleste måten å gjøre dette på er ved å åpne nettstedet ditt i en nettleser og trykk Ctrl + U (for Windows) eller Tilvalg + Kommando + U (for Mac). Hvis alt er i orden, bør du se følgende melding på slutten av kildekoden:

Til syvende og sist, uansett hvilken plugin du velger å bruke, alt du trenger å gjøre er å velge filene du vil forminske og plugin-en vil gjøre alt arbeidet for deg i bakgrunnen. Hver minifikasjonsplugin på markedet tilbyr ulike funksjoner i tillegg til minifisering, så du bør prøve flere plugins og velge den som passer deg best.

Videre er minifisering en praktisk talt standard funksjon for caching plugins, som for eksempel W3 Total Cache og WP Super Cache. Så du kan prøve å bruke dem også for å forminske nettstedets CSS- og JavaScript-filer.

Forminske filer manuelt

For det første, manuell forminskelse av filer betyr ikke at du manuelt går gjennom hver fil på nettstedet ditt og fjerner hvite eller tomme mellomrom. Manuell minifisering innebærer faktisk ved å bruke et av de populære nettverktøyene for dette formålet. En av dem er Forminsk kode, som vi skal bruke for å vise trinnene du må ta for å forminske koden. Dette verktøyet har en pen enkelt og brukervennlig grensesnitt. Og mange nettverktøy av denne typen har en lignende, eller samme, prosedyre for minifisering. Her er noen du kan prøve:

Hvis du velger å bruke Minify Code-verktøyet, må du først velg fanen du trenger. Avhengig av hvilken kode du ønsker å minifisere, er det en fane for CSS minifier og JavaScript-minifier. Etter å ha bestemt seg, lim inn koden din i det tilgjengelige vinduet og trykk Forminsk knapp.

Etter noen få øyeblikk vil du se minifisert versjon av koden du kom inn. Du kan ganske enkelt kopiere den og overføre den til originalfilen din. Bare en påminnelse – sørg for det sikkerhetskopiere filene dine før overskrive den opprinnelige koden med den forminskede.

Manuell minifisering er først og fremst nyttig hvis du bare vil forminske visse filer eller en kode du har skrevet. Hvis du for eksempel bruker et undertema for å tilpasse nettstedet ditt, vil CSS-filen med din egendefinerte kode være en god kandidat for minifisering. I så fall kan du ta en sikkerhetskopi av den opprinnelige filen bruk nettverktøyet til å forminske koden og erstatte den direkte i filen.

Hvis du bestemmer deg for å endre noe senere, kan du alltid gjøre det det i sikkerhetskopifilen du lagret. Reduser den igjen med endringene som er gjort og erstatt koden i filen på serveren. Den veien du vil alltid ha en klar sikkerhetskopifil som du kan redigere og den forminskede filen vil være på serveren og gjøre sitt for å optimalisere nettstedet ditt så mye som mulig.

Siste tanker

Hvis du ønsker å forbedre ytelsen til nettstedet ditt og oppnå bedre sideinnlastingshastigheter, vil minifisering av CSS- og JavaScript-filer hjelpe deg langt. Ved å bruke forminskningsverktøy tilgjengelig på nettet, vil du enkelt kunne forminske nettstedets kode. Med WordPress-nettsteder kan du dessuten alltid installere en av de mange pluginene på markedet, og med bare noen få klikk forminske CSS- og JavaScript-filer automatisk. Hvis du allerede bruker en caching-plugin, kan du sjekke om den har noen minifikasjonsalternativer i innstillingene og bruke den i stedet for å legge til en haug med nye plugins.

Det er flere alternativer du kan bruke til å forminske CSS- og JavaScript-filer, du trenger bare å bestemme hvilken som er best for deg. Vi håper du fant denne artikkelen nyttig, og at det optimaliserte nettstedet ditt snart vil stige i rangeringen ved å bruke rådene våre.