Как да използвате Google Lighthouse за тестване на ефективността на уебсайта – TechCult
Miscellanea / / November 07, 2023
Когато става въпрос за класиране на вашия уебсайт по-високо в резултатите от търсачката, скоростта на уебсайта е фактор, който не може да бъде пренебрегнат. Това не само радва потребителите, но и води до повишена видимост. В края на краищата никой не иска да кликне върху страница и да чака вечно да се зареди. Виждате например TechCult, нашите блогове се зареждат доста бързо, нали? Хаха, шегата настрана, ако се притеснявате, че уебсайтът ви не може да се класира поради ниска скорост, Google Lighthouse е тук, за да ви помогне. В днешната статия ще ви покажем как да използвате Google Lighthouse за тестване на производителността.
![Как да използвате Google Lighthouse за тестване на ефективността на уебсайта](/f/7f811fe66422ab98c5e958550414c475.png)
Какво е Google Lighthouse и как да го използвате за тестване на производителността?
Често се казва, че първото впечатление е последно. На тази бележка често уебсайт, който се зарежда бързо, е важен по отношение на по-добро потребителско изживяване, което в крайна сметка може да доведе до повишен процент на реализация. Дори търсачки като Google класират по-бързо зареждащите се уебсайтове по-високо в резултатите от търсенето.
Google Lighthouse е автоматизиран инструмент с отворен код, който помага на разработчиците и собствениците на уебсайтове да оценяват и подобряват качеството на уеб страниците. Има одити за ефективност, достъпност, най-добри практики и SEO както за мобилни устройства, така и за настолни компютри. Въз основа на неговите подробни отчети и препоръки, потребителите могат да оптимизират работата на сайта за по-добра ангажираност на потребителите. Lighthouse може да се стартира срещу всяка уеб страница, публично или частно достъпна. Нека да видим как работи и как можете да го използвате.
Метод 1: Директно добавяне и стартиране на Lighthouse
Lighthouse също е наличен за потребители под формата на разширение на Google, което можете да изтеглите, за да изпълнява одити вместо вас в браузъра Chrome. Следвайте стъпките по-долу:
1. Посетете Страница на уеб магазина на Chrome за разширението Lighthouse във всеки уеб браузър.
2. Кликнете върху Добавете към Chrome.
![Кликнете върху Добавяне към Chrome за Google Lighthouse](/f/ad6fe62b112f529c85e847e2eb0f4f7b.png)
3. Изберете Добавете разширение за да потвърдите.
4. След като бъде добавен, стартирайте уебсайта в браузъра, който искате да анализирате.
5. Кликнете върху Икона на разширение (пъзел). до адресната лента и изберете фар.
6. Кликнете върху Генериране на отчет.
![Кликнете върху Генериране на отчет. | тестване на производителността на фара](/f/3f25d112b7f9b1fb93f9220e8165bb2f.png)
Това е! След няколко секунди Lighthouse ще генерира подробен отчет, анализиращ уебсайта, за който сте извършили теста.
Метод 2: Използвайте PageSpeed Insights
Google PageSpeed Insights също е a инструмент за тестване на уеб ефективността който използва Lighthouse като своя машина за анализ. Следователно можете да го използвате за генериране на отчети за вашия уебсайт. Следвай стъпките:
1. Посетете PageSpeed Insights уебсайт.
2. Въведете URL адреса на уебсайта в текстовото поле и щракнете върху Анализирам.
![Въведете URL адреса на уебсайта в текстовото поле и щракнете върху Анализ.](/f/e87dd332ed467e60b1004f5137ae3baf.png)
След като тестването приключи, ще получите отчета за потребителското изживяване на Chrome, който показва резултатите, получени от реални потребители.
![Резултати от PageSpped Insights | тестване на производителността на фара](/f/8069809c9c171fb448f1de6c4a4cd10d.png)
Разделът Диагностика на проблеми с производителността представлява резултата на Lighthouse. Можете да проверите резултатите както за мобилни устройства, така и за настолни компютри.
![Резултати от Lighthouse - Диагностицирайте проблеми с производителността](/f/552b36918980db18d172f623f38b0736.png)
Метод 3: Стартирайте Lighthouse в DevTools
Lighthouse има свой панел в Google Chrome DevTools, който можете да използвате и за тестване на ефективността, ако уебсайтът ви работи на локален сървър или също за сайтове, които изискват влизане. Ето как да го направите:
1. Посетете уебсайта, който искате да одитирате.
2. Щракнете с десния бутон някъде на страницата и изберете Инспектирайте от менюто.
![Щракнете с десния бутон някъде на страницата и изберете Проверка от менюто. | тестване на производителността на фара](/f/e893bef1e22a7473542798a872dc1d8e.png)
3. Кликнете върху >> икона (Още раздели) и изберете фар от контекстното меню.
![Кликнете върху (Още раздели) и изберете Lighthouse от контекстното меню.](/f/9da5ba5935dd9335d517fab2fef5c487.png)
4. Кликнете върху Анализирайте натоварването на страницата бутон горе вдясно и изчакайте, докато резултатите са готови.
Забележка: Изберете устройство по подходящ начин и запазете всички Категории активиран.
![Кликнете върху бутона Анализиране на зареждането на страницата горе вдясно и изчакайте, докато резултатите са готови.](/f/dc4311b7879bba6b28382f2e71577273.png)
Можете също да промените режима. Lighthouse в DevTools предоставя три режима на тестване:
- Навигация: Показва общи резултати, включително производителност, достъпност и SEO.
![Резултати от навигацията Lighthouse в DevTools | тестване на производителността на фара](/f/fa3f155cd7c9f18f39983688d551bf17.png)
- Период от време: Показва резултати въз основа на това колко време е необходимо на дадена страница, за да се зареди и взаимодейства със сърфиста. Ще трябва да взаимодействате със страницата, докато тестът се изпълнява.
![Timespan Lightshouse Score DevTools](/f/b8b8a74643b6b10ac4ad378adf012875.png)
- Моментална снимка: Изчислява резултат за текущата страница
![Snapshot Lighthouse резултат DevTools | тестване на производителността на фара](/f/446b17f9aee799792bf815ed24c365da.png)
Прочетете също:31 най-добри инструменти за уеб скрапиране
Метод 4: Използвайте Lighthouse Module с команден ред
Lighthouse също се предлага като модул Node, който можете да интегрирате във вашите системи за непрекъсната интеграция и да използвате като команден ред или програмно. Всичко, което изисква, е версия на възела. Ако имате Node.js инсталиран на компютъра, следвайте стъпките по-долу:
1. Влезте във вашия сървър и изпълнете следната команда, за да инсталирате глобалния модул Lighthouse на устройството:
npm install -g lighthouse
2. Веднъж инсталиран, изпълнете следната команда, за да извършите тест на Lighthouse:
lighthouse -- view
Можете да видите всички налични опции, като използвате следната команда.
lighthouse --help
Как Lighthouse изчислява резултата
Google Lighthouse комбинира и оценява различни аспекти на показателите за ефективност на уебсайта, като ефективност, достъпност, най-добри практики, SEO и PWA. След като одитът е успешен, той генерира отчет, който включва оценка за всеки аспект, както и препоръки за необходимите подобрения за подобряване на ефективността и взаимодействието с потребителите на вашия уебсайт. Уебсайтовете обикновено се оценяват по скала от 0 до 100.
производителност
Lighthouse анализира колко бързо се зарежда уеб страница. Резултатът за ефективност се изчислява, като се вземат предвид следните показатели –
- Първо боядисване със съдържание (FCP): Колко бързо първият елемент от съдържанието се рисува на екрана
- Най-голямо боядисване на съдържание (LCP): Измерва времето, необходимо на най-големия елемент от съдържанието да стане видим
- Кумулативно изместване на оформлението (CLS): Измерва броя на неочакваните промени в оформлението, които възникват по време на зареждането на страницата, за да оцени визуалната стабилност на страницата. Ниският CLS показва, че уебсайтът е стабилен.
- Общо време на блокиране: Измерва времето, през което главната нишка е блокирана и не реагира на въвеждане от потребителя.
- Индекс на скоростта: Показва колко бързо цялото съдържание на страницата е напълно видимо
Тези показатели измерват скоростта на зареждане и визуалната стабилност на уебсайта. Няколко фактора влияят върху този отчет, като размера и броя на изображенията, броя на използваните добавки и ефективността на кода на уебсайта.
![Резултат за ефективност Lighthouse | тестване на производителността на фара](/f/8ca1f8c0e79108464f972ed6055d6551.png)
Lighthouse изчислява резултата, като взема среднопретеглената стойност на показателите. Естествено, измерванията с по-високо тегло имат по-голямо влияние върху общия ви резултат за изпълнение. Резултатите от показателите не се показват в отчета, а се изчисляват зад кулисите. Можете да щракнете върху опцията Вижте калкулатора, за да получите достъп до подробното изчисление на факторите, влияещи на вашия уебсайт.
![Lighthouse точков калкулатор за производителност](/f/b169f5bcf76e53d6a5c24cee84537897.png)
Достъпност
Това е ориентиран към потребителя резултат, който измерва колко лесен е достъпът на потребителите с увреждания до вашия уебсайт. Той се влияе от фактори като наличието на алтернативен текст върху изображенията, използването на ARIA атрибути и достъпността на клавиатурата на вашия уебсайт. Всеки одит на достъпността е или преминаващ, или неуспешен. Страницата не получава точки за частично преминаване на одит за достъпност, за разлика от одитите на ефективността.
- Алтернативен текст за изображения: Всички изображения на страницата трябва да имат подходящ и описателен алтернативен текст, тъй като е необходим за потребители със зрителни увреждания, които разчитат на екранни четци за интерпретиране на изображения.
- Семантичен HTML: Правилното използване на семантични HTML елементи като заглавие, заглавия, списъци и т.н. помага на екранните четци и друг помощен софтуер да разберат структурата на страницата
- Цветен контраст: Цветовият контраст между текста и неговия фон трябва да отговаря на стандартите, определени от Указанията за достъпност на уеб съдържанието. Достатъчният цветови контраст гарантира, че текстът е четлив за хора с лошо зрение или цветна слепота.
![Рейтинг за достъпност Google Lighthouse | тестване на производителността на фара](/f/b18358eef570d804cf28319111b5bc33.png)
Прочетете също: Как да създадете уебсайт с помощта на ChatGPT
Най-добри практики
Lighthouse измерва доколко вашият уебсайт следва най-добрите практики за уеб разработка и стандартите за кодиране и предоставя оценка въз основа на това. Той проверява използването на модерни функции на JavaScript и защитени връзки (HTTPS) и се влияе от фактори като използването на минимизиране и компресиране, наличието на заглавки за сигурност и използването на robots.txt файлове. Някои от обичайните одити по него включват:
- Избягвайте големи JavaScript библиотеки
- Избягвайте неизползван CSS
- Активирайте компресирането на текст
- Елиминирайте ресурсите, блокиращи изобразяването
- Използвайте кеширането на браузъра
- Сервирайте статични активи с ефективна политика за кеширане
![Рейтинг на Lighthouse за най-добри практики](/f/2d27de23a93501aed1432faccf97e0f8.png)
SEO
SEO измерва колко добре уебсайтът е оптимизиран за търсачките. Той се влияе от фактори като наличието на мета описания и заглавни тагове, използването на подходящи ключови думи и структурата на съдържанието на уебсайта ви. Резултатът се изчислява чрез осредняване на резултатите за следните одити:
- Заглавие на документ
- Описание
- Заглавия
- Изображения
- Връзки
- Мета Описание
- Robots.txt
![SEO резултат на Google Lighthouse | тестване на производителността на фара](/f/93c9c1cd95a5c26240c1337afa2dd700.png)
Прочетете също: 27 най-добри безплатни услуги за хостинг на уебсайтове
Как да интерпретираме резултатите
Lighthouse преобразува всяка необработена метрична стойност в метрична оценка от 0 до 100. Колкото по-висок е резултатът, толкова по-добре е. Резултатите от показателите са оцветени според тези диапазони:
- 0 до 49 (червен триъгълник): Лошо
- 50 до 89 (Оранжев квадрат): Има нужда от подобрение
- 90 до 100 (зелен кръг): Добре
Когато провеждате тестове на същия уебсайт, обичайно е да наблюдавате колебания в общите резултати. Тази променливост може да се дължи на няколко фактора.
- Всеки анализ предоставя само представа за ефективността на зареждането на една страница. Тъй като нито едно зареждане на две страници не е идентично, времето за зареждане естествено може да се различава.
- Скоростта на страницата може да бъде повлияна от наличието на динамично съдържание, като реклами или често променящи се елементи, разширения на браузъра, които променят мрежовите заявки и фонови дейности на компютъра.
- Резултатите, получени в различни среди, като например PageSpeed Insights и вашия локален компютър, може да не са директно сравними поради разлики в хардуера и мрежовите условия.
Как да подобрите своя резултат на Lighthouse
Lighthouse предоставя както лабораторни данни (симулирани тестове), така и полеви данни (реални потребителски данни), за да оцени производителността на уеб страница. Полевите данни предлагат представа за начина, по който действителните потребители преживяват сайта, докато лабораторните данни са полезни за тестване на промени и подобрения.
![Уеб дизайн](/f/26dc96a3e7f35319a0f7c23dbd4d7e69.jpg)
Започнете, като се концентрирате върху препоръките в областта на ефективността. Един уебсайт с по-бързо зареждане ще подобри изживяването на потребителите и може да повиши вашето SEO класиране. След като резултатът ви за ефективност се подобри, можете да започнете да се фокусирате върху препоръките в другите области. Тъй като достъпността и SEO са основни компоненти в цялостното качество на вашия уебсайт, струва си да положите усилия и за подобряване на тези области.
Прочетете също: Zyro срещу Wix: Кой конструктор на уебсайтове да изберете?
Бонус съвети за начинаещи
Ако току-що сте проектирали и стартирали уебсайта си, ето още няколко насоки, които трябва да запазите:
- Не се преуморявайте от многобройните предложения на доклада Lighthouse. Започнете с най-важните съвети и продължете надолу по списъка.
- Докладът Lighthouse може да се използва за проследяване на вашето развитие във времето. Вашите оценки на Lighthouse трябва да се подобрят, докато изпълнявате препоръките.
- Не забравяйте да тествате уебсайта си на много устройства и браузъри. Тъй като докладът Lighthouse се основава на един тест, изключително важно е да тествате уебсайта си на няколко устройства и браузъри, за да сте сигурни, че работи добре за всички потребители.
Надяваме се, че нашето ръководство ви е помогнало да разберете как да използвате Google Lighthouse за тестване на ефективността на вашия уебсайт и по този начин го подобрява. Ако имате въпроси или предложения към нас, уведомете ни в секцията за коментари. Следете TechCult за повече подобни информативни блогове.
Хенри е опитен технологичен писател със страст да прави сложни технологични теми достъпни за ежедневните читатели. С повече от десетилетие опит в технологичната индустрия, Хенри се превърна в доверен източник на информация за своите читатели.