CSS-i optimeerimine

✔️ Silt: CSS-i optimeerimine

CSS-i optimeerimine on protsess, mis parandab veebilehtede jõudlust ja laadimiskiirust, vähendades CSS-failide suurust ja lihtsustades nende struktuuri. See on oluline kasutajakogemuse parandamiseks ja otsingumootori paremusjärjestuse tõstmiseks.

Kuidas optimeerida CSS-i – CSS-i lühendamine

CSS-i lühendamine tähendab koodist kõigi mittevajalike märkide (nt tühikud, reavahetused ja kommentaarid) eemaldamist. See vähendab CSS-faili suurust ja muudab selle laadimise kiiremaks.

CSS-failide kombineerimine

Mitme CSS-faili ühendamine üheks võib samuti kiirendada lehe laadimist. Seda seetõttu, et brauser peab esitama serverile vähem päringuid.

Klassi ja ID järgi valijate kasutamine

Klassi- ja ID-valijate kasutamine sildivalijate asemel võib kiirendada CSS-i brauseris töötlemist. Klassi- ja ID-valijad on täpsemad ja võimaldavad brauseril kiiresti leida lehelt sobivad elemendid.

Stiilitellimuse optimeerimine

CSS-faili stiilide järjekord võib samuti mõjutada renderdamiskiirust. Lehe ülaosas olevatele elementidele rakendatavad stiilid tuleks paigutada CSS-faili ülaossa. See võimaldab brauseril lehe sisu kiiremini renderdada.

CSS-i optimeerimine on veebisaidi arendamise oluline aspekt. See aitab parandada kasutajakogemust ja parandada otsingumootorite asetust. CSS-i optimeerimise tehnikaid on palju, näiteks koodi lühendamine, failide ühendamine ning klassi- ja ID-valijate kasutamine.

CSS-i minimeerimine

CSS-i minimeerimine on CSS-koodi tihendamise protsess, eemaldades kõik mittevajalikud märgid, nagu tühikud, reavahetused ja kommentaarid. See vähendab CSS-faili suurust ja muudab selle laadimise kiiremaks. On erinevaid CSS-i minimeerimistööriistu, nagu CSS-minifier ja CleanCSS.

Pildi optimeerimine

Piltide optimeerimine võib samuti parandada lehe jõudlust. See tähendab piltide tihendamist võimalikult väikeseks suuruseks ilma kvaliteeti kaotamata. Piltide optimeerimiseks on erinevaid tööriistu, nagu TinyPNG ja JPEGmini.

CSS-i optimeerimisel on neli peamist aspekti:

1. Allalaadimise jõudlus – peamiselt vähendades faili suurust, vähendades allalaadimiste blokeerimist ja parandades samaaegsust.

2. Valija jõudlus.

3. Renderduse jõudlus.

4. Hooldatavus, töökindlus.

CSS-i optimeerimine – laadimise jõudlus

1. CSS-i tihendamine: kirjutatud CSS-i pakkimine ja tihendamine võib selle suurust oluliselt vähendada;

2. Ühtne CSS-stiil: kui nõutakse alumist ja vasakut veerist,

⟹ Mitu korda valige: marginaal: ülemine 0 alumine 0;

⟹ Aga margin-bottom: alt; margin-left: vasak; täitmine on tõhusam;

3. Vähenda @import kasutamist ja kasuta linki, sest viimane laaditakse lehe laadimisel kokku ja esimene peab enne laadimist ootama lehe laadimist;

4. Kujundage oma CSS-i paigutus targalt, pöörake tähelepanu stiili taaskasutamisele ja vähendage renderdusaega. Klassi ja ID valimiseks kasutage korduvkasutatavuse parandamiseks vähem globaalset vastet (nt *) ja määrake mõistlikult baasstiilid (nt tabeli määramine{}).

CSS-i optimeerimine – valija jõudlus

1. CSS-i valijad sobitatakse paremalt vasakule. Lapsvalijaid kasutades vaatab brauser kõiki alamelemente, et teha kindlaks, kas see on määratud element jne;

2. Vältige metamärkide kasutamist. Näiteks *{} arvutuste arv on hämmastav! Valige ainult need üksused, mida vajate.

3. Valige võimalikult vähe silte, kuid kasutage klassi. Näiteks: #nav li{}, saate li-le lisada klassi nime nav_item, valige .nav_item{} järgmiselt.

4. Ärge kasutage märgendeid identifikaatorite või klassivalijate kvalifitseerimiseks. Näiteks: ul#nav tuleks lihtsustada väärtuseks #nav.

5. Kasutage lastevalijat nii vähe kui võimalik ja vähendage selektori kaalu. Järeltulijate selektorite üldkulu on kõrgeim, püüdke selektorite sügavust hoida minimaalsena, kõrgeim tase ei ületa kolme kihti ja iga sildielemendi sidumiseks on rohkem kasutusklasse.

6. Mõtle pärimisele. Teadke, milliseid omadusi saab pärida, ja vältige nende omaduste reeglite kordamist.

CSS-i optimeerimine – renderdamise jõudlus

1. Kasutage hoolikalt suure jõudlusega atribuute: ujumine, positsioneerimine;

2. Minimeeri lehtede vahetamine ja ümberjoonistamine;

3. Korraldage ümber vastavalt css-i kirjutamise järjekorrale:

⟹ Positsioon: asukoht, ülemine, vasak, z-indeks, hõljuk, ekraan.

⟹ Suurus: laius, kõrgus, veerised, polsterdus.

⟹ Tekstiseeria: font, rea kõrgus, värv, tähtede vahe.

⟹ Taustapiir: taust, ääris.

⟹ Muu: animatsioon, üleminek.

4. Joonista ümber: ääris, piirjoon, taust, kast-vari, kui oskad taustavärvi kasutada, proovi tausta mitte kasutada;

5. Eemalda tühjad reeglid: {};

6. Kui atribuudi väärtus on 0, ühikuid ei lisata;

7. Atribuudi väärtus on ujuv kümnendarv 0.** ja 0 enne koma võib ära jätta;

8. Standardige erinevad brauseri eesliited: esikohal on need, millel on brauseri eesliited. Järgnevad standardatribuudid;

9. Ärge kasutage @import eesliidet, see mõjutab css-i laadimiskiirust;

10. Kasutage koodi hulga vähendamiseks täielikult ära CSS-i pärimisomadused;

11. Abstraktselt eraldada avalikud stiilid ja vähendada koodi hulka;

12. Selektor optimeerib pesastumist ja püüab vältida liiga sügavaid tasemeid;

13. css sprite pilt, sama lehe sama osa väike ikoon, mugav kasutada ja vähendada lehel olevate päringute arvu, kuid pilt ise muutub suuremaks, selle kasutamisel arvesta selgelt plussid ja miinused, ja seejärel kasutage seda;

14. Asetage css-fail lehe ülaossa.

Hooldus ja töökindlus

1. Ekstraktige samade atribuutidega stiile, integreerige need ja kasutage neid lehtedel klasside kaudu, et parandada CSS-i hooldatavust;

2.Eelmise järel on oocss ka üks võimalus css-i jõudlust parandada. Määrates korduvkasutatavad ja semantiliselt head baasklassid ning lisades need seejärel html-i, kasutavad seda tehnikat ka paljud kasutajaliidese raamistikud, näiteks :class=”btn btn-active btn-blue”;

3. Stiili ja sisu eraldamine: css-kood on määratletud välises css-is;

4. Mahuti ja stiili eraldamine;

⟹ Seda teemat käsitlevad materjalid on järgmised: