Kaip optimizuoti CSS pristatymą – 7 paprasti žingsniai

css optimizavimo vektorinis vaizdasPraėjo tos dienos, kai dizaino ekspertai ir populiariausi pramonės tinklaraštininkai rekomendavo kurti ne daugiau kaip 30 kilobaitų tinklalapius …


Tuomet tikėtasi, kad šis „dangtelis“ valdys HTML, „JavaScript“, vaizdus, ​​CSS ir „Flash“. Būkime sąžiningi, kad visiškai viršytume 30 kb, nereikia daug.

„JavaScript“ ir CSS populiarėjant, tapo įprasta, kad vien CSS viršijo 30 KB ribą. Tai ypač pasakytina apie didesnes svetaines.

Kurdami ir kurdami savo svetainės puslapius, neturėtumėte per daug susikoncentruoti į savo „kilobaitų skaičių“. Svarbu išlaikyti savo puslapius optimizuotas ir griežtas rašant CSS.

Optimizavimas reiškia ne tik failų dydžio sumažinimą. Tai reiškia, kad jūsų puslapiai nebus nešvarūs ir išsipūtę, kad jie būtų kuo tvarkingesni ir efektyvesni. Sužinoję daugiau apie geriausią CSS optimizavimo praktiką, pastebėsite, kad automatiškai sukuriate mažesnius failų dydžius.

Čia yra 5 paprasti dalykai, kuriuos galite padaryti, kad optimizuotumėte CSS.

Kaip visiškai optimizuoti CSS pristatymą

1. Naudokite santrumpas

Rašymas trumpomis kalbomis tapo labai įprasta praktika. Tai yra pats paprasčiausias būdas sumažinti savo kodą ir tai, kiek laiko jis užtrunka. Jei dar to nepadarote, nėra tokio laiko, kaip dabar.

css šrifto nuosavybė

Yra daugybė elementų, kuriems galite naudoti santrumpas, tačiau labiausiai paplitę yra:

  • Marža
  • Padėklas
  • Šriftas
  • Kontūras
  • Pasienis
  • Bendrosios aplinkybės
  • Sąrašo stilius

sutrumpintos konfigūracijos reikšmėsTaip pat galite derinti vertybes naudodami santrumpas. Nurodydama skirtingas reikšmes, naršyklė iš esmės naudos nurodytą būdą aiškinti taisykles.

Naudojant bet kurią sutrumpintą valią padaryk savo kodą daug trumpesnį. Sutaupote ženklų ir eilučių.

Jei visose įmanomose vietose naudosite trumpinius, tai gali žymiai sumažinti bendrą failo dydį.

2. Atsikratykite įsilaužimų

ie CSS taisyklėJei norite aptarnauti IE specifines CSS taisykles, naudodamiesi sąlyginiais CSS įsilaužimais, galite gauti mažesnio ir švaresnio numatytojo CSS failo pateikimo pranašumą..

Tai padeda naršyklėms, kurios labiau atitinka standartus. Tačiau papildomą puslapio svorį atsiųs tik tam reikalingos naršyklės.

Jei turite naudoti įsilaužimą, būtina, kad jūsų naudojamas kodas atitiktų jūsų „Internet Explorer“ versiją..

Yra daugybė iš anksto parašytų kodų, kurie naudojami kaip įsilaužimai, jei nenorite rašyti savo. Tiesiog skirkite laiko iš tikrųjų pažvelgti į iš anksto parašytą kodą ir įsitikinkite, kad jis tikslus kitaip tai gali sukelti dar daugiau problemų.

Dabar, jei galite naudoti CSS norimiems rezultatams pasiekti, tai padarykite be jokių įsilaužimų. Žinoma, tai priklauso nuo to, ar visi kiti dalykai yra lygūs. Bendras kodas bus daug lengvesnis ir paprastesnis, jei svetainėje naudosite mažiau įsibrovėlių.

3. Būkite protingi naudodami tarpą

Jūsų CSS kodui, tarpas yra būtinas už skaitomumą.

Tarpas tarp jų yra elementai, tokie kaip skirtukai, tarpai ir papildomos eilučių pertraukos. Kiekvienas tarpo tarpas, kurį galite pašalinti, yra panašus į simbolio pašalinimą.

pašalinti tuščias eilutesTačiau siekiant mažesnio failo dažnai nerekomenduojama pereiti prie tarpo. Vis tiek turite išlaikyti optimalų savo tinklalapių skaitomumą.

Tarpas yra svarbus formatavimo metu, todėl norite rasti pusiausvyrą. Jei rašote dideliais teksto blokais, kad neliktų tarpo, trumpas skaitytojų dėmesys internete privers juos spustelėti.

Vienas iš būdų tiek mažesniam failo dydžiui, tiek skaitomumui užtikrinti – nukrauti skirtukus ir įterpti tik vieną eilutę tarp pastraipų. Tai suteikia pakankamai tarpo skaitomumo požiūriu, tačiau taip pat pašalina kai kuriuos tarpus, kurie nėra būtini.

Dabar jūsų CSS failo gamybos versijoje galite pašalinti tarpą. Tai vis tiek bus jūsų darbo byloje.

Tai dar vienas būdas padaryti kompromisą, kad turėtumėte ir mažesnius failus, ir skaitomą formatą.

4. Slyvų atstatymas ir sistemos

Kai naudojate CSS sistemą, būtinai peržiūrėkite dokumentus.

Ne mažiau svarbu pažvelgti į kiekvieną eilutę, esančią jūsų CSS faile. Kartais gali paaiškėti, kad yra keletas taisyklių, kurių nenorite laikytis dabartiniame projekte. Jas galima pašalinti.

pašalintos nenaudojamos css taisyklės

Galite pastebėti, kad pristatymo detales galite pasiekti glaustai ir elegantiškai …

Tai gali būti ne tai, ką paprastai naudojate, tačiau jei tai veikia, tai gali leisti švaresnį pagrindą. Kai žinote apie juos, tai taip pat padeda išvengti netyčinio taisyklių rinkinio dubliavimo.

Ta pati informacija taikoma ir iš naujo nustatant duomenis. Kai naudojate iš naujo nustatymus, jie padeda neutralizuoti numatytąjį naršyklės stilių. Dabar, jei esate susipažinęs su kuriama svetaine, neretai rasite tam tikras deklaracijas, kad žinote, kad jums nereikia.

Pavyzdžiui, bendrame tinklaraštyje greičiausiai jų nenaudosite. Tiesiog atsikratykite visko, ko jums nereikia konkrečioje svetainėje, kurią statote. Tu gali užtikrinkite geriau optimizuotą darbą, kai naudojate taisyklių rinkinį dėl atstatymo ar rėmelio.

Tačiau jų numatytojoje būsenoje jie neturėtų būti priimami. Norėdami, kad CSS failai būtų lengvai skaitomi ir liesi, žiūrėkite į kiekvieną deklaraciją atskirai ir supjaustykite nereikalingas.

5. Ateities įrodymas jūsų CSS

Css sintaksė

Kitas naudingas CSS optimizavimo variantas: atskirkite didžiąją dalį taisyklių nuo konkretaus išdėstymo deklaracijų.

Jei tai įmanoma, priskirkite maketą individualiam failui. Jei ne, bent jau savo skirsnio suteikimas gali būti naudingas.

Galų gale, padėties nustatymas ir plūdės – kurios yra dabartiniai metodai naudojant CSS – nebuvo skirti naudoti kaip maketavimo įrankiai.

Kai kurie netgi sako, kad tai iš tikrųjų yra panašūs į hacker išdėstymą. Šiuo metu nėra perspektyvios alternatyvos ir tikiuosi, kad pasirodžius sutartiems išdėstymo standartams, jie pradės gauti palaikymą iš naršyklių..

Kai tik ši parama įvyks, neturėtų būti labai sunku iškeisti „modelio dėžutės“ savybes, kurios yra nulaužtos prieš tas, kurios yra skirtos maketams..

Šiuo metu geriausias pasirinkimas yra tvarkyti savo išdėstymą naudojant tinkamas savybes. Paprastai tai sumažina puslapio svorį efektyviau, nei naudojant ribotą savybių rinkinį, kurį šiuo metu galima kompensuoti.

6. Visada atnaujinkite savo darbo dokumentus

Nesvarbu, ar dirbate svetainėje kaip komanda, ar atskirai, būtina sekti viską, ką padarėte.

Pvz., Vienas, galite pamiršti ką nors, ką padarėte. Kaip komanda, kažkas gali ką nors padaryti, o jūs negalite to žinoti, kol neatliksite pakeitimų, dėl kurių gali kilti problemų dėl įvairių kodo elementų.

pridedant css komentarąKodo kopijavimas kelia didžiulį susirūpinimą tiek komandoms, tiek individualiems dizaineriams, ypač kai naudojami populiarūs svetainių kūrėjai. „Wix“, „Squarespace“ ir kita svetainių kūrimo programinė įranga yra žinomas dėl to, kad dubliuoja kodą arba jo visiškai nėra savo duomenų bazėje.

Naudojant stiliaus lentelių vadovus ir žymėjimo vadovus galima pasirinkti dokumentus. Taip pat galite naudoti CSS komentarus – tai dar viena galimybė, ir tai gali būti naudinga norint atskirti ilgus CSS failų elementus. Įrašę juos į stiliaus ar žymėjimo vadovą, jie negali pridėti failo dydžio.

Vienas greičiausių būdų išsklaidyti kodą yra tą patį darbą atlikti du kartus. Kodavimas yra sudėtingas, todėl būtina saugoti tikslius visko, ką padarėte, dokumentus.

Jei dirbate vienas, idealiausia peržiūrėti šią dokumentaciją kiekvieną kartą atsisėdus, kad galėtumėte pradėti dirbti. Dirbdami kaip komandos dalis, įsitikinkite, kad visi kodavo tame pačiame dokumente laikosi bendruomenės stiliaus ar žymėjimo vadovo kad kodavimo pokyčiai būtų lengvai suprantami visiems grupės nariams.

7. Suspauskite savo failus (CSS Optimization 101)

css suspaudimo ir optimizavimo gif

Suspaudimas: čia yra šiek tiek daugiau nei tai …

Vienas efektyvus būdas optimizuoti CSS yra suspaudimo naudojimas. Tai būdas užtikrinti, kad jūsų failai būtų draugiški naršyklėms, net jei jie neįskaitomi žmonėms.

Palyginti su darbinėmis kopijomis, tai bus tik nedidelė dalis. Yra įvairių programų, kuriomis galite pasinaudoti, kad palengvintumėte glaudinimo procesą.

Jie atliks užduotis, pvz., Suras ir pataisys visas CSS savybes, kurios perrašomos viena ant kitos, suspaudžia tarpą ir ieško galimybių naudoti CSS.

Be šių programų patogumo, jie taip pat gali padėti sužinoti daugiau apie užduotis, kurias galite atlikti ranka, jei norite. Norėdami padėti suformatuoti CSS failus, taip pat galite naudoti įvairius teksto redaktorius.

Jie gali aptarnauti įvairių jūsų turimų CSS failų versijas. Paprastai tai atliekama naudojant PHP. Jei norite naudoti optimizavimo ir glaudinimo įrankius, prieš pasirinkdami sau tinkamiausią, būtinai peržiūrėkite kelias parinktis.

Dabar šios programos paprastai padeda sumažinti klaidas, tačiau jos nėra tobulos. Dėl to, naudodamiesi programa, visada turėtumėte peržiūrėti CSS, kad įsitikintumėte tikslumu. Optimizuotas ir švarus kodas yra labai svarbus ne tik failo dydžiui, bet ir skaitomumui bei priežiūrai.

Tavo eilė

Čia aptarti principai yra svarbūs CSS, bet ir „JavaScript“, HTML bei kitų programavimo kalbų aspektai. Palyginti su jūsų svetainės perteikimu, CSS failai nėra tokie pastebimi galutiniam vartotojui.

Tačiau čia aptarti principai padeda plėtoti ir vartotojo patirtį.

Geriausios žiniatinklio prieglobos įmonės padės jums optimizuoti CSS. Greitesnės svetainės padaro jus laimingu klientu, tačiau mažesni failai taip pat neapkrauna jų serverių.

Mes išbandėme kiekvieną Kanados žiniatinklio prieglobą ir rekomenduojame „SiteGround“. Jie ne tik padeda jums optimizuoti CSS pristatymą, bet ir nepakartojama jų techninė pagalba.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map