Что такое Service Worker
Service Worker — JavaScript-поток, работающий отдельно от страницы и перехватывающий network requests. Основа Progressive Web Apps: offline cache, push notifications, background sync. Lifecycle: install → activate → fetch events. Требует HTTPS (или localhost). Scope по умолчанию — директория, где лежит .js файл.
Ниже: подробности, пример, смежные термины, FAQ.
Подробности
- Регистрация:
navigator.serviceWorker.register('/sw.js') - Lifecycle: install → waiting → activate → idle
- Cache API:
caches.open(),caches.match() - Fetch event: перехват всех network запросов в scope
- Background Sync + Push API — отдельные расширения
Пример
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(r => r || fetch(e.request))
);
});Смежные термины
Почему нам доверяют
Как это работает
Введите URL страницы
Lighthouse анализирует
Получите CWV и советы
Почему скорость сайта важна?
Скорость загрузки напрямую влияет на конверсию, SEO-позиции и удовлетворённость пользователей. Google использует Core Web Vitals как фактор ранжирования. Каждая лишняясекунда загрузки может стоить до 7% конверсии.
Lighthouse-анализ
Анализ на основе Google Lighthouse: Performance, Accessibility, Best Practices, SEO.
Core Web Vitals
LCP (скорость отрисовки), FID (интерактивность), CLS (визуальная стабильность) — ключевые метрики Google.
Анализ ресурсов
Разбивка по типам: HTML, CSS, JavaScript, изображения, шрифты. Размер, количество запросов, блокирующие ресурсы.
Действенные советы
Конкретные рекомендации с оценкой экономии: сжатие изображений, кеширование, минификация и т.д.
Mobile vs Desktop
- Тестирование на эмуляции Moto G Power (медленный CPU)
- Сеть: 4G (1.6 Mbps, 150ms RTT)
- Строже оценивает скорость
- Google индексирует mobile-first
- Приоритет для SEO-оптимизации
- Высокая производительность CPU
- Быстрое соединение без ограничений
- Результаты обычно выше на 20-40 баллов
- Важен для B2B и корпоративных сайтов
- Используйте для baseline-сравнений
Кому это нужно
SEO-специалисты
Core Web Vitals для ранжирования
Разработчики
оптимизация производительности
Маркетологи
скорость = конверсия
DevOps
регрессия производительности
Частые ошибки
async/defer блокируют отрисовку. Переместите в конец или добавьте атрибут.Cache-Control браузер перезагружает CSS/JS при каждом визите.Лучшие практики
loading="lazy" для изображений ниже first fold.brotli on;Cache-Control: max-age=31536000, immutable. HTML: max-age=0, s-maxage=60.<link rel="preload"> для шрифтов и CSS. Уменьшает LCP на 200-500ms.Получите больше с бесплатным аккаунтом
История проверок скорости, сравнение с конкурентами и мониторинг PageSpeed.
Зарегистрироваться (FREE)Больше по теме
Часто задаваемые вопросы
Нужен ли Service Worker без PWA?
Polезен даже для obычных сайтов: offline-first UX, faster repeat visits через cache.
Работает ли в Safari?
Да, с iOS 11.3 (2018). Некоторые advanced features (Push) только с iOS 16.4+.
Как отладить?
DevTools → Application → Service Workers. Можно force update, see fetch events.