Hvernig á að flýta fyrir vefsíðuna þína
Vefhraði er einn mikilvægasti hluti af því að búa til efni á vefnum og vefforritum.
Raunverulegt hefur verið greint frá ýmsum sérfræðingum hjá Google að fólk sitji ekki oft í fyrstu 30 sekúndur myndbanda, mun minna en 15, þannig að það væri skynsamlegt að þú fáir innihald síðunnar hlaðinn sem hratt og þú getur svo að fólk geti dæmt og samþykkt að nota það eða ekki.
Það kann að vera svolítið yfirborðskennt að fólk dæfi staði sem hratt, en það er oft raunin og við ættum ekki að taka það sem sjálfsögðum hlut.
Hagræðing á vefsvæðinu þínu ætti að vera forgangsverkefni, og oft þegar WordPress og aðrar vélar eru notuð, þá eru þau góð viðbætur sem hjálpa. Ég mun þó gera ráð fyrir að þú megir ekki nota WordPress, því það er mikið sem ekki, og ég mun gefa þér nokkrar af þeim bestu leiðum til að fínstilla hvaða vefsvæði sem er, óháð því hvar hún er hýst.
Myndir
Image optimization getur verið erfitt efni, en einn sem raunverulega hefur mikið af þætti sem á að velja. Það eru skráarsnið, verkfæri til að fínstilla mynd og kóðann / CSS bestu starfsvenjur til að fylgja til að tryggja að þú vistir og vinnur með myndum á besta hátt.
Ég vil gefa dæmi um hvers vegna þetta er mikilvægt þó svo við skulum taka nýtt dæmi. Það hefur nýlega orðið ljóst fyrir ýmsa IOS forritara og forritara að forrit sem nota Retina tilbúnar myndir taka upp 2-4 sinnum meira pláss á símanum en fyrri útgáfur þeirra og það veldur því að símar símans hljóti einfaldlega ekki pláss frá einföldum niðurhalum af forritum.
Þetta er ekki eins viðeigandi fyrir okkur vefhönnuði og hönnuði, en það gerist til að sýna þér hversu mikilvægt það er að meðhöndla myndirnar þínar á hvaða vettvang sem er. Eftirfarandi eru nokkrar af því sem ég held að séu mikilvægustu atriði sem þarf að muna þegar hagræðing mynda fyrir netið.
Myndasnið
Uppsetning mynda er upphitunarefni og það virðist vera vegna þess að allir telja að annað snið muni auka hraða en það er nokkuð algengt að hugsa um þetta og við getum alltaf notað þetta sem de-facto staðall. JPEG er fyrir ljósmyndir, GIF eru fyrir litaðar myndir / flatlitmyndir og PNG eru fyrir allt annað. Flestir vefur hönnuðir og forritarar sem ég þekki vilja frekar nota PNG fyrir næstum öllu nema að þeir hafi hnapp sem er kannski með einum eða tveimur litum, þar sem þeir finna GIF til að vinna vel.
Nú er auðvitað hægt að leika við þessar forskriftir en alltaf muna að þetta eru staðlar fyrir það sem mun spara minni og léttari vs stærri og þyngri. Ef þú ert að gera myndavélarsvæði þó verður það hlaðinn frekar hægur, óháð öðrum vefsíðum - svo prófaðu nokkrar af þessum næstu aðferðum til að auka myndhugbúnaðinn í heild.
Mynd númer
Eitt af því verstu sem við getum gert fyrir miðlara þegar við hleðum myndum er að láta kóðann gera límvatn fyrir okkur. Jæja, það gæti verið sagt fyrir neitt um "að láta kóðann gera ____ fyrir okkur". Algengt er að segja: "Ef þú getur gert það, þá gerðu það", og það er darn gott. Nota hluti eins og width='50px' height='30px' getur raunverulega kasta burt miðlara hlaða tíma eins langt og þessi mynd er varðar, vegna þess að þjónninn er að flokka síðu og sér að það er verkefni sem það þarf að ná - eitt sem gæti verið gert af höfundum. Svo vertu viss um að fara á undan og gera það með öllum myndum þínum.
Image hagræðingarverkfæri
Verkfæri eru alltaf gagnlegar. Jæja, mest af tímanum. Stundum eru þeir byrði og truflun, en í þessu tilfelli virðist sem þau eru oft mjög gagnleg. Ef þú getur fundið frábært myndatökunar tól, fyrst af öllu - tengdu það í athugasemdum vegna þess að við erum öll á veiði, en nokkrir af eftirlætunum mínum fylgja. ég elska ImageOptim fyrir Mac og Uppþot fyrir Windows. Þessir tveir verkfæri eru mjög ólíkir, en framkvæma svipað verkefni.
Þú getur sett myndir inn og það muni ráða leið og aðferð til að hagræða þeim, gera það og spýta síðan aftur endanlegu niðurstöðu á meðan þú vistar sniðið sem þú sendir þeim inn með. Þeir eru mjög góðir og það eru tonn meira þarna úti. Í raun eru fullt sem mun greina punktamynd myndarinnar og segja þér hvaða snið er best. Þú getur auðveldlega sagt að þetta eru nokkrar af þeim gagnlegurustu hlutum í vefhönnuðum tólarkörfum öðrum en textaritari og hönnunarforriti og réttilega svo.
Image-undirstaða miðlara hagræðingu
Ég er ekki sérfræðingur þegar kemur að því að setja upp netþjóna, en ég hef vissulega nógu mikla bakgrunn í smáatriðum til að gefa þetta ráð. Ekki hafa mikla myndhleðslur geymdar á staðnum. Það er, ekki fara í gagnagrunn af myndum sem eru geymdar á netþjónum þínum að þú sért að þjóna öðrum vefsíðum frá. Taka mið af tækni eins og netþjónum Amazon S3 eða Flickr, og notaðu þá til að þjóna skrám þínum frá.
Ég hef nýlega útfært Amazon S3 fötu til miðlara skrárnar okkar, og það var í raun alveg auðvelt - svo ekki hika við að reyna það. Það er frábær aðferð. Helsta ástæðan er sú að þú viljir ekki að flöskuhálsi gagnist í því að þú þjónar mörgum fullt af því að það getur verið að greina martröð. Það er gott að geyma aðskildar skrár á mismunandi netþjónum (ef það er undir miklum álagi) nema að sjálfsögðu er það bara einfalt almennt gagnasnúningur eða eitthvað svipað.
CSS og JavaScript hagræðingu
CSS og JavaScript eru mjög mikilvæg tungumál þegar kemur að vefhönnun, og sérstaklega þegar kemur að því að skapa kviklegt efni. Ég held að fólk gleymi oft að þeir geti bjartsýni kvikmyndinni þeirra og gleymt að þeir geti bjartsýni á JavaScript og CSS. Þetta eru ekki raunverulega mikilvægustu hlutina fyrir smærri síður en með stærri síðum er það mjög mikilvægt - sérstaklega þegar kemur að vefsvæðum sem treysta á mikla hönnun. Skulum fara í gegnum nokkrar af "CSS og JavaScript reglunum" sem eru nokkuð stöðluðu þegar kemur að því að búa til vefforrit.
Fyrsta regla CSS og JavaScript
Ef þú getur gert það í CSS, þá skaltu gera það
Oft sinnum gleymum við að við höfum ótrúlega verkfæri rétt fyrir framan okkur og ég myndi segja að CSS flokkar sem einn af ótrúlegu vefhönnuðum. Ég myndi líka segja að hönnuðir hoppa inn í Photoshop of hratt af náttúrunni (en það er starf þeirra svo sem getur kennt þeim). Hafðu í huga þó að eins og þú hönnir hefur þú eitthvað í vafranum þínum sem getur gert fljótur mock ups líka: CSS3. Nýttu þér það! Having a staður til að gera fljótur mockups hjálpar virkilega, og það mun leiða þig í burtu frá að gera tölvusnápur saman í HTML síðar. Í stað þess að "" ég er viss um að þú getir fundið leið til að bæta því plássi í CSS, svo gerðu það!
Second regla CSS og JavaScript
Minnka, minnka, minnka!
Minnkunar á kóða er kannski einn af bestu og auðveldustu hlutum sem þú getur gert til að flýta fyrir síðuna þína. Hafðu í huga, við erum að tala miliseconds, en samt hefur það athyglisverð áhrif - og sérstaklega ef þú notar eitthvað eins og jQuery bókasafn. Mundu að ef þú ert alltaf að bæta við viðbótum fyrir JavaScript / CSS og þú ert gefinn kostur á að hlaða niður minified útgáfunni (og þarft ekki að breyta því), gerðu það . Sumir af uppáhalds verkfærum mínum til að gera þetta eru, Kóði Minifier fyrir Mac, Minnka fyrir Windows og JSCompress / CSSCompressor fyrir ykkur sem vilja fá nokkrar vafra-undirstaða kross pallur lausnir. Til hamingju með að minnka!
Þriðja reglan um CSS og JavaScript
Í línu er nei-nei
Það er slæmt að nota CSS eða JavaScript í línu, en sérstaklega þegar kemur að CSS. Ástæðan fyrir því er ekki aðeins vegna arfleifðarmála heldur einnig vegna þess að ef við yfirgefum CSS í HTML kóða (sérstaklega í línu) þá mun það lesa sem slíkt: HTML / CSS / HTML / CSS / HTML / CSS / HTML / CSS í stað þess að einfalda HTML => CSS. Eins og þú getur sagt, þetta er mjög slæmt fyrir hleðslutíma miðlara og getur oft leitt til skaða flestra vefforrita ætti að vera hönnuður sem neitaði að nota það í sérstakri skrá. Það myndi örugglega ekki valda því að vefsvæðið þitt hruni en það mun valda öðrum starfsmönnum að fara í gegnum og draga það út - það er svo mikilvægt. Svo mundu alltaf að vera sá sem útdregur það, ekki sá sem skilur það fyrir öðrum að vinna úr.
Fjórða regla CSS og JavaScript
Færðu það niður
Ef þú þarft að setja JavaScript inn á síðuna með HTML sjálfu, og þú hefur enga leið í kringum það, þá settu það neðst í HTML skjalinu . Þetta hjálpar einnig að flýta fyrir hleðslustund síðunnar, vegna þess að við getum framkvæmt allar þessar aðgerðir og aðrar JavaScript dágóður eftir að blaðið hefur hlaðið. Annar hlutur er að þetta dregur úr líkurnar á að galla komi í veg fyrir frammistöðu alls staðarins, því að þegar það er galla með JavaScript í sjónmáli mun það oft borða minni eins og ekki á morgun. Svo er gott að ganga úr skugga um að vefsvæðið þitt sé ekki að gera það og að vara við framtíðarviðburði þar sem það kann - enginn vill að fólk heimsæki síðuna okkar og síðan hafi vafrar þeirra hrunið.
Fimmta reglan um CSS og Javascript
DOM hagræðingu
Minnka DOM ef þú getur. Taktu dæmi til dæmis að þú notar mikið af jQuery sem bendir til ýmissa DOM þætti eða lesir í gegnum öll DOM til að finna eitthvað - það getur hægfært síðuna þína niður nokkuð. Það er lítið að segja að ég elskaði alltaf og það passar hér: "Ef þú ert að gera hluti vegna þess að það er eini leiðin sem þú veist hvernig þá eru líklega betri leiðir til að gera það." Þú gætir líka sagt: "Ef þú ert að gera hluti vegna þess að það er eina leiðin sem þú veist hvernig, þá ertu að gera það rangt, " en þessi útgáfa er svolítið erfiðari.
Rannsóknir og finna þá hluti í slíkum tilvikum. Ef þú ert að vinna með div í HTML bara vegna þess að þú þarft það fyrir eitt smáatriði og það er eina leiðin sem þú veist hvernig á að gera það þá gæti það ekki verið besta leiðin. Nú, auðvitað skil ég að nota div merki vegna þess að þú þarfnast þeirra fyrir CSS er algjörlega skiljanlegt, en kannski getur þú fjarlægt nokkrar og fundið breiðari leið til að meðhöndla þessi stílvandamál.
Ég gerði þetta bara nýlega, þar sem ég er að fara í gegnum Ruby on Rails verkefni núna. Fyrr í vikunni hreif ég um það bil 5 div innan hvers annars í HAML af öllu, bara til að gera eitthvað sem ég vildi (kassi í kassa í kassa inni í eitthvað annað í þessu tilfelli). Og ég horfði bara á það, vissi að það var vitleysa, en vissi ekki betri leið til að gera það, svo ég skreppti öllu til að gera það aftur. Að þurfa að gera það gerði það mun erfiðara en það neyddi mig til að læra nýja leið til að takast á við þetta mál. Og að lokum lærði ég mikið af því, og ég myndi mæla með lausninni fyrir alla í framtíðinni. Fara á undan og grípa einn af þessum þekkingu nuggets fyrir sjálfan þig! Þeir eru vissulega lágt hangandi ávextir.
Almennar hagræðingar
Þetta eru fleiri af víðtæku málefnum sem passa ekki í neinu öðru, en það finnst mér ennþá vera skilið. Í raun geta sumir þessir mikilvægustu hlutir sem þú getur gert til að flýta fyrir vefur umsókn eða vefsvæði.
Rista á tenglum
Þetta er áberandi mikilvægt. Þegar notandi opnar tengil án þess að rista á endanum frá vefsíðu þarf miðlarinn bókstaflega að reikna út hvers konar skrá eða síðu er á því netfangi. Miðlarinn mun þá innihalda sagt rista, en ef þú bætir við sjálfum þér þá ertu að draga millisekúndur af hleðslutíma. Þessir millisekúndur allir bæta upp, ég lofa. Oft finnst mér hönnuðir sérstaklega, sem ekki hugsa um það, heldur að unoptimized kóða þeirra muni ekki byrgja neitt, en það gerist í lokin. Ef þú vistar ársfjórðung í 10 ár hefur þú örugglega mikla peninga og sama hugtakið gildir hér - aðeins í smærri eða stærri mæli eftir því hvaða umferð er á síðuna þína.
Favicons
Vafrar gera alltaf að draga fyrir favicon.ico skrá á rótarnetinu á netþjóninum þínum, svo þú gætir líka farið bara á undan og fylgir því. Jafnvel ef það er eitthvað tímabundið er það alltaf gott að hafa. Ef þú gerir það ekki, þá mun vafrinn sjálft gefa 'innri 404' og skyndaðu bara 404 upp á favicon.ico hluta vafrans og við vitum öll að draga úr hraða 404 hraða.
Dragðu úr kökuformi
Þetta getur ekki átt við okkur öll, en ef þú ert að þróa vefforrit þá er það mjög mikilvægt að draga úr smákökustærðinni. Til dæmis, í því sem ég þekki - Ruby on Rails forritum - þú getur notað fótspor (eða aðrar aðferðir) til að sannreyna frá fundi til fundar og oft vil fólk frekar nota aðrar aðferðir vegna þess að þeir geta dregið úr álagstíma notenda með þeim .
Núna gerir kex það til kynna að það sé að flokka hluti á tölvunni þinni svo að þú gætir held að það myndi auka hleðslutíma, en yfirleitt er allt sem þeir eiga gott fyrir að staðfesta notendasamkomur eða fylgjast með þér um netið (þar sem Google og Facebook hafa verið sakaðir um ). Ef þú þarft að vinna með smákökum, vertu viss um að halda stærðinni lítill og þú notir þær með betri dómgreind. Ef þú þarft að, veldu fyrningardagsetningu styttri til að minnka hleðslutímann.
Skyndiminni
Þetta er gríðarlegt efni og einn sem ég er ekki sérfræðingur í. Caching þó er frekar einfalt hugtak. Það er að geyma skrár (venjulega HTML / CSS kóða) frá vefsvæðum sem þú heimsækir oft á tölvunni þinni svo að þú þurfir ekki að hlaða þeim í hvert skipti sem þú heimsækir.
Það er í raun ótrúlega gagnlegt tækni og einn sem mikið af vefforritum byrjar að ráða á undanförnum árum. Það hefur verið fjöldi lausna gagnagrunna fyrir flýtiminni og sennilega mest áberandi er Memcached . Hvað þetta gerir er að geyma afrit af gagnagrunni í vafranum þínum eins og þú ert að nota vefforrit. Til dæmis, ef þú hefur mismunandi snið sem þú heimsækir oft getur það vistað sniðið á tölvuna þína og fegurð Memcached kemur í næsta áfanga. Í kóðanum er hægt að hringja (áður en þú dregur úr DB) úr Memcached netþjónum og sjá hvort þú getir dregið afrit af útgáfu skráarinnar. Og ef ekki mun það auðvitað draga skrána úr gagnagrunninum og ef það er ekki í skyndiminni þá mun það bæta við því til að spara tíma næst. Þetta er fallegt dæmi um caching í stórum stíl og það hefur hjálpað tonn og tonn af fyrirtækjum að flýta netþjónum og gagnagrunni undanfarin 2+ ár.
Og það mun bara summa það upp. Þeir eru ekki allar leiðir til að flýta fyrir síðuna þína, auðvitað, en það ætti að byrja að hámarka forvitni þína og fáðu að leita að öllum þeim frábæra hlutum þarna úti sem vilja.