CSS-i optimeerimine saidi kiiruse jaoks – 9 võimalust

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

paljunedaKuula artiklit

Veebisaidi css optimeerimine.

Aeglane sait on alati halb! Ma arvan, et fraas CSS-koodi optimeerimine saidi kiirendamiseks, esineb sageli ka otsingus 301 ümbersuunamine või robots.txt. Või äkki olete seda tüüpi arendaja, kes saadab veebisaite optimaalsest jõudlusest hoolimata?

Kui kuulute esimesse valikusse, on see artikkel teie jaoks. Nüüd räägin teile 9 parimast viisist, mis aitavad teil CSS-i optimeerida. Need näpunäited aitavad kiirendage oma veebisaiti ja emissiooni tõus. See efekt suurendab märkimisväärselt uute külastajate voogu teie saidile.

Saidi kiiruse tähtsus orgaanilise järjestuse jaoks

Kuidas optimeerida CSS-koodi saidi kiiremaks laadimiseks.

Teid üllatab kiiremate veebisaitide tähtsus. Peamisi põhjuseid on mitu, kuid nende mõju mõjutab oluliselt saidi asukohta. Peamised põhjused:

  1. Veebisaidi külastajatele ei meeldi lehe täielikku laadimist kaua oodata;
  2. Teie kliendid naasevad kindlasti saidile, kui see töötab kiiresti; kiiremad saidid on otsingumootorites alati kõrgemal kohal;
  3. Samuti lisab saidi kiirus teie SEO strateegiale väärtust;
Need ressursid on lihtsalt suurepärased ja jätavad suurepärase mulje. Mida teeksite nüüd oma saidi kiiremaks muutmiseks? Loomulikult võib selle olukorra parandamine nõuda teilt palju tegevusi.

Näiteks serveri, RAM-i, salvestusruumi või riistvara täiendamine üldiselt. Aga kas teadsite, et saidi aeglase peamiseks põhjuseks on teie lähtekood? Optimeeritud CSS-i puudumine on kõige levinum põhjus. See tähendab, et laaditabeli failisuuruse vähendamine isegi mõne kilobaidi võrra mõjutab oluliselt teie lehe laadimisaega.

Kasutage Image Sprites

CSS Sprites on vahend mitme pildi ühendamiseks üheks pildifailiks. Kasutage seda veebisaidil jõudluse parandamiseks. Selline pildispraitide kasutamine on vana tehnika. CSS-faili suuruse vähendamiseks ja lehe laadimisaegade vähendamiseks on see tehnika kohustuslik.

Pildi spraidid võimaldavad pilte pakkida ühte suurde .png-faili. See meetod vähendab HTTP-päringuid ja kiirendab lehe laadimisaega. Pildispraite on suurepärane valik, kui kasutate oma saidil palju ikoone ja graafikat. See valik vähendab märkimisväärselt mitme pildi ekstraheerimisega seotud üldkulusid.

CSS-i optimeerimine

CSS-i lühendamine on lihtsalt teie faili tihendamine uueks failiks võimalikult väheste tühikutega. Mida väiksem on kood, seda kiiremini loeb kasutaja brauser seda.

Loomulikult ei pea te seda käsitsi tegema, kuna Internetis on automaatseid kompressoreid. Ainult tänu sellistele lihtsatele veebitööriistadele on võimalik tihendada mõne minutiga. Siin on üks selline minifier: http://www.cssminifier.com

Vähendage tarbetut koodi

Me ei vaja korduvat koodi. Selline kood aeglustab oluliselt elementide laadimist. Brauser peab korduvalt läbima dubleeritud koodi, kulutades sellele sekundi murdosa. Veel üks nipp lehe laadimiskiiruse suurendamiseks on tarbetu koodi vähendamine. Sellise täiustuse saab saavutada üleliigse või dubleeriva koodi kontrollimisega.

Pange CSS-tabelid päisesse ja JS-skriptid jalusesse

Hea tava on asetada stiilileht ülaossa (head-siltide vahele) ja JavaScripti kood alla. Veenduge, et teie kood laaditaks enne ülejäänud lehte. JavaScripti saidi allossa paigutamise peamine põhjus on selle suur suurus. Nagu ka selle edasine mõju veebisaidi kiirusele. Seetõttu paigutatakse sellised skriptid saidi allossa. See võimaldab neil laadida pärast lehe põhikomponente.

Olulised stiilid, mis on vajalikud lehe ülaosas oleva sisu kujundamiseks, lisatakse sisse ja rakendatakse kohe dokumendile. Täielik small.css-fail laaditakse pärast lehe esialgset renderdamist. Selle laadid rakendatakse lehele pärast selle laadimist, ilma et see blokeeriks kriitilise sisu esialgset renderdamist.

Ärge manustage suurandmete URI-sid

Olge andme-URIde stiilifailidesse manustamisel ettevaatlik. Kuigi väikeste andme-URI-de valikuline kasutamine CSS-is võib olla mõttekas, võib suurte andme-URI-de manustamine muuta teie CSS-i lehe ülaosas suuremaks, mis aeglustab lehe renderdusaega.

Ärge manustage CSS-i atribuute

Võimalusel tuleks vältida CSS-i atribuutide manustamist HTML-i elementidesse (nt ), kuna see põhjustab sageli koodi tarbetut dubleerimist. Samuti blokeerib sisuturbepoliitika (CSP) vaikimisi HTML-i elementide tekstisisese CSS-i.

CSS-failide eraldamine

Samuti saate eraldada CSS-faile, st erinevaid stiililehti. Näiteks kui sihite mitut brauserit (nt IE, Chrome või Firefox). Näiteks selle asemel, et kontrollida CSS-i häkkimisi ühes stiililehes, saate kasutada IE tingimuslauseid teise laadilehe laadimiseks (näiteks IE6 jaoks). Nii ei laadita Chrome'i kasutamisel IE koodi. See vähendab oluliselt faili suurust.

Vähendage koodis tühikute arvu

Peaksite alati püüdma oma stiililehel tühikute arvu vähendada. Valge ruumi suurendamine võtab vabu baite. See võib väga suurtes projektides vahet teha kiirema ja aeglasema saidi vahel.Vähendades tühikute arvu, väheneb faili suurus. Seega kiirendame faili allalaadimist väiksema kaalu tõttu.

Dokumenteerige oma kood

Kui võimalik, peaksite oma koodi dokumenteerima. Kasutades selliseid kommentaare nagu /* Kommenteeri siia */ võib aidata teil tuvastada kasutu koodi. Kuigi kommentaaride lisamine võtab palju ruumi, on neid lihtne tähelepanuta jätta, mõnel juhul kustutatakse kasutud kommentaarid lihtsalt ära. See tehnika võimaldab teil vabaneda CSS-i liigsest kaalust väga produktiivsel viisil.

Korraldage oma kood

CSS-koodi optimeerimine on tehnika, millest paljud isegi ei mõtleks rääkida. Tegelikult võib koodi korrastamine mitmel tasandil aidata teil faili suurust märkimisväärselt vähendada. Selle tulemusena suurendage oma saidi kiirust. Huvitav, kuidas? See on väga lihtne.

Pange oma CSS-i klassid õigesse harude komplekti. See meetod tagab minimaalse dubleerimise. Korraldamata kood on tänapäevases veebidisainis tavaline probleem. Mõne stsenaariumi korral piisab saidi laadimiseks räpane koodi korraldamisest hierarhilisteks harudeks. Püüdke vältida CSS-i häkkimist ühel stiililehel. Selle asemel kasutage punktides 5 ja 8 näidatud meetodeid.

KISS-tehnika (Keep it Simple Stupid)

Viimane sõna on veenduda, et kõik, mida teete, on kooskõlas KISS-tehnikaga. KISS tähendab Keep it Simple Stupid. Kui loote faili uuesti! Siis peaksite kindlasti olema õigel teel organiseeritud, hästi kirjutatud, vähem üleliigse ja puhta koodi poole. Nagu näete, pole CSS-i optimeerimine keeruline. Eriti mõnel juhul saate selle artikli paari lõiguga hakkama. Need tehnikad aitavad aeg-ajalt saidi tööd kiirendada.

Täname, et lugesite Nicola Topi

Kui kasulik postitus on?

Hindamiseks klõpsake emotikonil!

keskmine hinne 4.9 / 5. Hinnangute arv: 16

Hinnanguid veel pole. Hinda kõigepealt.

Sulle võib meeldida ka...

Lisa kommentaar

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

kaks × üks =