Садржај
- Шта раде ови алати?
- Оцена учинка
- Подаци лабораторије наспрам поља
- Подаци са терена
- Показатеље учинка
- Подаци из стварног света
- Класификација брзо, умерено и споро
- Подаци о лабораторији
- Ревизије
- Оптимизација перформанси
- ПагеСпеед Инсигхтс АПИ
- Услуге независних произвођача
- Брзо, остани брзо!
Алати попут ПагеСпеед Инсигхтс (ПСИ) и Лигхтхоусе могу бити драгоцени за надгледање перформанси ваших веб локација. Али зашто су вам потребни? Када градите модерно веб искуство, важно је мерити, оптимизовати и надгледати да ли желите да будете брзи и останете брзи. Перформансе играју значајну улогу у успеху било које локације, јер локације са високим перформансама ангажују и задржавају кориснике боље од оних са лошим перформансама.
У овом чланку, Адди Османи, која управља тимом Веб Девелопер Инсигхтс у Цхроме-у, говориће о најбољој ствари од резаног хлеба: мерењу учинка и како ти алати могу да вам помогну да побољшате своју веб локацију.
Треба вам нови комплет? Погледајте наш избор алата за веб дизајн и врхунских преносних рачунара за програмирање. Или, да бисте направили потпуно нову веб локацију, пронађите најбољег креатора веб страница за ваше потребе.
Шта раде ови алати?
Лигхтхоусе нуди свеобухватан скуп могућности за перформансе и уштеде времена применом сваке оптимизације. Можете га пронаћи на табли Цхроме ДевТоолс Аудитс и у ПагеСпеед Инсигхтс.
ПагеСпеед Инсигхтс извештава о перформансама странице на мобилним и столним уређајима и пружа предлоге за побољшање те странице.
ПСИ пружа податке о „лабораторији“ (Светионик) и „пољима“ о страници. Подаци о лабораторији
је користан за отклањање грешака у перформансама, јер се прикупља у контролисаном окружењу. Међутим, можда неће покрити стварна уска грла. Подаци на терену су корисни за бележење истинског корисничког искуства у стварном свету, али имају ограниченији скуп показатеља.
Оцена учинка
На врху извештаја, ПСИ даје резултат који сумира учинак странице. Овај резултат се одређује покретањем Лигхтхоусе-а за прикупљање и анализу лабораторијских података о страници. Резултат од 90 или више сматра се брзим, а 50 до 90 умереним. Испод 50 сматра се спорим.
Подаци лабораторије наспрам поља
Подаци о лабораторији
Лабораторијски подаци су подаци о перформансама прикупљени у контролисаном окружењу са унапред дефинисаним поставкама уређаја и мреже.
Ово нуди поновљиве резултате и могућности отклањања грешака који помажу у идентификовању, изоловању и решавању проблема са перформансама.
Снаге:
- Корисно када се ради о отклањању грешака у раду са било којим проблемом са перформансама
- Од краја до краја и нуди дубоку видљивост у УКС
- Пружа поновљиво окружење за тестирање и отклањање грешака
Ограничења:
- Можда не обухвата стварна уска грла
- Није могуће корелирати са стварним КПИ-јевима страница
Напомена: Алати попут Лигхтхоусе и ВебПагеТест прикупљају ову врсту података.
Подаци са терена
Подаци на терену (који се називају и стварни надзор корисника, или РУМ) су подаци о учинку прикупљени од стварних оптерећења страница које ваши корисници доживљавају у дивљини.
Снаге:
- Снима истинско корисничко искуство из стварног света
- Омогућава корелацију са кључним показатељима учинка пословања
Ограничења:
- Ограничени скуп показатеља
- Ограничене могућности отклањања грешака
Напомена: Јавни скупови података као што је Цхроме Извештај о корисничком искуству и алати за перформансе као што је оцена брзине ПагеСпеед Инсигхтс извештавају о овој врсти података.
Показатеље учинка
У прошлости су се веб перформансе мериле помоћу оптерећење догађај. Међутим, овај тренутак не мора нужно одговарати ономе до чега је кориснику стало. Током последњих неколико година, тимови прегледача раде на стандардизацији низа нових показатеља и АПИ-ја који прецизније бележе перформансе веб странице.
Да бисмо осигурали да метрике буду релевантне за кориснике, постављамо их око неколико кључних питања:
- Да ли се то дешава? Да ли је навигација успешно започела? Да ли је сервер одговорио?
- Да ли је корисно? Да ли је приказано довољно садржаја да корисници могу да ступе у контакт са њим?
- Да ли је корисно? Могу ли корисници комуницирати са страницом или је она заузета?
- Да ли је дивно? Да ли су интеракције глатке и природне, без заостајања?
Постоји низ важних показатеља за мерење, а Лигхтхоусе и ПагеСпеед Инсигхтс покушавају да обухвате неколико кључних.
- Прва садржајна боја означава време у којем је насликан први текст или слика.
- Време до интеракције је време потребно да страница постане потпуно интерактивна (нпр. Корисник може кликнути и видети одговор)
- Индекс брзине показује колико брзо се садржај странице видно попуњава.
А има и неколико узбудљивих нових показатеља који ће ове године доћи до наших алата:
- Највећа садржајна боја (ЛЦП): мери време од тренутка када страница почиње да се учитава до тренутка када се на екрану приказује највећи текстуални блок или елемент слике.
- Укупно време блокирања (ТБТ): мери укупну количину времена између ФЦП и ТТИ где је главна нит била блокирана довољно дуго да спречи улазну реакцију
Сазнајте више о модерним показатељима перформанси.
Подаци из стварног света
Када ПСИ добије УРЛ, потражит ће га у скупу података Цхроме Усер Екпериенце Репорт (ЦрУКС). Ако је доступан, ПСИ извештава о метричким подацима о првој садржајној боји (ФЦП) и првом улазном кашњењу (ФИД) за порекло и потенцијално УРЛ одређене странице.
Класификација брзо, умерено и споро
ПСИ такође класификује теренске податке у три сегмента, описујући искуства која се сматрају брзим, умереним или спорим. ПСИ поставља следеће прагове за брзо / умерено / споро, на основу ЦрУКС скупа података:
ФЦП:
- Брзо: 0 - 1.000мс
- Средње: 1.000мс - 3.000мс Споро: преко 3.000мс
ФИД:
- Брзо: 0 - 100мс
- Средње: 100мс - 300мс
- Споро: преко 300мс
Подаци о лабораторији
ПСИ користи Лигхтхоусе за анализу датог УРЛ-а, генеришући оцену учинка која процењује учинак странице на различитим показатељима, укључујући: Прву садржајну боју, Индекс брзине, Време до интеракције и процењену кашњење уноса (и да бисте додатно побољшали своју веб локацију, проверите да ли имате добио идеалну услугу веб хостинга за вас).
Сваки показатељ је означен иконом:
- Брза метрика је означена зеленом ознаком
- Умерено је означено наранџастим информативним кругом
- Споро је означено црвеним троуглом упозорења
Ревизије
Светионик раздваја своје ревизије у три различита одељења:
- Могућности пружа предлоге за побољшање показатеља учинка странице. Сваки предлог у овом одељку процењује колико ће се брже учитати страница ако се побољшање примени
- Дијагностика пружа додатне информације о томе како се страница придржава најбољих пракси за веб развој
- Прошла ревизија означава ревизије које је прошла страница
Оптимизација перформанси
Постоји неколико оптимизација које можете применити за побољшање показатеља Лигхтхоусе / ПагеСпеед Инсигхтс.
Да бисте побољшали прву садржајну боју:
- Смањите ЦСС и уклоните неискоришћени ЦСС
- Уклоните све ресурсе који блокирају приказивање
- Унапред се повежите са потребним пореклом
- Смањите време одзива сервера
- Избегавајте преусмеравање на више страница
- Избегавајте превелику величину ДОМ-а
- Осигурајте да текст остане видљив током учитавања веб фонтова (нпр. Са приказом фонтова)
Слање великих корисничких оптерећења ЈаваСцрипт значајно утиче на брзину ваше веб локације, посебно на то колико брзо корисници могу да ступе у интеракцију са вашим страницама. Да бисте побољшали време интерактивног за веб локацију, могли бисте:
- Умањите и компримирајте ЈаваСцрипт
- Испоручите само ЈаваСцрипт потребне корисницима када им је потребан (нпр. Поделом кода) Смањите утицај независног кода (нпр. Лење учитавање ових ресурса)
- Смањите време извршавања ЈаваСцрипт-а оптимизацијом скупих дугих задатака
- Унапред учитајте скрипте кључева, посебно ако је ваша веб локација апликација са једном страницом
Многе од ових оптимизација могу такође побољшати ваш индекс брзине. Овде потражите још савета за перформансе за оцене Лигхтхоусе / ПагеСпеед.
ПагеСпеед Инсигхтс АПИ
За ПСИ повезан је АПИ ПагеСпеед Инсигхтс, који пружа бесплатан приступ праћењу перформанси веб страница и враћа податке са предлозима како да се побољшају. АПИ В5 укључује лабораторијске податке из Светионика и податке из стварног света из Цхроме извештаја о корисничком искуству (ЦрУКС).
`` `јс цонст урл = 'хттпс://вордпресс.орг'; цонст апиЦалл = `хттпс://ввв.гооглеапис.цом/пагеспеедонлине/в5/рунПагеспеед?урл=$ {урл}`; одговор цонст = чекајте преузимање (апиЦалл); цонст јсон = чека одговор.јсон ();
Тимови користе АПИ за израду контролних табли, прилагођених извештаја и прилагођених интеграција са другим алатима за мерење корисничког искуства. Одговори из АПИ-ја могу се користити за надгледање и графички приказ било ког податка из ПСИ алата који смо раније покривали.
Могуће је направити високо прилагођене извештаје помоћу података ПСИ. На пример, Врбо, веб локација за одмор, графички приказује стварне податке из ПСИ АПИ-ја како би пратио дугорочне трендове учинка како би осигурао да његова брзина остане конкурентна у туристичкој индустрији.
Веб.дев Меасуре користи исти задњи крај као ПСИ и користи ове податке за историјско мерење током времена.
Корисно је упознати се са структуром одговора ПСИ АПИ. Доступне су метричке информације за лабораторију и терен / стварни свет:
`` `јс цонст урл = 'хттпс://вордпресс.орг'; цонст апиЦалл = `хттпс://ввв.гооглеапис.цом/пагеспеедонлине/в5/рунПагеспеед?урл=$ {урл}`; дохватити (апиЦалл) .тад (респонсе => респонсе.јсон ()). тхен (јсон => {// Реал-ворлд метрицс цонст црукМетрицс = {„Фирст Цонтентфул Паинт“: јсон.лоадингЕкпериенце.метрицс.ФИРСТ_ЦОНТЕНТФУЛ_ПАИНТ_МС.цатегори, „ Кашњење првог уноса ”: јсон.лоадингЕкпериенце.метрицс.ФИРСТ_ИНПУТ_ДЕЛАИ_МС.цатегори}; // Показатељи лабораторија цонст лигхтхоусе = јсон.лигхтхоусеРесулт; цонст лигхтхоусеМетрицс = {'Прва садржајна боја': лигхтхоусе.аудитс ['фирст-цонтентфул-паинт' 'фирст-цонтентфул-паинт' 'фирст-цонтентфул-паинт' 'фирст-цонтентфул-паинт-' 'фирст-цонтентфул-паинт-' дисплаиВалуе, 'Индекс брзине': лигхтхоусе.аудитс ['индекс брзине']. дисплаиВалуе, 'Време до интеракције': лигхтхоусе.аудитс ['интерактивни']. дисплаиВалуе,}; // ...});
Одговори из АПИ-ја ПСИ усредсређени су на податке о учинку. То је рекло да можете да испоручите ?категорија аргумент за навођење додатних категорија ревизије Светионика за које желите податке.
`` `сх цурл -и“ хттпс://ввв.гооглеапис.цом/пагеспеедонлине/в5/рунПагеспеед?урл=хттпс://веб.дев&цатегори=пва&цатегори=перформанце&цатегори=аццессибилити&цатегори=бест-працтицес&цатегори=сео “
Такође можете доставити локални језик или аргумент стратегије (радна површина или мобилни уређај - који симулира учитавање странице на уређају средње класе - на пример Мото Г4 - на мобилној мрежи).
Лигхтхоусе почиње да подржава стацк пакете, препоруке специфичне за стек који пружају детаљнија упутства о начину примене оптимизација (нпр. ВордПресс). АПИ одговори ПСИ-а такође ово подржавају, па ако тестирате ВордПресс локацију, ови низови су укључени (нпр. Демо УРЛ адреса за вордпресс.орг би била хттпс: // ввв.гооглеапис.цом/пагеспеедонлине/в5/ рунПагеспеед? рл = хттпс: //вордпресс.орг).
Алат ПСИ такође подржава преузимање података ПСИ АПИ-ја и њихово приказивање службеним прегледником Лигхтхоусе Виевер. Пасс ? псиурл као параметар да би се ово видело на делу.
Један од алата који смо изградили на врху ПСИ је модул пси Ноде, који нуди практично извештавање о перформансама у вашем процесу израде.
`` `јс цонст пси = захтијева ('пси'); (асинц () => {// Набавите извештај ПагеСпеед Инсигхтс цонст {дата} = аваит пси ('хттпс://веб.дев'); цонсоле.лог ('Оцена брзине:', дата.лигхтхоусеРесулт.цатегориес.перформанце .сцоре); // Избаците форматирани извештај на терминал на чекање пси.оутпут ('хттпс://тхеверге.цом'); цонсоле.лог ('Готово');}) ();
Такође можете да користите Гоогле табеле и црон посао за аутоматско надгледање више УРЛ-ова (нпр. Конкурената) редовним пингањем ПСИ АПИ-ја. Практични водич и лист који можете копирати доступни су овде.
Услуге независних произвођача
Услуге континуираног надзора, као што су СпеедЦурве, Цалибре или Трео, користе алате попут Лигхтхоусе и ПагеСпеед Инсигхтс испод хаубе. Ако бисте радије да се услуга побрине за редовну проверу оцена учинка и да вам шаље извештаје у односу на своје, размислите о њиховој провери. На крају, користите оно решење које за вашу веб локацију има највише смисла!
Једнако толико важно, негде је сигурно за чување ваше имовине. Погледајте најбоље опције складиштења у облаку за вас.
Брзо, остани брзо!
Што се тиче корисничког искуства, брзина је битна. Витално је разумети различите увиде које нуде метрике учинка, а затим успоставити оне који су важни за ваше корисничко искуство. Алати попут Лигхтхоусе и ПагеСпеед Инсигхтс могу мерити ваше искуство и истакнути могућности за побољшање. Они могу бити користан део алата на вашој веб страници за убрзавање и задржавање брзине.
