Въведение в Chrome Lighthouse

Chrome Lighthouse съществува от известно време, но какво, ако ви помоля да обясните какво прави, можете ли да обясните живо?

Открих, че много уеб разработчици, включително начинаещи, не са чували за този инструмент, а тези, които са го направили, все още не са го пробвали, това не е готино :(.

В тази статия бих ви представил Chrome Lighthouse, какво прави и как да започнете да го използвате.

PS: Тази статия беше публикувана за първи път в моя блог

Да започваме :)

Според Уикипедия, A фар е кула, изграждане, или други видове структура проектиран да излъчва светлина от система за лампи и лещи и да служи като навигационна помощ за морските пилоти в открито море или по вътрешни водни пътища.

Добре, нека превърнем това в технологичен термин;

Лайтхаус е кула, сграда или друг тип конструкция, предназначена да излъчва светлина от система под панела „Одити“ в Chrome Developer Tools и да служи като ръководство за разработчиците

Има ли някакъв смисъл? :)

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

Мислете за Лайтхаус като за скоростомер в кола, която проверява и балансира ограничението на скоростта на автомобилите.

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

Според Google Developers Docs

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

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

Ето демонстрация на отчета за одити на Lighthouse за този блог //bolajiayodeji.com

Доста готино нали? :)

Това, което трябва да отбележите, е, че не получих страхотни резултати като този при първия си одит. Трябваше да използвам първия си отчет, за да поправя и подобря производителността и качеството на приложението си.

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

Сега, да преминем към интересната част, КАК ДА СТАРТИРАМ !!

LightHouse се предлага в три работни процеса

  • Инструменти за разработчици на Chrome
  • Команден ред (възел)
  • Разширение за Chrome

Аз лично предпочитам да използвам LightHouse в Dev Tools. Използването на разширението няма смисъл, тъй като Dev Tool и разширението работят в един и същ браузър chrome, а нашите предпочитания варират, използвайте това, което работи най-добре за вас.

Lighthouse за първи път се предлагаше само с разширението Chrome, преди да бъде добавен към Chrome DevTools.

Използването на фар в командния ред също е наистина страхотно, (За отрепки :))

Да започваме!!!

[1] Стартирайте Lighthouse в Chrome DevTools

  • Изтеглете уеб браузъра Google Chrome тук
Имайте предвид, че Lighthouse може да се изпълнява само на настолен компютър, но не и на мобилен телефон
  • Отидете до URL адреса, който искате да проверите в Google Chrome.
Можете да проверите всеки URL адрес в мрежата.
  • Отворете Chrome DevTools
Command+Option+C (Mac) Control+Shift+C (Windows, Linux, Chrome OS).
  • Щракнете върху панела Одити

Вляво е прозореца на страницата, която ще бъде одитирана, ето това е моят блог :). Вдясно е панелът Одити на Chrome DevTools, който сега се захранва от Lighthouse

  • Кликнете върху Изпълнение на одити
DevTools ви показва списък с одиторски категории. Уверете се, че сте ги оставили всички отметнати. Ако искате да персонализирате коя част от приложението ви да бъде одитирана, можете да зададете това, като маркирате категориите, които искате да проверите.
  • След 60 до 90 секунди - в зависимост от вашата интернет сила, Lighthouse ви дава отчет на страницата.
Не че скоростта ви на интернет и предварително инсталираните разширения могат да повлияят на одита на фара. За по-добър опит провеждайте одити в режим Icognitoза да се избегне всякаква намеса

[2] Стартирайте Фара в командния ред

  • Изтеглете уеб браузъра Google Chrome тук
  • Изтеглете възела тук, ако вече сте го инсталирали, пропуснете тази стъпка!
  • Инсталирайте Лайтхаус
npm install -g lighthouse # or use yarn: yarn global add lighthouse
На -gзнамето го инсталира като глобален модул.
  • Стартирайте одитите си
lighthouse 

Проба;

lighthouse //bolajiayodeji.com/

По подразбиране Lighthouse записва отчета в HTML файл. Можете да контролирате изходния формат чрез предаване на флагове.

Докладът може да бъде показана в HTML или JSON формат

Изходни проби:

lighthouse # saves `./_.report.html` lighthouse --output json # json output sent to stdout lighthouse --output html --output-path ./report.html # saves `./report.html` # NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats lighthouse --output json --output html --output-path ./myfile.json # saves `./myfile.report.json` and `./myfile.report.html` lighthouse --output json --output html # saves `./_.report.json` and `./_.report.html` lighthouse --output-path=~/mydir/foo.out --save-assets # saves `~/mydir/foo.report.html` # saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json` lighthouse --output-path=./report.json --output json # saves `./report.json`

Изпълнете $ lighthouse --helpза CLI опции

[3] Стартирайте Lighthouse с разширението за Chrome

Както казах по-рано, работният процес на DevTools е най-добрият, тъй като осигурява същите предимства като работния процес на разширението, с добавения бонус за ненужна инсталация.

За да използвате този метод, трябва да инсталирате разширението, но ако имате своите причини, ето ръководството ;

  • Изтеглете уеб браузъра Google Chrome тук
  • Install the Lighthouse Chrome Extension from the Chrome Webstore.
  • Navigate to the page you want to audit
  • Click Lighthouse Icon.
It should be next to the Chrome address bar. If not, open Chrome’s main menu (the three dots on the upper right) and access it at the top of the menu. After clicking, the Lighthouse menu expands.
  • Click Generate report.
Lighthouse runs its audits against the opened page, then opens up a new tab with a report of the results.

Bingo! You did it

That’s pretty much it, Lighthouse is a great tool, especially for beginners.

It is a very useful tool when it comes to auditing Progressive web apps.

I actually learned so much about optimization and performance standards when I started using Lighthouse. In no time you would become an expert in building full optimized web apps with great performance, accessibility and user experience. :)

Lighthouse is not magic, it was created by humans. It is open source and contributions are welcome. Check out the repository’s issue tracker to find bugs that you can fix, or audits that you can create or improve upon. The issues tracker is also a good place to discuss audit metrics, ideas for new audits, or anything else related to Lighthouse.

Thank you for reading this, after installing and using Lighthouse, share your success stories in the comments!

Also, I just launched my blog where I write articles on web and frontend development, don’t forget to visit and share!!!