Валидность HTML

Lighthouse — инструмент для аудита веб-страниц, который позволяет оценивать качество сайта по различным метрикам: производительность, доступность, SEO, лучшие практики и прогрессивные веб-приложения. Один из важных аспектов анализа — проверка валидности HTML и корректной структуры DOM, что напрямую влияет на доступность, индексирование и стабильность работы страницы.

Установка и подключение Lighthouse

Для использования Lighthouse в JavaScript можно работать через Node.js. Установка производится стандартным способом через npm:

npm install -g lighthouse

Либо добавляется как зависимость проекта:

npm install lighthouse --save-dev

После установки библиотека предоставляется как CLI и как модуль для программного использования в Node.js.

Программный запуск аудита

Для запуска аудита HTML необходимо импортировать модуль Lighthouse и использовать его API. Простейший пример выглядит следующим образом:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runLighthouse(url, opts = {}, config = null) {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    opts.port = chrome.port;

    const results = await lighthouse(url, opts, config);
    await chrome.kill();
    return results.lhr;
}

runLighthouse('https://example.com').then(lhr => {
    console.log(lhr.categories.accessibility);
});

Ключевой момент: Lighthouse запускает экземпляр Chrome в headless-режиме, что позволяет получать полные данные о рендеринге страницы и валидности DOM без необходимости открывать браузер вручную.

Анализ HTML

Lighthouse использует встроенные аудиты для проверки HTML. Среди них:

  • valid-html — проверяет корректность тегов и атрибутов.
  • aria-attributes — проверяет правильность использования ARIA-атрибутов.
  • semantic-html — проверяет, что структура документа соответствует семантическим тегам.

Каждый аудит возвращает объект с score, details и списком items, которые содержат ошибки и предупреждения. Например:

{
  "id": "valid-html",
  "title": "HTML is valid",
  "score": 0.9,
  "details": {
    "type": "table",
    "items": [
      {
        "node": "<img src='image.png'>",
        "message": "Image element missing alt attribute"
      }
    ]
  }
}

Конфигурация аудита

Lighthouse позволяет создавать собственные конфигурации аудита, чтобы фокусироваться только на валидации HTML. Пример конфигурационного файла:

module.exports = {
    extends: 'lighthouse:default',
    settings: {
        onlyCategories: ['best-practices', 'accessibility']
    },
    audits: [
        'valid-html',
        'aria-attributes',
        'semantic-html'
    ]
};

Использование собственной конфигурации упрощает интеграцию с системами CI/CD и позволяет получать отчёты только по нужным метрикам.

Интерпретация результатов

  • Score: числовое значение от 0 до 1, отражающее качество HTML. 1 — полностью корректный код, 0 — критические ошибки.
  • Items: список элементов с проблемами. Каждый элемент содержит node (HTML-код), message (описание ошибки) и часто selector, чтобы точно локализовать проблему.
  • Manual Checks: некоторые проверки требуют ручного подтверждения (например, соответствие ARIA-ролей контенту).

Генерация отчётов

Lighthouse может выводить результаты в нескольких форматах:

const fs = require('fs');

fs.writeFileSync('report.html', results.report[0]); // HTML
fs.writeFileSync('report.json', JSON.stringify(results, null, 2)); // JSON

HTML-отчёт удобен для визуальной диагностики, а JSON позволяет интегрировать данные в аналитические системы и автоматические тесты.

Интеграция с процессами разработки

Для постоянной проверки валидности HTML рекомендуется:

  • Настроить Lighthouse в CI/CD пайплайне.
  • Запускать аудиты после сборки фронтенда.
  • Использовать фильтрацию по важным категориям, чтобы сосредоточиться на критических ошибках HTML.

Пример интеграции с npm-скриптом:

"scripts": {
  "audit:html": "node lighthouse-audit.js"
}

Это позволяет автоматически генерировать отчёты при каждом деплое или коммите, что значительно повышает качество HTML-кода и предотвращает накопление ошибок.

Практические советы

  • Проверять валидность HTML не только на главной странице, но и на всех ключевых шаблонах сайта.
  • Обратить внимание на ARIA-атрибуты и семантические теги, так как их ошибки чаще всего влияют на доступность.
  • Использовать headless Chrome для ускорения аудита и автоматизации тестов.
  • Анализировать не только score, но и items — конкретные элементы с ошибками, чтобы исправления были точечными.

Lighthouse в связке с Node.js предоставляет мощный инструмент для системного анализа HTML, позволяя поддерживать код в соответствии с современными стандартами веб-разработки, повышая доступность, производительность и совместимость страниц.

Оглавление