Да ли учинак приказивања ваше веб странице испуњава данашње стандарде? Приказивање је процес превођења одговора сервера у слику коју прегледач „слика“ када корисник посети веб локацију. Лоше перформансе приказивања могу се претворити у релативно високу стопу одбијања.
Постоје различити одговори сервера који одређују да ли се страница приказује. У овом чланку ћемо се фокусирати на почетно приказивање веб странице, које започиње рашчлањивањем ХТМЛ-а (под условом да је прегледач успешно примио ХТМЛ као одговор сервера). Истражићемо ствари које могу довести до високих времена приказивања и како их поправити.
Критични пут приказивања
Критична путања приказивања (ЦРП) је процес кроз који прегледач претвара код у пикселе за приказ на екрану. Има неколико фаза, од којих би се неке могле изводити паралелно ради уштеде времена, али неки делови се морају изводити посљедично. Овде се визуализује:
Пре свега, када прегледач добије одговор, почиње да га рашчлањује. Када наиђе на зависност, покушава да је преузме.
Ако је то датотека табеле стилова, прегледач ће је морати потпуно рашчланити пре приказивања странице, и зато За ЦСС се каже да блокира генерирање .
Ако је реч о скрипти, прегледач мора да: заустави рашчлањивање, преузме скрипту и покрене је. Тек након тога може да настави са рашчлањивањем, јер ЈаваСцрипт програми могу да промене садржај веб странице (посебно ХТМЛ). И зато ЈС се назива блокирање парсера .
Када се изврши све рашчлањивање, прегледач има изграђени објектни модел документа (ДОМ) и објектни модел каскадних табела (ЦССОМ). Њиховим комбиновањем добија се Рендер Трее. Неприказани делови странице не улазе у дрво приказа, јер садржи само податке потребне за цртање странице.
Претпоследњи корак је превођење стабла за приказивање у Лаиоут. Ова фаза се назива и поновни ток. Ту се израчунава свака позиција чвора сваког стабла за приказивање, као и његова величина.
Коначно, последњи корак је Паинт. Укључује буквално бојење пиксела према подацима које је прегледач израчунао током претходних фаза.
Закључци у вези са оптимизацијом
Као што претпостављате, процес оптимизације перформанси веб локација укључује промене на веб локацији које смањују:
- Количина података која се мора пренети
- Број ресурса које прегледач мора да преузме (посебно оне који блокирају)
- Дужина ЦРП-а
Даље, заронићемо у детаље како се то ради, али прво, мора се поштовати важно правило.
Како мерити перформансе
Важно правило оптимизације је: Прво мерите, оптимизујте по потреби . Алати за програмере већине прегледача имају картицу која се зове Перформансе , и ту се дешавају мерења. При оптимизацији за најбржи почетни (први) приказ, најважније на шта треба обратити пажњу је време следећих догађаја:
- Фирст Паинт
- Прва садржајна боја
- Прва значајна боја
Овде „Паинт“ значи успешно приказивање странице, последња фаза критичног пута приказивања. Неколико приказа се може догодити један за другим, јер прегледачи покушавају да прикажу нешто АСАП и ажурирају касније.
Поред времена приказивања, треба узети у обзир и друге ствари - што је најважније, колико се блокирајућих ресурса користи и колико је времена потребно за њихово преузимање. Ове информације се налазе на картици Перформансе након извршених мерења.
Стратегије оптимизације перформанси
С обзиром на оно што смо горе научили, постоје три главне стратегије за оптимизацију перформанси веб локација:
- Минимизирање количине података за пренос преко жице,
- Смањивање укупног броја ресурса који се преносе путем жице, и
- Скраћивање критичног пута приказивања
1. Смањите количину података за пренос
Пре свега, уклоните све неискоришћене делове, као што су недоступне функције у ЈаваСцрипт-у, стилове са бирачима који се никада не подударају ни са једним елементом и ХТМЛ ознаке које су заувек скривене са ЦСС-ом. Друго, уклоните све дупликате.
Тада препоручујем постављање аутоматског поступка минификације. На пример, требало би да уклони све коментаре са онога што ваш задњи крај служи (али не и са изворног кода) и са сваког знака који нема додатне информације (као што су размаци у ЈС-у).
После овога, оно што нам преостаје може бити као текст. То значи да можемо безбедно да применимо алгоритам компресије као што је ГЗИП (који већина прегледача разуме).
Коначно, ту је и кеширање. Неће вам помоћи када прегледач први пут прикаже страницу, али ће уштедети при следећим посетама. Кључно је имати на уму две ствари:
- Ако користите ЦДН, уверите се да је кеширање подржано и да је тамо правилно постављено.
- Уместо да чекате да датум истека ресурса дође, можда ћете желети да имате начин да га раније ажурирате са ваше стране. Уградите „отиске прстију“ датотека у њихове УРЛ адресе да бисте могли онеспособити локалну кеш меморију .
Наравно, политике кеширања треба дефинисати по ресурсима. Неки се ретко могу променити или се уопште никада неће променити. Други се брже мењају. Неки садрже осетљиве информације, други би се могли сматрати јавним. Користити „Приватна“ директива како би спречили ЦДН-ове да кеширају приватне податке.
Могла би се обавити и оптимизација веб слика, иако захтеви за слике не блокирају нити рашчлањивање нити приказивање.
2. Смањите укупан број критичних ресурса
„Критично“ се односи само на ресурсе потребне за правилно приказивање веб странице. Стога можемо директно прескочити све стилове који нису укључени у процес. И све скрипте такође.
Стилесхеетс
Да бисмо претраживачу рекли да одређене ЦСС датотеке нису потребне, требало би да поставимо media атрибуте за све везе које се односе на табеле стилова. Овим приступом прегледач ће третирати само ресурсе који се подударају са тренутним media (тип уређаја, величина екрана) по потреби, истовремено смањујући приоритет свих осталих табела стилова (они ће се ионако обрађивати, али не као део критичне путање приказивања). На пример, ако додате media='print' атрибут style ознака која упућује на стилове за испис странице, ти стилови неће ометати вашу критичну путању приказивања када медиј није print (тј. приликом приказивања странице у прегледачу).
Да бисте даље побољшали поступак, неке стилове такође можете направити уцртаним. Ово нам штеди барем једно повратно путовање до сервера које би иначе било потребно за добијање табеле стилова.
Скрипте
Као што је горе поменуто, скрипте блокирају рашчлањивач јер могу променити ДОМ и ЦССОМ. Стога, скрипте које то чине не промените их не би требало да буду блок рашчлањивање, чиме нам штедите време.
како знати да ли је компанија с цорп или ц цорп
Да би се то применило, све ознаке скрипти морају бити означене атрибутима - или async или defer.
Скрипте означене са async не блокирајте конструкцију ДОМ-а или ЦССОМ-а, јер се они могу извршити пре него што се ЦССОМ изгради. Имајте на уму да ће уграђене скрипте ионако блокирати ЦССОМ, осим ако их не ставите изнад ЦСС-а.
Супротно томе, скрипте означене са defer биће процењено на крају учитавања странице. Због тога не би требало да утичу на документ (у супротном ће покренути поновно приказивање).
Другим речима, са defer, скрипта се извршава тек након што се покрене догађај учитавања странице, док async омогућава скрипти да ради у позадини док се документ рашчлањује.
3. Скратите дужину пута критичног приказивања
Коначно, дужину ЦРП-а треба скратити на могући минимум. То ће делимично учинити горе описани приступи.
Упити за медије као атрибути за ознаке стила смањиће укупан број ресурса који се морају преузети. Атрибути ознаке скрипте defer и async спречиће одговарајуће скрипте да блокирају рашчлањивање.
Умањивање, компресија и архивирање ресурса помоћу ГЗИП-а смањиће величину пренесених података (смањујући тиме и време преноса података).
Укључивање неких стилова и скрипти може смањити број повратних путовања између прегледача и сервера.
Оно о чему још нисмо разговарали је опција преуређивања кода међу датотеке. Према најновијој идеји о најбољим перформансама, прво што би веб страница требало да уради најбрже је приказивање АТФ садржаја. АТФ је скраћеница изнад набора. Ово је подручје које је видљиво одмах, без померања. Због тога је најбоље све што је у вези са приказивањем преуредити на начин да се најпре учитају потребни стилови и скрипте, а да се све остало заустави - нити рашчлањивање нити приказивање. И увек се сетите да мерите пре и после промене.
Закључак: Оптимизација обухвата целу вашу гомилу
Укратко, оптимизација перформанси веб странице укључује све аспекте одговора ваше веб локације, као што су кеширање, постављање ЦДН-а, рефакторирање, оптимизација ресурса и други, међутим све се то може поступно радити. Као Веб Девелопер , овај чланак бисте требали користити као референцу и увек имајте на уму да мерите перформансе пре и после експеримената.
Програмери прегледача чине све да оптимизирају перформансе веб странице за сваку страницу коју посетите, због чега прегледачи обично примењују такозвани „пред-учитавач“. Овај део програма скенира испред ресурса који сте затражили у ХТМЛ-у како бисте одједном послали више захтева и омогућили њихово паралелно покретање. Због тога је боље да стилске ознаке држите близу себе у ХТМЛ-у (линијски), као и ознаке скрипти.
Штавише, покушајте да пакетно ажурирате ХТМЛ како бисте избегли вишеструке догађаје распореда, који се покрећу не само променом ДОМ-а или ЦССОМ-а, већ и променом оријентације уређаја и променом величине прозора.
Корисни ресурси и даље читање:
- ПагеСпеед Инсигхтс
- Контролна листа кеширања
- Начин да се тест ако је за вашу веб локацију омогућен ГЗИП
- Мрежа прегледача високих перформанси : Књига Иље Григорика
Разумевање основа
Шта је оптимизација веб страница?
Оптимизација веб страница је поступак анализе веб локације и увођења промена како би се брже учитало и боље функционисало. Мерења су пресудан део тог процеса и без њих не постоји начин да се одлучи да ли је одређена промена ствари побољшала или погоршала.
Како могу да проверим перформансе своје веб странице?
Покушајте да користите мрежне алате као што је Гоогле-ов ПагеСпеед Инсигхтс. Такође можете да користите прегледач у режиму „Приватно прегледање“ да бисте учитали веб локацију, а да локални подаци нису кеширани. Неки прегледачи вам такође омогућавају употребу регулације, што вам помаже да симулирате малу брзину везе.
Шта је брзина веб странице?
Брзина веб странице може се дефинисати као просечно време учитавања веб странице. Алтернативно, то може значити његов број сличица у секунди, посебно током рачунарски тешких операција.
Колико брзо треба да се учита веб локација?
Пожељно је да се учита за мање од једне секунде. Наравно, време до прве значајне боје је важније од укупног времена учитавања, све док корисника заокупља садржајем.
Која је функција механизма за приказивање?
У контексту прегледача, механизам за приказивање је део софтвера који је одговоран за цртање података у прозору прегледача. Погледајте горњу путању критичног приказивања да бисте сазнали детаље.
Шта је блокирање приказа?
Блокирање приказа је оно што прегледач мора да уради приликом рашчлањивања датотека табела стилова, јер не може да прикаже страницу док се не анализирају све референце датотеке датотека стилова.
