Како да измерите перформансе предњег веб сајта

Говорећи о процесу оптимизације готово да и не постоји код нових веб дизајнера. Чак и многи веб дизајнери који су били у послу деценију или дуже не разумеју у потпуности значај оптимизације сајта.

Након дужег временског периода, веб сајт ће почети да се слаби. Датотеке сучеља могу садржавати претјеране блокове кода или закључане, скривене битове. Најчешће се то дешава унутар ЈаваСцрипт датотека или слика. Можда је важно да направите пријатан сајт за корисничко искуство, али без оптимизованог веб-сајта дизајн можда неће имати ни шансу да се потпуно напуни нестрпљивих корисника.

Следећи савети су за оне који се баве почетним и средњим веб програмерима оптимизовање њихових страница до максимума. Доступне су многе технике и свака од њих ће се понашати другачије, у зависности од тога од којих проблема пати ваш сајт. Покушајте да прелистате неколико области и видите да ли можете применити ове технике у сопствене ознаке.

ХТТП Захтеви

Сваки пут када се ваш сајт учита, он шаље ХТТП захтев удаљеном серверу. Овај тип преноса података се назива а мрежни протокол користи се посебно за дистрибуцију и похрањивање текстуалних датотека. Оне често укључују основни код фронтенд-а, као што су ХТМЛ, ЦСС и ЈаваСцрипт.

Након слања захтјева ваш прегледник ће анализирати сваки елемент странице. У зависности од механизма за анализирање, сваки веб сајт ће се учитати другачије и елементи ће се појављивати у различитим редоследима на основу брзине преноса. На пример, Интернет Екплорер ће приказивати веб странице другачије од Цхроме-а или Сафари-ја, а све то покреће нешто другачије моторе за анализирање од Фирефок-а или Опера-а.

Оно што треба узети у обзир је колико дуго траје захтев за сваки фајл и ако се овај тренд одржава доследно. Размислите о примању више од 100.000 или 1 милион посјетитеља за мјесец дана. Посао претраживача је да састави сваки елемент странице и учита спољне датотеке у меморију.

Често су фактори који задржавају оптимизовани ЈаваСцрипт брзину у ЈаваСцрипт-у укључени или велики сликовни фајлови. Са популаризацијом Веризон ФиОС-а уобичајено је да брзине Интернета досегну 600кбпс и да се и даље пењу! Нажалост, ово није норма, па чак и са брзим везама могуће је искусити грешке у оптимизацији.

Правни лекови за перформансе сајта

Нисмо сами у области веб развоја и оптимизације фронтенд-а. Да би се обавио одговарајући посао, постоје одређени алати потребни за обављање посла.

Гоогле је објавио пројекат под називом Паге Спеед који је направљен да помогне развојним инжењерима да оптимизују своје веб локације и провере најбољи ниво перформанси. Изворно је пројекат започео као Фиребуг додатак отвореног кода и сада је прихваћен као референца треће стране за тестирање веб локације.

Друга опција за кориснике Фиребуга је ИСлов додатак за Иахоо! Скрипта анализира сваки захтев за веб страницу и предлаже најчешће начине за побољшање перформанси. Ови предлози су засновани на Иахоо! Развојни ресурси за најбоље праксе оптимизације у веб дизајну.

Програм може бити мало абразиван, јер садржи толико информација. Само се држите основа и слиједећи једноставну документацију, процес би требао бити комад торте.

Програмери су увек заинтересовани за скакање на пројекат да би разбили код тако да ово не би било паметно. За малу помоћ можете погледати ИСлов водич за помоћ.

Спеед Тецхникуес

Постоје неки једноставни трикови које можете одмах примијенити на вашу веб-локацију како бисте убрзали рад. Први и најлакши начин је да одвојите ЦСС и ЈаваСцрипт датотеке.

ЦСС код припада заглављу документа. Ово је корисно јер ЦСС својства морају бити анализирана док се ДОМ учитава. Када веб прегледник препознаје ваше ЦСС стилове у заглављу, сачекат ће да у потпуности прикаже веб страницу док се не учитају сви стилови. Такође, било какве слике које се користе за иконе или позадинске дизајне ће узети времена да се учитају и требало би да то ураде прво.

Са друге стране, премештање свих ЈаваСцрипт датотека у подножје сајта може драматично да реши време прекида. Многи претраживачи блокирају паралелна преузимања, што значи да се пре него што се страница прикаже, веб прегледач корисника може зауставити на 4 секунде да би се у потпуности учитао вањски ЈС..

Ово није увијек могуће нити је увијек потребно за сваку веб страницу. Ако ваше странице учитавају исто са једнаким временом одговора, без обзира на то да ли су укључени положаји датотека, немојте се мучити маневарима.

Динамички садржај се не може учитати док се не заврши читава ДОМ, али понекад ће се појавити грешке. Испробајте ЦСС / ЈС да бисте видели да ли можете да вратите било које предности оптимизације.

Компресија величине датотеке

Сажимање великих датотека постало је веома популарно. Сада се може користити чак и на веб страницама како би се смањило вријеме учитавања и задржала величина датотека врло ниска. Већи део посла је већ обављен и алати као што су ИУИ компресорски мини фајлови су процес без енергије.

Постоји много других бесплатних услуга на вебу које ће вам помоћи иу овом задатку. Смањи ЦСС има целу ЦСС интерфејс за компресију да би процес био једноставан. Исти веб сајт има и прилагођени ЈаваСцрипт компресор који обавља много истих задатака, али организује скриптирање.

Можете размотрити и сажимање највећих слика на вашим веб страницама. Ово се може урадити са било којим софтвером за уређивање фотографија као што је Адобе Пхотосхоп или ГИМП једноставним поновним узорковањем слике при нижој резолуцији. ПНГ слике ће у просеку извозити много мање од јпг или ТИФФ формата. Постоји и мноштво онлине алата као што је Имаге Оптимизер за помоћ у процесу компресије.

Провера извора и метрике

Ово је рутина коју често не практикују веб програмери, што може понудити невероватне резултате. Анализирајући све елементе странице на Вашој веб страници можете видјети који је најдужи за учитавање и редослијед којим је сваки комад био учитан..

Најпопуларнији алат Мозилла Фиребуг је додатак за Фирефок прегледник. Ова апликација инсталира малу траку са алаткама на дну вашег претраживача да би проверила време одзива, информације о заглављу, елементе странице и скрипте за сваку веб локацију. Скрипта је такође претворена у Фиребуг Лите као проширење за Гоогле Цхроме.

Апацхе са мод_пагеспеед

Неће сва подешавања покренути Апацхе веб сервер, тако да ова опција није увек доступна. Овај модул је директно повезан са Гооглеов Паге Спеед монитор што је раније поменуто. У ствари, код за мод_пагеспеед је првобитно био заснован на многим библиотекама из база података Гоогле Цоде-а.

Апацхе омогућава администраторима сервера да инсталирају мале пакете који се називају модули како би побољшали перформансе њихових сервера. мод_пагеспеед је један од тих модула који аутоматски извршава технике оптимизације у току рада. Постоји превише процеса за листање, иако неке од главних апликација укључују он-тхе-фли ХТМЛ / ЦСС / ЈС компресију и кеширање слика.

Пројекат је тренутно смештен на Гоогле-у и отворен је за програмере. Гоогле ради са ГоДадди-јем како би имплементирао мод_пагеспеед у све хостинг рачуне који покрећу Апацхе ХТТП сервер.

Иако су многе друге опције доступне, фронтенд развојни посао је један од најинтензивнијих, посебно с обзиром на пре-оптимизацију за кључне веб странице. Оптимизација за заглавља сајта и велике слике може бити изузетно досадан, али награђен задатак.

Размотрите неке од техника које су представљене у овом чланку и погледајте како се оне могу примијенити на ваше веб пројекте. Често програмери не узимају довољно времена да цене свој рад и очисте старе делове кода. Ако још увек жудите за неким саветима, требало би да прочитате наш крајњи водич за веб оптимизацију за смернице за одржавање фронта и практична побољшања перформанси.