JS ir CSS svetainės kodo optimizavimas internete – išsamus vadovas

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

daugintisKlausyti straipsnio

JS ir CSS kodų optimizavimas.

Tinklalapio JS ir CSS kodo optimizavimas, yra vienas iš svarbiausių aspektų svetainės techninis optimizavimas. To priežastis – dėl sumažėjusių duomenų bazių iškvietimų ir pagerėjusio pačios kodo struktūros skaitomumo atlaisvinta daugiau svetainės išteklių.

Paprastai, JavaScript ir CSS kodo optimizavimas labai padidina svetainės reagavimo greitį. Taigi svetainė veikia greičiau ir ne taip rimtai apkrauna serverio dalį.

JS ir CSS svetainės kodas – kas tai?

Kaip optimizuoti JS ir CSS.

JavaScript ir CSS yra įprastos programavimo kalbos, kurių kiekviena suteikia svetainei tam tikrų funkcijų. Naudojant pagrindines žiniatinklio programavimo kalbas HTML, JS, CSS, pasiekiama ideali vartotojo sąveika su svetaine.

JavaScript yra įprasta programavimo kalba. Leidžia kurti įvairius scenarijus. Dauguma šių scenarijų vykdomi vartotojo naršyklėje. JavaScript pagerina vartotojo sąveiką su svetaine. Tam tikro informacijos rinkinio pateikimas naudojant mini programas (skriptus) svetainėje. JS scenarijų vizualizavimas ir išvedimas įvyksta pastarąjį sujungiant puslapio HTML kode. Beveik visos svetainės naudoja JS (JavaScript).

css - nurodo vieną iš pagrindinių svetainės programavimo kalbų. CSS (stiliaus failas) - pateikia informaciją apie beveik bet kurio svetainės elemento išvaizdą. Nuo spalvos ir vietos iki liūdnai pagarsėjusios konkretaus puslapio elemento animacijos.

JS ir CSS kodų optimizavimas – kam to reikia?

JS ir CSS - patys savaime jie turi gana didelį svarų kodą, kuriame yra daug nereikalingų dalykų. Naršyklėms sunku per sekundės dalį perskaityti didžiulę kodų drobę. Taigi puslapio ir visos svetainės įkėlimas sulėtėja. Šių failų optimizavimas yra skirtas sumažinti kodo dydį, pašalinti viską, kas nereikalinga. Tai taikoma:

  • Nenaudojami ir papildomi simboliai;
  • erdvės;
  • Nebaigtos ir neveikiančios kodo eilutės.
Pats procesas panašus į įprasto failo glaudinimą. Pastarųjų svoris ir dydis tampa daug mažesni. Tačiau, nepaisant to, kodas tampa visiškai neįskaitomas žmonėms. Tačiau paieškos robotai ir naršyklės puikiai apeina ir supranta visą failo struktūrą. Raundo laikas sutrumpėja kelis kartus. Dėl šio suspaudimo padidėja atsisiuntimo greitis ir pagerėja bendras atsakas.

Gzip modulis, skirtas Apache, Nginx ir Node.js

Gzip yra nuostabi technologija, sukurta tuo metu, kai internetas nebuvo toks greitas kaip šiandien. Archyvai buvo populiari technologija (nuo to laiko jų populiarumas sumažėjo, nes USB atmintinės gali suteikti iki 1 TB atminties).

Idėja buvo naudoti archyvus žiniatinklio srautui internete (panašiai kaip kuriant svetainės failus), todėl gzip buvo sukurtas suspausti failus žiniatinklio serveriuose suglaudinant statinius (teksto) failus iki 99% pradinio dydžio. Kadangi „JavaScript“ yra tekstinis failas, „gzip“ gali būti naudojamas „JavaScript“ failams suspausti ir sutrumpinti puslapio įkėlimo laiką.

Optimizuokite „Javascript“ su sumažinimu

Optimizavimas yra specialus JavaScript sumažinimo tipas. Tokie minimizatoriai ne tik pašalina nereikalingus tarpus, kablelius, komentarus ir pan., bet ir padeda išvengti „negyvo kodo“:

  • Google uždarymo kompiliatorius
  • UglifyJS
  • Microsoft AJAX minifier

CSS optimizavimas žiniatinklio šrifto naudojimui

„Google Fonts“ ir panašūs šriftų kūrėjai pakeitė žiniatinklio šriftus, tačiau kelios šrifto kodo eilutės gali sunaudoti šimtus kilobaitų pralaidumo.

  1. Atsisiųskite tik jums reikalingus šriftus: pašalinkite nenaudojamus šriftus ir patikrinkite, ar nereikia naujų šriftų.
  2. Atsisiųskite tik reikiamo svorio ir stilių: dauguma šriftų gamintojų gali apriboti atsisiuntimą iki tam tikrų simbolių rinkinių (pavyzdžiui, tik lotynų), svorio (storio) ir kursyvo (pasviręs). Naršyklės gali automatiškai pateikti trūkstamus stilius, nors rezultatai gali būti prasti.
  3. Apribokite reikalingų simbolių skaičių: retai naudojami šriftai gali būti apriboti iki tam tikrų simbolių. Pavyzdžiui, pavadinimą „CSS Tutorial“ programoje „Open Sans“ galima apibrėžti pridedant parametrą & text= prie „Google Fonts“ užklausos eilutės: fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
  4. Apsvarstykite kintamus šriftus: kintamieji šriftai apibrėžia daugybę stilių, svarmenų ir kursyvų, naudojant vektorinę interpoliaciją. Šrifto failas yra šiek tiek didesnis, bet jums reikia tik vieno, o ne kelių. Rekursyvus šriftas parodo kintamų šriftų lankstumą.
  5. Atsisiųskite šriftus iš vietinio serverio. Savęs priegloba šriftai yra efektyvesni. Reikia mažiau DNS paieškų ir galite apriboti WOFF2 įkėlimą, kurį palaiko visos šiuolaikinės naršyklės. Senesnėse naršyklėse (IE) gali būti grąžintas OS šriftas.
  6. Apsvarstykite OS šriftus: šis 500 000 žiniatinklio šriftas gali atrodyti puikiai, bet ar kas nors pastebės, jei persijungsite į viešąjį Helvetica, Arial, Georgia ar Verdana? OS saugūs arba žiniatinkliui saugūs šriftai yra paprastas būdas padidinti produktyvumą.

Naudodami atitinkamą šrifto atsisiuntimo parinktį

Žiniatinklio šriftų įkėlimas ir apdorojimas gali užtrukti kelias sekundes. Tau reikia:

  1. Rodyti nestilių tekstą (FOUT): pirmiausia naudojamas pirmasis atsarginis šriftas, bet jis pakeičiamas, kai žiniatinklio šriftas yra paruoštas.
  2. Rodyti nematomo teksto blykstę (FOIT): tekstas nerodomas, kol žiniatinklio šriftas nėra paruoštas. Tai yra numatytasis procesas šiuolaikinėse naršyklėse, kurios paprastai palaukia tris sekundes, kol grįžta prie atsarginio šrifto.
    Nė vienas nėra tobulas.
Šrifto rodymo CSS nuosavybė ir „Google Font & display=“ nustatymas gali pasirinkti kitą:
  • automatinis: numatytoji naršyklės elgsena (dažniausiai FOIT).
  • blokas: efektyviai FOIT. Tekstas nematomas iki trijų sekundžių. Šrifto pakeitimo nėra, tačiau tekstas gali pasirodyti po kurio laiko.
  • apsikeitimas: veiksmingai FOUT. Pirmasis atsarginis variantas naudojamas tol, kol bus pasiekiamas žiniatinklio šriftas. Tekstas iš karto skaitomas, tačiau šrifto pakeitimo efektas gali erzinti. Šrifto stiliaus atitikimo priemonė gali būti naudojama norint apibrėžti panašaus dydžio atsarginį variantą.
  • atsarginis variantas: kompromisas tarp FOIT ir FOUT. Tekstas yra nematomas trumpą laiką (paprastai 100 ms), tada naudojamas pirmasis atsarginis variantas, kol bus pasiekiamas žiniatinklio šriftas.
  • pasirinktinai: panašus į atsarginį variantą, išskyrus tai, kad šriftas nepakeičiamas. Žiniatinklio šriftas bus naudojamas tik tuo atveju, jei jis bus prieinamas pradiniu laikotarpiu. Pirmajame puslapio rodinyje greičiausiai bus rodomas atsarginis šriftas, o kitose puslapio peržiūrose bus naudojamas atsisiųstas ir talpykloje išsaugotas žiniatinklio šriftas.

Naudojant apsikeitimo, atsarginės kopijos ar pasirinktinio, galima pastebimai padidinti našumą.

JS ir CSS kodų optimizavimas internetu

Internete yra gana daug internetinių paslaugų. Kurie per kelias minutes gali atlikti visus įprastus JavaScript ir stiliaus failų suglaudinimo darbus. Visi jie turi savo algoritmus darbui su kodu. Tokios įvairovės fone galima išskirti dvi reikšmingiausias paslaugas. Jų efektyvus suspaudimo slenkstis yra daug didesnis nei panašių konkuruojančių internetinių įrankių. Pažvelkime atidžiau į šiuos du žiniatinklio įrankius:

cssresizer.com
84% suspaudimo efektyvumas, palyginti su artimais konkurentais. Kodo galiojimas išsaugomas net ir labai suglaudinus. Tokiu būdu galite gauti puikų optimizuotą kodą. Darbas su šiuo įrankiu yra intuityvus ir yra keletas suspaudimo būdų:

  • Maksimalus;
  • greitai;
  • Dekompresija;

Galite suspausti:

  • URL – adresas;
  • Failo ikelimas;
  • Tiesioginis kodo įvedimas;

CSSResizer – profesionalus CSS glaudinimas.

Refresh-sf.com

Kita, bet ne mažiau galinga žiniatinklio sąsaja, skirta sumažinti JavaScript, CSS ir HTML. Įrankis naudoja UglifyJS 2, Clean-CSS ir HTML minifier. Suspaudimo efektyvumas šiuo atveju siekia 85%, be matomų kodo galiojimo pažeidimų. Suspaudimas gali būti atliekamas tiesiogiai įvedant kodą įrankio lange.

Refresh-SF yra internetinis JavaScript ir CSS kompresorius.

Sumažinkite JS ir CSS naudodami CMS Wordpress papildinius

Kaip visi žinome, jis plačiai paplitęs visame pasaulyje. 2018 metų duomenimis, šis cms užima lyderio poziciją. Apsvarstykite keletą populiarių optimizavimo papildinių, skirtų specialiai „WordPress“:

Automatizuoti papildinį

HTML, JS ir CSS optimizavimo įskiepis. Tai vienas iš populiariausių įskiepių, leidžiančių pagreitinti svetaines CMS Wordpress. Jis turi paprastą ir funkcionalią konfigūravimo sąsają. Suspaudimo procesas vyksta skrendant.

  • Optimizavimas (HTML, JS, CSS) ir CDN nustatymas.
  • Jaustukų, Google šriftų, užklausų eilučių pašalinimas iš statinių išteklių.
  • Galimybė optimizuoti vaizdus.

Automatizuoti – įskiepis suspaudžia stilius/skriptus/HTML.

Webcraftic Clearfy įskiepis

Ne toks senas kaip ankstesnis papildinys. Tačiau jis taip pat yra paklausus ir populiarus tarp panašių konkurentų. Webcraftic Clearfy – turi gana sudėtingą konfigūravimo sąsają. Susideda iš kombinuoto papildinių derinio, kad būtų pasiektas geriausias rezultatas.

Nustatymų puslapiai suskirstyti į meniu skyrius. Taigi galima optimizuoti tam tikras svetainės dalis, pavyzdžiui, HTML. Ką gali padaryti šis įskiepis?

  • Optimizavimas (vaizdai, JS, CSS, HTML ir scenarijai);
  • Kirilica transliteracija ir dublikatų pašalinimas. Darbas su alt atributais ir tinkamo robots.txt kūrimas. Darbas su serverio antraštėmis ir jų atsakymais.
  • Nereikalaujamų „WordPress“ valdiklių pašalinimas.
  • „WordPress“ versijos slėpimas ir užklausos kintamųjų pašalinimas iš statinių užklausų. Slėpti autoriaus prisijungimą ir administratoriaus prisijungimo puslapį.
  • Visuotinis komentarų pašalinimas arba valymas. Išsaugokite valdymą komentaruose.
  • „WordPress pulse“ ir viršutinio administratoriaus skydelio nustatymas.
  • Papildinio komponentų valdymas.

Webcraftic Clearfy yra nemokamas optimizavimo papildinys.

Apibendrinant galima padaryti tam tikrą išvadą. Remiantis tuo, kas išdėstyta pirmiau, js ir css suglaudinimas nėra toks sudėtingas dalykas. Dėl šių veiksmų jūsų projekto reakcijos greitis žymiai padidės.

Dėkojame, kad skaitėte Nicola Top

Kuo įrašas naudingas?

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

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

Į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 *

aštuoni − šeši =