CSS Verkleiner

Met CSS verkleiner, kan jy CSS styl lêers verklein. Met die CSS-kompressor kan u u webwerwe maklik bespoedig.

Wat is CSS minifier?

CSS verkleiner het ten doel om CSS-lêers op webwerwe te verklein. Hierdie konsep, wat as 'n Engelse ekwivalent (CSS Minifier) ​​gebruik word, sluit 'n rangskikking in CSS-lêers in. Wanneer CSS'e voorberei word, is die hoofdoel vir webwerf-administrateurs of kodeerders om die lyne korrek te ontleed. Daarom bestaan ​​dit uit soveel lyne. Daar is onnodige kommentaarreëls en spasies tussen hierdie reëls. Dit is hoekom CSS-lêers baie lank word. Al hierdie probleme word uitgeskakel met CSS minifier.

Wat doen CSS verkleiner?

Saam met die veranderinge wat in die CSS-lêers gemaak is; afmetings word verminder, onnodige lyne word verwyder, onnodige kommentaarlyne en spasies word uitgevee. Verder, as meer as een kode by die CSS ingesluit is, word hierdie kodes ook uitgevee.

Daar is verskeie inproppe en toepassings vir hierdie bewerkings wat die meeste gebruikers met die hand kan uitvoer. Veral vir mense wat die WordPress-stelsel gebruik, kan hierdie prosesse met inproppe geoutomatiseer word. Sodoende word die moontlikheid om foute te maak uitgeskakel en meer effektiewe resultate word verkry.

Mense wat nie WordPress vir CSS gebruik nie of nie bestaande inproppe wil verkies nie, kan ook aanlynhulpmiddels gebruik. Deur die CSS na die aanlynhulpmiddels oor die internet af te laai, word die bestaande lêers in die CSS verminder deur veranderinge aan te bring. Nadat al die prosesse voltooi is, sal dit genoeg wees om die bestaande CSS-lêers af te laai en na die webwerf op te laai. Bewerkings soos CSS Minify of krimping sal dus suksesvol voltooi word, en alle moontlike probleme wat deur CSS vir die webwerf ervaar kan word, sal uitgeskakel word.

Hoekom moet jy jou CSS-lêers verklein?

Om 'n vinnige webwerf te hê, maak Google nie net gelukkig nie, dit help jou webwerf om hoër te rangskik in soektogte en bied ook 'n beter gebruikerservaring vir jou werfbesoekers.

Onthou, 40% van mense wag nie eers 3 sekondes vir jou tuisblad om te laai nie, en Google beveel aan dat werwe binne 2-3 sekondes hoogstens laai.

Om saam te druk met die CSS verkleiner instrument het baie voordele;

  • Kleiner lêers beteken dat jou werf se algehele aflaaigrootte verminder word.
  • Werfbesoekers kan jou bladsye vinniger laai en toegang verkry.
  • Werfbesoekers kry dieselfde gebruikerservaring sonder om groter lêers af te laai.
  • Werfeienaars ervaar laer bandwydtekoste omdat minder data oor die netwerk versend word.

Hoe werk CSS verkleiner?

Dit is 'n goeie idee om jou werf se lêers te rugsteun voordat jy dit krimp. U kan dit selfs 'n stap verder neem en u lêers op 'n proefwerf verklein. Op hierdie manier maak jy seker dat alles aan die gang is voordat jy veranderinge aan jou lewendige werf aanbring.

Dit is ook belangrik om jou bladsyspoed te vergelyk voor en nadat jy jou lêers verklein het sodat jy die resultate kan vergelyk en kyk of krimp enige effek gehad het.

U kan u bladsyspoedprestasie ontleed met GTmetrix, Google PageSpeed ​​​​Insights en YSlow, 'n oopbronwerkverrigtingtoetsinstrument.

Kom ons kyk nou hoe om die reduksieproses te doen;

1. Handmatige CSS verkleiner

Om lêers met die hand te krimp, neem 'n aansienlike hoeveelheid tyd en moeite. Het jy dus tyd om individuele spasies, reëls en onnodige kode uit lêers te verwyder? Waarskynlik nie. Afgesien van tyd, bied hierdie reduksieproses ook meer ruimte vir menslike foute. Daarom word hierdie metode nie aanbeveel om lêers te krimp nie. Gelukkig is daar baie gratis aanlyn verkleineringsnutsgoed waarmee jy kode vanaf jou werf kan kopieer en plak.

CSS minifier is 'n gratis aanlyn hulpmiddel om CSS te verkleineer. Wanneer jy die kode in die "Invoer CSS" teksveld kopieer en plak, verklein die instrument die CSS. Daar is opsies om die verkleinde uitvoer as 'n lêer af te laai. Vir ontwikkelaars bied hierdie instrument ook 'n API.

JSCompress , JSCompress is 'n aanlyn JavaScript-kompressor waarmee jy jou JS-lêers tot 80% van hul oorspronklike grootte kan saamdruk en verklein. Kopieer en plak jou kode of laai en kombineer verskeie lêers om te gebruik. Klik dan op "Compress JavaScript - Compress JavaScript".

2. CSS verkleiner met PHP plugins

Daar is 'n paar wonderlike inproppe, beide gratis en premium, wat jou lêers kan krimp sonder om handmatige stappe te doen.

  • Voeg saam,
  • verklein,
  • verfris,
  • WordPress-inproppe.

Hierdie inprop doen meer as om jou kode te verklein. Dit kombineer jou CSS- en JavaScript-lêers en verklein dan die lêers wat geskep is met Minify (vir CSS) en Google Closure (vir JavaScript). Vermindering word via WP-Cron gedoen sodat dit nie jou werfspoed beïnvloed nie. Wanneer die inhoud van jou CSS- of JS-lêers verander, word hulle weer gelewer sodat jy nie jou kas hoef leeg te maak nie.

JCH Optimize het 'n paar goeie kenmerke vir 'n gratis inprop: dit kombineer en verklein CSS en JavaScript, verklein HTML, verskaf GZip-kompressie om lêers te kombineer, en sprite-weergawe vir agtergrondprente.

CSS Minify , Jy hoef net te installeer en te aktiveer om jou CSS met CSS Minify te verklein. Gaan na Instellings > CSS Verklein en aktiveer slegs een opsie: Optimaliseer en verklein CSS-kode.

Fast Velocity Minify Met meer as 20 000 aktiewe installasies en 'n vyfster-gradering, is Fast Velocity Minify een van die gewildste opsies wat beskikbaar is om lêers te krimp. Om dit te gebruik, hoef jy net te installeer en te aktiveer.

Gaan na Instellings > Fast Velocity Minify. Hier vind u 'n aantal opsies om die inprop op te stel, insluitend gevorderde JavaScript- en CSS-uitsluitings vir ontwikkelaars, CDN-opsies en bedienerinligting. Die verstekinstellings werk goed vir die meeste werwe.

Die inprop voer intydse krimp op die frontend uit en slegs tydens die eerste nie-gekas versoek. Nadat die eerste versoek verwerk is, word dieselfde statiese kaslêer aan ander bladsye bedien wat dieselfde stel CSS en JavaScript benodig.

3. CSS verkleiner met WordPress plugins

CSS verkleiner is 'n standaard funksie wat jy gewoonlik in caching plugins sal vind.

  • WP vuurpyl,
  • W3 totale kas,
  • WP SuperCache,
  • WP vinnigste kas.

Ons hoop dat die oplossings wat ons hierbo aangebied het jou ingelig het oor hoe om die CSS-verkleiner te doen en dat jy kan verstaan ​​hoe jy dit op jou webwerf kan toepas. As jy dit al voorheen gedoen het, watter ander metodes het jy gebruik om jou webwerf vinniger te maak? Skryf aan ons in die kommentaar afdeling oor Softmedal, moenie vergeet om jou ervarings en voorstelle te deel om ons inhoud te verbeter nie.