Telefoni 

Reducing css. CSS kompresija. Da li je uopće potrebno komprimirati CSS kod?

Optimizacija HTML koda i kaskadnih stilova (CSS) neophodna je kako bi se ubrzao proces učitavanja stranice i sadržaja na njoj. Ušteda vremena i prometa, općenito, dugo nakon optimizacije, bit će značajna, čak i ako promjena brzine nije jako primjetna spolja.

Optimizacija HTML koda

Da bi HTML kod omogućio brzo učitavanje stranice, mora ispunjavati nekoliko uslova:

  • Budite jednostavni i informativni. Nakon što provjerite valjanost, morate ispraviti greške kako biste botovima olakšali analizu. Kôd treba jasno predstavljati strukturu stranice.
  • Glavne komponente stranica, kao što su naslovi, indeksi, blokovi informacija treba lako i brzo identifikovati.
  • Oslobađanje koda od nepotrebnih informacija i njegovo pohranjivanje u zasebne datoteke (na primjer, možete ukloniti CSS i JS) povećat će brzinu učitavanja, što također pojednostavljuje rad botova.

Postizanjem ovih uslova, sajt se može učiniti bržim, praktičnijim i povećati efikasnost njegovog indeksiranja botovima pretraživača.

Redukcija koda i CSS optimizacija

Kôd stranice možete učiniti jednostavnijim smanjenjem njegovog volumena. Da biste to učinili, morate izvršiti nekoliko operacija.

Prije svega, trebali biste izbjegavati Flash tehnologije, JavaScript, okvire, tekst predstavljen slikom. Svi elementi koji su mogući treba da budu formatirani u odvojenim, eksternim fajlovima (na primer, CSS i JS, kao što je gore navedeno). Posebni dodaci će pomoći u optimizaciji koda. Na primjer, možete instalirati dodatak Autoptimize, koji automatski optimizira HTML, CSS, JS kod (ako označite odgovarajuća polja). Potrebno je postaviti kompetentnu i praktičnu navigaciju sajta koja će biti razumljiva korisnicima i korektno prepoznata od strane pretraživača. Ovo će povećati brzinu, kvalitet učitavanja i indeksiranja stranice.

Što se tiče CSS optimizacije, to možete učiniti sami ili povjeriti posebnom resursu ili programu. Ručna optimizacija je radno intenzivan i dugotrajan proces, a možda ćete propustiti neke greške. Program ili servis za optimizaciju će bolje otkloniti nedostatke, ali može poremetiti neke funkcije koje su radile na sajtu, a nakon verifikacije sadržaj možda neće biti ispravno prikazan, pa je potrebno ispraviti njihov rad.

Neki načini za ručno poboljšanje CSS strukture:

  • Uklonite dodatne razmake i prijelome reda koji preopterećuju CSS datoteku i otežavaju robotima rad;
  • Napišite generalizirajuća svojstva umjesto ponavljanja sličnih naredbi nekoliko puta;
  • Koristite sažete, razumljive opise u komentarima;
  • Neobične fontove treba pisati pomoću stilova, a ne slika;
  • Za slike kreirajte alt i naslov (različiti za svaku sliku) tako da njihov sadržaj prepoznaju botovi pretraživača;
  • Primijenite H1 alate na naslove – i tako dalje, tako da budu ispravno prepoznati tokom indeksiranja;
  • Uključiti u ključne riječi samo one ključne riječi koje se koriste na stranici, minimizirajući njihov broj;
  • Koristite raznovrsne i sažete meta oznake.

CSS i HTML optimizatori

Možete jednostavno i brzo optimizirati direktno u pregledniku koristeći posebne usluge, na primjer:

  • CleanCSS.com;
  • CSS Optimizer;
  • CSS Compressor;
  • CY-PR.com;
  • Autooptimize plugin.

SEO i IT stručnjaci preporučuju korištenje CleanCSS.com, jer vam omogućava da odaberete nivo kompresije od niskog do visokog ili odaberete pojedinačne postavke. Nakon najvišeg i najvišeg nivoa optimizacije, kod sajta poprima gotovo nečitljiv oblik i biće gotovo nemoguće izvršiti promene na njemu. Stoga, prvo trebate koristiti standardnu ​​optimizaciju. Možete odabrati načine kompresije za određeni sadržaj ili optimizirati pojedinačne parametre: kompresiju fontova, slika, uklanjanje razmaka.

Resurs CY-PR.com takođe ima sličan alat za optimizaciju koji olakšava CSS strukturu za 25-30%, ali ne postoji način da se generiše datoteka sa kodom nakon izvođenja operacije.

Druge usluge mogu promijeniti kod prilično radikalno, tako da neke funkcije na stranici prestanu raditi. Stoga je uz njihovu pomoć bolje napraviti samo lokalne promjene u određenim parametrima stranice.

Nakon optimizacije treba provjeriti funkcionalnost stranice, ispravan prikaz dizajna i brzinu učitavanja. Normalna situacija je kada se stranice i korisničke opcije stranice ne učitavaju duže od 3-5 sekundi.

Da biste provjerili stepen optimizacije i shvatili koliko je HTML kod sada napisan, možete koristiti usluge kao što su:

  • optimizacija.com;
  • SEO kontrolna lista portal;
  • Firebug dodatak.

Ovi alati će vam pomoći da provjerite da li je sve urađeno da se smanji količina HTML koda i poboljša njegova struktura. Na resursu SEO kontrolne liste možete provjeriti listu onoga što je već urađeno za optimizaciju, a šta još nije urađeno, te označiti stvari koje su urađene.

Validacija

Možete provjeriti greške u kodu stranice pomoću usluga validacije - validatora. Efektivna provjera koda se vrši pomoću validator.w3c.org

Ako sistem proizvede više od pet hiljada grešaka tokom prve provjere, nemojte se uznemiriti. Nakon ispravljanja određene greške, možete ponovo pokrenuti provjeru i bit će mnogo manje grešaka, jer jedna mana povlači druge i kada se ispravi one će nestati.

Sajt sa ispravljenim i optimizovanim kodom ima veće šanse za visoko rangiranje u rezultatima pretrage nego resurs sa preopterećenim HTML kodom koji sadrži greške.

Dobar dan Već dugo nisam imao zabilješke o tehničkoj optimizaciji, pa ću danas o tome CSS kompresija.

Odmah se postavlja pitanje - zašto je to potrebno? Odgovor je jednostavan: optimizacijom stilskih listova smanjuje se količina preuzetog koda i težina datoteke style.css. Kao rezultat toga, stranica će biti manje teška, što će uštedjeti promet i povećati brzinu učitavanja stranice.

Osim toga, Google prepoznaje brzinu učitavanja internetske stranice kao jedan od rezultata pretraživanja.

Slažete se, čak i uprkos velikom kapacitetu modernih kanala provajdera i sveprisutnih neograničen internet, ovo je značajan faktor. Stoga toplo preporučujem da obratite pažnju ne samo na, već i na njegovu veličinu.

Kako optimizirati CSS i smanjiti veličinu datoteke

Možete pristupiti optimizaciji na razne načine. Najsigurniji način je ručno čišćenje datoteke stilova. Iako se može raspravljati, jer neznalica može učiniti tako nešto da će mu đavo slomiti nogu, a ipak neće postići maksimalnu kompresiju.

Koje aktivnosti se mogu izvršiti prilikom optimizacije CSS-a:

  • Uklonite nekorištene selektore.
  • Uklonite neiskorištene komentarisane linije.
  • Smanjite količinu komentara u datoteci stila. Uvijek je zgodno kada su elementi grupisani prema zajedničkoj karakteristici i imaju komentare koji su nevidljivi očima običnih korisnika. Ali često, da biste postigli visok stepen kompresibilnosti u CSS-u, morate ih se riješiti. Da biste olakšali navigaciju kodom tokom budućeg rada, i dalje ih možete koristiti, ali ostavite kratki opisi.
  • Uklonite prazne redove i razmake. Ali ne biste se trebali previše zanositi, kod bi trebao ostati čitljiv tako da možete lako napraviti promjene.
  • Kombinujte elemente sa istim svojstvima.
  • Optimizirajte fontove. Bolje je koristiti jedan font. Upotreba različitog fonta u svakom pojedinačnom bloku stranice je loša forma i, kao što vidite, preopterećuje datoteku stila.
  • Optimizirajte boje. Ovo je prilično jednostavno za napraviti, ali teško objasniti riječima, pa ću dati jasne primjere:
#fffff zamijeni sa #fff #112233 zamijeni sa #123
  • Optimizirajte uvlačenje. Opet sa primjerima:
  • padding :10px 20px 10px 20px ; zamijeni s paddingom :10px 20px ; padding :10px 0px 0px 0px ; zamijeni sa paddingom :10px 0 0; padding :10px 10px 10px 10px ; zamijeniti paddingom :10px ;

    Naravno, možete pronaći i druge načine za optimizaciju, ali ja ću vjerovatno ovdje stati i nastaviti svoju priču o online CSS alatima za optimizaciju.

    Optimizacija CSS-a pomoću online usluga

    Svima online usluge moraju se tretirati s posebnom pažnjom kako se drvo ne bi slomilo. I obavezno je napraviti rezervnu kopiju, međutim, ova preporuka se odnosi na sve datoteke koje se uređuju.

    Postoji dovoljan broj online alata (CleanCSS, Online CSS Optimizer, itd.) koji mogu izvršiti CSS optimizaciju. Ne razlikuju se mnogo jedni od drugih, često koriste iste algoritme i biblioteke kompresije, na primjer YUICompressor ili CSSTidy.

    Zadržat ću se detaljnije na onom koji najčešće koristim. Ovo je CSS optimizator na portalu za webmastere CY-PR.com.

    Da biste započeli, morate zalijepiti CSS isječak ili cijeli sadržaj stilova u polje za tekst. Koristite padajuću listu sa desne strane brza podešavanja :

    • maksimum (nečitljiv kod, najmanja veličina);
    • visoka (prohodna čitljivost, mala veličina);
    • standard (ravnoteža između čitljivosti i veličine);
    • nizak (čitljiv kod);
    • odaberite sami (unesite parametre ispod).

    Za sigurnu optimizaciju, preporučuje se korištenje standardne kompresije. Samo iz zabave, koristite druga brza podešavanja, ali zapamtite rezervna kopija. Nakon što su parametri CSS kompresije postavljeni, možete početi raditi direktno sa skriptom pritiskom na dugme Optimizirajte CSS.

    Rezultati su prikazani ispod, ukazujući na originalnu i optimizovanu veličinu koda, kao i omjer kompresije u postocima:

    Poslednji dodatak: pokušajte da kombinujete CSS fajlove. Neki dodaci koriste svoje stilove pohranjene u odvojenim datotekama, bilo bi lijepo spojiti ih u jedan. Sljedeći put u ovom dijelu, reći ću vam kako možete automatski dobiti komprimirani CSS kao izlaz. Vidimo se uskoro!

    Nastavljam, sada imam još jednu tačku ispred sebe koju mi ​​je Google predložio: Uklonite JavaScript i CSS koji blokiraju renderiranje sa vrha stranice. Sada ću pokušati da shvatim šta je tu suvišno i kako ukloniti nepotreban JavaScript i CSS?


    Da vas podsjetim da testiram sa ovim servisom: gdje sam dobio konkretne savjete u vezi s JavaScriptom i CSS-om:

    Kao što vidite, imam ovaj veliki problem, 8 skripti se učitava odjednom i zbog toga se prvi ekran ne učitava onoliko brzo koliko bismo željeli. Postoji i 10 css fajlova koji takođe nisu optimizovani. Pa, hajde da rešimo problem!

    Tvrdnje po ovom pitanju su otprilike ovako:

    Uklonite JavaScript kod koji sprečava prikaz:

    • https://prostolinux.ru/...-includes/js/jquery/jquery.js?ver=1.10.2
    • https://prostolinux.ru/...s/jquery/jquery-migrate.min.js?ver=1.2.1
    • https://prostolinux.ru/...query-ui-1.8.10.custom.min.js?ver=1.8.10
    • https://prostolinux.ru/…ial-textboxes/js/wstb.js.php?ver=3.10.60
    • https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver=1.6.1

    Nedavno sam pronašao zanimljivo rješenje: u function.php moramo umetnuti kod koji će komandovati skriptama koje treba da se ne učitavaju odmah:

    funkcija jquery_in_footer() ( wp_register_script('tie-tipsy', get_template_directory_uri() . '/js/jquery.tipsy.js', array('jquery')); wp_register_script('tie-easing', get_template)_directory._' js/jquery.easing.1.3.js', array('jquery')) ;

    U primjeru su dodane dvije skripte, ali dodajemo onoliko koliko želimo i one koje usporavaju učitavanje stranice. Pokušao sam primijeniti ovo rješenje - nije mi išlo, možda sam nešto pogriješio?

    Sam Google savjetuje umetanje atributa u skriptu async, što bi njegovo učitavanje učinilo asinhronim. Ali ovo rješenje je prikladno samo za vanjske skripte, na primjer, ovaj asinhronizirani atribut može se umetnuti u Yandex Direct reklamnu skriptu ako se vaše oglašavanje prikazuje na prvom ekranu. Yandex također ima asinhroni kod, ali mi je to stvaralo probleme - ako je jedan blok sa asinhronim učitavanjem, a drugi nije, tada će se prikazati samo jedan od njih. Ali to sada nije o tome...



    Teško je optimizirati dodatke na ovaj način, potrebno je ući u kod svakog dodatka i upisati ovaj atribut ili njegovu alternativu. Nisam programer i neću to raditi. Osim toga, ako stalno ažurirate dodatke, sav vaš rad će biti izgubljen nakon ažuriranja.

    Na moje iznenađenje, pronašao sam još jedno, vrlo jednostavno rješenje za ovaj problem - instalirao dodatak Asinhroni Javascript. Nakon instalacije dobio sam sljedeći rezultat:

    Kao što vidite, ostala je samo jedna skripta, a ovo je skripta samog dodatka. Nakon instalacije, ja lično nisam imao problema s prikazivanjem teme stranice, ali ako imate neku vrstu problema i treba vam neka skripta da se odmah učita, onda je u postavkama dodatka možete dodati izuzecima:

    Ovako se prva tačka lako rješava, ali kao što vidite, to još uvijek nije dovoljno, potrebno je optimizirati css, kako to učiniti?

    Kako optimizirati CSS performanse?

    Da vas podsjetim na listu žalbi:


    Optimizirajte svoj CSS na sljedećim resursima:

    • https://prostolinux.ru/...wp-special-textboxes.css.php?ver=3.10.60
    • https://prostolinux.ru/...plugins/wp-ds-blog-map/wp-ds-blogmap.css
    • https://prostolinux.ru/...t/themes/rockwell_new/rockwell/style.css

    U idealnom slučaju, trebate učiniti ovo: uzmite sve podatke iz ovih css datoteka i premjestite ih u glavni stile.css, i onemogućite zahtjev prema njima u samim dodacima. Ali kao što razumijete, ovo je dug i dosadan zadatak, prepun mnogih zamki. Možda ću u budućnosti to raditi, ali za sada nemam toliko vremena i iskustva.

    Problem možete riješiti instaliranjem dodatka, koji će sam spojiti sve stilove u jednu datoteku. Nisam mogao pronaći dodatak koji bi obavljao samo ovu funkciju, pa ću vam reći o dodatku koji radi sve odjednom, uklanja skripte i optimizira css.

    Kako optimizirati sve odjednom?

    Odlučio sam da instaliram dodatak Autooptimize, koji optimizuje i skripte i css u isto vreme. Nakon što instalirate dodatak, samo trebate otići na njegove postavke i označiti kućice na pravom mjestu:

    Nakon toga, Google Page Speed ​​prikazuje ovo:

    Nijedna skripta se ne učitava, samo dvije css datoteke koje uključuju sve stilove, a sve skripte se pomjeraju u područje podnožja. Ako sada pogledate izvorni kod stranice, onda postoji optimizirani PORridge, koji ne možete shvatiti bez boce.

    U početku sam mislio da ovaj dodatak neće u potpunosti riješiti moje probleme, ali kako se ispostavilo, to je zato što ga nisam u potpunosti konfigurirao! Nakon što sam označio kućice na pravom mjestu, dobio sam ODLIČAN rezultat! SVI PROBLEMI SU NESTALI!

    Da biste to uradili potrebno je da pritisnete dugme na vrhu Prikaži napredne postavke a onda će se pojaviti dodatna podešavanja. Potrebno je označiti sljedeće stavke:

    Optimizirati HTML kod?

    Optimizirati JavaScript kod?

    Potražite skripte samo u ? (zastarjelo)

    Optimizirati svoj CSS kod?

    Ugraditi sav CSS?

    Sačuvajte agregirani skript/css kao statične datoteke

    Nakon toga, istina je da mi je dodatak koji popravlja widget prestao da radi, ali to uopšte nije problem, brzina učitavanja sajta je mnogo važnija. A još je važnije ugoditi čika Guglu...

    Također bih želio spomenuti jednu nijansu: na ovoj web stranici imam adaptivni predložak, a ako ga koristite, onda dodatak prilikom prikaza mobilna verzija ne mogu u potpunosti otkloniti sve probleme. Kada omogućim dodatak za mobilnu verziju, greške ne ostaju. Još jednom sam se uvjerio da je responzivni dizajn bolji od responzivnog.

    Još jedan sličan dodatak je WP Minify Fix, on radi istu stvar, ali mi se manje sviđao, ili ga možda jednostavno nisam u potpunosti razumio.

    Razumijem da je idealno sve ovo raditi bez dodataka, ručno, ali je jako dugo i zamorno i zaista se ne isplati, jer čak i nakon postizanja ocjene 100, nećete svoju stranicu dovesti na vrh - brzina učitavanja stranice je samo JEDAN od stotina faktora rangiranja, i to prilično važan. Ali moramo učiniti sve što možemo!

    Uklanjanje JavaScript i CSS Google PageSpeed ​​koda



    Niste pronašli odgovor? Koristite pretragu sajta

    Optimizacija web stranica je nevjerovatno važan dio . Ovo uključuje ne samo optimizaciju programskog koda web stranice, već i optimizaciju kaskadnih stilova (CSS), što mnogi webmasteri zanemaruju.

    Poput optimizacije koda, CSS optimizacija je potrebna za ubrzanje učitavanja stranice i uštedu prometa. Pošto CSS fajl teži do 100 kb, mnogi neće shvatiti važnost njegove optimizacije, ali kada izračunate koliko vremena i propusnog opsega optimizovani fajl može da uštedi godišnje, shvatićete koliko je to nedovoljno cenjeno.

    CSS možete optimizirati ručno ili koristeći posebne usluge. Obje opcije imaju nedostatke. Ručnim optimiziranjem tabela možete mnogo propustiti, tako da optimizacija neće biti tako efikasna kao optimizacija mašina. Štaviše, ručna optimizacija će vam oduzeti dosta vremena, jer CSS može sadržavati hiljade linija koda. Međutim, optimizacija mašine može ukloniti važne linije, bez kojih se dizajn neće ispravno prikazati. U ovom članku ćemo dati korisne savjete za one koji žele optimizirati CSS ručno, kao i za one koji će to učiniti koristeći online usluge.

    Prvo, obavezno koristite generička svojstva. Možete sačuvati nekoliko redaka ako umjesto margin-bottom, margin-left, margin-right i margin-top koristite jednu marginu sa vrijednostima četiri prethodne, na primjer: body ( margin: 10px 2px 10px 5px ;

    Koristite prostore mudro. Razmaci i dodatni prijelomi reda se obično koriste za poboljšanje upotrebljivosti u CSS-u. Međutim, svaki prostor dodaje malu količinu težini datoteke. Stoga, ako je dizajn stranice već završen, ništa vas ne sprječava da se potpuno riješite nepotrebnog prostora.

    Niko ne sumnja u važnost komentara. Ako ih potpuno eliminišete, biće vam teže da pronađete deo koda koji vam je potreban bez Firebug dodatka. Ali nemojte zaboraviti da oni zauzimaju lavovski dio sadržaja datoteke style.css. Da biste ispravili ovaj nesporazum, preporučuje se korištenje kraćih opisa. Na primjer, umjesto ///* duge lirske digresije */// možete koristiti nezaboravni /* Logo */.

    Postoje, naravno, i druge metode optimizacije, ali mnogo je lakše obratiti se posebnim resursima pomoću kojih možete optimizirati CSS direktno iz pretraživača.

    Najuzorniji od njih bio je CleanCSS.com. Ova stranica nudi nekoliko opcija kompresije: niske, standardne, visoke, super i prilagođene. Standardna opcija kompresije je najizbalansiranija između težine i čitljivosti. Visoko i najviše se preporučuje da se koristi samo ako ubuduće nećete praviti nikakve promene u CSS-u, jer će kod postati potpuno nečitljiv. Također nudi niz dodatnih opcija, kao što su kompresija boja i fonta, selektori za sortiranje itd. Gotovi rezultat možete dobiti ili u obliku teksta ili ga izvesti u datoteku.

    Među ruskim servisima, CSS optimizator na web stranici CY-PR.com pokazao je pristojne rezultate. Njegova funkcionalnost se praktično ne razlikuje od CleanCSS-a. Sa standardnim postavkama, omjer kompresije može doseći 25%, s maksimalnim postavkama - preko 30%. Nažalost, nema izvoza u datoteku.

    Nema smisla opisivati ​​druge servise, jer rade po istoj shemi kao i prethodno spomenuti CleanCSS.com i CY-PR.com, ali postoje i prilično su funkcionalni.

    Da li je uopće potrebno komprimirati CSS kod?

    Prije svega, odlučimo zašto trebamo komprimirati CSS kod? Ako su naši css fajlovi male veličine, onda nema šta da se pokaže, ali ako razvijate solidan projekat, onda je ovo sasvim drugačiji razgovor. Dakle, ovdje ste da naučite kako komprimirati CSS. Više o stvari... CSS kompresija se može implementirati na nekoliko načina. Ispod je lista svih metoda CSS kompresije za koje znam.

    CSS metode kompresije

    napomene: statička kompresija, kompresije do -80%-90%

    napomene: dinamička kompresija, kompresuje do -75%-95% (zavisi od vas)

    napomene: statička kompresija, kompresije do - 50%

    Samo odaberite metodu css kompresije koja vam se sviđa i kliknite na nju ili pročitajte sve metode i izvucite svoje zaključke, što toplo preporučujem.

    Komprimirajte CSS koristeći online kompresore

    Analizirajući rad css kompresora, možemo izvući sljedeće zaključke o stepenu css kompresije. Eksperiment je izveden na osnovu dva css fajla sa sledećim parametrima:

    prvi - 7,372 bajta

    drugi - 62,609 bajtova

    Prvi css je napisan kratko i čitljiv, tako da će se komprimirati gore.

    Online Compressor CleanCSS

    Adresa: www.cleancss.com

    Sasvim solidan servis, da vidimo rezultate njegove css kompresije.

    rezultat:

    prvo - komprimirano na 7.075 bajtova (96%)

    drugi je komprimiran na 52,797 bajtova (84,3%)

    Online FormatCSS kompresor

    Adresa: www.lonniebest.com/FormatCSS

    Ova usluga je dizajnirana više za formatiranje css datoteka, a ne za njihovo komprimiranje. CSS tekst se unosi pomoću copy/paste.

    rezultat:

    prvo - komprimirano na 8.105 bajtova (109,9%)

    drugi je komprimiran na 61,715 bajtova (98,5%)

    OnlinekompresorRobson CSS kompresor

    Adresa: iceyboard.no-ip.org/projects/css_compressor

    Usluga je fleksibilna u smislu učitavanja css izvornog koda. Možete učitati css u njega iz lokalnog direktorija, s Interneta ili kopirati/zalijepiti. Pogledajmo rezultate kompresije css datoteka.

    rezultat:

    prvo - komprimirano na 6.326 bajtova (86,3%)

    drugi - komprimiran na 48.985 bajtova (78,2%)

    Onlinecsshtml kompresor Tabifier

    Adresa: tools.arantius.com/tabifier

    Omogućava vam da komprimirate ne samo css, već i html kod. Ali rezultat nije baš impresivan, sami zaključite.

    rezultat:

    prvo - komprimirano na 7,876 bajtova (106,8%)

    drugi je komprimiran na 60,706 bajtova (96,9%)

    Kompresija CSS-a pomoću PHP-a

    CSS kompresija pomoću PHP-a dostupna je na nekoliko načina, ali ću dati samo jedan, najzanimljiviji za moje razumijevanje. Prednost css kompresije u php-u je dinamičnost i fleksibilnost u pogledu postavki kompresije, budući da ih sami postavljate koristeći vlastitu php skriptu. Moja skripta izgleda ovako:

    Vrlo jednostavan i zgodan kod koji ubacujete u css datoteku, koja mora biti povezana na najpoznatiji način. Posebnost ove php skripte je upotreba regularnih izraza koji uklanjaju sve komentare i razmake, čime komprimiraju css.

    Base 62 CSS kompresija

    Metoda je prilično zanimljiva i efikasna, ali je statična, odnosno svaki put kada promijenite svoju css datoteku, potrebno je proći kroz proceduru kompresije css datoteke. Ovaj postupak je opisan korak po korak u nastavku.

    1. Kompresijacss koristeći kompresor

    Morate koristiti jedan od CSS kompresora da uklonite sve razmake i poravnate CSS kod u jedan red.

    2. Stvaranjejs fajl

    Morate kreirati js datoteku i u nju postaviti sljedeći kod:

    Document.write("");

    Umjesto /*vaš stil */, umetnite rezultirajući niz u prvom koraku postupka kompresije.

    3. Base 62 kompresija

    Kao što vidite, sada imate js datoteku koju komprimujete pomoću usluge Packerhttp://dean.edwards.name/packer/

    Zalijepite kod svoje js datoteke u gornje polje i potvrdite izbor u polju za potvrdu Base62 kodiranje, nakon čega ćete dobiti rezultat u donjem polju.

    Ova metoda vam omogućava da komprimirate css datoteku veličine od 15 kb do 8 kb, odnosno za skoro 50%. Prednost ovako zamršene procedure je u tome što rezultujući kod umetnete u js datoteku u kojoj se nalaze ostali vaši js skripti i sve se učitava zajedno.

    Izložio sam sve svoje znanje o kompresijicss. Ako imate razmišljanja o više efikasne načine kompresijacss, objavite u komentarima. Hvala na pažnji!