5 најефикаснијих начина за смањење времена учитавања веб странице

Колико брзо се ваша веб локација или апликација у почетку учитавају је први утисак на које ваши корисници стичу. У овом водичу ћемо навести проверене технике за уклањање драгоцених секунди од почетног учитавања странице.

Почетно време учитавања

Време које је потребно од тренутка када ваш корисник или клијент унесе име домена ваше веб странице до тренутка када виде садржај је најважнијих неколико секунди које имате да оставите добар први утисак.

Амазон је открио да их сваких 100 милисекунди кашњења кошта 1% у продаји.

Па ипак, многи веб програмери ово третирају као накнадну мисао. Све више и више библиотека се додаје за све више функција и постепено, током времена, почињу да виде мање конверзија. Што је још горе, ове губитке у конверзији је тешко открити јер напуштају страницу која се споро учитава пре него што има времена да пошаље било коју метрику.

Неке од ових су технике које се могу применити на фронт-енд, а неке на бацк-енд. Без обзира на то, веб апликације се морају брзо учитавати.

Додајте праве мере

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

Следеће су најважније прекретнице процеса учитавања:

Меасурементс | Дијаграм креиран на Терраструцт

Ово значи да би требало да пратите метрику за сваки сегмент овог дијаграма.

Хајде да прођемо кроз како бисте то могли да урадите.

Уручен је захтев прегледача за одговор:

Измерите ово на свом серверу. Желите да добијете тренутак када ваш АПИ добије захтев до кога служи одговор. У зависности од тога да ли се врше екстерни позиви, на пример, базама података, ово може бити или веома кратко или значајно уско грло.

Одговор достављен на примљени одговор:

Ово је теже измерити, али један од начина да то урадите је да додате временску ознаку када ваш одговор напусти ваш сервер и мерите то са тренутним временом на страни корисника у првом могућем тренутку (ознака скрипте у глави ХТМЛ-а страна).

Примљен одговор на прву садржајну боју:

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

  11 поузданих подкаста 🎧 Хостинг за мала и велика предузећа

Прва боја која садржи садржај до највеће боје са садржајем:

Највећа боја која садржи садржај односи се на то када се највећи елемент приказује у оквиру за приказ прегледача корисника. Ово обично сигнализира крај „рендеровања“ дела учитавања странице, а корисник види попуњен екран. Ово се такође мери покретањем Лигхтхоусе-а.

Највећа садржајна слика на време за интерактивност:

Коначно, време до интерактивности се односи на то када корисник може да изврши радње попут померања, клика и уноса. Може бити посебно фрустрирајуће ако је ово трајање дуго јер ће видети приказани екран испред себе, али не могу ништа да ураде када очекују да могу! Ово је још један показатељ који нам Лигхтхоусе помаже да меримо.

Смањите код

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

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

Добијате два побољшања у брзини када смањите код:

  • Ваша апликација се брже преноси преко мреже.
  • Кориснички претраживач брже завршава рашчлањивање кода.

Прво убрзање је мало; пошто се захтеви компримују преко жице, ако исечете 1 МБ изворног кода, то би могло да износи само 10 КБ уштеде на пропусном опсегу. Међутим, убрзање од мање анализе је значајно. Ваши корисници вероватно покрећу вашу апликацију на читавом спектру прегледача и рачунара, од којих многи немају рачунарску снагу која би могла да рашчлани код тако брзо као што то чини сами.

Или би могли да раде на мобилним уређајима, са још мање рачунарске снаге. Разлика може бити у величини секунди.

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

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

  • Покрените свој код кроз минифификаторе. Минификатори врше оптимизације као што су скраћивање дугих имена у кратка (сигнУпДаркМодеБуттон постаје сс), уклањање знакова размака и друге да би ваш код био што компактнији без губитка било чега.
  • Увезите парцијале. Библиотеке су често пренапучене стварима које вам нису потребне, али долазе упаковане заједно у пакету кишобрана. Можда желите само одређену функцију услужне библиотеке, тако да уместо да увезете целу библиотеку, можете да увезете само онај код који вам је потребан.
  • Мртва шифра од тресе дрвећа. Понекад оставите код за потребе отклањања грешака или нисте темељно очистили застарелу функцију, и иако је у вашем изворном коду, никада се не покреће. Постоје алати у ЈаваСцрипт ланцу алата, као што је Вебпацк, који могу да открију мртви код или неискоришћене зависности и да их аутоматски уклоне из производне верзије уместо вас.
  Смаллк264 користи ГУИ ручне кочнице за транскодирање видео записа у пакету

Поделите код на делове

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

Рецимо да 20% вашег кода покреће неку функцију ваше апликације до које корисници могу доћи само након неколико кликова. Било би изгубљено време да прегледач анализира тај код пре него што прикаже екран за учитавање. Подела вашег кода на делове може значајно да смањи време за интерактивност.

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

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

Рендеровање на страни сервера

С обзиром на то да прегледачи морају да обаве све то интензивно рашчлањивање и компајлирање и да имају кориснике на Цхромебоок-овима и мобилним уређајима, једна уобичајена техника за смањење времена учитавања је да ваши сервери преузму део тог оптерећења. То значи да уместо да дате празну страницу, а затим да користите Јавасцрипт да попуните сав садржај, као што већина апликација са једном страницом ради ових дана, можете покренути Јавасцрипт мотор на свом серверу (обично Ноде.јс) и попунити што више података и садржаја.

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

  Како да копирате и налепите на Цхромебоок

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

Сажимање средстава

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

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

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

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

Дакле, компресујте на најновији и најбољи формат, али и задржите мање модерну верзију и користите елементе слике и видеа који подржавају враћање формата.

Закључак

Ово је пет најефикаснијих техника за омогућавање вашим корисницима невероватно брзо прво учитавање ваше апликације. Ово ће побољшати ваше стопе конверзије, задовољство корисника, па чак и рангирање у претрази, јер СЕО награђује брзо време учитавања. Ат Терраструцткористимо ове технике и више да би корисници могли да креирају и прегледају дијаграме које видите у овом чланку што је пре могуће.