Kako optimizovati CSS kod na web sajtu

Optimizacija CSS koda nije visoko na listi prioriteta kada je u pitanju optimizacija web sajta, ali je svakako treba imati u vidu ako želite da vaš sajt bude maksimalno optimizovan i sa dobrim performansama. Zato ćemo u ovom tekstu objasniti kako optimizovati CSS kod. Za početak da vidimo kako CSS može uticati na performanse vašeg sajta.

Kako CSS utiče na performanse sajta

Možda na prvi pogled CSS deluje prilično nebitno kada je u pitanju uticaj na performanse, ali on ipak zahteva ozbiljno procesiranje, naročito ako su u pitanju grafički zahtevniji stilovi.

CSS blokiranje renderovanja

Kada je u pitanju renderovanje stranice, sve što blokira renderovanje zapravo usporava učitavanje i ujedno i prikazivanje te stranice posetiocu vašeg sajta. U takvoj situaciji korisnik će vrlo brzo izgubiti strpljenje i napustiti vaš sajt. Kao što znamo sve to negativno utiče na vaš SEO.

Javascript takođe može da blokira renederovanje, ali za razliku od CSS to je lako prevazići upotrebom različitih atributa. Kod CSS-a to jednostavno nije moguće, pa čak i kada je stranica keširana u browser-u, problem sa blokiranjem renerovanja ostaje.

Veliki CSS fajlovi zahtevaju vreme za procesiranje

Veličina stylesheet-a (CSS fajl) utiče na vreme potrebno da se on preuzme i procesira u CSS Object Model (CSSOM) koji browser, Javascript i API-ji koriste da prikažu stranicu. Iako su CSS fajlovi među najmanjim fajlovima na sajtu, ipak je bolje držati se pravila da je bolje imati što manji fajl.

CSS fajlovi mogu i da rastu

Kod kompleksnijih fajlova može biti problem da se pronađe koji su CSS stilovi još uvek u upotrebi a koji se više ne koriste. Developeri često pribegavaju taktici ostavljanja starog koda koji su prethodno pregazili nekim novim. Tako se dešava da komponente, stilovi i widget-i koji se više ne koriste ostaju u fajlu i nepotrebno ga uvećavaju. Zbog toga se dešava da takav CSS fajl vremenom naraste do mere da ga postane teško održavati.

CSS utiče na renderovanje

• Browser-i imaju tri faze renderovanja:
  • Layout faza izračunava dimenzije svakog elementa i način na koji on utiče na veličinu ili pozicioniranje elemenata na stranici.
  • Paint faza iscrtava vizualne delove svakog elementa na odvojenim podlogama: tekst, boje, slike, senke itd.
  • Kompozitna faza iscrtava svaku podlogu na stranici prema određenom redosledu u stack-u: pozicioniranje, z-index itd.

Alati za analizu CSS performansi

Kao developer sigurno dobar deo posla provodite u Dev tools-u svog omiljenog browser-a. Pored Dev tools-a postoji još nekoliko alata pomoću kojih možete proveriti optimizaciju vaših CSS ( i drugih) kodova. Tu su na primer WebPageTest, Google PageSpeed Insights, Chrome DevTools Real-Time Performance Monitor i sl. Ipak, u ovom tekstu ćemo pokazati samo primer iz Chrome Dev Tools-a, tačnije Network tab-a iz ovog tool-a.

U Chrome-u otvorite vaš sajt. Nakon što otvorite Dev Tools (F12) prebacite se na Network tab i reload-ujte stranicu. Čekirajte opciju Disable cache da biste sprečili da keširani fajlovi utiču na izveštaj. Takođe možete promeniti throttling da biste simulirali sporije mobilne mreže.

Osvežite stranicu da biste videli download i waterfall grafikon procesiranja.

Obratite pažnju da dugačke bar-ove u watarfall chart-u. Svaki takav bar znači da se iz nekog razloga element sporije učitava. Na ovom konkretnom primeru označeni red i svi redovi koji ga slede ne mogu da počnu sa preuzimanjem sve dok se procesiraju Javascript i render-blocking CSS fajlovi.

Koristite dobar hosting

Korišćenje dobrog hostinga sa serverima koji su fizički bliži vašim korisnicima doneće trenutne prednosti u pogledu performansi. Planovi hostinga se razlikuju po načinu i obimu pružanja usluge hostinga, pa ih delimo na sledeće opcije:

• Deljeni hosting (v. Shared hosting)
• Hosting na virtuelnom privatnom serveru (v. VPS hosting)
• Hosting na namenskom serveru (v. Dedicated server hosting)
• Klaud hosting (v. Cloud hosting)
• Upravljani hosting (v. Managed hosting)
• Kolokacija (v. Colocation).

U zavisnosti od tipa hostinga koji izaberete ili već koristite, imaćete više ili manje prvilegija da prilagodite okruženje koje odgovara vašoj aplikaciji. mCloud serveri se nalaze u Srbiji i obezbeđuju različite oblike modernih hosting rešenja.

Iskoristite funkcije za efikasnost browser-a i servera

Prema statistici oko 10% sajtova uopšte ne aktivira gzip (ili bolju) kompresiju, što je obično podrazumevana opcija servera. Gzip smanjuje veličinu CSS-a za 60% ili više komprimovanjem datoteka pre preuzimanja. Ovo neće popraviti loše napisan CSS, ali će kod biti ranije preuzet!

Takođe bi trebalo da aktivirate HTTP/2 koji šalje podatke u manjem binarnom formatu, komprimuje zaglavlja i može da pošalje više od jedne datoteke na istoj TCP vezi.

Optimizujte svoj CMS

CMS-ovi kao što su WordPress, Drupal i drugi mogu biti prošireni temama i plugin-ima / ekstenzijama koje imaju sopstveni CSS kod. Dobra je praksa da pokušate da optimizujete svoj CMS

• Uklonite nekorišćene plugine.
• Koristite lakše i kvalitetnije teme
• Omogućite keširanje sadržaja sajta

Optimizujte slike na sajtu

Slike ne podležu istom načinu obrade i prikazivanja kao HTML, CSS i JavaScript, ali čine veliki deo stranice i vašeg propusnog opsega. Iz tog razloga razmotrite:

• Uklanjanje nepotrebnih slika.
• Smanjenje veličine slika.
• Korišćenje odgovarajućeg formata slike — idealni su formati sa većom kompresijom kao što su WebP ili AVIF, ali možda i SVG za logotipe i grafikone.
• Zamena slika CSS gradijentima ili drugim efektima.
• Dodavanje atributa širine i visine HTML oznakama <img> ili korišćenje novog CSS svojstva odnosa širine i visine da bi se obezbedio odgovarajući prostor na stranici pre preuzimanja slike.

Uklonite neiskorišćeni CSS

Najbrži CSS stylesheet-ovi su oni koje nikada ne morate da učitavate ili renderujete! Pokušajte da uklonite/izmenite bilo koji CSS kod koji vam više nije potreban, kao što je onaj za stare stranice ili widget-e. Naravno ovo može niti problem kada su u pitanju veći sajtovi, jer kod takvih sajtova nije uvek najjasnije da li je određeni deo CSS koda baš važan ili može da se ukloni.

Postoje alati koji se koriste za analizu upotrebe HTML-a i CSS-a tako što crawl-uju preko sajta tražeći redundantne kodove. U određenim slučajevima je potrebno dodatno ih podesiti kako ne bi negativno uticali na učitavanje Javascript koda.

U pitanju su alati kao što su:

• UnCSS
• UnusedCSS
• PurgeCSS
• PurifyCSS

Racionalizujte korišćenje web fontova

Google fontovi i slične platforme sa fontovima su u velikoj meri olakšale upotrebu fontova, ali nekoliko redova koda sa linkovima ka tim fontovima može da rezultira dodatnim saobraćajem i opterećenjem propusnog opsega

Evo nekoliko predloga za optimizaciju fontova:

• Učitajte samo fontove koji su vam potrebni: Uklonite fontove koje ne koristite i proverite da li su baš neophodni neki novi fontovi koje planirate da koristite.
• Učitajte samo stilove fontova koji su vam potrebni:
• Uzmite u obzir promenljive fontove: promenljivi fontovi definišu veliki izbor stilova, koristeći vektorsku interpolaciju. Datoteka takvog fonta je malo veća, ali vam je potreban samo jedan umesto nekoliko. Rekurzivni font pokazuje fleksibilnost promenljivih fontova.
• Učitajte fontove sa svog lokalnog servera: Fontovi koji se sami hostuju su efikasniji od korišćenja servisa kao što je Google Fonts.
• Razmotrite korišćenje fontova koji su već dostupni u operativnom sistemu koji koristite: Google font od 500 kB može izgledati sjajno, ali da li bi neko zaista primetio ako pređete na uobičajeno dostupne fontove kao što su Helvetica, Arial, Georgia ili Verdana?

Izbegavajte CSS @import

Pravilo @import at-rule omogućava da CSS fajlovi budu umetnuti unutar drugih CSS fajlova:

/* main.css */
@import url("reset.css");
@import url("grid.css");
@import url("widget.css");

Ovo izgleda kao efikasan način za učitavanje manjih komponenti i fontova. Nažalost, svaki @import blokira renderovanje i svaki fajl mora da se učita i raščlani u nizu.

Više oznaka <link> u HTML-u je efikasnije i paralelno učitava CSS datoteke:

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="widget.css">

Izbegavajte Base64 kodiranje
Alatke mogu da kodiraju slike u base64 stringove, koje možete koristiti kao URL-e podataka u HTML <img> oznakama i CSS pozadini:

.background {
background-image: url('data:image/jpg;base64,ABC123...');
}

Ovo smanjuje broj HTTP zahteva, ali šteti CSS performansama:

• base64 stringovi mogu biti 30% veći od njihovog binarnog ekvivalenta.
• browser-i moraju da dekodiraju string pre nego što im slika bude dostupna
• izmena jednog piksela slike poništava celu CSS datoteku.
• Razmotrite base64 kodiranje samo ako koristite veoma male slike koje se retko menjaju gde rezultujući string nije značajno duži od URL-a.

Učitajte prvo CSS datoteke

Oznaka <link> obezbeđuje opcioni atribut preload koji može odmah da započne preuzimanje umesto da čeka pravu referencu u HTML-u:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
<!-- preload styles -->
<link rel="preload" href="/css/main.css" as="style" />
<!-- lots more code -->
<!-- load preloaded styles -->
<link rel="stylesheet" href="/css/main.css" />

Ovo je posebno korisno u WordPress-u i drugim CMS-ovima gde plugin može da ubaci dodatni CSS kod na stranicu.

Koristite Critical Inline CSS

Alati za analizu vam mogu predložiti da umetnete kritični CSS ili smanjiti stilove koji blokiraju renderovanje.

Koristite progresivno renderovanje

Progresivno renderovanje je tehnika koja definiše pojedinačne stilove za zasebne stranice ili komponente. Može biti korisna kod veoma velikih sajtova gde su pojedinačne stranice napravljene od širokog spektra komponenti.

Svaka CSS datoteka se učitava neposredno pre nego što se komponenta referencira u HTML-u:

<head>
<!-- core styles -->
<link rel="stylesheet" href="core.css" />
</head>
<body>
<!-- header -->
<link rel="stylesheet" href="header.css" />
<header>...</header>
<!-- primary content -->
<link rel="stylesheet" href="main.css" />
<main>
<!-- widget styling -->
<link rel="stylesheet" href="widget.css" />
<div class="mywidget>...</div>
</main>
<!-- footer -->
<link rel="stylesheet" href="footer.css" />
<footer>...</footer>
</body>

Ovo dobro funkcioniše u većini pretraživača. (s tim što Safari prikazuje praznu stranicu dok se sav CSS ne učita, ali je trenutno i to prihvatljivije od učitavanja jednog jedinog stylesheet-a.)

Optimizujte CSS performanse

Neke CSS tehnike i svojstva znaju da budu zahtevni prema pretraživaču, CPU, memoriji, propusnom opsegu i drugim resursima. Sledeći saveti vam mogu pomoći da izbegnete nepotrebnu obradu i spore performanse.

Usvojite moderne tehnike rasporeda sadržaja (Grid in Flexbox)

• CSS Flexbox za jednodimenzionalne rasporede koji se mogu prelomiti u sledeći red. Idealan je za menije, galerije slika, kartice itd.
• CSS Grid za dvodimenzionalne rasporede sa eksplicitnim redovima i kolonama. Idealan je za raspored stranica.
• Oba su jednostavnija za razvoj, koriste manje koda, brže se prikazuju i prilagođavaju se bilo kojoj veličini ekrana bez medijskih upita.

Zamenite slike sa CSS gradijentima i efektima

Gde je moguće, odlučite se za CSS kod umesto za slike. Eksperimentišite sa gradijentima, ivicama, radijusom, senkama, filterima, režimima mešanja, maskama, odsecanjem i efektima pseudoelemenata da biste ponovo koristili ili zamenili postojeće slike.

CSS efekti znatno manje utiču na propusni opseg vašeg sajta, lakše se menjaju i obično se mogu animirati.

Izbegavajte korišćenje CSS kodova koji zahtevaju više procesiranja

Sledeća svojstva trigeruju računanja koja mogu biti prilično zahtevna ako se preterano koriste:

• position: fixed
• border-radius
• box-shadow
• text-shadow
• opacity
• transform
• filter
• backdrop-filter
• background-blend-mode

Koristite CSS prelaze i animacije kada je to moguće

CSS prelazi i animacije će uvek biti glatkiji od efekata koji pokreće JavaScript, koji menjaju slična svojstva. Jedina mana im je što neće moći da se pokrenu u starim browser-ima.

Međutim, izbegavajte preteranu animaciju. Efekti bi trebalo da poboljšaju korisničko iskustvo bez negativnog uticaja na performanse ili izazivanja bolesti kretanja. Proverite medijski upit za preferirano smanjeno kretanje i po potrebi onemogućite animacije.

Reagujte na zaglavlje Save-Data

Save-Data je zaglavlje HTTP zahteva koje ukazuje da je korisnik zahtevao smanjene podatke. U nekim browser-ima može biti označen kao „Lite“ ili „Turbo“ režim.

Kada je omogućeno, zaglavlje Save-Data se šalje sa svakim zahtevom pregledača:

GET /main.css HTTP/1.0
Host: site.com
Save-Data: on

Imajte na umu da server treba da vrati sledeće zaglavlje na izmenjene zahteve kako bi se osiguralo da se minimalni sadržaj ne kešira i ponovo koristi kada korisnik isključi Lite/Turbo režim:

Vary: Accept-Encoding, Save-Data

Zaglavlje se takođe može otkriti JavaScript-om na strani klijenta. Sledeći kod dodaje bestUX klasu elementu <html>; kada Save-Data nije omogućen:

if ('connection' in navigator && !navigator.connection.saveData) {
document.documentElement.classList.add('bestUX');
}

Liste stilova tada mogu reagovati u skladu sa tim bez ikakve manipulacije serverom:

/* no hero image by default */
header {
background-color: #abc;
background-image: none;
}
/* hero image when no Save-Data */
.bestUX header {
background-image: url("hero.jpg");
}

Upit za medije preferira-reduced-data nudi opciju samo za CSS kao alternativu, iako to nije podržano ni u jednom pretraživaču u vreme pisanja:

/* no hero image by default */
header {
background-color: #abc;
background-image: none;
}
/* hero image when no Save-Data */
@media (prefers-reduced-data: no-preference) {
header {
background-image: url("hero.jpg");
}
}

Zaključak

Postoji mnogo opcija za optimizaciju CSS performansi, ali za buduće projekte razmotrite sledeće opcije:

• Koristite mobile-first pristup: prvo uradite najjednostavniji izgled za mobilne uređaje, a zatim dodajte poboljšanja kako se prostor na ekranu i skup funkcija pretraživača povećavaju.
• Podelite CSS u zasebne datoteke sa prepoznatljivim odgovornostima: CSS pre-procesor ili CMS plugin može kombinovati CSS delove u jednu datoteku.
• Dokumentujte svoje stilove: Vodič za stilove sa dokumentovanim primerima će olakšati preuzimanje i održavanje vašeg koda. Moći ćete da identifikujete i uklonite stari CSS bez brige.
• Što bolje ovladajte CSS-om. Što više znate, manje koda ćete morati da napišete, a vaša veb aplikacija će postati brža. To će vas učiniti boljim programerom bez obzira na to koje platforme i okvire koristite.

Da li vi imate neke savete za optimizaciju CSS performansi? Pišite nam u komentarima.