- Запуск аўдыту
- катэгорыі
- прадукцыйнасць
- Прагрэсіўнае вэб-дадатак
- даступнасць
- Лепшыя практыкі
- SEO
- Маяк CLI і многае іншае
- Інтэрфейс каманднага радка
- Маяк як паслуга
- web.dev
- выснову
Ці ведаеце вы, што Chrome можа правесці ўсебаковую праверку вэб-старонкі і аналізаваць розныя катэгорыі, такія як "Прадукцыйнасць", "SEO", "Лепшыя практыкі", "Даступнасць", "Прагрэсіўнае выкананне вэб-прыкладанняў" і іншае?
Запуск аўдыту
У версіі 60 Chrome прадставіла выдатнае новае дадатак да свайго распрацоўшчыка інструментаў. Гэта комплексная функцыя аўдыту для вэб-старонак, на якой працуе інструмент, званы "Маяк". Гэта інструмент з адкрытым зыходным кодам GitHub , Каб правесці праверку, трэба адкрыць прылады Chrome Dev (F12) і абярыце ўкладку Аўдыты:
Перад пачаткам аўдыту можна выбраць розныя параметры канфігурацыі. Перш за ўсё, вы можаце выбраць катэгорыі, у якіх вы хочаце, каб мэтавы сайт быў правераны. Адключэнне катэгорыі робіць аналіз хутчэй, але давайце захаваем усе катэгорыі. Акрамя таго, вы можаце выбраць, ці павінен Lighthouse праверыць свой сайт у якасці мабільнага або настольнага агента. Нарэшце, вы можаце сказаць Chrome, каб эмуляваць прыладу з павольным працэсарам і павольней сеткавай падключэннем, так што вы можаце праверыць, як ваш сайт працуе на мабільных прыладах больш нізкага ўзроўню з большай падключэннем. Варта праверыць, бо вынікі могуць кардынальна адрознівацца ад таго, што вы адчуваеце на сваім перадавым ПК з суперскоростным падключэннем.
Цяпер давайце націсніце кнопку Праверыць. Chrome аналізуе вашу старонку на розныя магчымыя праблемы ў выбраных катэгорыях. Пасля праверкі, вы атрымліваеце бал у кожнай з катэгорый да 100 балаў:
Звярніце ўвагу, што ўсталяваныя пашырэнні Chrome могуць аказаць негатыўны ўплыў на вынікі, так што можа правесці праверку ў рэжыме інкогніта, дзе гэтыя пашырэнні адключаныя.
катэгорыі
У кожнай з катэгорый ацэнка разлічваецца на аснове праверкі, якія праваліліся і якія прайшлі. Вы можаце ўбачыць дакладна, што было паспяхова, што не, і можаце прачытаць падрабязнасці пра кожную праверку. Акрамя таго, некаторыя катэгорыі ўтрымліваюць спіс дадатковых ручных праверак - этапы, якія не могуць быць правераны аўтаматычна, але яны па-ранейшаму важныя і заслугоўваюць праверкі.
прадукцыйнасць
Першая катэгорыя - Прадукцыйнасць. Гэта, без сумневу, важная вобласць, каб засяродзіцца. Тым больш, што многія карыстальнікі, як правіла, маюць нізкае якасць сеткавага падлучэння альбо маюць доступ да вашага сайта з мабільных прылад. Lighthouse можа прымаць гэта пад увагу і можа імітаваць павольнае падключэнне да сеткі і павольны працэсар. Вы можаце быць здзіўлены, наколькі дрэнна ў такіх умовах прадукцыйнасць вашага сайта. Гэта можна наладзіць перад пачаткам праверкі.
У дадатак да 0-100 балаў, Lighthouse вымярае розныя паказчыкі прадукцыйнасці, якія вельмі карысныя пры вызначэнні прадукцыйнасці ўспрымання карыстальніка. Не так важна, колькі часу займае старонка, каб цалкам загрузіць усе дробныя дэталі. Што можа аказаць істотны ўплыў на карыстацкі досвед, калі першы значны змест размаляваны на вашай старонцы і калі ён пачынае быць інтэрактыўным.
У метрыцы можна ўбачыць прагляд фільма . Так выглядае ваша старонка падчас загрузкі. Карысна праверыць, ці з'яўляецца ваша старонка паступова адлюстроўваць нейкі кантэнт, а не белы часцей за ўсё, паколькі карыстальнікі ўспрымаюць такія старонкі хутчэй і менш схільныя пакінуць іх, калі старонка ўсё яшчэ загружаецца.
Але што сапраўды карысна, гэта тое, што інструмент рэкамендуе вам розныя спосабы павелічэння прадукцыйнасці ў вашым выпадку з рэальнымі дадзенымі - гэта значыць, колькі часу вы можаце зэканоміць, вырашаючы розныя праблемы.
Прагрэсіўнае вэб-дадатак
Прагрэсіўныя вэб-прыкладанні - гэта набор прынцыпаў праектавання і кіруючых прынцыпаў Google. Гэта павінна прывесці да бесперабойнай працы карыстальнікаў, падобных на роднае мабільнае прыкладанне. У ім працуюць службовыя асобы, таму прыкладанне можа працаваць у сетках нізкай якасці ці нават у аўтаномным рэжыме. І калі ён у Інтэрнэце, ён заўсёды мае актуальныя дадзеныя. Ён павінен быць загружаны толькі праз HTTPS, выкарыстоўваць штуршкі і забяспечваць выдатны час загрузкі і прадукцыйнасць. Што робіць Lighthouse, гэта тое, што ён правярае ваша прыкладанне супраць PWA кантрольны спіс ,
Каб даведацца больш паспрабуйце - Ваш першы PWA ,
даступнасць
Гэты падзел ахоплівае даступнасць, гэта значыць пераканацца, што ваша прыкладанне можа быць выкарыстана як мага большай колькасцю карыстальнікаў. Гэта, як правіла, азначае, што карыстальнікі, якія маюць нейкую парушэнне або інваліднасць, маюць максімальна гладкі вопыт. Гэта ўключае ў сябе, але не абмяжоўваючыся гэтым, прадастаўленне дастатковых метададзеных чытачам экрана - напрыклад, атрыбутаў ARIA. Структура вашага зместу таксама павінна ўлічваць гэта, і вы павінны пераканацца, што вы выкарыстоўваеце належныя семантычныя элементы (напрыклад, моцныя супраць b ). Вашы выявы павінны мець належныя атрыбуты альта, палі формы павінны прымацаваць элементы этыкеткі і гэтак далей. Гэта кіраўніцтва па даступнасці рэзюмуе гэта добра. Прыемна тое, што Lighthouse фактычна можа прааналізаваць старонку для кантрасту колеру - гэта значыць, колер тэксту лёгка чытаецца на заднім фоне.
Лепшыя практыкі
Гэтая катэгорыя ўтрымлівае розныя элементы, такія як выкарыстанне састарэлых канструкцый, HTTP / 2, HTTPS, рэгістрацыі кансолі, апрацоўкі паролем і г.д. Адзін пункт, які я знайшоў вельмі цікавым і важным, - гэта выяўленне бібліятэк Javascript вядомыя ўразлівасці бяспекі , Гэта заснавана на інтэграцыі з іншым інструментам, які называецца Сник ,
SEO
Гэтая катэгорыя прысвечана аптымізацыі пошукавых сістэм. У асноўным гэта тое, што ў вашым дадатку ўтрымліваецца дастаткова метададзеных для пошукавых сістэм, такіх як мета-тэгі загалоўка HTML, загаловак, што старонка не заблакавана ад індэксацыі, спасылкі маюць апісальны тэкст і гэтак далей.
Маяк CLI і многае іншае
Пашырэнне Google Chrome
Першапачаткова, перш чым Lighthouse быў уключаны ў склад Chrome Dev Tools, ён быў даступны як аўтаномнае пашырэнне Chrome. І гэта ўсё яшчэ ёсць. Гэта можа быць зручна, калі вы затрымаліся з больш старой версіяй Chrome. Ці калі вы хочаце паспрабаваць найноўшыя магчымасці Lighthouse. Гэта таму, што стабільны Chrome не ўключае апошнюю і найвялікшую версію Lighthouse, але пашырэнне.
Інтэрфейс каманднага радка
Інтэграцыя Lighthouse непасрэдна ў Chrome з'яўляецца акуратнай, аднак яна мае свае абмежаванні. Хутчэй за ўсё, вы зможаце правесці аўдыт некалькі разоў, калі ён усё яшчэ новы і бліскучы, альбо падчас пачатковай распрацоўкі. Ці калі вы памятаеце, каб зрабіць гэта. Але існуе пастаянны рызыка, што новыя змены паўплываюць на прадукцыйнасць альбо парушаюць некаторыя лепшыя практыкі. Значна лепш інтэграваць аўдыт як частка працэсу зборкі для аўтаматызацыі ўсёй аўдыту.
На шчасце, маяк даступны як Утыліта каманднага радка распаўсюджваецца як пакет NPM. Гэта таксама зручна для тых выпадкаў, калі вам патрэбна больш дробная канфігурацыя, бо яна прапануе большую настройку, чым прылады Dev. Каб зрабіць усё яшчэ прасцей для вашага будаўніцтва, ён прапануе Утулка Webpack ,
Маяк як паслуга
Калі вы хочаце, каб інтэграцыя маяка яшчэ прасцей, існуе інструмент Treo , У асноўным гэта маяк як паслуга. Ён прапануе добрую інтэграцыю GitHub, а таксама сродкі парушэння зборкі, калі чаканні не будуць выкананы.
web.dev
Web.dev гэта новы сайт, запушчаны Google. Гэта дазваляе праверыць свой сайт прама з браўзэра (не з дапамогай інструментаў распрацоўніка). Гэта можа мець некалькі пераваг у параўнанні з выкарыстаннем інтэграванага маяка. Перш за ўсё, ён выкарыстоўвае апошнюю і самую вялікую версію, у адрозненне ад Dev Tools (у цяперашні час 4.0.0 супраць 3.2.0). Затым, гэта больш не залежыць ад працэсара і сеткі вашай машыны, паколькі ён выкарыстоўвае серверы Google. Гэта можа быць карысна, калі ў вас павольная або няўстойлівая сетка. Калі вы ўвайшлі ў сістэму, вы можаце ўбачыць графікі таго, як ваш рахунак развіваецца з цягам часу.
Але што прыемна ў web.dev, гэта тое, што ў дадатак да вымярэння з Lighthouse ён знаходзіцца шмат падручнікаў і артыкулаў згрупаваны ў некалькі раздзелаў. Яны непасрэдна звязаны з пытаннямі, якія кантралююць Lighthouse і ўключаюць у сябе бяспеку, SEO, даступнасць, прадукцыйнасць і многае іншае. Такім чынам вы зможаце даведацца пра сучасную вэб-распрацоўку і як палепшыць ацэнку вашай старонкі ў Lighthouse.
выснову
Lighthouse прапануе выдатны спосаб праверыць ваша вэб-дадатак на праблемы з прадукцыйнасцю, PWA адпаведнасці, SEO, Даступнасць і іншыя лепшыя практыкі. Нягледзячы на тое, што інструмент добра інтэграваны з Chrome Developer Tools, вы, магчыма, захочаце разгледзець пытанне аб яго інтэграцыі з працэсам зборкі, каб пастаянна праверыць магчымыя праблемы.