Kaip įvertinti „Front-end“ svetainės našumą

Kalbant apie optimizavimo procesą, naujojo amžiaus interneto dizainerių beveik nėra. Net daugelis interneto dizainerių, kurie buvo versle dešimtmetį ar ilgiau, visiškai nesupranta svetainės optimizavimo svarbos.

Po ilgesnio laiko interneto svetainė pradės mesti. Frontend rinkmenose gali būti perdėtų kodų blokų arba užrakintų bitų. Tai dažniausiai matoma „JavaScript“ rinkmenose ar vaizduose. Gali būti svarbu sukurti malonią interneto svetainę, kurioje būtų naudotojų patirtis, tačiau be optimizuotos svetainės, dizainas gali netgi visiškai neįkrauti nekantrus naudotojus.

Toliau pateikiami patarimai pradedantiesiems-tarpiniams interneto kūrėjams, kuriuos domina optimizuoti jų puslapius iki galo. Yra daugybė būdų, kurių kiekvienas elgsis skirtingai, priklausomai nuo to, kokie klausimai jūsų svetainėje kenčia. Pabandykite nuvalyti kelias sritis ir pažiūrėkite, ar galite taikyti šiuos metodus į savo ženklus.

HTTP užklausos

Kiekvieną kartą, kai jūsų svetainė įkelia, ji siunčia HTTP užklausą į nuotolinį serverį. Šis duomenų perdavimo tipas vadinamas a tinklo protokolas naudojami specialiai tekstinių failų platinimui ir saugojimui. Tai dažnai apima pagrindinį „frontend“ kodą, pvz., HTML, CSS ir „JavaScript“.

Kai užklausa išsiųsta, naršyklė analizuos kiekvieną puslapio elementą. Priklausomai nuo analizuojamo variklio, kiekviena svetainė bus įkelta skirtingai, o elementai bus rodomi skirtingomis eilėmis, atsižvelgiant į perdavimo greitį. Pavyzdžiui, „Internet Explorer“ atvaizduos skirtingus tinklalapius nei „Chrome“ ar „Safari“, ir visi šie veiksmai šiek tiek skiriasi nuo „Firefox“ ar „Opera“..

Turi būti atsižvelgta į tai, kiek laiko prašymo laikas yra kiekvienam failui ir ar ši tendencija yra nuosekli. Apsvarstykite galimybę gauti daugiau kaip 100 tūkst. Lankytojų per mėnesį. Naršyklės užduotis yra sudėti kiekvieną puslapio elementą ir įkelti išorinius failus į atmintį.

Dažnai veiksniai, palaikantys svetainės optimizuotą greičio nuorodą „clunky JavaScript“, apima arba didelius vaizdo failus. Su „Verizon FiOS“ populiarinimu dažniausiai interneto greitis pasiekia 600 kbps ir nuolat laipioti! Deja, tai nėra norma, ir net su didelės spartos jungtimis galima patirti optimizavimo sutrikimus.

Teisinės priemonės svetainės našumui

Mes nesame vieni žiniatinklio kūrimo ir frontendų optimizavimo srityje. Norint atlikti tinkamą darbą, yra tam tikrų įrankių, reikalingų darbui atlikti.

„Google“ išleido projektą, pavadintą „Page Speed“, kuris buvo sukurtas siekiant padėti kūrėjams optimizuoti savo svetaines ir patikrinti, ar jie yra geriausi. Iš pradžių projektas buvo pradėtas kaip atviro kodo „Firebug“ priedas ir dabar priimtas kaip trečiosios šalies nuoroda svetainių testavimui.

Kitas „Firebug“ naudotojų variantas yra „Yahoo!“ „YSlow“ priedas. Scenarijus analizuoja kiekvieną tinklalapio užklausą ir siūlo dažniausius būdus, kaip pagerinti našumą. Šie pasiūlymai yra pagrįsti „Yahoo! Programuotojų ištekliai geriausiam optimizavimui web dizaino srityje.

Programa iš pradžių gali būti šiek tiek abrazyvinė, nes jame yra daug informacijos. Tiesiog laikykitės pagrindų ir atlikdami paprastą dokumentaciją procesas turėtų būti gabalėlis.

Kūrėjai visada domina šokinėti į projektą, kad suskirstytų kodą, todėl tai turėtų būti ne protas. Jei norite šiek tiek padėti, peržiūrėkite „YSlow“ pagalbos vadovą.

Greičio metodai

Yra keletas paprastų gudrybių, kuriuos galite nedelsdami kreiptis į savo svetainę, kad pagreitintumėte našumą. Pirmasis ir lengviausias būdas yra atskirti CSS ir „JavaScript“ failus.

CSS kodas priklauso dokumento antraštei. Tai naudinga, nes CSS savybės turi būti analizuojamos, kai DOM įkeliama. Kai žiniatinklio naršyklė atpažins jūsų CSS stilius antraštėje, ji laukia, kol bus visiškai rodomas tinklalapis, kol bus įkelti visi stiliai. Be to, bet kokie vaizdai, naudojami piktogramoms ar foniniams dizainams, užims laiko įkelti ir turėtų tai padaryti pirmiausia.

Apverčiamoje pusėje visi „JavaScript“ failai į jūsų puslapio poraštę gali žymiai išspręsti „hangup“ laiką. Daugelis naršyklių blokuoja paralelinius atsisiuntimus, o tai reiškia, kad prieš padarant puslapį naudotojo žiniatinklio naršyklė gali sustoti 4 sekundes, kad visiškai įkeltų išorinę JS.

Tai ne visada įmanoma ir ne visada būtina kiekvienai svetainei. Jei jūsų puslapiai įkelia tą patį su vienodais atsakymo laikais, nepriklausomai nuo įtrauktų failų paskirties vietų, tuomet nesivarginkite manevravimo.

Dinaminis turinys negali įkelti, kol nebus baigtas visas DOM, tačiau kartais tai bus klaida. Išbandykite „CSS / JS“, kad pamatytumėte, ar galite grąžinti bet kokią optimizavimo naudą.

Failo dydžio suspaudimas

Didelių failų suspaudimas tapo labai populiarus. Dabar ją galima naudoti net interneto puslapiuose, kad būtų galima sumažinti apkrovos laiką ir išlaikyti labai mažus failų dydžius. Didelė dalis darbo jau buvo padaryta ir su tokiais įrankiais kaip „YUI Compressor“ mini formato failai yra ne-energijos procesas.

Internete taip pat yra daug kitų nemokamų paslaugų, padedančių atlikti šią užduotį. Sumažinkite CSS turi visą CSS suspaudimo sąsają, kad procesas būtų paprastas. Toje pačioje svetainėje taip pat yra pasirinktinis „JavaScript“ kompresorius, kuris atlieka daug tų pačių užduočių, bet palaiko scenarijų organizavimą.

Taip pat galite apsvarstyti galimybę suspausti didžiausius savo tinklalapių vaizdus. Tai galima padaryti naudojant bet kurią nuotraukų redagavimo programinę įrangą, pvz., „Adobe Photoshop“ arba „GIMP“, paprasčiausiai iš naujo imant vaizdą mažesne raiška. PNG vaizdai vidutiniškai eksportuos daug mažesnius nei jpg arba TIFF formatai. Taip pat yra daug internetinių įrankių, pvz., „Image Optimizer“, kad būtų lengviau naudoti suspaudimo procesą.

Šaltinio tikrinimas ir metrika

Tai yra rutina, kurią dažnai nejaučia interneto kūrėjai, kurie gali pasiūlyti puikių rezultatų. Analizuodami visus jūsų svetainės puslapių elementus, galite pamatyti, kas užtruko ilgiausiai ir kokia tvarka buvo įkelta kiekviena dalis.

Populiariausia priemonė „Mozilla Firebug“ yra „Firefox“ naršyklės papildinys. Ši programa naršyklės apačioje įdiegia mažą įrankių juostą, kad patikrintų atsakymo laiką, antraštės informaciją, puslapių elementus ir scenarijus kiekvienai svetainei. Scenarijus taip pat buvo perkeltas į „Firebug Lite“ kaip „Google Chrome“ plėtinys.

Apache su mod_pagespeed

Ne visuose nustatymuose bus naudojamas „Apache“ žiniatinklio serveris, todėl ši parinktis ne visada prieinama. Šis modulis yra tiesiogiai susijęs su „Google“ puslapio greičio monitorius minėta anksčiau. Iš tiesų mod_pagespeed kodas iš pradžių buvo nukreiptas į daugelį bibliotekų iš „Google Code“ duomenų bazių.

Apache leidžia serverio administratoriams įdiegti mažus paketus, vadinamus moduliais, kad pagerintų jų serverių našumą. mod_pagespeed yra vienas iš šių modulių, kuris vykdymo metu automatiškai atlieka optimizavimo metodus. Yra per daug procesų, kuriuos reikia įtraukti į sąrašą, nors kai kurios pagrindinės programos apima „fly-the-fly“ HTML / CSS / JS kompresiją ir vaizdo įrašo talpyklą.

Projektas šiuo metu yra „Google“ ir yra atviras kūrėjams. „Google“ bendradarbiauja su „GoDaddy“, kad mod_pagespeed būtų įdiegta į visas „Apache HTTP“ serverio tvarkymo paskyras.

Nors daugelis kitų variantų yra prieinamos, „frontend“ kūrimas yra vienas iš intensyviausių, ypač atsižvelgiant į išankstinį optimizavimą svarbiausiems tinklalapiams. Optimizavimas svetainių antraštėms ir dideliems vaizdams gali būti labai varginantis, bet naudingas uždavinys.

Apsvarstykite kai kuriuos šiame straipsnyje pateiktus metodus ir pažiūrėkite, kaip jie galėtų būti taikomi jūsų interneto projektuose. Dažnai kūrėjai nepakankamai laiko vertinti savo darbą ir išvalyti senus kodo fragmentus. Jei vis dar ieškote patarimų, turėtumėte perskaityti mūsų galutinį žiniatinklio optimizavimo vadovą, rodantį priekinių įrenginių priežiūros ir patogių našumo patobulinimų..