CSS-i optimeerimine – 21 võimalust veebisaidi kiirendamiseks

printida · Время на чтение: 8мин · kõrval · Avaldatud · Uuendatud

paljunedaKuula artiklit

Kuidas optimeerida CSS-i jõudluse tagamiseks.

css peab läbima suhteliselt keeruka torujuhtme, just nagu HTML ja JavaScript. Brauser peab failid serverist alla laadida, seejärel sõeluge neid ja rakendage need DOM-i. Ekstreemse optimeerimistaseme tõttu on see protsess tavaliselt üsna kiire – väikeste veebiprojektide puhul, mis ei põhine raamistikel, moodustab CSS reeglina vaid väikese osa kogu ressursitarbimisest.

Raamid lõhuvad selle tasakaalu. Kaasake JavaScripti GUI virn, nagu jQuery kasutajaliides, ja vaadake, kuidas teie CSS, JS ja HTML kasvavad plahvatuslikult. Sageli ei tunne arendajad end halvasti – kui nad istuvad võimsa kaheksatuumalise T3 Internetiga tööjaama juures, ei huvita kiirus kedagi. See muutub, kui mängu tulevad latentsused või protsessoripiirangutega seadmed.

CSS-i optimeerimine nõuab mitmemõõtmelist lähenemist. Kuigi käsitsi kirjutatud koodi saab erinevate meetoditega vähendada, on raamistiku koodi käsitsi itereerimine ebaefektiivne. Sellistel juhtudel annab automaatse minimeerija kasutamine paremaid tulemusi.
Järgmised sammud aitavad teil CSS-i optimeerida. Pidage meeles, et mitte kõik neist ei pruugi olla teie projekti jaoks otseselt kohaldatavad.

Kasutage otsetee CSS-i soovitusi

CSS-i optimeerimine lehe kiireks laadimiseks.

Kiireim CSS-lause on see, mida kunagi ei sõeluta. Lühikeste soovituste (nt allpool näidatud väljadeklaratsiooni) kasutamine vähendab teie CSS-failide suurust drastiliselt. Palju täiendavaid kiirkirju leiate guugeldades "CSS Shorthand".

Siin on näide:

lk { margin-top: 1px;
    margin-parem: 2 pikslit;
    marginaal-alumine:  3 pikslit;
    margin-vasak: 4 pikslit; }

lk { marginaal: 1px 2px 3px 4px; }

Eemaldage kasutamata CSS-kood

Märgistuse mittevajalike osade kõrvaldamine toob ilmselgelt kaasa tohutu kiiruse tõusu. Google Chrome'i brauseris on see funktsioon juba karbist väljas.

Avage lihtsalt Vaade > Arendaja > Arendaja tööriistad, avage uusimas versioonis vahekaart Allikad ja avage käsumenüü. Pärast seda valige "Näita katvust" ja imetlege katvuse analüüsi akent, mis tõstab esile praegusel veebilehel kasutamata koodi.

Töötage CSS-iga mugavamal viisil

Liikumine ridade kaupa analüüsides ei ole tingimata mugav. Chrome Web Performance Audit tagastab sarnase teabe – lihtsalt avage see tööriistaribal, valige Vaade > Arendaja > Arendaja tööriistad > Audit ja käivitage see. Kui see on tehtud, kuvatakse probleemsete üksuste loend.

Olge alati teadlik oma stiilidega seotud probleemidest

Pidage meeles, et automaatne CSS-i sõelumine võib alati põhjustada vigu. Tehke kogu veebisaidi põhjalik test pärast CSS-failide asendamist minimeeritud failidega – te ei tea kunagi, milliseid vigu optimeerija tegi. Ja edaspidi võib korralik veebimajutaja aidata teil saidi kortse siluda.

Tekstisisene kriitiline CSS

Väliste stiililehtede laadimine võtab latentsuse tõttu aega – kas keegi mäletab "stiilita sisu välku"? Nii saab päisesildile paigutada kõige olulisemad koodijupid.

Püüdke siiski mitte üle pingutada. Pidage meeles, et koodi peavad lugema ka hooldustööd tegevad inimesed.

Siin on näide:

<html>
  <pea>
    <stiilis>
      .sinine{värvi:sinine;}
    </stiilis>
    </pea>
  <keha>
    <div klass="sinine">
      Tere, Maailm!
    </div>

 

Paralleelvastane analüüs

@import lisab teie CSS-koodile struktuuri. Kahjuks pole eelised tasuta: kuna importi saab pesastada, ei saa neid paralleelselt sõeluda. Paralleelsem viis kasutab rida silte, mille brauser saab korraga hankida.

Näide:

@import url("a.css");
@import url("b.css");
@import url(c.css);
v <link rel="stiilileht" href="a.css"> <link rel="stiilileht" href="b.css"> <link rel="stiilileht" href=c.css>

 

Asendage oma pildid CSS-iga

Mõni aasta tagasi oli poolläbipaistvate PNG-failide komplekt veebisaitidel läbipaistvate efektide loomiseks tavaline. Praegu on CSS-filtrid ressursse säästev alternatiiv. Näiteks tagab selle sammuga kaasnev koodilõik, et kõnealune pilt kuvatakse enda halltoonis versioonina.

Näide:

img { -veebikomplekti filter: halltoonid (100%); /* vana safari */ filter: halltoonid (100%); }

 

Kasutage värvikombinatsioone

Terve mõistus ütleb, et kuuekohalised värvikirjeldused on kõige tõhusam viis värvide väljendamiseks. See pole nii – mõnel juhul võivad lühendatud kirjeldused või värvinimed olla lühemad.

sihtmärk { taustavärv: #ffffff; }
sihtmärk { taustal: #fff; }

 

Eemaldage mittevajalikud nullid ja ühed

CSS toetab laia valikut ühikuid ja numbrivorminguid. Need on optimeerimise jaoks teretulnud sihtmärk – nii lõpu- kui ka lõpunulle saab eemaldada, nagu on näidatud alloleval lõigul. Samuti pidage meeles, et null on alati null ja dimensiooni lisamine ei suurenda sisalduva teabe väärtust.

polsterdus: 0,2 em;
marginaal: 20,0 em;
väärtus: 0 pikslit;
polsterdus: .2em;
marginaal: 20 em;
väärtus: 0;

 

Eemaldage täiendavad semikoolonid

See optimeerimine on mõnevõrra kriitiline, kuna see mõjutab koodimuutusi. CSS-i spetsifikatsioon võimaldab teil jätta ära atribuutide rühma viimase semikooloni. Kuna selle optimeerimismeetodiga saavutatav kokkuhoid on minimaalne, mainime seda peamiselt neile, kes töötavad automaatse optimeerijaga.

lk {
. . .
fondi suurus: 1,33 em
}

 

Kasutage tekstuuri spraite

Mitme väikese spraidi laadimine on protokolli üldkulude tõttu ebaefektiivne. CSS-i spraidid ühendavad väikeste piltide seeria üheks suureks PNG-failiks, mis seejärel CSS-i reeglite abil osadeks jagatakse. Programmid nagu tekstuuripakendaja , lihtsustab oluliselt loomisprotsessi.

.lae alla {
  laius:80 pikslit; 
  kõrgus:31 pikslit; 
  taustapositsioon: -160px -160px
}
.download:hover {
  laius:80 pikslit; 
  kõrgus:32 pikslit; 
  taustapositsioon: -80px -160px
}

 

Kustutage soovimatud pikslid

Üks suurepärane viis jõudluse parandamiseks on CSS-i standardi funktsioon. Ühikuteta arvväärtusi peetakse piksliteks – pikslite eemaldamine säästab iga numbri kohta kaks baiti.

h2 {polsterdus:0 pikslit; marginaal:0 pikslit;}
h2 {polsterdus:0; marginaal:0}

 

Vältige nõudlikke proportsioone

Analüüs näitas, et mõned sildid maksavad rohkem kui teised. Selle sammuga kaasnevat loendit peetakse jõudluse osas eriti nõudlikuks – vältige seda, kui teil on selleks võimalus.

piiri-raadiusega kasti-varju teisendus
    filter
    :n-ne laps
    positsiooni: fikseeritud;
    jne.

 

Eemaldage mittevajalikud ruumid

Tühikud – mõelge tabeldusmärkidele, käru tagastustele ja tühikutele – muudavad koodi hõlpsamini loetavaks, kuid parseri seisukohast ei tee see palju. Eemaldage need enne saatmist. Veelgi parem, delegeerige see töö shelliskriptile või sarnasele seadmele.

Eemaldage soovimatud kommentaarid

Ka kommentaarid on koostajale kasutud. Looge oma parser, et need enne kohaletoimetamist eemaldada. See mitte ainult ei säästa ribalaiust, vaid muudab ründajate ja kloonijate jaoks ka raskemaks koodi taga peituva väljaselgitamise.

Kasutage automaatset tihendamist

Yahoo kasutajaliidese meeskond on loonud rakenduse, mis teeb palju tihendustööd. See tuleb JAR-failina ja seda saab käivitada teie valitud JVM-iga.

java -jar yuicompressor-xyzjar
Kasutamine: java -jar yuicompressor-xyzjar [valikud] [sisendfail] Globaalsed suvandid -h, --help Kuvab selle teabe --type Määrab sisendfaili tüübi

 

Käivitage NPM-ist

Kui eelistate toote Node.JS-i integreerida, külastage npmjs.com/package/yuicompressor . Halvasti hooldatud hoidla sisaldab ümbrisfailide komplekti ja JavaScripti API-d.

var kompressor = nõuda('yuikompressor');
 kompressor.suruma kokku('/tee/to/ faili või JS-i stringi', {
    //Kompressori valikud:
    märgistik: 'utf8',
    tüüp: "js",

 

Hoidke Sass ja teised kontrolli all

Kuigi CSS-i valija jõudlus pole nii kriitiline kui mõni aasta tagasi (vt ressurssi), toodavad sellised raamistikud nagu Sass mõnikord äärmiselt keerukat koodi. Vaadake aeg-ajalt väljundfailid üle ja mõelge, kuidas tulemusi optimeerida. Kas teil on tulemusi meeskonnaga jagada? Salvestage faile avalikku pilvesalvestusse.

Seadistage vahemälu

Vanasõna ütleb, et kiireim fail on see, mis kunagi üle juhtme ei lähe. Brauseri vahemälu päringute esitamine saavutab selle tõhusalt. Kahjuks tuleb vahemällu salvestamise päiste seadistamine teha serveris. Kasutage kahte ekraanipiltidel näidatud tööriista hästi, need annavad kiire võimaluse muudatuste tulemuste analüüsimiseks.

tühjendage vahemälu

Disaineritele ei meeldi sageli vahemällu salvestamine, kuna kardavad eelseisvate muudatustega kaasnevaid probleeme. Hea viis selle probleemi lahendamiseks hõlmab failinimega siltide lisamist. Kahjuks ei tööta selle sammuga kaasnevas koodis kirjeldatud skeem kõikjal, kuna mõned puhverserverid keelduvad "dünaamiliste" teedega faile vahemällu salvestamast.

<link rel="stiilileht" href="style.css?v=1.2.3">

 

Ärge unustage põhitõdesid

CSS-i optimeerimine on vaid osa optimeerimistööst. Kui teie server ei kasuta HTTP/2 ja gzip tihendamist, kulub andmete edastamisele palju aega. Õnneks on nende kahe probleemi lahendamine üsna lihtne. Minu näide näitab mitmeid sätteid laialdaselt kasutatava Apache serveri jaoks, mis kasutab .htaccess-faili. Kui leiate end mõnest muust süsteemist, vaadake lihtsalt serveri dokumentatsiooni.

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

Mul on väga hea meel, kui see artikkel on teile kasulik. Noh, ma jätkan uute asjakohaste materjalide lisamist sellel teemal.

Täname, et lugesite Nicola Topi

Kui kasulik postitus on?

Hindamiseks klõpsake emotikonil!

keskmine hinne 4.9 / 5. Hinnangute arv: 8

Hinnanguid veel pole. Hinda kõigepealt.

Sulle võib meeldida ka...

1 vastus

  1. Илья ütleb:

    Olen teie projekti juba pikka aega jälginud. Vaatan taastumist, väga tore on näha muutusi paremuse poole. Mulle meeldib teie disain ja paigutus. On näha, et töötate kvaliteedi nimel. Täname teid pingutuste eest.

Lisa kommentaar

Sinu e-postiaadressi ei avaldata. Nõutavad väljad on tähistatud *-ga

kaheksa − seitse =