Kako izmeriti zmogljivost spletne strani

Ko že govorimo o optimizacijskem procesu, pri spletnih oblikovalcih novega obdobja skorajda ni. Tudi mnogi oblikovalci spletnih strani, ki so bili v poslu že desetletje ali dlje, ne razumejo v celoti pomena optimizacije spletnih strani.

Po daljšem časovnem obdobju se bo spletna stran začela uničevati. Datoteke vmesnika lahko vsebujejo pretirane bloke kode ali zaklenjene skrite bitove. To se najpogosteje vidi v datotekah JavaScripta ali slikah. Morda je pomembno, da ustvarite privlačno spletno stran za uporabniško izkušnjo, vendar brez optimizirane spletne strani zasnova morda ne bo imela niti priložnosti za polno obremenitev nestrpnih uporabnikov..

Nasveti spodaj so namenjeni razvijalcem spletnih vmesnikov, ki jih zanima optimizacijo njihovih strani v celoti. Obstaja veliko tehnik, ki so na voljo in vsak se bo obnašal drugače, odvisno od tega, od česa teži vaša spletna stran. Poskusite posnemati nekaj področij in preveriti, ali lahko uporabite te tehnike v lastne oznake.

Zahteve HTTP

Vsakič, ko se spletna stran naloži, pošlje oddaljenemu strežniku zahtevo HTTP. Ta vrsta prenosa podatkov se imenuje a omrežni protokol uporabljajo posebej za distribucijo in shranjevanje tekstovnih datotek. Ti pogosto vključujejo vašo osnovno kodo frontendov, kot so HTML, CSS in JavaScript.

Ko je zahteva poslana, bo vaš brskalnik razčlenil vsak element strani. Odvisno od mehanizma za razčlenjevanje bo vsaka spletna stran različno naložena in elementi se bodo prikazali v različnem vrstnem redu glede na hitrosti prenosa. Internet Explorer bo na primer spremenil spletne strani kot Chrome ali Safari, vse te pa bodo izvajale nekoliko drugačne razčlenjevalnike kot Firefox ali Opera.

Upoštevati je treba, kako dolgo je čas zahtevka za vsako datoteko in ali je ta trend dosleden. Razmislite o sprejemu več kot 100 tisoč ali 1 milijon obiskovalcev v enem mesecu. Naloga brskalnika je, da združi vsak element strani in naloži zunanje datoteke v pomnilnik.

Pogosto dejavniki, ki zadržujejo optimizirano spletno mesto za hitrostno skeniranje, vključujejo tudi velike slikovne datoteke. S popularizacijo Verizon FiOS-a je skupna hitrost interneta 600kbps in plezanje! Na žalost to ni norma in tudi pri hitrih povezavah lahko pride do napak pri optimizaciji.

Pravna sredstva za uspešnost spletnega mesta

Nismo sami na področju spletnega razvoja in optimizacije frontendov. Za dokončanje ustreznega dela so potrebna določena orodja za opravljanje dela.

Google je izdal projekt, imenovan Page Speed, ki je bil zgrajen, da bi razvijalcem pomagal pri optimizaciji spletnih mest in preverjanju najboljših stopenj učinkovitosti. Prvotno se je projekt začel kot odprtokodni dodatek Firebug in je zdaj sprejet kot referenca tretje stranke za testiranje spletnega mesta.

Druga možnost za uporabnike Firebuga je dodatek YSlow podjetja Yahoo! Skript analizira vsako zahtevo za spletno stran in predlaga najpogostejše načine za izboljšanje učinkovitosti. Ti predlogi temeljijo na Yahoo! Razvijalci za najboljše optimizacijske prakse v spletnem oblikovanju.

Program je lahko sprva malo abraziven, saj vsebuje toliko informacij. Samo držite se osnov in sledite preprosti dokumentaciji, proces mora biti kos torte.

Razvijalci so vedno zainteresirani za skakanje na projekt, da razčlenijo kodo, tako da bi moralo biti brez možganov. Za malo pomoči si lahko ogledate YSlow vodič za pomoč.

Hitrostne tehnike

Obstaja nekaj preprostih trikov, ki jih lahko takoj uporabite na svoji spletni strani, da pospešite učinkovitost. Prvi in ​​najlažji način je, da ločite datoteke CSS in JavaScript.

Koda CSS spada v glavo dokumenta. To je uporabno, ker morajo biti lastnosti CSS razčlenjene, medtem ko se DOM nalaga. Ko spletni brskalnik v naslovu prepozna sloge CSS, bo počakal, da bo v celoti prikazal spletno stran, dokler ne bodo naloženi vsi slogi. Tudi vse slike, ki se uporabljajo za ikone ali ozadje, bo vzelo čas, da se naložijo in naj to storijo najprej.

Na drugi strani lahko premaknete vse JavaScript datoteke v nogo spletnega mesta in dramatično rešite čas prekinitve. Številni brskalniki blokirajo vzporedne prenose, kar pomeni, da se lahko pred upodabljanjem strani spletni brskalnik uporabnika ustavi za 4 sekunde, da v celoti naloži zunanji JS..

To ni vedno mogoče in ni nujno potrebno za vsako spletno stran. Če se vaše strani naložijo enako z enakim odzivnim časom, ne glede na to, ali so umestitve datotek vključene, ne skrbite za manevriranje iger.

Dinamična vsebina se ne more naložiti, dokler ni dokončana celotna DOM, vendar se včasih prikaže napaka. Preizkusite CSS / JS, da vidite, ali lahko vrnete kakršne koli prednosti optimizacije.

Stiskanje velikosti datoteke

Stiskanje velikih datotek je postalo zelo priljubljeno. Zdaj ga lahko uporabite tudi na spletnih straneh, da zmanjšate obremenitve in ohranite velikost datotek zelo nizko. Veliko dela je bilo že opravljenega in z orodji, kot so YUI Compressor mini-files, ni procesov brez energije.

Obstaja tudi veliko drugih brezplačnih storitev na spletu, ki pomagajo pri tej nalogi. Zmanjšajte CSS ima celoten vmesnik stiskanja CSS, da bo postopek preprost. Na istem spletnem mestu je tudi kompresor po meri JavaScript, ki opravlja veliko istih opravil, vendar skrbi za skripte.

Razmislite lahko tudi o stiskanju največjih slik na svojih spletnih straneh. To lahko storite s programsko opremo za urejanje fotografij, kot je Adobe Photoshop ali GIMP, tako da preprosto ponovno vzorčite sliko z nižjo ločljivostjo. Slike PNG bodo v povprečju izvozile veliko manjše slike kot jpg ali TIFF. Obstaja tudi veliko spletnih orodij, kot je Image Optimizer za pomoč pri procesu stiskanja.

Preverjanje vira in metrika

To je rutina, ki je pogosto ne izvaja spletni razvijalci, ki lahko ponudi neverjetne rezultate. Z analiziranjem vseh elementov strani na vaši spletni strani lahko vidite, katera je bila najdaljša za nalaganje in vrstni red, v katerem je bil vsak kos naložen.

Najbolj priljubljeno orodje Mozilla Firebug je vtičnik za brskalnik Firefox. Ta aplikacija namesti majhno orodno vrstico na dnu brskalnika, da preveri odzivne čase, informacije v glavi, elemente strani in skripte za vsako spletno mesto. Skript je bil prenesen tudi v Firebug Lite kot razširitev za Google Chrome.

Apache z mod_pagespeed

Aplikacijskega spletnega strežnika ne bodo izvajale vse namestitve, zato ta možnost ni vedno na voljo. Ta modul je neposredno povezan z njim Nadzor Google Page Speed omenjeno prej. Pravzaprav je koda za mod_pagespeed prvotno temeljila na številnih knjižnicah iz podatkovnih baz Google Code.

Apache omogoča skrbnikom strežnika, da namestijo majhne pakete, imenovane moduli, da izboljšajo učinkovitost njihovih strežnikov. mod_pagespeed je eden od teh modulov, ki samodejno izvaja optimizacijske tehnike med izvajanjem. Na seznamu je preveč procesov, čeprav nekatere glavne aplikacije vsebujejo stiskanje HTML / CSS / JS in predpomnjenje slik.

Projekt je trenutno nameščen v Googlu in je odprt za razvijalce. Google je delal z GoDaddy za izvajanje mod_pagespeed v vse gostovanje računov teče Apache HTTP strežnik.

Čeprav so na voljo številne druge možnosti, je razvojno delo na fronti najbolj intenzivno, zlasti glede na predoptimizacijo ključnih spletnih strani. Optimizacija za glave strani in velike slike je lahko izredno dolgočasna, a nagrajena naloga.

Razmislite o nekaterih tehnikah, predstavljenih v tem članku, in si oglejte, kako jih lahko uporabite v vaših spletnih projektih. Pogosto razvijalci ne vzamejo dovolj časa, da bi cenili svoje delo in očistili stare koščke. Če še vedno hrepenite po nekaj nasvetih, morate prebrati naš končni vodnik za optimizacijo spleta za napotke o vzdrževanju frontendov in priročnih izboljšavah zmogljivosti..