Як протестувати свій сайт за допомогою маяка Google?

Новим інструментом від 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
  • Перейдіть на свій сайт, щоб перевірити
  • Відкрийте інструменти для розробників (натисніть F12, якщо використовується Windows) або клацніть правою кнопкою миші на сторінці та натисніть «Оглянути»
  • Перейдіть на вкладку аудиту

Як ви бачите вище, у вас є можливість вибрати те, що ви хочете протестувати. Це чудово, оскільки ви можете зосередитись на своїй меті та швидше отримати результати аудиту.

Результати зовнішнього вигляду від Chome і web.dev майже схожі.

Але якщо уважно подивитися, тут є одна додаткова група показників – Прогресивний веб-додаток. Тож ще одна причина для аудиту за допомогою Chrome.

Node.js

Маяк доступний у вигляді модуля “Вузол”. Ви можете встановити його на вашому сервері та використовувати його програмно або в командному рядку. Давайте швидко перевіримо, як встановити Lighthouse для проведення тесту.

Встановлення маяка на Ubuntu 18.x

Наступне, я перевірив на DigitalOcean сервер. Маяк вимагає вузла LTS 8.9 або пізнішої версії, і я припускаю, що ви його вже встановили. Якщо ні, зверніться до цього посібника з установки Node.js.

Ви також будете вимагати браузер Chrome бути встановленим на сервері. Я висвітлював тут інструкцію з монтажу.

Установка маяка проста, як і інші модулі.

  • Увійдіть на свій сервер
  • Виконайте наступну команду для встановлення

npm встановити -g маяк

Я тут використовую -g, щоб він встановився як глобальний модуль.

[захищено електронною поштою]: ~ # npm встановити -g маяк
/ usr / bin / маяк -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ usr / bin / chrome-debug -> /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.094
[захищено електронною поштою]: ~ #

Після встановлення запустіть команду маяк, щоб переконатися, що вона встановлена ​​правильно.

[захищено електронною поштою]: ~ # маяк
Надайте URL-адресу

Вкажіть – допоможіть доступні варіанти
[захищено електронною поштою]: ~ #

Хороший, маяк готовий запустити аудит. Спробуємо кілька варіантів тесту.

Щоб запустити тест за допомогою безголового браузера

URL маяка –chrome-flags ="–безголовий"

Потрібно вказати абсолютну URL-адресу, включаючи http або https.

Наприклад:

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

`елементи уникають використання атрибутів` `,` `або` [резюме] `. + 1 мс
Оцінювання статусу: Посилання мають помітне ім’я + 1 мс
Оцінювання статусу: Списки містять лише `
  • `елементи та елементи підтримки сценарію (` `і` `). + 1 мс
    Оцінювання статусу: елементи списку (`
  • `) містяться в межах`
      `або`
        `батьківські елементи + 1ms
        оцінка стану: документ не використовує “ + 0ms
        оцінка стану: `[user-scalable ="ні"] `не використовується в елементі` `, а атрибут` [максимальний масштаб] не менше 5. + 1 мс
        Оцінювання статусу: “ елементи мають `[alt]` текст + 1ms
        Оцінювання статусу: жоден елемент не має значення “[tabindex]” більше 0 + 1ms
        Оцінювання статусу: Клітини в a
  • `елемент, який використовує атрибут` [headers] `, посилається лише на інші комірки цієї ж таблиці. + 1 мс
    Оцінювання статусу: “ елементи та елементи з `[роль ="стовпчик"/"гребінець"] `мають описувані комірки даних. + 0ms
    Оцінювання статусу: атрибути `[lang]` мають дійсне значення + 1ms
    Оцінювання статусу: “ елементи містять елемент “ з `[kind ="титри"] `+ 1ms
    Оцінювання статусу: “ елементи містять елемент “ з `[kind ="опис"] `+ 1ms
    Оцінювання статусу: значення “[accesskey]” є унікальними + 1ms
    оцінка стану: спеціальні елементи керування мають пов’язані мітки + 0ms
    оцінка стану: користувацькі елементи керування мають ролі ARIA + 1ms
    Статус Оцінювання: Фокус користувача не випадково потрапляє в регіон + 0 мс
    Оцінювання статусу: Інтерактивні елементи керування орієнтовані на клавіатуру + 0 мс
    Статус Оцінювання: заголовки не пропускають рівні + 0ms
    Оцінювання статусу: Інтерактивні елементи вказують їх призначення та стан + 1ms
    Оцінювання стану: Сторінка має логічний порядок вкладок + 0ms
    оцінювання статусу: фокус користувача спрямований на новий вміст, доданий на сторінку + 1 мс
    Оцінювання статусу: Позаекранний вміст приховано від допоміжної технології + 0ms
    Оцінювання статусу: Елементи орієнтиру HTML5 використовуються для покращення навігації + 0ms
    Оцінювання статусу: Візуальний порядок на сторінці відповідає порядку DOM + 0ms
    Оцінювання статусу: Використовує ефективну політику кешування щодо статичних активів + 1 мс
    Оцінювання статусу: уникає величезних навантажень мережі + 3 мс
    Оцінка стану: Відкладіть екранні зображення + 1 мс
    Статус Оцінювання: Усуньте ресурси, що блокують візуалізацію + 12 мс
    Оцінювання статусу: Мінімізуйте CSS + 28ms
    Оцінювання статусу: Мінімізуйте JavaScript + 64ms
    Оцінювання статусу: Відкладіть невикористаний CSS + 69ms
    Оцінювання статусу: Подавайте зображення у форматах наступного роду + 12 мс
    Оцінювання статусу: ефективно кодувати зображення + 11 мс
    оцінка стану: увімкнути стиснення тексту + 6 мс
    Оцінювання стану: зображення належного розміру + 6 мс
    оцінювання статусу: використовуйте формати відео для анімаційного контенту + 7 мс
    Оцінювання статусу: уникає кеша програми + 11 мс
    Оцінювання статусу: Сторінка має HTML-код + 0ms
    оцінка стану: уникає надмірного розміру DOM + 1 мс
    Статус Оцінювання: Посилання на напрямки перехресного походження безпечні + 2 мс
    Оцінювання статусу: Уникайте запитів дозволу на геолокацію при завантаженні сторінки + 1 мс
    оцінка стану: уникає `document.write ()` + 0ms
    Оцінювання статусу: уникає передових бібліотек JavaScript з відомими вразливими місцями безпеки + 0ms
    Оцінювання статусу: Виявлені бібліотеки JavaScript + 9ms
    оцінка стану: уникає запитів дозволу на сповіщення при завантаженні сторінки + 1ms
    оцінка стану: Дозволяє користувачам вставляти в поля паролів + 0ms
    оцінка стану: використовує HTTP / 2 для власних ресурсів + 0ms
    Оцінювання статусу: використовує пасивних слухачів для покращення продуктивності прокрутки + 1 мс
    Оцінювання статусу: Документ має метаопис + 0ms
    оцінка стану: Сторінка має успішний код статусу HTTP + 1ms
    оцінка стану: Документ використовує розбірливі розміри шрифту + 5 мс
    Оцінювання статусу: Посилання мають описовий текст + 1ms
    Оцінювання статусу: Сторінка не заблокована з індексування + 1 мс
    Оцінка стану: robots.txt дійсний + 2ms
    Оцінювання статусу: Документ має дійсний `hreflang` + 1ms
    оцінка стану: Документ уникає плагінів + 1 мс
    Оцінка стану: Документ має дійсний `rel = canonical` + 0ms
    Оцінювання статусу: Сторінка зручна для мобільних пристроїв + 1 мс
    Оцінювання статусу: Структуровані дані дійсні + 0ms
    статус Генерування результатів … + 0ms
    ChromeLauncher Killing екземпляр 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 – вихідний шлях URL.json

    Використовуючи CLI-маяк, ви маєте повний контроль над тим, як хочете. Я настійно рекомендую перевірити Сховище GitHub щоб дізнатися більше про використання CLI або програмно.

    Висновок

    Google маяк виглядає багатообіцяючим інструментом для проведення перевірки безперервності для підвищення продуктивності сайту та зручності використання. Якщо ви використовуєте WordPress і хочете, щоб ваш сайт завантажувався швидше, тоді перегляньте Ракета.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map