Nėra nieko labiau erzinančio nei svetainė, kuri kraunasi amžinybę. Spaudi, lauki, lauki dar… ir galiausiai uždarai kortelę. BUM – prarasta. Ir kartais kaltininkas slepiasi ten, kur nesitiki : CSS’e.
Optimizuoti CSS – tai ne tik kodo švaros ar estetikos klausimas. Tai – o svarbiausia – greičio klausimas. O greitis šiandien reiškia labai daug.
Štai kaip padaryti, kad tavo CSS nebežlugdytų našumo.
1. Įkelk tik tai, kas tikrai būtina
Labai vilioja naudoti didelį CSS karkasą kaip Bootstrap ar visą Tailwind – ypač kai skubi. Bet būkim atviri : iš 3000 eilučių, kiek tu tikrai naudoji ? 150? Gerai, 200 jei tavo svetainė labai turtinga turiniu.
Pirmas žingsnis – *išvalyti*. Pašalink viską, ko nenaudoji. Gali daryti tai rankiniu būdu (šiek tiek vargo), arba geriau : naudoti įrankius kaip PurgeCSS ar UnCSS. Jie peržiūri tavo HTML, nustato, kurios klasės iš tikrųjų naudojamos, ir pašalina likusias. Paprasta ir efektyvu.
Asmeniškai, kai tai padariau su React + Tailwind projektu, galutinis CSS failas sumažėjo 10 kartų. Tiesiogine prasme. Nuo 250 KB iki 24 KB. Ne smulkmena.
2. Sujunk ir minifikuok CSS
Atrodo akivaizdu, bet vis dar randu svetainių su 5 ar 6 atskirais CSS failais, kurie visi įkeliami atskirai. Kodėl taip daryti ? Rimtai ?
Kiekvienas HTTP užklausa – tai stabdis. Tad sujunk viską į vieną failą, jei įmanoma.
Tada – minifikuok. Pašalink tarpus, komentarus, eilutes… Visa tai, ko naršyklė nereikalauja. Naudok įrankius kaip cssnano ar CleanCSS. Jų yra daug. Kai kurie redaktoriai, kaip VSCode, tai daro automatiškai eksportuojant.
3. Naudok critical CSS
Šitas dažnai gąsdina, bet verta. Idėja tokia : įkelk pirmiausia tą CSS, kuris reikalingas viršutinei puslapio daliai (vadinamai „above the fold“).
Visa kita gali palaukti sekundę ar dvi, kai pagrindinis turinys jau matomas. Rezultatas : svetainė atrodo kraunasi greičiau, net jei techniškai dar ne viskas paruošta.
Yra įrankių, kaip Critical (taip, pavadinimas ne itin originalus), kurie automatiškai sugeneruoja šį CSS fragmentą, kurį įterpi į < ;head> ; dalį.
Tai pritaikiau viename WordPress tinklaraštyje su gana sunkiu šablonu… Lighthouse balas pakilo nuo 71 iki 91 vien šiuo žingsniu. Įspūdinga.
4. Saugokis blokuojančio CSS
Primename : CSS pagal nutylėjimą yra *blokuojantis*. Kol jis neįkeltas, naršyklė nerodo… nieko. Balta tuščia ekranas.
Taigi, jei turi didelį CSS failą < ;head> ; dalyje – tai tarsi pakabinti ženklą „Grįžkite vėliau“.
Triukas – įkelti CSS neblokuojančiu būdu. Pvz., su atributu media="print" + onload, arba naudoti preload su atsarginiu variantu. Bet reikia atsargiai – blogai padarius, gali sulūžti stilius. Bet padaryta gerai – viską keičia.
5. Naudok klases, o ne sudėtingus selektorius
Žinai, tokius selektorius kaip div > ul li span :nth-child(3)? Taip, tokius. Naršyklė užtrunka juos apdoroti ilgiau nei paprastą .mano-klase. Kiekvieną kartą tai nedidelis skirtumas, bet didelėje svetainėje tai jaučiasi.
Tad kiek įmanoma – paprastos, gerai pavadintos, pakartotinai naudojamos klasės. Pliusas : tavo CSS tampa aiškesnis ir lengviau prižiūrimas.
6. Įjunk suspaudimą serveryje
Gerai, tai nėra tiesiogiai CSS, bet jei tavo CSS failas suspaustas Gzip ar Brotli formatu prieš siunčiant – jis bus žymiai lengvesnis. Pvz., 100 KB failas gali sumažėti iki 20–30 KB. Ir tai tikrai juntama.
Pažiūrėk savo serverio konfigūracijoje (Apache, Nginx…) ar CDN nustatymuose – dažnai tai tik vienas varnelės paspaudimas. Kam to nepadarius ?
Apibendrinant ?
CSS optimizavimas – tai ne tik pedantų reikalas. Tai realus našumo svertas. Tai pagerina krovimo laiką, vartotojo patirtį, ir netgi SEO (Google mėgsta greitas svetaines – tai ne naujiena).
Tad jei tavo svetainė lėtoka, prieš kaltindamas backend’ą ar paveikslėlius – pažvelk į CSS. Galbūt ten slypi tavo greičio lobynas.
O tu, ar bandei naudoti critical CSS ar automatinį išvalymą? Buvo netikėtumų? Papasakok, įdomu !