Vil du komprimere CSS-, HTML- og javascript-filene dine på WordPress?
Når du komprimerer nettstedets CSS-, HTML- og Javascript-filer, kan du spare verdifull tid på nettstedets lasthastighet. Nå snakker vi ikke om å kutte sideinnlastningshastigheten din i to eller noe, men når det gjelder nettstedshastigheten din, teller noe.
Lastehastigheten til nettstedet ditt er ikke bare viktig for nye besøkende, men også for rangering av søkemotorer.
BegrepetminifyI programmeringsspråket beskriver prosessen med å fjerne unødvendige tegn fra kildekoden. Disse tegnene inkluderer mellomrom, linjeskift, kommentarene og blokkere avgrensere som er nyttige for oss mennesker, men ubrukelige for maskiner.
Vi minifiserer nettstedets filer som inneholder CSS, HTML og Javascript-kode slik at nettleseren din kan lese dem raskere.
Les også artikkelen vår om 10 WordPress plugins for å forbedre hastigheten på bloggen din
Her er et eksempel på CSS-minifisering.
CSS før minifiseringen
/ * Et eksempel CSS-fil ---------------------------------- * / .user-profil-kort { margin: 0px; bakgrunn: #33E43} .user-profilbeskrivelse {border: 0; posisjon: absolutt; bredde: auto; margin-topp: 20px; }
CSS etter minifisering
.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}
Dette er tydeligvis bare et lite eksempel ved å bruke en CSS-kodebit, men du kan forestille deg hvor mye plass det vil spare når du krymper tusenvis av kodelinjer.
Hvordan øke tiden du bruker på WordPress-bloggen din? Finn ut ved å konsultere denne artikkelen.
Så hvis du vil gjøre det manuelt, teknisk sett kan du det. Men du vil løpe en høy risiko for feil og kaste bort dyrebar tid i livet ditt unødvendig!
Følg disse tipsene og bruk verktøyene du har til rådighet.
Noen verktøy for å utføre kompresjonen
Heldigvis trenger du ikke nødvendigvis å være utvikler eller kjenne noen av programmeringsspråkene for å redusere filstørrelsene på nettstedet ditt. Minifisering har blitt en vanlig praksis i webdesignverdenen. Så du bør ikke bli overrasket over å høre at det er mange fantastiske (og gratis) verktøy der ute for å gjøre jobben for deg.
Se også vår 6 WordPress-plugins for å blåse nytt liv i artiklene dine
Her er en liste over nyttige verktøy for å komme i gang. Siden mange av disse kan minimere flere kodetyper, har jeg tatt med kodetypealternativene i parentes.
-
- cssminifier.com et javascript-minifier.com (CSS og JS) - Disse to minifirene av Andrew Chilton er enkle å bruke. Du trenger bare å lime inn koden din, og deretter klikke på knappen Minify for å vise den komprimerte koden. Du kan til og med laste ned utgangskoden som en fil for enkelhets skyld.
- htmlcompressor.com (HTML, CSS & JS) - Dette online komprimerings- / minifiseringsverktøyet støtter HTML-, CSS- og JS-kodetyper. Den støtter til og med forskjellige kombinasjoner av kodetyper som CSS + PHP og JavaScript + PHP. Og du kan til og med sjekke den komprimerte koden for feil.
-
- csscompressor.net (Bare CSS) - Denne online CSS-kompressoren er rask, enkel og gratis å bruke.
-
- jscompress.com (Bare JS) - Dette JavaScript-komprimeringsverktøyet lar deg komprimere JavaScript-kode ved å kopiere og lime inn, men du kan også laste ned flere JavaScript-filer om gangen. Dette er ideelt for å kombinere JavaScript-filer i en enkelt fil for bedre sideinnlastingshastighet.
- Dan's Tools - Dan's Tools foreslår un redusere CSS og redusere JavaScript . Begge verktøyene har et veldig rent, brukervennlig grensesnitt. De tilbyr ingen avanserte alternativer, men de er gode for vanlige minifiseringsformål.
-
- refresh-sf.com (HTML, CSS og JS) - Denne kompressoren reduserer JavaScript-, CSS- og HTML-kodetyper. Den inneholder også alle komprimeringsalternativene for hver type kode hvis du trenger dem.
- Closure Compiler (Bare JS) - Closure Compiler er en del av nedleggelse Tools , en pakke med verktøy fra Google Developers. Den lar deg forminske JavaScript sammen med andre nyttige optimaliseringer. Du kan bruke Javascript-koden din ved å skrive inn URL-en til js-filplasseringen og deretter velge hvordan du vil at koden skal optimaliseres og formateres.
For eksempel velger du å optimalisere koden din for å fjerne bare blanke hvis du vil. Når du har klikket på kompileringsknappen, vil den redusere koden (eller kompilere den) for deg.
-
- minifycode.com (HTML, CSS og JS) - Dette nettstedet tilbyr minifiers for Javascript , CSS et HTML med et enkelt og rent brukergrensesnitt som komprimerer koden din med et enkelt klikk. Den tilbyr også et "forskjønnelses" -verktøy for å dekomprimere den minifiserte koden for å gjøre den mer lesbar (motsatt av minifisering).
Hvis du er ute etter offlineverktøy for å minimere CSS eller JavaScript HTML lokalt, er det noen alternativer:
- phpied.com/cssmin-js/ (Kun CSS)
- yui.github.io/yuicompressor (JS og CSS)
Hvordan redusere størrelsen på HTML, CSS og JavaScript ved hjelp av et elektronisk verktøy
Mange av disse online verktøyene har en lignende prosess som involverer følgende trinn:
- Lim inn kildekoden eller last ned kildekodefilen.
- Optimaliser innstillingene for en spesifikk utgang (hvis alternativer er tilgjengelige)
- Klikk på en knapp for å komprimere koden.
- Kopier det minifiserte koderesultatet eller last ned den minifiserte kodefilen.
For dette eksemplet skal jeg bruke minify-verktøyene fra minifycode.com.
Se også: Hvordan legge til en CSS-kode trygt på WordPress ved å konsultere denne lenken.
Først finner du CSS-filen (ofte kalt style.css) i nettstedfilene dine og åpner den ved hjelp av en sideditor. Kopier deretter all CSS-koden til utklippstavlen.
gå til minifycode.com og klikk på fanen CSS minifier. Lim deretter inn CSS-koden i inntastingsboksen og klikk på knappen Komprimer CSS.
Når den nye minifiserte koden er generert, kopier den.
Gå deretter tilbake til nettstedets CSS-fil og erstatt koden med den nye forenklede versjonen.
Det er det!
Gjenta den samme prosessen for også å redusere JavaScript og HTML-filen (e) på nettstedet ditt.
Hvordan minimere HTML, CSS og JavaScript i WordPress ved hjelp av plugins
Den enkleste måten å minimere HTML, CSS og JavaScript på WordPress er å bruke et plugin. Dette lar deg automatisk optimalisere WordPress-nettfilene dine for å redusere sidetiden med bare noen få knappeklikk.
Det er mange plugins som vil gjøre jobben, men jeg vil kort nevne noen få eksempler.
Autoptimiser (GRATIS)
Autoptimize er sannsynligvis WordPress Plugin av de mest populære minify. Det er populært fordi det er enkelt å bruke og fullpakket med kraftige funksjoner. Den kan samle (kombinere skript), forminske og bufre koden din. Som en bonus har du flere alternativer for å optimalisere Google Fonts, bilder, etc.
For å bruke Autoptimize, kan du laste ned, installere og aktivere plug-in fra WordPress-dashbordet under Plugin> Legg til nytt.
For mer informasjon, se vår guide om: Hvordan installere en plugin i WordPress
Når pluginen er aktivert, gå til Innstillinger> Automatisk optimalisering. Kontroller deretter koden du vil optimalisere (HTML, CSS og / eller JavaScript) under kategorien Hovedparametere, og klikk på Elagre endringer.
Du kan også klikke på knappen Vis avanserte innstillinger øverst på siden for å tilpasse kodeoptimaliseringen ytterligere.
Det er mer eller mindre det! Ganske enkelt og kraftig.
W3 Total Cache (GRATIS)
Total Cache W3 er et utmerket cache-plugin som tilbyr muligheten til å minimere HTML-, JS- og CSS-filene.
WP raskeste hurtigbuffer (GRATIS)
WP Raskest Cache - Dette pluginet WordPress hurtigbufring er ekstremt populært med høye anmeldelser. Den utfører forskjellige ytelsesoptimaliseringer, inkludert å kombinere og redusere HTML CSS og JavaScript for bedre ytelse.
Les også artikkelen vår om 8 WordPress plugins for å legge til en live chat på bloggen din
Når plugin-en er installert, klikker du bare på fanen WP Raskest Cache i sidepanelet til WordPress-dashbordet. Under fanen innstillinger, finner du alternativer for å kombinere og redusere HTML- og CSS-filer. Selv om minifisering av JavaScript bare er tilgjengelig i proversjonen.
For å oppsummere
Hvis du vil gjøre bloggen raskere og ha bedre ytelse, må du redusere størrelsen på HTML-, CSS- og JavaScript-filer. Med alle tilgjengelige elektroniske verktøy kan du enkelt redusere koden til ethvert nettsted.
9 WordPress plugins for å skjule innholdet i bloggen din å oppdage absolutt
For de som bruker WordPress har du til din disposisjon kraftige plugins for å minifisere disse filene automatisk med noen få klikk.
Oppdag også noen premium WordPress-plugins
Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.
Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.
1. 404 Feilsiden Omdirigere til Hjemmeside eller Tilpasset side
Her er en av de beste måtene å enkelt legge til en 404-feilside som vil omdirigere besøkende til hjemmesiden eller den personaliserte siden etter aktivering av denne plugin-modulen. WordPress premium.
Alle 404 feilsider blir omdirigert til hjemmesiden eller til en tilpasset URL. Ved å bruke denne WordPress Plugin, vil du la Google redusere siderangeringen til nettstedet ditt hvis det har mange 404-feilsider.
Oppdag også Hvordan fikse 413-feil på WordPress
Ce WordPress Plugin gjør ikke bare omdirigering, men det kan også være en passende løsning for å forbedre rangeringen av nettstedet ditt i søkemotorresultatene.
2. Borlabs Cache
WordPress er en plattform drevet av en database som genererer innhold dynamisk. Jo mer innhold og plugins du har, desto flere kjøres databasespørsmål. Dette kan redusere ytelsen til nettstedet ditt, spesielt når databasen er lokalisert på en annen server.
WordPress Borlabs Cache-plugin lagrer dynamisk generert innhold som en statisk fil i serverminnet. Når siden blir bedt om, lastes og sendes denne statiske filen til besøkende, noe som er betydelig raskere enn vanlige databasespørsmål. Men det er ikke alt.
Se også vår 5 WordPress plugins for å rense nettstedets database
Sidene dine inneholder mye unødvendig hvit plass eller HTML-kommentarer, noe som øker den totale sidestørrelsen. Borlabs Cache fjerner dem alle og bruker GZIP til å komprimere sidene.
Oppdag Hvordan vise alle dine WordPress publikasjoner på én side
Mange plugins har egne JavaScript- og CSS-filer, noe som resulterer i flere forespørsler på serveren din. Borlabs Cache kombinerer alle disse JavaScript- og CSS-filene, slik at besøkende i beste tilfelle bare trenger å laste inn en JavaScript-fil og en CSS-fil.
3. Flerspråklig Press
Multilingual Press jobber med en multisite installasjon av WordPress og lar deg koble oversettelser. Plugin-en kommer med 174 språk innebygd i språkbehandlingen, og den støtter et ubegrenset antall nettsteder, slik at du kan opprette og koble til så mange oversettelser du vil.
Dette er bra for SEO fordi dette vil tillate deg å beholde språkene dine på separate innlegg og sider, og hvis du noen gang bestemmer deg for å bruke en annen oversettelse av plugin-en, forblir innholdet ditt intakt (selv etter at du har deaktivert eller fjernet Multilingual Press-plugin). I tillegg kan du legge til en oversettelse-widget for å bytte mellom oversettelser enkelt.
Oppdag Slik legger du til et kodebit ved hjelp av Gutenberg på WordPress
Multilingual Press er et flott gratis alternativ for å legge til oversettelser til WordPress-siden din via flersteds. I tillegg, hvis du noen gang finner ut at du trenger flere alternativer, kan du velge pro-versjonen som koster $ 75.
Andre anbefalte ressurser
Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.
- Hvordan legge til en bildetekst til et bilde på Gutenberg
- 6 WordPress plugins for å krydre opp sidefelt
- 10 WordPress-plugins for å legge til en nedlastingsbehandling
- Hva du skal forstå DDoS-angrep på WordPress
È mulig Jizz-kompressor https://www.jsonformatting.com/js-minify/