Как да анализираме ефективността на уебсайта с Lighthouse

Проверете ефективността на уебсайта ръчно, програмно или автоматично

Lighthouse е проект с отворен код на Google, който ви дава начин да измервате ефективността на уеб страниците. Той има конфигурируеми настройки за възпроизвеждане на различни условия. Можете например да зададете тип мрежа и устройство да симулират.

Давате на Lighthouse URL адрес за одит, той провежда поредица от одити на страницата и след това генерира отчет за това колко добре се е справила страницата. Оттам използвайте неуспешните одити като индикатори за това как да подобрите страницата. Всеки одит има справочен документ, обясняващ защо одитът е важен, както и как да го поправите. фар

Има много причини, поради които искате да измервате ефективността, но една от най-важните е за въздействието върху SEO. Влизам в повече подробности за това и как да се обърна към определени показатели в тази статия.

Работещ фар с Chrome DevTools

Можете да провеждате одити на производителността ръчно с разширението на браузъра Chrome DevTools. Просто задействайте разширението от уеб страницата, която искате да тествате, и изберете панела „Одити“.

Сред разнообразните одити можете да изберете „изпълнение“. Можете също така да изберете да симулирате тип устройство и регулиране на мрежата. Част от информацията за дроселирането може да бъде намерена в репото на Gighub за проекта Lighthouse.

След това кликнете върху „Стартиране на одити“. След приключване, Lighthouse предоставя отчет в потребителския интерфейс на разширението.

Този доклад представлява общ преглед на важни показатели, възможности и цялостен резултат. Миниатюрите илюстрират жизнения цикъл на зареждане на страницата. Какво означава всичко това? Google предоставя множество документи, описващи всеки показател, как да се справят с тях и общия резултат.

В горната лява част на панела на Chrome DevTools има икона за изтегляне, която можете да използвате, за да изтеглите пълния отчет във формат JSON. След това можете да го използвате, за да създадете PDF отчет чрез Lighthouse Report Viewer.

Поради големия обем фактори, които играят роля в жизнения цикъл на зареждане на страницата, е важно да сравнявате резултатите в групи. Ако вземете средно 5 пробега, например, ще осигурите по-добра представа.

Работещ Лайтхаус програмно

За нашите стандартни ситуации на „въртене на мелницата“ горното трябва да е достатъчно. Друг начин за стартиране на Lighthouse включва инсталиране на пакета с отворен код чрез NPM и следване на инструкциите в документацията на CLI. Това може да бъде от полза, ако искате например да провеждате одити програмно в конвейер за изграждане.

Подобно на горното, можете също да стартирате Lighthouse в код, като следвате документацията за програмно използване на модула Node. Можете да създадете пълноценно приложение Node.js с Lighthouse ?!

Пускане на фара автоматично с течение на времето

Така че сега, когато сме професионалисти - нека вземем това на следващото ниво. Има много интеграции, изброени в документацията на Lighthouse, така че нека да разгледаме една от тях.

Използване на „Foo“ за стартиране на Лайтхаус и сравняване на резултатите във времето

В инженерна среда, при която много разработчици внедряват редовно промените в приложенията, може да е важно да наблюдавате ефективността на уебсайта с течение на времето, за да свържете наборите от промени с влошаване или подобряване на производителността. Друг пример биха били екипи, които имат инициативи за подобряване на ефективността за SEO класиране или по други причини. В тези ситуации е изключително важно да наблюдавате ефективността на уебсайта през дни, седмици, месеци и т.н.

Можете да добавите URL адреси за проследяване на www.foo.software и да наблюдавате промените в производителността. Foo също така предоставя известия по имейл, Slack или PagerDuty, когато производителността спадне под праг, определен от потребителя, когато се върне към нормалното и когато подобренията се идентифицират автоматично!

Най-хубавото в него е, че можете да си създадете акаунт безплатно! След като се регистрирате и влезете, щракнете върху връзката „Страници“ от горната навигация. Тук можете да добавяте URL адреси за наблюдение. Foo записва резултати и показва график на времевата линия, осигуряващ визуализация на важни показатели. Можете да превключвате между дни, седмици, месеци и да разглеждате подробни отчети.

Заключение

Lighthouse се превръща в индустриален стандарт за измерване на производителността на уебсайтове. Има книги на стойност документация за Лайтхаус, която предоставя подробности за важни показатели.