CSS optimizavimas svetainės greičiui – 9 būdai

spausdinti · Время на чтение: 6vyras · pateikė · Paskelbta · Atnaujinta

daugintisKlausyti straipsnio

Tinklalapio css optimizavimas.

Lėta svetainė visada yra blogai! Manau, kad frazė CSS kodo optimizavimas, siekiant pagreitinti svetainę, dažnai būna paieškoje taip pat 301 peradresavimas arba robots.txt. O gal esate toks kūrėjas, kuris pateikia svetaines nesirūpindamas optimaliu našumu?

Jei priklausote pirmajam variantui, šis straipsnis skirtas jums. Dabar papasakosiu apie 9 geriausius būdus, padėsiančius optimizuoti CSS. Šie patarimai bus pagreitinti savo svetainę ir emisijos padidėjimas. Šis efektas žymiai padidins naujų lankytojų srautą į jūsų svetainę.

Svetainės greičio svarba organiniam reitingavimui

Kaip optimizuoti CSS kodą, kad svetainė būtų įkeliama greičiau.

Nustebsite greitesnių svetainių svarba. Yra keletas pagrindinių priežasčių, tačiau jų įtaka labai paveikia svetainės padėtį. Pagrindinės priežastys:

  1. Svetainės lankytojai nemėgsta ilgai laukti, kol puslapis bus visiškai įkeltas;
  2. Jūsų klientai tikrai grįš į svetainę, jei ji veiks greitai; greitesnės svetainės visada užima aukštesnę vietą paieškos sistemose;
  3. Taip pat svetainės greitis suteikia pridėtinės vertės jūsų SEO strategijai;
Šie ištekliai yra tiesiog nuostabūs ir daro didelį įspūdį. Ką dabar darytumėte, kad svetainė būtų greitesnė? Žinoma, norint pagerinti šią situaciją, gali prireikti daug jūsų veiksmų.

Pavyzdžiui, serverio, RAM, saugyklos ar aparatinės įrangos atnaujinimas apskritai. Bet ar žinojote, kad pagrindinė lėtos svetainės priežastis slypi šaltinio kode? Optimizuoto CSS trūkumas yra dažniausia priežastis. Tai reiškia, kad stiliaus lapo failo dydžio sumažinimas net keliais kilobaitais turės didelės įtakos puslapio įkėlimo laikui.

Naudokite „Image Sprites“.

CSS Sprites yra būdas sujungti kelis vaizdus į vieną vaizdo failą. Toliau naudokite jį svetainėje, kad pagerintumėte našumą. Šis vaizdinių elementų naudojimas yra sena technika. Kalbant apie CSS failo dydžio sumažinimą ir puslapio įkėlimo laiką, ši technika yra būtina.

Vaizdo sprites leidžia supakuoti vaizdus į vieną didelį .png failą. Šis metodas sumažina HTTP užklausas ir pagreitina puslapio įkėlimo laiką. Vaizdo sprite yra puikus pasirinkimas, jei svetainėje naudojate daug piktogramų ir grafikos. Ši parinktis žymiai sumažins kelių vaizdų ištraukimo išlaidas.

CSS optimizavimas

CSS sutrumpinimas tiesiog suglaudina failą į naują failą su kuo mažiau tarpų. Kuo mažesnis kodas, tuo greičiau jį nuskaitys vartotojo naršyklė.

Žinoma, jums nereikia to daryti rankiniu būdu, nes internete yra automatinių kompresorių. Tik tokių paprastų internetinių įrankių dėka suspaudimą galima atlikti per kelias minutes. Štai vienas iš tokių minifierų: http://www.cssminifier.com

Sumažinkite nereikalingą kodą

Mums nereikia pakartotinio kodo. Toks kodas labai sulėtina elementų įkėlimą. Naršyklė turi pakartotinai peržiūrėti pasikartojantį kodą, tam sugaišdama papildomą sekundės dalį. Kitas triukas, kaip padidinti puslapio įkėlimo greitį, yra sumažinti nereikalingą kodą. Tokį patobulinimą galima pasiekti patikrinus, ar nėra perteklinio ar pasikartojančio kodo.

Įdėkite CSS lenteles į galvą ir JS scenarijus į poraštę

Gera praktika stiliaus lapą dėti viršuje (tarp antraštės žymų), o JavaScript kodą – apačioje. Įsitikinkite, kad kodas įkeliamas prieš likusį puslapį. Pagrindinė priežastis, dėl kurios „JavaScript“ yra svetainės apačioje, yra jos didelis dydis. Taip pat jo tolesnė įtaka svetainės greičiui. Todėl tokie scenarijai dedami svetainės apačioje. Tai leidžia juos įkelti po pagrindinių puslapio komponentų.

Pagrindiniai stiliai, reikalingi puslapio viršuje esančiam turiniui stilizuoti, yra įterpti ir nedelsiant pritaikyti dokumentui. Visas small.css failas įkeliamas po pradinio puslapio atvaizdavimo. Jo stiliai taikomi puslapiui, kai jis baigiamas įkelti, neblokuojant pradinio kritinio turinio pateikimo.

Neįterpkite didelių duomenų URI

Būkite atsargūs įdėdami duomenų URI į stiliaus failus. Nors pasirinktinai naudoti mažus duomenų URI CSS gali būti prasminga, įdėjus didelių duomenų URI gali padidėti jūsų CSS matomos ribos viršuje ir sulėtėti puslapio pateikimo laikas.

Neįterpkite CSS atributų

Kai tik įmanoma, reikėtų vengti CSS atributų įterpimo į HTML elementus (pvz., ), nes tai dažnai veda prie nereikalingo kodo dubliavimo. Be to, įtrauktas CSS HTML elementuose pagal numatytuosius nustatymus blokuojamas pagal turinio saugos politiką (CSP).

CSS failų atskyrimas

Taip pat galite atskirti CSS failus, t. y. skirtingus stilių lapus. Pavyzdžiui, jei taikote pagal kelias naršykles, pvz., IE, Chrome ar Firefox. Pavyzdžiui, užuot tikrinę, ar viename stiliaus lape nėra CSS įsilaužimų, galite naudoti IE sąlyginius teiginius, kad įkeltumėte kitą stiliaus lapą (pavyzdžiui, IE6). Tokiu būdu neįkelsite IE kodo naudodami Chrome. Tai labai sumažins failo dydį.

Sumažinkite tarpų skaičių kode

Visada turėtumėte stengtis sumažinti tarpų skaičių savo stiliaus lape. Didėjanti baltoji erdvė užima laisvų baitų. Tai gali skirtis tarp greitesnės ir lėtesnės svetainės labai dideliuose projektuose. Sumažinus baltų tarpų skaičių, sumažėja failo dydis. Taigi mes pagreitiname failo atsisiuntimą dėl mažesnio svorio.

Dokumentuokite savo kodą

Jei įmanoma, turėtumėte dokumentuoti savo kodą. Naudojant tokius komentarus kaip /* Komentuoti čia */ gali padėti nustatyti nenaudingą kodą. Nors komentarų pridėjimas užima daug vietos, jų nesunku pamiršti, kai kuriais atvejais nenaudingi komentarai tiesiog ištrinami. Ši technika leidžia labai produktyviai atsikratyti perteklinio CSS svorio.

Sutvarkykite savo kodą

CSS kodo optimizavimas yra technika, apie kurią daugelis net nesusimąstytų. Tiesą sakant, daugeliu lygių kodo tvarkymas gali padėti žymiai sumažinti failo dydį. Dėl to padidinkite savo svetainės greitį. Įdomu kaip? Tai labai paprasta.

Įdėkite savo CSS klases į tinkamą šakų rinkinį. Šis metodas garantuoja minimalų dubliavimą. Netvarkingas kodas yra dažna šiuolaikinio interneto dizaino problema. Kai kuriais atvejais, norint, kad svetainė būtų įkelta, pakanka sutvarkyti netvarkingą kodą į hierarchines šakas. Stenkitės išvengti CSS įsilaužimų viename stiliaus lape. Vietoj to naudokite 5 ir 8 punktuose nurodytus metodus.

KISS technika (Keep it Simple Stupid)

Paskutinis žodis yra įsitikinti, kad viskas, ką darote, atitinka KISS techniką. KISS reiškia Keep it Simple Stupid. Jei dar kartą sukursite failą! Tada tikrai turėtumėte eiti teisingu keliu į organizuotą, gerai parašytą, mažiau perteklinį ir švarų kodą. Kaip matote, optimizuoti CSS nėra sunku. Ypač kai kuriais atvejais galite apsieiti su keliomis šio straipsnio pastraipomis. Šie metodai kartais padės pagreitinti svetainę.

Dėkojame, kad skaitėte Nicola Top

Kuo įrašas naudingas?

Spustelėkite šypsenėlę, kad įvertintumėte!

Vidutinis reitingas 4.9 / 5. Įvertinimų skaičius: 16

Įvertinimų dar nėra. Pirmiausia įvertinkite.

Tau taip pat gali patikti...

Parašykite komentarą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *

12 − 1 =