CSS-i optimeerimine – 21 võimalust veebisaidi kiirendamiseks
· Время на чтение: 8мин · kõrval
·
Avaldatud
· Uuendatud
Kuulake seda artiklit
css peab läbima suhteliselt keeruka torujuhtme, nagu HTML ja JavaScript. Brauser peab failid serverist alla laadima ja seejärel neid sõeluma ja DOM-i rakendama. 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 rikuvad 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.
Artikli sisu:
- Kasutage otsetee CSS-i soovitusi
- Eemaldage kasutamata CSS-kood
- Töötage CSS-iga mugavamal viisil
- Olge alati teadlik oma stiilidega seotud probleemidest
- Tekstisisene kriitiline CSS
- Paralleelvastane analüüs
- Asendage oma pildid CSS-iga
- Kasutage värvikombinatsioone
- Eemaldage mittevajalikud nullid ja ühed
- Eemaldage täiendavad semikoolonid
- Kasutage tekstuuri spraite
- Kustutage soovimatud pikslid
- Vältige nõudlikke proportsioone
- Eemaldage mittevajalikud ruumid
- Eemaldage soovimatud kommentaarid
- Kasutage automaatset tihendamist
- Käivitage NPM-ist
- Hoidke Sass ja teised kontrolli all
- Seadistage vahemälu
- tühjendage vahemälu
- Ärge unustage põhitõdesid
Kasutage otsetee CSS-i soovitusi
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:
p { margin-top: 1px; veeris-parem: 2px; veeris-alumine: 3px; veeris vasak: 4 pikslit; } p { veeris: 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>
<head>
<style> .blue{color:blue;} </style>
</head>
<body>
<div class="blue"> 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");
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 { taust: #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.
polster: 0,2 em marginaal: 20,0 em väärtus: 0px; 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.
p { . . . 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.
.download { laius:80px; kõrgus: 31px; taustapositsioon: -160px -160px; } .download:hover { laius:80px; kõrgus: 32px; 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 {padding:0px; veeris:0px;} h2 {täidis:0; veeris: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 teisendusfilter :n-nda lapse asend: 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 Kasutus: 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'); compressor.compress('/path/to/ faili või JS-i string', { //Komppressori 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="stylesheet" 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.
Seda artiklit lugedes:
- Kuidas teha 301 ümbersuunamist .htaccess-failis – üksikasjalikud näited
- Veebilehe jõudluse optimeerimine
Täname lugemise eest: SEO HELPER | NICOLA.TOP
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.