JS-i ja CSS-i saidi koodi optimeerimine võrgus – üksikasjalik juhend

Kuulake seda artiklit

Veebisaidi JS ja CSS koodi optimeerimine, on veebisaidi tehnilise optimeerimise üks olulisemaid aspekte. Selle põhjuseks on rohkemate saidiressursside vabastamine andmebaasikõnede vähenemise ja koodistruktuuri enda parema loetavuse tõttu.

Reeglina suurendab JavaScripti ja CSS-koodi optimeerimine oluliselt saidi reageerimiskiirust. Seega töötab sait kiiremini ja laadib serveriosa vähem tõsiselt.

Artikli sisu:

• JS- ja CSS-kood – mis see on?
• JS- ja CSS-koodi optimeerimine – miks on vaja skripte ja stiile optimeerida?
• Gzip-moodul Apache, Nginxi ja Node.js jaoks
• Optimeerige Javascripti minimeerimisega
• CSS-i optimeerimine veebifondide kasutamiseks
• Kasutades sobivat fondi allalaadimisvalikut
• Koodi optimeerimine võrgus
• Minimeerige JS ja CSS CMS Wordpressi pistikprogrammidega

JS- ja CSS-saidi kood – mis see on?

JavaScript ja CSS on levinud programmeerimiskeeled, millest igaüks toob saidile teatud funktsioonid. Tänu peamiste veebiprogrammeerimiskeelte HTML, JS, CSS kasutamisele saavutatakse ideaalne kasutaja suhtlus saidiga.

JavaScript on levinud programmeerimiskeel. Võimaldab luua erinevaid skripte. Enamik neist skriptidest käivitatakse kasutaja brauseris. JavaScript parandab kasutaja suhtlust saidiga. Teatud teabekogumi väljatoomine saidil olevate minirakenduste (skriptide) abil. JS-skriptide visualiseerimine ja väljastamine toimub viimaste ühendamisel lehe HTML-koodis. Peaaegu kõik saidid kasutavad oma koostises JS-i (JavaScript).

css - viitab saidi ühele peamisele programmeerimiskeelele. CSS (stiilifail) - sisaldab teavet saidi peaaegu kõigi elementide välimuse kohta. Alates värvist ja asukohast kuni konkreetse leheelemendi kurikuulsa animatsioonini.

JS- ja CSS-koodi optimeerimine – miks seda vaja on?

JS ja CSS - iseenesest on neil üsna suur kaalukas kood, milles on palju üleliigset. Brauseril on raske sekundi murdosa jooksul lugeda tohutut koodilõuendit. Seega aeglustub lehe ja kogu saidi laadimine tervikuna. Nende failide optimeerimise eesmärk on vähendada koodi suurust, lõigates ära kõik üleliigse. See kehtib järgmiste kohta:

• Kasutamata ja lisamärgid;
• ruumid;
• Lõpetamata ja mittetoimivad koodiread.

Protsess ise sarnaneb tavalise faili tihendamisega. Viimase kaal ja suurus muutuvad palju väiksemaks. Kuid sellest hoolimata muutub kood inimestele täiesti loetamatuks. Kuid otsingurobotid ja brauserid mööduvad suurepäraselt ja mõistavad kogu faili struktuuri. Ringile kulutatud aeg väheneb mitu korda. Tänu sellele tihendamisele suureneb allalaadimiskiirus ja paraneb üldine reaktsioon.

Gzip-moodul Apache, Nginxi ja Node.js jaoks

Gzip on hämmastav tehnoloogia, mis loodi ajal, mil Internet polnud veel nii kiire kui praegu. Arhiivid olid populaarne tehnoloogia (nende populaarsus on sellest ajast alates langenud, kuna USB-mälupulgad suudavad pakkuda kuni 1 TB salvestusruumi).

Idee oli kasutada arhiive Internetis veebiliikluse jaoks (sarnaselt veebisaidi failide loomisega), nii et gzip oli mõeldud veebiserverites olevate failide tihendamiseks, tihendades staatilised (teksti) failid nende algsuuruses 99%. Kuna JavaScript on tekstifail, saab gzipi kasutada nii JavaScripti failide tihendamiseks kui ka lehe laadimisaegade vähendamiseks.

Optimeerige Javascripti minimeerimisega

Optimeerimine on JavaScripti minimeerimise eritüüp. Sellised minimeerijad mitte ainult ei eemalda tarbetuid tühikuid, komasid, kommentaare jne, vaid aitavad vältida ka "surnud koodi":

• Google'i sulgemise kompilaator
• UglifyJS
• Microsoft AJAX minifier

CSS-i optimeerimine veebifondide kasutamiseks

Google Fonts ja sarnased fonditootjad on teinud veebifondides revolutsiooni, kuid paar rida fondikoodi võib tarbida sadu kilobaite ribalaiust.

1. Laadige alla ainult vajalikud fondid: eemaldage kasutamata fondid ja kontrollige, kas uusi fonte on vaja.
2. Laadige alla ainult vajalik kaalu ja stiili: enamik fonditootjaid võib piirata allalaadimist teatud märgikomplektidega (nt ainult ladina), kaaluga (paksus) ja kaldkirjaga (kaldkiri). Brauserid võivad puuduvaid stiile automaatselt renderdada, kuigi tulemused võivad olla kehvad.
3. Piirake vajalike märkide arvu: harva kasutatavad fondid võivad olla piiratud teatud tähemärkidega. Näiteks pealkirja "CSS Tutorial" Open Sansis saab määratleda, lisades Google Fontsi päringustringile parameetri & text=: fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
4. Kaaluge muutuvaid fonte: Muutuvad fondid määravad vektorinterpolatsiooni abil mitmesuguseid stiile, kaalusid ja kaldkirja. Fondifail on veidi suurem, kuid teil on vaja ainult ühte, mitte mitut. Rekursiivne font näitab muutuvate fontide paindlikkust.
5. Laadige fondid alla oma kohalikust serverist. Fontide isehostimine on tõhusam. Vaja on vähem DNS-i otsinguid ja saate piirata WOFF2 laadimist, mida kõik kaasaegsed brauserid toetavad. Vanemad brauserid (IE) võivad naasta OS-i fondi juurde.
6. Kaaluge operatsioonisüsteemi fonte: see 500 000 veebifont võib hea välja näha, kuid kas keegi märkab, kui lülitute üle üldkasutatavale Helvetica, Arial, Georgia või Verdana vastu? OS-i või veebikindlad fondid on lihtne viis tootlikkuse parandamiseks.

Kasutades sobivat fondi allalaadimisvalikut

Veebifondide laadimiseks ja töötlemiseks võib kuluda mõni sekund. Sa vajad:

1. Näita stiilita teksti välku (FOUT): kõigepealt kasutatakse esimest saadaolevat varufonti, kuid see asendatakse, kui veebifont on valmis.
2. Näita nähtamatu teksti välku (FOIT): teksti ei kuvata enne, kui veebifont on valmis. See on tänapäevaste brauserite vaikeprotsess, mis tavaliselt ootavad kolm sekundit enne varufondile naasmist.
   Kumbki pole täiuslik.

Font-display CSS-i atribuut ja Google'i Font & display= seaded saavad valida alternatiivi.

• auto: brauseri vaikekäitumine (tavaliselt FOIT).
• plokk: tõhusalt FOIT. Tekst on nähtamatu kuni kolm sekundit. Fondi ei asendata, kuid tekst võib mõne aja pärast ilmuda.
• vahetus: tõhusalt FOUT. Esimest varu kasutatakse seni, kuni veebifont on saadaval. Tekst on kohe loetav, kuid fondi asendamise efekt võib olla tüütu. Font Style Matcherit saab kasutada sarnase suurusega varuvariandi määratlemiseks.
• tagavara: kompromiss FOITi ja FOUTi vahel. Tekst on lühikest aega nähtamatu (tavaliselt 100 ms), seejärel kasutatakse esimest varundamist, kuni veebifont on saadaval.
• valikuline: sarnane varuvariandiga, välja arvatud juhul, kui fonti ei asendata. Veebifonti kasutatakse ainult siis, kui see on algperioodil saadaval. Esimesel lehevaatel kuvatakse suure tõenäosusega varufont, järgmistel lehevaadetel aga allalaaditud ja vahemällu salvestatud veebifonti.

Vahetus-, varu- või valikulise funktsiooni kasutamine võib jõudlust märgatavalt suurendada.

JS- ja CSS-koodi optimeerimine võrgus

Internetis on üsna palju võrguteenuseid. Mis paari minutiga suudavad ära teha kogu rutiinse JavaScripti ja stiilifailide tihendamise. Kõigil neil on koodiga töötamiseks oma algoritmid. Sellise mitmekesisuse taustal võib eristada kahte kõige olulisemat teenust. Nende tõhus tihenduslävi on palju kõrgem kui sarnastel konkureerivatel võrgutööriistadel. Vaatame neid kahte veebitööriista lähemalt.

cssresizer.com
84% tihendustõhusus võrreldes lähikonkurentidega. Koodi kehtivus säilib isegi olulise tihendamise korral. Nii saate suurepärase optimeeritud koodi. Selle tööriistaga töötamine on intuitiivne ja seal on mitu tihendusmeetodit:

• Maksimaalne;
• kiire;
• Dekompressioon;

Saate tihendada järgmiselt:

• URL - aadress;
• Faili üleslaadimine;
• Otsene koodi sisestamine;

Refresh-sf.com

Teine, kuid sama võimas veebiliides JavaScripti, CSS-i ja HTML-i minimeerimiseks. Tööriist kasutab töötamiseks UglifyJS 2, Clean-CSS ja HTML Minifier. Tihendusefektiivsus ulatub sel juhul 85%-ni, ilma koodi kehtivuse nähtavate rikkumisteta. Tihendamist saab teha, sisestades koodi otse tööriistaaknasse.

Minimeerige JS ja CSS CMS Wordpressi pistikprogrammidega

Nagu me kõik teame, on sellel märkimisväärne levik üle maailma. 2018. aasta andmetel on see cms liidripositsioonil. Mõelge paarile populaarsele optimeerimispluginale spetsiaalselt WordPressi jaoks:

Automatiseeri pistikprogramm

HTML-i, JS-i ja CSS-i optimeerimise pistikprogramm. See on üks populaarsemaid pistikprogramme CMS Wordpressi saitide kiirendamiseks. Sellel on lihtne ja funktsionaalne konfiguratsiooniliides. Tihendusprotsess toimub lennult.

• Optimeerimine (HTML, JS, CSS) ja CDN-i seadistamine.
• Emotikonide, Google'i fontide ja päringustringide eemaldamine staatilistest ressurssidest.
• Võimalus pilte optimeerida.

Webcraftic Clearfy plugin

Pole nii vana kui eelmine pistikprogramm. Kuid see on ka nõudlus ja populaarne sarnaste konkurentide seas. Webcraftic Clearfy - sellel on üsna keeruline konfiguratsiooniliides. Koosneb pistikprogrammide kombineeritud kombinatsioonist parima tulemuse saavutamiseks.

Seadete lehed on jagatud menüüosadeks. Seega on võimalik optimeerida saidi konkreetseid osi, näiteks HTML-i. Mida see pistikprogramm teha saab?

• Optimeerimine (pildid, JS, CSS, HTML ja skriptid);
• Kirillitsa transliteratsioon ja duplikaatide eemaldamine. Alt-atribuutidega töötamine ja õige faili robots.txt loomine. Serveri päiste ja nende vastustega töötamine.
• Nõudmata WordPressi vidinate eemaldamine.
• WordPressi versiooni peitmine ja päringumuutujate eemaldamine staatilistest päringutest. Autori sisselogimise ja administraatori sisselogimislehe peitmine.
• Ülemaailmne kommentaaride eemaldamine või puhastamine. Salvestage kontroll kommentaarides.
• WordPressi impulsi ja ülemise administraatori paneeli seadistamine.
• Pistikprogrammi komponentide juhtimine.

Kokkuvõttes võib teha teatud järelduse. Eelnevast lähtudes pole js ja css pakkimine nii keeruline asi. Tänu nendele toimingutele suureneb teie projekti reageerimiskiirus märkimisväärselt.

Seda artiklit lugedes:

• Veebilehe jõudluse optimeerimine
• CSS-i optimeerimine saidi kiiruse jaoks – 9 võimalust

Täname lugemise eest: SEO HELPER | NICOLA.TOP