Нов инструмент от Google е да тествате и да ви препоръчаме за подобряване на производителността, SEO, сигурността, най-добрите практики и достъпността.


Google стартира наскоро фар, инструмент с отворен код за одит на уебсайта ви ръчно и автоматично.

Какви показатели са тествани от Google Lighthouse?

Има повече от 75 показателя тя тества и ви дава обща оценка. Някои от следните популярни, които може да ви интересуват като собственик на сайт, SEO анализатор, уебмастъри.

  • производителност – време за интерактивна работа, закъснение, индекс на скоростта, оптимизация на ресурси, TTFB, доставка на активи, време за изпълнение на скриптове, размер на DOM и т.н..
  • SEO – Подходящи за мобилни устройства, мета, обхождащи, канонични, структура и т.н..
  • Най-добри практики – Оптимизация на изображения, JS библиотеки, регистриране на грешки в браузъра, достъпни чрез HTTPS, известни JS уязвимости и т.н.
  • Достъпност  – Елементи на страницата, език, ARIA атрибути и т.н..
  • PWA (Прогресивно уеб приложение) – пренасочване на HTTP към HTTPS, код за отговор ок, бързо зареждане на 3G, екран за пръскане, прозорец за показване и т.н..

Неговият фантастичен инструмент и можете да използвате по много начини.

Точно така – толкова много начини. Ако сте разработчик, можете да го използвате с Node.js, за да стартирате тест програмно. На пазара вече има малко инструменти, захранвани от Фара, които предлагат непрекъснат мониторинг на работата на сайта.

Нека да разберем как стартирате тест за фар срещу вашия сайт.

Започнете от най-лесния.

Мярка от web.dev

Google пусна web.dev преди няколко месеца и спечели добра популярност. Тестването онлайн е лесно.

Отидете на Мярка страница и въведете URL адреса, за да стартирате одита. Това ще отнеме няколко секунди и трябва да видите подробното отчитане с общата оценка.

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

Не прекарвайте прекалено много време, получавайки 100. Дори сайтовете на Google не отбелязват това.

Разгледайте ги като насоки и се опитайте да подобрите колкото можете.

Забележка: web.dev емулира тест с мобилно устройство и докато пиша, не виждам опция за тестване с Desktop.

Chrome

Знаете ли, че фарът е наличен във вашия браузър Chrome? И, чудесната новина е, че можете да изберете да тествате с помощта на Mobile или Desktop. Предлага се в инструменти за програмисти.

  • Отворете браузъра Chrome
  • Влезте в сайта си, за да тествате
  • Отворете инструментите за програмисти (Натиснете F12, ако използвате Windows) или щракнете с десния бутон върху страницата и щракнете върху Проверете
  • Отидете на раздела за одити

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

Резултатите изглеждат и се чувстват от Chome и web.dev е почти сходен.

Но ако се вгледате внимателно, тук има една допълнителна група показатели – Прогресивно уеб приложение. Така че още една причина за одит с помощта на Chrome.

Node.js

Фара се предлага като модул на възел. Можете да го инсталирате на вашия сървър и да го използвате програмно или команден ред. Нека да проверим бързо как да инсталирате Lighthouse, за да стартирате някакъв тест.

Инсталиране на Lighthouse на Ubuntu 18.x

Следното, на което съм тестван DigitalOcean сървър. Фара изисква Node LTS 8.9 или по-нова версия и предполагам, че вече имате инсталиран. Ако не, вижте това ръководство за инсталиране на Node.js.

Вие също ще изисквате браузър за хром да бъде инсталиран на сървъра. Тук покрих инструкцията за инсталиране.

Инсталирането на Фара е лесно, както и другите модули.

  • Влезте във вашия сървър
  • Изпълнете следната команда за инсталиране

npm инсталирайте -g фар

Използвам -g тук, така че да се инсталира като глобален модул.

[Имейл защитен]: ~ # npm инсталирате -g фар
/ ЮЕсАр / хамбар / фар -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ ЮЕсАр / хамбар / хром-отстраняване на грешки -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> [Имейл защитен] postinstall / usr / lib / node_modules / маяк / node_modules / ax-core
> node build / utils / postinstall.js

+ [Имейл защитен]
добави 179 пакета от 119 сътрудници за 10.094s
[Имейл защитен]: ~ #

След като бъде инсталиран, стартирайте командата фар, за да се уверите, че е инсталиран правилно.

[Имейл защитен]: ~ # фар
Моля, въведете URL адрес

Посочете – помогнете за наличните опции
[Имейл защитен]: ~ #

Добрият фар е готов да стартира одита. Нека опитаме някои опции за тест.

За да стартирате тест с браузър без глава

URL на фара –chrome-flags ="–без глава"

Трябва да предоставите абсолютен URL адрес, включително http или https.

Ex:

[Имейл защитен]: ~ $ маяк https://geekflare.com –chrome-flags ="–без глава"
ChromeLauncher Изчаква браузър. + 0ms
ChromeLauncher Изчакване за браузър … + 1ms
ChromeLauncher Изчакване на браузър ….. + 511ms
ChromeLauncher Изчакване за браузър ….. ✓ + 2ms
състояние Свързване с браузър + 176ms
състояние Възстановяване на състоянието с около: празно + 24ms
статус Бенчмаркинг машина + 30ms
статус Инициализиране … + 508ms
статус Зареждане на страница & чака при зареждане скриптове, CSSUsage, вмъкнат изглед ViewportDimensions, ThemeColor, манифест, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, достъпност, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FONTSIZE, CrawlableLinks, MetaRobots , Hreflang, EmbeddedContent, Canonical, RobotsTxt + 27ms
състояние Извличане на страница: Скриптове + 2s
статус Извличане на страница: CSSUsage + 0ms
състояние Извличане на страница: Viewport + 0ms
състояние Извличане на страница: ViewportDimensions + 0ms
състояние Извличане на страница: ThemeColor + 0ms
статус Извличане на страница: Манифест + 0ms
състояние Извличане на страница: RuntimeExceptions + 0ms
състояние Извличане на страница: ChromeConsoleMessages + 0ms
статус Извличане на страница: ImageUsage + 0ms
състояние Извличане на страница: Достъпност + 0ms
състояние Извличане на страница: LinkElements + 0ms
състояние Извличане на страница: AnchorsWithNoRelNoopener + 1ms
състояние Извличане на страница: AppCacheManifest + 0ms
статус Извличане на страница: Doctype + 0ms
състояние Извличане на страница: DOMStats + 0ms
състояние Извличане на страница: JSLibraries + 0ms
състояние Извличане на страница: OptimizedImages + 0ms
състояние Извличане на страница: PasswordInputsWithPreventedPaste + 0ms
състояние Извличане на страница: ResponseCompression + 0ms
състояние Извличане на страница: ТаговеBlockingFirstPaint + 0ms
състояние Извличане на страница: MetaDescription + 0ms
състояние Извличане на страница: Размер на шрифта + 0ms
състояние Извличане на страница: CrawlableLinks + 0ms
състояние Извличане на страница: MetaRobots + 0ms
статус Извличане на страница: Hreflang + 0ms
състояние Извличане на страница: EmbeddedContent + 0ms
статус Извличане на страница: Canonical + 0ms
състояние Извличане на страница: RobotsTxt + 0ms
състояние Извличане на следа + 1ms
състояние Извличане на devtoolsLog & мрежови записи + 110ms
статус Извличане: Сценарии + 27ms
извличане на статус: CSSUsage + 53ms
състояние Извличане: Viewport + 192ms
състояние Извличане: ViewportDimensions + 5ms
статус Извличане: ThemeColor + 13ms
статус Извличане: Манифест + 2ms
извличане на състоянието: Изпълнения за изпълнение + 295 ms
състояние Извличане: ChromeConsoleMessages + 1ms
статус Извличане: ImageUsage + 2ms
статус Извличане: Достъпност + 22ms
извличане на статус: LinkElements + 526ms
статус Извличане: AnchorsWithNoRelNoopener + 10ms
извличане на статус: AppCacheManifest + 6ms
извличане на статус: Doctype + 20ms
извличане на статус: DOMStats + 4ms
статус Извличане: JSLibraries + 50ms
извличане на статус: OptimizedImages + 25ms
състояние Извличане: PasswordInputsWithPreventedPaste + 234ms
извличане на статус: ResponseCompression + 3ms
статус Извличане: TagsBlockingFirstPaint + 7ms
извличане на статус: MetaDescription + 6ms
извличане на статус: размер на шрифта + 7ms
статус Извличане: CrawlableLinks + 245ms
статус Извличане: MetaRobots + 6ms
статус Извличане: Hreflang + 2ms
извличане на статус: EmbeddedContent + 2ms
статус Извличане: Canonical + 3ms
статус Извличане: RobotsTxt + 6ms
състояние Възстановяване на състоянието с около: празно + 19ms
статус Зареждане на страница & в очакване на onload ServiceWorker, Офлайн, StartUrl + 24ms
статус Извличане на страница: ServiceWorker + 59ms
статус Извличане на страница: Офлайн + 0ms
състояние Извличане на страница: StartUrl + 1ms
състояние Извличане на devtoolsLog & мрежови записи + 0ms
статус Извличане: ServiceWorker + 2ms
статус Извличане: Офлайн + 1ms
извличане на статус: StartUrl + 1ms
състояние Възстановяване на състоянието с около: празно + 5ms
статус Зареждане на страница & в очакване на зареждане HTTPRedirect, HTMLWithoutJavaScript + 48ms
състояние Извличане на страница: HTTPRedirect + 260ms
състояние Извличане на страница: HTMLWithoutJavaScript + 0ms
състояние Извличане на devtoolsLog & мрежови записи + 0ms
извличане на статус: HTTPRedirect + 7ms
извличане на статус: HTMLWithoutJavaScript + 12ms
състояние Прекъсване на връзката с браузъра … + 7ms
състояние Анализиране и провеждане на одити … + 6ms
статус Оценяване: Използва HTTPS + 3ms
статус Оценяване: Пренасочва HTTP трафик към HTTPS + 24ms
статус Оценяване: Регистрира сервизен работник, който контролира страница и start_url + 1ms
статус Оценяване: Текущата страница отговаря с 200, когато е офлайн + 0ms
оценяване на състоянието: Има “ маркер с `ширина ‘или’ начална скала ‘+ 1ms
статус Оценяване: Съдържа известно съдържание, когато JavaScript не е наличен + 1ms
статус Оценяване: Първа съдържателна боя + 6ms
статус Оценяване: Първа смислена боя + 54ms
статус Оценяване: Зареждането на страници е достатъчно бързо в мобилните мрежи + 10ms
статус Оценяване: Индекс на скоростта + 33ms
статус Оценяване: Снимки на екрана + 529ms
статус Оценяване: финален екран + 287ms
статус Оценяване: Прогнозна латентност на входа + 2ms
статус Оценяване: Няма грешки в браузъра, регистрирани към конзолата + 16ms
статус Оценяване: Времето за отговор на сървъра е ниско (TTFB) + 1ms
статус Оценяване: Първи процесор на празен ход + 1ms
статус Оценяване: Време за интерактивни + 30ms
статус Оценяване: Потребителски маркировки и мерки + 0ms
статус Оценяване: Минимизиране на дълбочината на критичните заявки + 2ms
оценка на състоянието: Избягвайте пренасочвания на няколко страници + 3ms
оценка на състоянието: Манифестът за уеб приложение отговаря на изискванията за инсталиране + 2ms
статус Оценяване: Конфигуриран за персонализиран екран за пръскане + 1ms
статус Оценяване: Задава цвят на темата на адресната лента + 0ms
статус Оценяване: Съдържанието е оразмерено правилно за изгледния прозорец + 1ms
статус Оценяване: Показва изображения с правилно съотношение на страните + 0ms
оценка на състоянието: избягва остарели API-та + 1ms
статус Оценяване: Минимизира работата на основната нишка + 0ms
статус Оценяване: Време за изпълнение на JavaScript + 11ms
статус Оценяване: Предварително зареждане на ключови заявки + 3ms
статус Оценяване: Предварително свързване към необходимия произход + 2ms
статус Оценяване: Целият текст остава видим по време на зареждане на уебфон + 2ms
статус Оценяване: Мрежови заявки + 1ms
статус Оценяване: показатели + 2ms
оценка на състоянието: start_url отговаря с 200 при офлайн + 1ms
статус Оценяване: Сайтът работи крос-браузър + 1ms
статус Оценяване: Преходите на страниците не се чувстват като блокиращи в мрежата + 0ms
оценка на състоянието: Всяка страница има URL + 0ms
статус Оценяване: атрибутите „[aria – *]` съвпадат с техните роли + 1ms
статус Оценяване: `[роля]` имат всички задължителни атрибути [aria – *] `+ 1ms
оценка на състоянието: Елементи с `[роля]`, които изискват конкретни деца `[роля]` s, присъстват + 0ms
статус Оценяване: `[роля]` се съдържат от необходимия родителски елемент + 1ms
статус Оценяване: Стойностите „[роля]“ са валидни + 1ms
статус Оценяване: атрибутите “[aria – *]” имат валидни стойности + 0ms
статус Оценяване: атрибутите `[aria – *]` са валидни и не са написани погрешно + 1ms
оценка на статуса: “ елементите съдържат “ елемент с `[вид ="надписи"] `+ 1ms
статус Оценяване: Бутоните имат достъпно име + 1ms
статус Оценяване: Страницата съдържа заглавие, пропускаща връзка или регион на ориентир + 1ms
статус Оценяване: Цветовете на фона и предния план имат достатъчно съотношение на контраст + 1ms
Оценка на състоянието: “ съдържа само правилно подредени групи “ и “ групи, “ или “ елементи. + 1ms
статус Оценяване: Елементите от списъка с дефиниции са увити в “ елементи + 0ms
оценка на състоянието: Документът има елемент “ + 1ms
оценяване на състоянието: атрибутите „[id]“ на страницата са уникални + 1ms
статус Оценяване: “ или “ елементите имат заглавие + 1ms
статус Оценяване: “ елемент има атрибут `[lang]` + 0ms
статус Оценяване: “ елемент има валидна стойност за своя атрибут `[lang]` + 1ms
оценка на състоянието: Елементите на изображението имат атрибути “[alt]” + 1ms
оценка на състоянието: “ елементите имат `[alt]` текст + 1ms
статус Оценяване: Елементите на формуляра имат свързани етикети + 0ms
статус Оценяване: Презентация `

`елементи избягват използването на атрибут` `,` `или атрибут` [резюме]. + 1ms
статус Оценяване: Връзките имат разпознаваемо име + 1ms
статус Оценяване: Списъците съдържат само „

  • `елементи и поддържащи елементи за скрипт (` `и` `). + 1ms
    оценка на състоянието: Списък с елементи (`

  • `) се съдържат в`
      `или`

        `родителски елементи + 1ms
        статус Оценяване: Документът не използва “ + 0ms
        статус Оценяване: `[user-scalable ="не"] `не се използва в елемента` `и атрибутът [максимален мащаб] не е по-малък от 5. + 1ms
        оценка на състоянието: “ елементите имат `[alt]` текст + 1ms
        оценка на състоянието: Нито един елемент няма стойност „[tabindex]“ по-голяма от 0 + 1ms
        статус Оценяване: Клетките в „

  • “елемент, който използва атрибута” [headers] “, се отнася само за други клетки от същата таблица. + 1ms
    оценяване на състоянието: “ елементи и елементи с `[роля ="columnheader"/"rowheader"] “имат клетки, които описват. + 0ms
    статус Оценяване: атрибутите `[lang]` имат валидна стойност + 1ms
    оценка на статуса: “ елементите съдържат “ елемент с `[вид ="надписи"] `+ 1ms
    оценка на статуса: “ елементите съдържат “ елемент с `[вид ="описание"] `+ 1ms
    оценяване на състоянието: Стойностите „[accesskey]“ са уникални + 1ms
    оценка на състоянието: Персонализираните контроли имат свързани етикети + 0ms
    статус Оценяване: Персонализираните контроли имат ARIA роли + 1ms
    статус Оценяване: Фокусът на потребителя не е случайно хванат в регион + 0ms
    статус Оценяване: Интерактивните контроли са фокусирани върху клавиатурата + 0ms
    статус Оценяване: Заглавията не прескачат нивата + 0ms
    статус Оценяване: Интерактивните елементи показват тяхното предназначение и състояние + 1ms
    статус Оценяване: Страницата има логически ред на раздела + 0ms
    статус Оценяване: Фокусът на потребителя е насочен към ново съдържание, добавено към страницата + 1ms
    статус Оценяване: Извън екранното съдържание е скрито от помощната технология + 0ms
    оценка на състоянието: HTML5 ориентирните елементи се използват за подобряване на навигацията + 0ms
    статус Оценяване: Визуалният ред на страницата следва DOM ред + 0ms
    статус Оценяване: Използва ефективна кеш политика за статични активи + 1ms
    статус Оценяване: Избягва огромни полезни натоварвания в мрежата + 3ms
    статус Оценяване: Отлагане на външни екрани + 1ms
    статус Оценяване: Елиминиране на блокиращи рендери ресурси + 12ms
    статус Оценяване: Усъвършенствайте CSS + 28ms
    статус Оценяване: Усъвършенстване на JavaScript + 64ms
    статус Оценяване: Отложете неизползван CSS + 69ms
    статус Оценяване: Показвайте изображения във формати от следващия род + 12ms
    статус Оценяване: Ефикасно кодиране на изображения + 11 ms
    статус Оценяване: Активиране на компресиране на текст + 6ms
    статус Оценяване: изображения с правилен размер + 6ms
    статус Оценяване: Използвайте видео формати за анимирано съдържание + 7ms
    статус Оценяване: Избягва кеш на приложение + 11ms
    статус Оценяване: Страницата има HTML докттип + 0ms
    статус Оценяване: Избягва прекомерния размер на DOM + 1ms
    статус Оценяване: Връзките към дестинациите с кръстосан произход са безопасни + 2ms
    оценка на състоянието: избягва да изисква разрешение за геолокация при зареждане на страница + 1ms
    статус Оценяване: Избягва `document.write ()` + 0ms
    оценка Оценка на състоянието: Избягва библиотеките с предни JavaScript с известни уязвимости в сигурността + 0ms
    статус Оценяване: Открити JavaScript библиотеки + 9ms
    оценка на състоянието: избягва да изисква разрешение за уведомяване при зареждане на страница + 1ms
    статус Оценяване: Позволява на потребителите да се поставят в полета за парола + 0ms
    статус Оценяване: Използва HTTP / 2 за собствените си ресурси + 0ms
    статус Оценяване: Използва пасивни слушатели за подобряване на ефективността на превъртане + 1ms
    статус Оценяване: Документът има мета описание + 0ms
    оценка на състоянието: Страницата има успешен код за състоянието на HTTP + 1ms
    статус Оценяване: Документът използва четливи размери на шрифта + 5ms
    статус Оценяване: Връзките имат описателен текст + 1ms
    оценка на състоянието: Страницата не е блокирана от индексиране + 1ms
    статус Оценяване: robots.txt е валиден + 2ms
    оценка на състоянието: Документът има валиден `hreflang` + 1ms
    статус Оценяване: Документът избягва плъгини + 1ms
    оценка на състоянието: Документът има валиден `rel = canonical` + 0ms
    статус Оценяване: Страницата е приятелска за мобилни устройства + 1ms
    статус Оценяване: Структурираните данни са валидни + 0ms
    състояние Генериране на резултати … + 0ms
    ChromeLauncher Убиващ екземпляр на Chrome 7098 + 59ms
    HTML изход за принтер, написан на /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms
    CLI Protip: Пуснете фар с `–view`, за да отворите незабавно HTML отчет в браузъра си + 1ms

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

    Но какво ще стане, ако трябва да генерирате отчет в JSON формат?

    Това е възможно по следния начин.

    URL на фара –chrome-flags ="–без глава" –изход json –output-path URL.json

    Използвайки Lighthouse CLI, вие имате пълен контрол да използвате начина, по който искате. Горещо препоръчвам да проверите GitHub хранилище за да научите повече за използването на CLI или програмно.

    заключение

    Google Lighthouse изглежда обещаващ инструмент за извършване на тест за непрекъснатост за подобряване на производителността и използваемостта на сайта. Ако използвате WordPress и искате да улесните зареждането на вашия сайт, тогава проверете ракета.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Adblock
      detector