CSS optimizavimas – 21 būdas pagreitinti jūsų svetainę

spausdinti · Время на чтение: 8vyras · pateikė · Paskelbta · Atnaujinta

daugintisKlausyti straipsnio

Kaip optimizuoti CSS našumui.

css turi eiti per gana sudėtingą vamzdyną, kaip ir HTML ir JavaScript. Naršyklė turi parsisiųsti failus iš serverio, tada pereikite prie jų analizavimo ir pritaikymo DOM. Dėl ekstremalių optimizavimo lygių šis procesas paprastai yra gana greitas – mažiems žiniatinklio projektams, kurie nėra pagrįsti karkasais, CSS paprastai sudaro tik nedidelę viso išteklių suvartojimo dalį.

Rėmeliai pažeidžia šią pusiausvyrą. Įtraukite „JavaScript“ GUI krūvą, pvz., „jQuery“ vartotojo sąsają, ir stebėkite, kaip jūsų CSS, JS ir HTML auga eksponentiškai. Dažnai kūrėjai nesijaučia blogai – sėdėdami prie galingos aštuonių branduolių darbo vietos su T3 internetu, niekam nerūpi greitis. Tai keičiasi, kai atsiranda delsos arba įrenginiai su procesoriaus apribojimais.

CSS optimizavimas reikalauja daugialypio požiūrio. Nors ranka rašytą kodą galima sumažinti naudojant įvairius metodus, kartoti sistemos kodą ranka yra neefektyvu. Tokiais atvejais naudojant automatinį minimizatorių gaunami geresni rezultatai.
Šie veiksmai padės optimizuoti CSS. Ne visi jie gali būti tiesiogiai taikomi jūsų projektui, turėkite tai omenyje.

Naudokite nuorodų CSS pasiūlymus

CSS optimizavimas greitam puslapio įkėlimui.

Greičiausias CSS sakinys yra tas, kuris niekada nėra analizuojamas. Naudodami sutrumpintus pasiūlymus, tokius kaip toliau parodyta lauko deklaracija, smarkiai sumažinsite CSS failų dydį. Daug papildomų stenogramų galima rasti paieškojus „CSS Shorthand“.

Štai pavyzdys:

p { paraštė-viršus: 1px;
    paraštė-dešinė: 2px;
    paraštė-apačia:  3 piks;
    paraštė-kairė: 4 piks; }

p { marža: 1px 2px 3px 4px; }

Pašalinkite nenaudojamą CSS kodą

Akivaizdu, kad pašalinus nereikalingas žymėjimo dalis labai padidės greitis. „Google Chrome“ naršyklė turi šią funkciją.

Tiesiog eikite į Rodinys > Kūrėjas > Kūrėjo įrankiai, atidarykite skirtuką Šaltiniai naujausioje versijoje ir atidarykite komandų meniu. Po to pasirinkite „Rodyti aprėptį“ ir pasigrožėkite aprėpties analizės langu, kuriame paryškinamas nenaudojamas kodas dabartiniame tinklalapyje.

Dirbkite su CSS patogesniu būdu

Naršymas naudojant eilutę po eilutės analizę nebūtinai yra patogus. „Chrome“ žiniatinklio našumo auditas pateikia panašią informaciją – tiesiog atidarykite ją įrankių juostoje, pasirinkite Rodinys > Kūrėjas > Kūrėjo įrankiai > Auditas ir paleiskite. Kai tai bus padaryta, pasirodys probleminių elementų sąrašas.

Visada žinokite apie problemas, susijusias su jūsų stiliumi

Atminkite, kad automatinis CSS analizavimas visada gali sukelti klaidų. Pakeitę CSS failus sumažintais, atlikite išsamų visos svetainės testą – niekada nežinote, kokias klaidas padarė optimizavimo priemonė. Ir toliau tinkamas žiniatinklio priegloba gali padėti išlyginti jūsų svetainės raukšles.

Inline Critical CSS

Išorinių stiliaus lapų įkėlimas užtrunka dėl delsos – ar kas nors prisimena „nestiliuoto turinio blyksnį“? Tokiu būdu svarbiausias kodo dalis galima įdėti į antraštės žymą.

Tačiau stenkitės nepersistengti. Atminkite, kad kodą taip pat turi perskaityti priežiūros darbus atliekantys žmonės.

Štai pavyzdys:

<html>
  <galva>
    <stilius>
      .mėlyna{spalva:mėlyna;}
    </stilius>
    </galva>
  <kūnas>
    <div klasė="mėlyna">
      Labas pasauli!
    </div>

 

Antilygiagreti analizė

@importuoti prideda jūsų CSS kodo struktūrą. Deja, privalumai nėra nemokami: kadangi importuojamas medžiagas galima sudėti, jų negalima analizuoti lygiagrečiai. Lygiagretesnis būdas naudoja daugybę žymų, kurias naršyklė gali gauti iš karto.

Pavyzdys:

@importuoti url("a.css");
@importuoti url("b.css");
@importuoti url(c.css);
v <link rel="stiliaus lapas" href="a.css"> <link rel="stiliaus lapas" href="b.css"> <link rel="stiliaus lapas" href=c.css>

 

Pakeiskite vaizdus CSS

Prieš kelerius metus permatomų PNG failų rinkinys, skirtas sukurti permatomus efektus svetainėse, buvo įprastas dalykas. Šiuo metu CSS filtrai yra išteklių taupymo alternatyva. Pavyzdžiui, šį veiksmą lydintis fragmentas užtikrina, kad atitinkamas vaizdas būtų rodomas kaip pilkos spalvos jo versija.

Pavyzdys:

img { -webkit-filtras: pilkos spalvos (100%); /* senas safari */ filtras: pilkos spalvos (100%); }

 

Naudokite spalvų derinius

Sveikas protas rodo, kad šešių skaitmenų spalvų aprašai yra efektyviausias būdas išreikšti spalvas. Taip nėra – kai kuriais atvejais sutrumpinti aprašymai ar spalvų pavadinimai gali būti trumpesni.

taikinys { fono spalva: #ffffff; }
taikinys { fone: #fff; }

 

Pašalinkite nereikalingus nulius ir vienetus

CSS palaiko daugybę vienetų ir skaičių formatų. Jie yra sveikintinas optimizavimo tikslas – galima pašalinti ir galinius, ir galinius nulius, kaip parodyta toliau pateiktame fragmente. Be to, atminkite, kad nulis visada yra nulis ir kad pridėjus aspektą esančios informacijos vertė nepadidėja.

kamšalas: 0,2 em;
marža: 20,0 em;
vertė: 0px;
kamšalas: .2em;
marža: 20 em;
vertė: 0;

 

Pašalinkite papildomus kabliataškius

Šis optimizavimas yra labai svarbus, nes jis turi įtakos kodo pakeitimams. CSS specifikacija leidžia praleisti paskutinį kabliataškį savybių grupėje. Kadangi šiuo optimizavimo metodu sutaupoma minimali, tai daugiausia minime tiems, kurie dirba su automatiniu optimizatoriumi.

p {
. . .
šrifto dydis: 1,33 em
}

 

Naudokite tekstūros spritus

Kelių mažų sprite įkėlimas neefektyvus dėl protokolo papildomų išlaidų. CSS sprites sujungia mažų vaizdų seriją į vieną didelį PNG failą, kuris vėliau suskaidomas naudojant CSS taisykles. Tokios programos kaip tekstūros pakuotojas , labai supaprastina kūrimo procesą.

.parsisiųsti {
  plotis:80 piks; 
  aukščio:31 piks; 
  fono padėtis: -160px -160px
}
.download:hover {
  plotis:80 piks; 
  aukščio:32 piks; 
  fono padėtis: -80px -160px
}

 

Ištrinkite nepageidaujamą pikselį

Vienas puikus būdas pagerinti našumą yra CSS standarto funkcija. Laikoma, kad skaitinės reikšmės be vienetų yra pikseliai – pašalinus pikselius kiekvienam skaičiui sutaupoma po du baitus.

h2 {kamšalas:0px; marža:0px;}
h2 {kamšalas:0; marža:0}

 

Venkite griežtų proporcijų

Analizė parodė, kad kai kurios žymos kainuoja daugiau nei kitos. Sąrašas, pateikiamas kartu su šiuo žingsniu, laikomas ypač dideliu našumui – venkite to, kai turite galimybę tai padaryti.

kraštinės spindulio langelio šešėlio transformacija
    filtras
    :n-tas vaikas
    padėtis: fiksuotas;
    ir tt

 

Pašalinkite nereikalingas erdves

Tarpai – pagalvokite apie skirtukus, karietų grįžimą ir tarpus – palengvina kodo skaitymą, tačiau analizuojančiojo požiūriu nedaro daug. Pašalinkite juos prieš išsiunčiant. Dar geriau, deleguokite šį darbą apvalkalo scenarijui ar panašiam įrenginiui.

Pašalinti nepageidaujamus komentarus

Komentarai taip pat nenaudingi rengėjui. Sukurkite savo analizatorių, kad pašalintumėte juos prieš pristatymą. Taip ne tik sutaupoma pralaidumo, bet ir užpuolikams bei klonuotojams sunkiau išsiaiškinti, kas slypi už kodo.

Naudokite automatinį suspaudimą

„Yahoo“ vartotojo sąsajos komanda sukūrė programą, kuri atlieka daug glaudinimo darbų. Jis pateikiamas kaip JAR failas ir gali būti paleistas su jūsų pasirinktu JVM.

java -jar yuicompressor-xyzjar
Naudojimas: java -jar yuicompressor-xyzjar [parinktys] [įvesties failas] Visuotinės parinktys -h, --help Rodo šią informaciją --type Nurodo įvesties failo tipą

 

Paleisti iš NPM

Jei norite integruoti produktą į Node.JS, apsilankykite npmjs.com/package/yuicompressor . Prastai prižiūrimoje saugykloje yra įpakavimo failų rinkinys ir „JavaScript“ API.

var kompresorius = reikalauti('yuikompresorius');
 kompresorius.suspausti('/path/to/ failą arba JS eilutę', {
    //Kompresoriaus parinktys:
    simbolių rinkinys: "utf8",
    tipo: "js",

 

Kontroliuokite Sasą ir kitus

Nors CSS parinkiklio našumas nėra toks svarbus kaip prieš keletą metų (žr. šaltinį), tokios sistemos kaip Sass kartais sukuria itin sudėtingą kodą. Kartkartėmis peržiūrėkite išvesties failus ir pagalvokite, kaip optimizuoti rezultatus. Norite pasidalinti rezultatais su komanda? Saugokite failus viešoje debesų saugykloje.

Nustatyti talpyklą

Senas posakis sako, kad greičiausias failas yra tas, kuris niekada nepraeina per laidą. Naršyklės talpyklos užklausa tai pasiekiama efektyviai. Deja, talpyklos antraštes reikia nustatyti serveryje. Tinkamai išnaudokite du ekrano kopijose rodomus įrankius, nes jie suteikia greitą būdą analizuoti pakeitimų rezultatus.

Išvalyti talpyklą

Dizaineriai dažnai nemėgsta kaupimo talpykloje, nes bijo problemų dėl būsimų pokyčių. Puikus būdas išspręsti šią problemą yra įtraukti žymas su failo pavadinimu. Deja, šį žingsnį lydinčiame kode aprašyta schema veikia ne visur, nes kai kurie tarpiniai serveriai atsisako talpykloje talpinti failus su „dinaminiais“ keliais.

<nuoroda rel="stiliaus lapas" href="style.css?v=1.2.3">

 

Nepamirškite pagrindų

CSS optimizavimas yra tik dalis optimizavimo pastangų. Jei jūsų serveris nenaudoja HTTP/2 ir gzip glaudinimo, perkeliant duomenis sugaištama daug laiko. Laimei, išspręsti šias dvi problemas yra gana paprasta. Mano pavyzdyje pateikiami keli plačiai naudojami Apache serverio nustatymai naudojant .htaccess failą. Jei atsidūrėte kitoje sistemoje, tiesiog žr. serverio dokumentaciją.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css

Man bus labai malonu, jei šis straipsnis bus jums naudingas. Na, aš ir toliau pridėsiu naujos atitinkamos medžiagos šia tema.

Dėkojame, kad skaitėte Nicola Top

Kuo įrašas naudingas?

Spustelėkite šypsenėlę, kad įvertintumėte!

Vidutinis reitingas 4.9 / 5. Įvertinimų skaičius: 8

Įvertinimų dar nėra. Pirmiausia įvertinkite.

Tau taip pat gali patikti...

1 atsakymas

  1. Илья parašė:

    Jūsų projektą seku jau seniai. Žiūriu į atsigavimą, labai malonu matyti pokyčius į gerąją pusę. Man patinka jūsų dizainas ir išdėstymas. Matosi, kad dirbate kokybiškai. Ačiū už pastangas.

Parašykite komentarą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *

dvylika − 3 =