Как ускорить загрузку мобильного WordPress сайта с помощью Service Worker

Автор: Михаил Кузнецов | Опубликовано: 07.01.2026

Ускорение загрузки мобильного сайта — одна из ключевых задач для улучшения пользовательского опыта и повышения SEO. В этой статье мы подробно рассмотрим, как использовать технологию Service Worker в WordPress для кэширования ресурсов и сокращения времени загрузки страниц на мобильных устройствах.

Что такое Service Worker и зачем он нужен для мобильного WordPress сайта

Service Worker — это скрипт, который браузер запускает в фоновом режиме отдельно от веб-страницы. Он позволяет перехватывать сетевые запросы, кэшировать файлы и даже работать офлайн. Для мобильных WordPress сайтов это означает возможность значительно ускорить загрузку за счет локального хранения важных ресурсов.

В отличие от обычного кэша браузера, Service Worker даёт полный контроль над кешированием и стратегиями обновления данных. Это особенно актуально для мобильных пользователей с медленным или нестабильным интернетом.

Включение Service Worker повышает отзывчивость сайта и снижает нагрузку на сервер, что полезно для сайтов с большим трафиком и ограниченными ресурсами.

Основные подходы к кешированию с Service Worker в WordPress

Cache First vs Network First — выбор стратегии кэширования

Для мобильных сайтов чаще всего используют стратегию Cache First — сначала пытаемся отдать ресурсы из кэша, если их нет — подгружаем из сети. Это снижает задержки при повторных посещениях.

Стратегия Network First полезна для динамического контента, когда важна актуальность данных, но она медленнее и требует более сложной логики.

В WordPress можно комбинировать стратегии для разных типов ресурсов — например, кэшировать стили и скрипты по Cache First, а AJAX-запросы отдавать по Network First.

Пример базового Service Worker для WordPress

Для начала создадим простой Service Worker, который кэширует основные файлы темы и статичные ресурсы.

const CACHE_NAME = 'wpmobile-cache-v1';
const urlsToCache = [
  '/',
  '/wp-content/themes/your-theme/style.css',
  '/wp-content/themes/your-theme/js/main.js',
  '/wp-includes/js/jquery/jquery.min.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      })
  );
});

Этот код сохраняет указанные ресурсы при установке Service Worker, а затем при запросах пытается отдать их из кэша, если они там есть.

Как интегрировать Service Worker в WordPress правильно

Регистрация Service Worker через функцию темы

Чтобы зарегистрировать Service Worker на сайте, добавим в functions.php вашей темы следующий код, который подключит JavaScript для регистрации в браузере:

function wpmobile_register_service_worker() {
  if ( !is_admin() ) {
    wp_enqueue_script('wpmobile-sw-register', get_template_directory_uri() . '/js/sw-register.js', [], null, true);
  }
}
add_action('wp_enqueue_scripts', 'wpmobile_register_service_worker');

В файле js/sw-register.js разместим код регистрации Service Worker:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js')
      .then(function(registration) {
        console.log('Service Worker зарегистрирован с областью:', registration.scope);
      })
      .catch(function(error) {
        console.log('Регистрация Service Worker не удалась:', error);
      });
  });
}

Где разместить файл Service Worker

Файл sw.js должен находиться в корне сайта, чтобы иметь доступ к необходимой области (scope). Для этого можно создать PHP-скрипт, который отдаёт этот файл, или настроить сервер напрямую.

Пример простого PHP-скрипта для отдачи sw.js из папки темы:

add_action('init', function() {
  if ($_SERVER['REQUEST_URI'] === '/sw.js') {
    header('Content-Type: application/javascript');
    readfile(get_template_directory() . '/sw.js');
    exit;
  }
});

Решение практических проблем при использовании Service Worker

Обновление кэша и управление версиями

Чтобы контролировать обновления ресурсов, в Service Worker нужно реализовать логику удаления старых кешей при активации нового скрипта. Например:

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Это гарантирует, что устаревшие версии кеша будут удалены, а пользователи получат свежие файлы.

Обработка AJAX-запросов и динамического контента

Если ваш мобильный сайт активно использует AJAX для загрузки данных, рекомендуется для таких запросов использовать стратегию Network First, чтобы всегда получать актуальную информацию.

В Service Worker можно добавить условие:

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  if (url.pathname.startsWith('/wp-json/')) {
    event.respondWith(
      fetch(event.request).catch(() => caches.match(event.request))
    );
  } else {
    event.respondWith(
      caches.match(event.request).then(response => response || fetch(event.request))
    );
  }
});

Использование плагинов для упрощения работы с Service Worker в WordPress

Если вы не хотите писать Service Worker вручную, можно использовать плагины. Например, плагин Clearfy Pro позволяет оптимизировать загрузку и подключать современные технологии кэширования, включая Service Worker, без написания кода.

Также плагин OmniVideo поддерживает lazy load видео с кэшированием, что дополнительно ускоряет мобильный сайт.