Frá stofnun Internetsins hefur meðalstærð skrár vaxið jafnt og þétt. Hvað byrjaði sem kilobytes hefur þróast í megabæti (já, fleirtölu), og skrár okkar eru aðeins að vaxa ennþá.

Þó að þetta fyrirbæri sé ekki óþægilegt við fyrstu sýn, er það áhrif sem það hefur á árangur og viðhald. Bæta við öldrunartæki, takmarkanir bandbreiddar eða hægar hraða almennt ... og við höfum miklu stærri vandamál.

Sem betur fer höfum við yfirráð yfir ekki aðeins skráarstærð okkar heldur einnig hvernig blaðsíðurnar eru gerðar í vafranum. Þessi tegund af stjórn gefur vefur verktaki eins og okkur tækifæri til að auðvelda þetta vandamál og bjartsýni kóðann okkar fyrir betri árangur í því ferli.

Afhverju ertu að trufla?

Ég skil fullan skort á áhuga þegar flestar nettengingar í Bandaríkjunum eru nokkuð hratt þessa dagana. Ég meina, ef allt virkar fínt, þá af hverju?

Afköst og hagræðing eru um meira en hversu hratt við getum hlaðið niður efni. Það eru líka nokkrar nokkrar SEO og UX ávinning að vera með með því að taka tíma til að skoða kóðann okkar. Ekki sé minnst á að minnkandi skráarstærð með því að fínstilla kóða okkar til betri frammistöðu hefur bættan bónus að minnka kostnað bandbreiddar okkar sem vélar og minnkar notkun bandbreiddar (hugsa um ISP / farsímagagnatappa) á notendastigi líka.

Hugsa mát er fyrsta skrefið

Modular kóða bætir yfirleitt uppþot í formi fleiri valkosta. Hér viljum við hugsa mát í því skyni að sameina eins mörg algengar stykki af kóða okkar og mögulegt er. Ef við getum sameina tvær CSS flokkar í einn og notað minna kóða til að veita sömu niðurstöðu, ættum við.

Modularity er ekki eins mikilvægt þegar kemur að undirstöðu HTML og CSS, en þegar þú kemst inn í flóknari heim JavaScript, að hafa of mikið uppblásið getur meiða þig - sérstaklega á farsíma.

Lágmarka HTTP og ósjálfstæði beiðnir

Afhendingarspurningar eru langstærsti þáttur í að hægja á flestum hleðslusíðnum. Hver viðbótarspurning bætir uppþot og annað lag af flókið að flokka og sækja ferli. Það er oft auðvelt að gleyma því að hringja myndir úr stílblöðinni þinni telja líka eins vel, svo vertu viss um að takmarka þær og notaðu aðrar hagræðingaraðferðir eins og sprites eða SVG þegar mögulegt er.

Þó að við séum um efni utanaðkomandi aðstæðna, ef vefsvæðið þitt er nógu stórt til að krefjast nokkra tugi beiðna við lágmark ... Það gæti verið kominn tími til að íhuga að nota CDN. Notkun CDN til að dreifa efninu mun ekki lækka skráarstærðir og / eða hlaða sinnum eins mikið og fjarlægja auka HTTP beiðnir allt saman, en það getur líklega tekið úr öllum hægum miðlara tengingum úr jöfnuninni að minnsta kosti.

Framleiðsla á móti þróunarmarkmiðum

Það ætti að vera mjög áþreifanlegur munur þegar samanburður á þróun og framleiðslu stigum kóða bækistöðvar. Að taka þetta skref eitt sér getur stundum séð stærsta fækkun skrárstærða um borð.

Það er dæmigert í dag að sjá verktaki vísa til "framleiðslu" eða "þróun" umhverfis, sérstaklega í stórum stíl verkefnum. En það er líka gagnlegt á smærri enda hlutanna eins og heilbrigður. Stærsti munurinn milli tveggja umhverfisins má sjá með myndþjöppun og minnkun / samþjöppun kóða. Að lokum viljum við að framleiðslusamfélagið okkar sé eins mjótt og hratt og mögulegt er, en þróunarsamfélagið okkar ætti að vera það sama, aðeins að frádregnum mynd / kóða samþjöppunarstillingu.

Notkun innbyggðu verkfæranna, eins og Photoshop's "Save for web" samþjöppun, getur verið góður upphafspunktur fyrir myndir. Það er ofgnótt af þekkingu að vera kannað annars staðar eins og heilbrigður með samtöl á myndasíðum, þjöppunaralgoritmi, gæðaeftirlit og bestu starfsvenjum.

Fyrir kóða er best að nota samþjöppun venjulega háð því tungumáli sem þú ert að vinna með. Það er líka mjög umdeilt hvort samþjöppun kóða hjálpar eða særir annað fólk að reyna að skilja kóðann þinn, en það er samtal í annað sinn. Þegar það kemur að látlaus HTML og CSS notar ég þjónustu eins og Htmlcompressor Google og YUI þjöppu fyrir CSS.

Skrifaðu betri, læsilegan kóða

Stundum eru mjög kóðarnir sem við erum að skrifa hægasta hlekkur í keðjunni. Óhagkvæm CSS eða uppblásinn JavaScript getur skaðað hleðslutíma meira en þú hugsar. Þetta Mozilla staða fer í mikla smáatriðum um mikilvægi þess að skrifa halla CSS selectors og útskýra hvernig vafrar veita þeim. Í stuttu máli er að skrifa nákvæmlega slóðina niður keðjuna af völdum keisara miklu minna duglegur en einfaldlega að nota minnstu einstaklega auðkennda valinn í staðinn. Þeir beina báðum stílunum í sama þáttinn, hið síðarnefndu fær einfaldlega vinnu mikið, miklu hraðar.

JavaScript getur verið verra en illa skrifað CSS, og í mörgum tilvikum er það auðveldlega gleymt. Hversu oft hefur þú afritað og límt utanaðkomandi JS bókasafni í verkefnið þitt án þess að raunverulega leita í dýpt á upptökum sjálfum? Typekit er yndislegt dæmi um þetta, eins og þegar netþjófur þeirra er hægt að koma með vefsíðu með því að nota leturgerðirnar á kné og valda viðbótar 30 sekúndum eða jafnvel mínútum af viðbótartíma.

Sem betur fer gerast slíkar aðstæður sjaldan en það er samt gott að kalla JavaScript síðast ef hægt er, eins og raunin er með Google Analytics. Með því að gera það gerir vafrinn kleift að flokka gegnum höfuðskrár (CSS, HTTP beiðnir osfrv.) Og birta merkinguna áður en JavaScript byrjar að hægja á hlutunum.

Haltu HTML mjög einfalt

Í samræmi við markmið okkar að skrifa smærri CSS selectors og halda uppi í lágmarki, ætti að skrifa skilvirkt HTML einnig forgang.

CSS endurstillir miða oft á öll algeng atriði og framfylgja "endurstillingu" stíl á þeim. Þannig að jafnvel þótt þú sért ekki að miða á þennan auka div, þá er það líklega enn hægt að hægja á því með því að þurfa að hafa púða og endurstillingu á lágmarki í lágmarki. Venjulega, auka div eða tveir mun ekki raunverulega meiða neitt þó. Aðeins þegar þú byrjar að ljúka við tugum þeirra verða hlutirnir brjálaðir. Með því að kynna fleiri þætti í HTML5 forskotið, höfum við líka miklu meiri sveigjanleika á þessu sviði líka.

Google líkar við það þegar við skrifum hreinni kóða

Google hefur lagt áherslu á að svipta internetinu saman í formi. Í því skyni að hernema áberandi stöðum innan leitarniðurstaðna þeirra, verða síður að borga mikla athygli á mörgum mismunandi eiginleikum um hvernig þau eru veitt. Að hringja of mörg ytri auðlindir, hafa fáránlega stórar myndir, eða jafnvel með illa skrifað JavaScript getur dregið síðuna niður í röðun.

Sem betur fer, þetta er allt með góðri áform, þar sem kröfur þeirra um góða leitarniðurstöðu eru byggð á góðri þróun. Google býður einnig upp á mjög í djúpum leiðbeiningum til að fínstilla mismunandi þætti vefsvæðisins til betri SEO - sem einnig gerist til að stuðla að frábærum þróunaraðferðum á sama tíma.

Niðurstaða

Við hagræðingu kóðans þurfum við ekki aðeins að hugsa um skráarstærðir heldur einnig íhuga hvernig það verður lesið; annaðhvort með vafra eða jafnvel öðrum mönnum. Einnig skal taka tillit til farsímanotkunar, þar sem margir þjónustuveitendur framkvæma mjög takmarkandi gagnatökur þessa dagana.

Svo á meðan það getur tekið meiri tíma til að framkvæma alla þessa hagræðingu, þá er það vissulega góðan árangur þar sem það býður ekki aðeins betra frammistöðu í vafranum og í farsímanum heldur einnig möguleika á að stuðla að betri þróunaraðferðum og jafnvel fá efnið þitt hærra stöðu á leitarvélum eins og Google.

Næst þegar þú undirbýr að hleypa af stokkunum skaltu henda myndunum í þjöppunarvél ... Þú gætir verið undrandi hversu mörg megabæti það getur rakið af!

Valin mynd, mát hraði mynd um Shutterstock.