Видео урока скоро будет доступно
Lighthouse, AI-помощник для поиска багов, A/B тестирование — сделаем сайт быстрым, доступным и удобным.
После этого урока вы:
Главное правило: тестировать нужно не один раз, а регулярно — после каждого значимого изменения.
| Инструмент | Что проверяет | Где найти |
|---|---|---|
| Lighthouse | Производительность, доступность, SEO, лучшие практики | Встроен в Chrome DevTools (вкладка Lighthouse) |
| PageSpeed Insights | То же, что Lighthouse, в веб-версии | pagespeed.web.dev |
| W3C Validator | Валидность HTML и CSS | validator.w3.org |
| Консоль браузера | Ошибки JavaScript, предупреждения | F12 → Console |
На этом уроке мы сфокусируемся на Lighthouse — он даёт наиболее полную картину.
A/B тест — это метод сравнения двух версий одной страницы (A и B), чтобы понять, какая лучше работает.
Например:
Посетителям случайно показывается одна из версий. По кликам, регистрациям или другим метрикам определяют победителя.
Как сделаем мы: создадим два HTML-файла и скрипт, который случайно (50/50) показывает один из них и запоминает выбор через localStorage.
Совет: Запускайте аудит в режиме инкогнито, чтобы расширения браузера не влияли на результат.
После завершения вы увидите оценки от 0 до 100 для каждой категории:
90–100 — Отлично 50–89 — Есть куда улучшать 0–49 — Срочно нужно исправить
Прокрутите отчёт вниз — там будут конкретные рекомендации:
Важно: Не пытайтесь исправить всё сразу. Выберите 3–5 самых критичных проблем.
Сделайте скриншот отчёта или запишите ключевые рекомендации — это будет ваш план действий.
Пример записи:
Performance: 45 (красный) — нужно сжать изображения
Accessibility: 62 (жёлтый) — добавить alt-теги, увеличить контраст
SEO: 78 (жёлтый) — добавить meta description
Best Practices: 92 (зелёный) — ок
Сохраните эти данные — они понадобятся для сравнения после исправлений.
Возьмите первую рекомендацию из отчёта и попросите AI помочь. Пример промпта:
«Мой сайт имеет низкую оценку Accessibility (55). В отчёте сказано: "Изображения не имеют атрибута alt". Вот мой код: [вставьте код]. Как добавить alt для всех изображений?»
Другие примеры:
«В консоли ошибка: "Uncaught TypeError: Cannot read property 'addEventListener' of null". Мой код: [вставьте код]. Как исправить?»
Типичная причина: скрипт выполняется до того, как DOM загружен. Оберните код в DOMContentLoaded или перенесите <script> в конец body.
Для CSS используйте jigsaw.w3.org/css-validator.
AI-помощь: скопируйте ошибку валидатора и попросите AI: «Валидатор выдаёт ошибку: [текст]. Как исправить? Вот мой код: [код]»
После всех исправлений снова запустите Lighthouse:
Пример прогресса:
| Категория | Было | Стало |
|---|---|---|
| Performance | 45 | 78 |
| Accessibility | 62 | 91 |
| SEO | 78 | 95 |
Зафиксируйте прогресс — сделайте новый скриншот.
index.html — назовите index-b.html.Пример:
| Вариант A (оригинал) | Вариант B |
|---|---|
| «Изучай английский с удовольствием» | «Начни говорить на английском сегодня» |
Можно менять не только заголовок, но и:
Попросите AI сгенерировать скрипт, который случайно показывает одну из двух версий и запоминает выбор:
«Напиши JavaScript-код, который при загрузке страницы случайным образом (50/50) показывает либо index.html, либо index-b.html. Используй localStorage, чтобы запоминать выбор для одного пользователя.»
Вставьте полученный код в index.html (или в отдельный JS-файл).
Важно: При тестировании очищайте localStorage (F12 → Application → Local Storage → Clear), чтобы сбросить запомненный вариант.
Тестирование:
Анализ:
Итог A/B теста: Вы узнали, как проверять гипотезы на реальных пользователях — ключевой навык продуктового дизайна.
Что мы узнали?
Главный итог: Ваш сайт стал быстрее, доступнее и удобнее для пользователей. Вы научились находить проблемы и устранять их — это важный навык любого веб-разработчика.
На следующем занятии мы займёмся SEO и продвижением — чтобы ваш сайт находили в поисковиках.