Како користити Гоогле Лигхтхоусе за тестирање перформанси веб странице – ТецхЦулт
Мисцелланеа / / November 07, 2023
Када је у питању боље рангирање ваше веб странице у резултатима претраживача, брзина веб странице је фактор који се не може занемарити. Не само да одушевљава кориснике, већ се претвара и у повећану видљивост. На крају крајева, нико не жели да кликне на страницу и заувек чека да се учита. На пример, видите ТецхЦулт, наши блогови се учитавају прилично брзо, зар не? Хах, шале на страну, ако сте забринути да ваша веб локација не може да се рангира због мале брзине, Гоогле Лигхтхоусе је ту да вам помогне. У данашњем чланку ћемо вам показати како да користите Гоогле Лигхтхоусе за тестирање перформанси.
Шта је Гоогле Лигхтхоусе и како га користити за тестирање перформанси?
Уобичајена је пословица да је први утисак последњи. С тим у вези, често је веб локација која се брзо учитава висока у смислу бољег корисничког искуства, што на крају може довести до повећаних стопа конверзије. Чак и претраживачи попут Гоогле-а рангирају веб локације које се брже учитавају више у резултатима претраге.
Гоогле Лигхтхоусе је аутоматизована алатка отвореног кода која помаже програмерима и власницима веб локација да процене и побољшају квалитет веб страница. Има ревизије за перформансе, приступачност, најбоље праксе и СЕО за мобилне и десктоп рачунаре. На основу његових детаљних извештаја и препорука, корисници могу да оптимизују перформансе сајта ради бољег ангажовања корисника. Лигхтхоусе се може покренути на било којој веб страници, јавно или приватно доступној. Хајде да видимо како то функционише и како га можете користити.
Метод 1: Директно додајте и покрените Лигхтхоусе
Лигхтхоусе је такође доступан корисницима у облику Гоогле екстензије, коју можете да преузмете да бисте извршили ревизије за вас у Цхроме претраживачу. Следите доле наведене кораке:
1. Посетите Страница Цхроме веб продавнице за екстензију Лигхтхоусе на било ком веб претраживачу.
2. Кликните на Додај у Цхроме.
3. Изаберите Додајте екстензију за потврду.
4. Када додате, покрените веб локацију у претраживачу који желите да анализирате.
5. Кликните на Икона проширења (слагалице). поред траке за адресу и изаберите Светионик.
6. Кликните на Генерисање извештаја.
То је то! За неколико секунди, Лигхтхоусе ће генерисати детаљан извештај анализирајући веб локацију за коју сте тестирали.
Метод 2: Користите ПагеСпеед Инсигхтс
Гоогле ПагеСпеед Инсигхтс је такође а алат за тестирање веб перформанси који користи Лигхтхоусе као свој механизам за анализу. Стога га можете користити за генерисање извештаја за своју веб локацију. Пратите кораке:
1. Посетите ПагеСпеед Инсигхтс веб сајт.
2. Унесите УРЛ веб локације у поље за текст и кликните на Анализирај.
Када се тестирање заврши, добићете извештај о корисничком искуству Цхроме-а који приказује резултате стварних корисника.
Одељак Дијагностиковање проблема са перформансама представља Лигхтхоусе резултат. Можете проверити резултате и за мобилне и за десктоп.
Метод 3: Покрените Лигхтхоусе у ДевТоолс
Лигхтхоусе има свој панел у Гоогле Цхроме ДевТоолс-у који такође можете да користите за тестирање перформанси ако ваша веб локација ради на локалном серверу или такође за веб локације које захтевају пријаву. Ево како да то урадите:
1. Посетите веб локацију коју желите да извршите ревизију.
2. Кликните десним тастером миша било где на страници и изаберите Инспецт из менија.
3. Кликните на >> икона (Још картица) и изаберите Светионик из контекстног менија.
4. Кликните на Анализирајте оптерећење странице дугме у горњем десном углу и сачекајте док резултати не буду спремни.
Белешка: Изаберите Уређај на одговарајући начин и чувајте све Категорије омогућено.
Такође можете променити режим. Лигхтхоусе у ДевТоолс нуди три режима тестирања:
- Навигација: Приказује укупне резултате укључујући перформансе, приступачност и СЕО.
- Временски распон: Приказује резултате засноване на томе колико је времена потребно страници да се учита и оствари интеракцију са сурфером. Мораћете да комуницирате са страницом док је тест у току.
- Снимак: Израчунава резултат за тренутну страницу
Такође прочитајте:31 најбољих алата за гребање веба
Метод 4: Користите Лигхтхоусе модул са командном линијом
Лигхтхоусе је такође доступан као Ноде модул који можете интегрисати у своје системе континуиране интеграције и користити као командну линију или програмски. Све што је потребно је верзија чвора. Ако имате Ноде.јс инсталиран на рачунар, следите доле наведене кораке:
1. Пријавите се на свој сервер и покрените следећу команду да бисте инсталирали Лигхтхоусе глобални модул на уређај:
npm install -g lighthouse
2. Када се инсталира, покрените следећу команду да бисте извршили тест светионика:
lighthouse -- view
Можете погледати све доступне опције користећи следећу команду.
lighthouse --help
Како Лигхтхоусе израчунава резултат
Гоогле Лигхтхоусе комбинује и процењује различите аспекте метрике учинка веб локације, као што су перформансе, приступачност, најбоље праксе, СЕО и ПВА. Када је ревизија успешна, онда генерише извештај који укључује оцену за сваки аспект, као и препоруке за неопходна побољшања за побољшање перформанси и интеракције корисника ваше веб странице. Веб локације се обично оцењују на скали од 0 до 100.
Перформансе
Лигхтхоусе анализира колико брзо се веб страница учитава. Оцена учинка се израчунава узимајући у обзир следеће метрике –
- Прво осликавање садржаја (ФЦП): Колико брзо се први елемент из садржаја осликава на екрану
- Највећа боја која садржи садржај (ЛЦП): Мери време потребно да највећи елемент садржаја постане видљив
- Кумулативни помак распореда (ЦЛС): Мери количину неочекиваних померања изгледа до којих долази током учитавања странице да би се проценила визуелна стабилност странице. Низак ЦЛС указује да је веб локација стабилна.
- Укупно време блокирања: Мери време током којег је главна нит блокирана и не реагује на кориснички унос.
- Индекс брзине: Означава колико брзо је сав садржај странице потпуно видљив
Ови показатељи мере брзину учитавања веб локације и визуелну стабилност. Неколико фактора утиче на овај извештај, као што су величина и број слика, број коришћених додатака и ефикасност кода веб локације.
Лигхтхоусе израчунава резултат узимајући пондерисани просек метричких вредности. Наравно, мерења са већом тежином имају већи утицај на ваш укупан резултат учинка. Метричке оцене се не приказују у извештају, већ се израчунавају иза сцене. Можете да кликнете на опцију Види калкулатор да бисте добили приступ детаљном прорачуну фактора који утичу на вашу веб локацију.
Приступачност
То је резултат усмерен на корисника који мери колико је корисницима са инвалидитетом лако да приступе вашој веб локацији. На то утичу фактори као што су присуство алтернативног текста на сликама, употреба АРИА атрибута и доступност ваше веб странице са тастатуре. Свака ревизија приступачности је или пролазна или неуспешна. Страница не добија бодове за делимично пролазак ревизије приступачности, за разлику од ревизије учинка.
- Алтернативни текст за слике: Све слике на страници треба да имају одговарајући и описни алтернативни текст, јер је неопходан корисницима са оштећеним видом који се ослањају на читаче екрана да тумаче слике.
- Семантички ХТМЛ: Правилна употреба семантичких ХТМЛ елемената као што су наслов, наслови, листе итд. помаже читачима екрана и другом помоћном софтверу да разумеју структуру странице
- Контраст боја: Контраст боја између текста и његове позадине треба да испуњава стандарде постављене Смерницама за приступачност веб садржаја. Довољан контраст боја осигурава да је текст читљив за особе са слабим видом или далтонистима.
Такође прочитајте: Како направити веб локацију користећи ЦхатГПТ
Најбоље праксе
Лигхтхоусе мери колико добро ваша веб локација прати најбоље праксе и стандарде кодирања за веб развој и даје оцену на основу тога. Проверава употребу модерних ЈаваСцрипт функција и безбедних веза (ХТТПС) и на њега утичу фактори као што су коришћење минимизације и компресије, присуство безбедносних заглавља и употреба роботс.ткт фајлови. Неке од уобичајених ревизија у оквиру њега укључују:
- Избегавајте велике ЈаваСцрипт библиотеке
- Избегавајте неискоришћени ЦСС
- Омогућите компресију текста
- Елиминишите ресурсе који блокирају рендеровање
- Искористите кеширање претраживача
- Послужите статична средства уз ефикасну политику кеша
СЕО
СЕО мери колико је веб локација оптимизована за претраживаче. На то утичу фактори као што су присуство мета описа и ознака наслова, употреба релевантних кључних речи и структура садржаја ваше веб странице. Оцена се израчунава усредњавањем оцена за следеће ревизије:
- Назив документа
- Опис
- Наслови
- Слике
- Линкови
- Мета опис
- Роботс.ткт
Такође прочитајте: 27 најбољих бесплатних услуга за хостовање веб локација
Како протумачити резултате
Лигхтхоусе претвара сваку сирову метричку вредност у метрички резултат од 0 до 100. Што је већи резултат, то је боље. Резултати метрике су обојени у складу са овим распонима:
- 0 до 49 (црвени троугао): Лоше
- 50 до 89 (наранџасти квадрат): потребно је побољшање
- 90 до 100 (зелени круг): Добро
Када покрећете његове тестове на истој веб локацији, уобичајено је уочити флуктуације у укупним резултатима. Ова варијабилност се може приписати неколико фактора.
- Свака анализа пружа само увид у учинак учитавања једне странице. Пошто ниједно учитавање на две странице није идентично, времена учитавања могу се природно разликовати.
- На брзину странице може утицати присуство динамичког садржаја, као што су огласи или елементи који се често мењају, проширења претраживача која мењају мрежне захтеве и позадинске активности на рачунару.
- Резултати добијени у различитим окружењима, као што су ПагеСпеед Инсигхтс и ваш локални рачунар, можда неће бити директно упоредиви због разлика у хардверским и мрежним условима.
Како да побољшате свој резултат на светионици
Лигхтхоусе обезбеђује и лабораторијске податке (симулирани тестови) и теренске податке (стварни кориснички подаци) за процену учинка веб странице. Подаци са терена нуде увид у то како стварни корисници доживљавају сајт, док су лабораторијски подаци корисни за тестирање промена и побољшања.
Почните тако што ћете се концентрисати на препоруке у домену учинка. Веб локација која се брже учитава побољшаће корисничко искуство и може повећати ваш СЕО ранг. Када се ваш резултат побољша, можете почети да се фокусирате на препоруке у другим областима. Пошто су приступачност и СЕО кључне компоненте у укупном квалитету ваше веб странице, вреди посветити напор и побољшању ових области.
Такође прочитајте: Зиро вс Вик: Који програмер веб локација треба да изаберете?
Бонус савети за почетнике
Ако сте управо дизајнирали и покренули своју веб локацију, ево још неколико савета које бисте требали задржати:
- Немојте да вас преплаве бројни предлози извештаја Лигхтхоусе. Почните са најважнијим саветима и напредујте низ листу.
- Извештај Лигхтхоусе се може користити за праћење вашег развоја током времена. Ваше оцене у Лигхтхоусе-у би требало да се побољшају како будете извршавали препоруке.
- Не заборавите да тестирате своју веб локацију на многим уређајима и претраживачима. Пошто је извештај Лигхтхоусе заснован на једном тесту, од кључне је важности да тестирате своју веб локацију на неколико уређаја и прегледача како бисте били сигурни да добро функционише за све кориснике.
Надамо се да вам је наш водич помогао да разумете како да користите Гоогле Лигхтхоусе за тестирање перформанси ваше веб странице и тиме га побољшати. Ако имате било каква питања или сугестије за нас, обавестите нас у одељку за коментаре. Пратите ТецхЦулт за још таквих информативних блогова.
Хенри је искусни технолошки писац са страшћу да сложене технолошке теме учини доступним свакодневним читаоцима. Са више од деценије искуства у технолошкој индустрији, Хенри је постао поуздан извор информација за своје читаоце.