Увод у Цхроме Лигхтхоусе

Цхроме Лигхтхоусе постоји већ неко време, али шта ако вас замолим да објасните шта ради, можете ли то сликовито објаснити?

Открио сам да многи веб програмери, укључујући почетнике, нису чули за овај алат, а они који јесу, још га нису испробали, то није у реду :(.

У овом чланку бих вам представио Цхроме Лигхтхоусе, шта он ради и како да почнете да га користите.

ПС: Овај чланак је први пут објављен на мом блогу

Хајде да почнемо :)

Према Википедији, свјетионик је кула, гради, или друге врсте структуре дизајнирана да емитују светлост из система лампи и сочива и да служи као навигациони помоћ за поморске пилота на мору или на унутрашњим пловним путевима.

Ок, претворимо ово у технолошки појам;

Светионик је торањ, зграда или други тип конструкције дизајниран да емитује светлост из система испод панела „Ревизије“ у Цхроме Девелопер Тоолс и служи као водич за програмере

Имате ли смисла? :)

Па, Лигхтхоусе је алат који је развио Гоогле који анализира веб апликације и веб странице, прикупљајући савремене показатеље учинка и увиде у најбоље праксе програмера.

Замислите Лигхтхоусе као брзиномер у аутомобилу који проверава и уравнотежује ограничење брзине аутомобила.

У основи, Лигхтхоусе ради са најбољим праксама програмера и показатељима перформанси. Покреће провере у веб апликацији и даје вам повратне информације о грешкама, праксе испод стандарда, савете за боље перформансе и како их исправити.

Према Гоогле Девелоперс Доцс

Лигхтхоусе је аутоматизовани алат за побољшање квалитета веб страница отвореног кода. Можете га покренути на било којој веб страници, јавној или која захтева потврду идентитета. Има ревизије перформанси, приступачности, прогресивних веб апликација и још много тога. Можете да покренете Лигхтхоусе у Цхроме ДевТоолс, из командне линије или као Ноде модул. Дајете Лигхтхоусеу УРЛ за ревизију, он покреће серију ревизија на страници, а затим генерише извештај о томе колико је страница добро радила. Одатле користите неуспеле ревизије као показатеље како побољшати страницу. Свака ревизија има референтни документ који објашњава зашто је ревизија важна, као и како је поправити.

То је углавном све о Лигхтхоусеу. Он врши ревизију УРЛ-а веб апликације и генерише извештај који вам говори колико је ваша веб апликација лоша и добра у складу са веб стандардима и најбољом праксом програмера. Уз сваки одељак извештаја такође је приложена документација која објашњава зашто је тај део ваше апликације ревидиран, зашто бисте тај део апликације требали побољшати и како то поправити.

Ево демо извештаја о ревизији Светионика за овај блог //болајиаиодеји.цом

Прилично цоол зар не? :)

Оно што бисте требали приметити јесте да на првој ревизији нисам добио овакве одличне резултате. Морао сам да користим свој први извештај да поправим и побољшам перформансе и квалитет своје апликације.

Ово је идеја која стоји иза Лигхтхоусе-а, а то је препознавање и решавање уобичајених проблема који утичу на перформансе, приступачност и корисничко искуство ваших веб локација.

Сада, пређимо на занимљив део, КАКО ДА ПОЧНЕМО !!

ЛигхтХоусе је доступан у три тока посла

  • Цхроме Девелопер Тоолс
  • Командна линија (чвор)
  • Додатак за Цхроме

Ја лично више волим да користим ЛигхтХоусе у Дев Тоолс. Коришћење екстензије нема смисла јер алатка за програмере и екстензија раде у истом Цхроме прегледачу, али наше преференције се разликују, користите оно што вам највише одговара.

Лигхтхоусе је први пут био доступан само са додатком за Цхроме пре него што је додат у Цхроме ДевТоолс.

Коришћење светионика на командној линији је такође супер, (за геекове :))

Хајде да почнемо!!!

[1] Покрените Лигхтхоусе у Цхроме ДевТоолс

  • Преузмите веб прегледач Гоогле Цхроме овде
Имајте на уму да се Лигхтхоусе може покретати само на радној површини, а не и на мобилном уређају
  • Идите на УРЛ који желите да прегледате у Гоогле Цхроме-у.
Можете да ревидирате било који УРЛ на вебу.
  • Отворите Цхроме ДевТоолс
Command+Option+C (Mac) Control+Shift+C (Windows, Linux, Chrome OS).
  • Кликните на панел Ревизије

Са леве стране је приказ странице која ће бити ревидирана, ево мог блога :). Десно се налази панел Ревизије Цхроме ДевТоолс-а, који сада покреће Лигхтхоусе

  • Кликните на Покрени ревизије
ДевТоолс вам приказује листу категорија ревизије. Обавезно их оставите означене. Ако желите да персонализујете који део апликације треба да се ревидира, то можете да подесите потврђивањем категорија које желите да ревидирате.
  • После 60 до 90 секунди - у зависности од ваше јачине интернета, Лигхтхоусе вам даје извештај на страници.
Није да брзина интернета и унапред инсталирани додаци могу утицати на ревизију светионика. За боље искуство, покрените ревизије у режиму Икогнитода би се избегло свако ометање

[2] Покрени Светионик у командној линији

  • Download Google Chrome web browser here
  • Download node here, If you have it installed already, skip this step!
  • Install Lighthouse
npm install -g lighthouse # or use yarn: yarn global add lighthouse
The -g flag installs it as a global module.
  • Run your audits
lighthouse 

Sample;

lighthouse //bolajiayodeji.com/

By default, Lighthouse writes the report to an HTML file. You can control the output format by passing flags.

The report can be displayed in HTML or JSON format

Output samples:

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`

Run $ lighthouse --help for CLI options

[3] Run Lighthouse with the Chrome extension

As I earlier said, The DevTools workflow is the best as it provides the same benefits as the Extension workflow, with the added bonus of no installation needed.

To use this method you need to install the extension, but If you have your reasons, here is the guide;

  • Download Google Chrome web browser here
  • 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.

Заправо сам толико научио о стандардима за оптимизацију и перформансе када сам почео да користим Лигхтхоусе. Зачас бисте постали стручњак за изградњу потпуно оптимизованих веб апликација са одличним перформансама, приступачношћу и корисничким искуством. :)

Светионик није магија, створили су га људи. Отворени је извор и доприноси су добродошли. Погледајте трагач издања спремишта да бисте пронашли грешке које можете да поправите или ревизије које можете да направите или побољшате. Трагач за издавањима је такође добро место за расправу о метрикама ревизије, идејама за нове ревизије или било чему другом везаном за Лигхтхоусе.

Хвала вам што сте прочитали ово, након инсталирања и коришћења Светионика поделите своје приче о успеху у коментарима!

Такође, управо сам покренуо свој блог на којем пишем чланке о развоју веба и фронтенда, не заборавите да посетите и делите !!!