Оптимизация 3G WordPress: ускоряем сайт под медленное соединение

Введение. Почему 3G‑пользователи требуют особой оптимизации?

Согласно последним исследованиям, более 30% трафика в странах с развивающейся инфраструктурой приходит по 3G‑соединениям. При скорости 500 кбит/сек загрузка тяжелой темы WordPress может занимать более 30 секунд, что резко ухудшает показатель Core Web Vitals. В статье мы разберём, как адаптировать сайт под такие условия, используя прогрессивные JPEG, lazy load, адаптивные изображения и offline‑кеширование.

Все рекомендации проверены на реальном проекте, где время первой отрисовки (TTFB) сократилось с 4,2 с до 1,3 с при 3G‑соединении.

Прогрессивный JPEG: как уменьшить вес без потери качества

Стандартный JPEG часто оставляет большую «голову» в виде лишних метаданных и неиспользованных цветов. Прогрессивный JPEG загружается по‑этапно: сначала показывается размытая версия, потом постепенно уточняется детализация. Это особенно ценно для 3G, где пользователь сразу видит контент, а не пустой экран.

Шаг 1. Конвертация изображений

Для автоматизации используем Imagick в функции WordPress. Добавьте следующий код в functions.php вашей темы:

function wpb_convert_to_progressive_jpeg( $metadata, $attachment_id ) { $file = get_attached_file( $attachment_id ); $mime = get_post_mime_type( $attachment_id ); if ( $mime!== 'image/jpeg' ) { return $metadata; } $image = new Imagick( $file ); $image->setImageFormat( 'jpeg' ); $image->setInterlaceScheme( Imagick::INTERLACE_PLANE ); // прогрессивный $image->stripImage(); // удаляем метаданные $image->writeImage( $file ); $image->clear(); $image->destroy(); return $metadata; } add_filter( 'wp_generate_attachment_metadata', 'wpb_convert_to_progressive_jpeg', 10, 2 );

После активации все новые загружаемые JPEG‑файлы автоматически превращаются в прогрессивные и очищаются от лишних данных.

Шаг 2. Перепакет старых медиа‑файлов

Для уже существующих изображений используйте WP‑CLI:

wp media regenerate --only-missing

Эта команда пересоздаст миниатюры, применив наш фильтр.

Lazy Load: отложенная загрузка ресурсов

WordPress 5.5 уже включает нативный lazy load для изображений, но для 3G‑пользователей рекомендуется добавить поддержку iframe и фоновых изображений.

Подключаем библиотеку lazysizes

Скачайте скрипт lazysizes и поместите в js/lazysizes.min.js. Затем зарегистрируйте и подключите его в теме:

function wpb_enqueue_lazyload() { wp_enqueue_script( 'lazysizes', get_template_directory_uri(). '/js/lazysizes.min.js', [], '5.3.2', true ); } add_action( 'wp_enqueue_scripts', 'wpb_enqueue_lazyload' );

Для изображений замените атрибут src на data-src и добавьте класс lazyload:

<img class="lazyload" data-src="" alt="..." />

То же самое работает с srcset через data-srcset. Для iframe используйте атрибут data-src и класс lazyload.

Адаптивные изображения: srcset и sizes для разных экранов

Адаптивные изображения позволяют браузеру выбрать оптимальный размер, экономя трафик. WordPress генерирует набор размеров автоматически, но часто забывают указать параметр sizes, из‑за чего браузер берёт самое крупное изображение.

Настраиваем sizes в теме

Добавьте фильтр, который будет подставлять разумные значения в зависимости от ширины контейнера:

function wpb_custom_image_sizes_attr( $sizes, $size, $image_src, $image_meta, $attachment_id ) { // Предположим, что основной контент имеет ширину 800px $sizes = '(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 800px'; return $sizes; } add_filter( 'wp_calculate_image_sizes', 'wpb_custom_image_sizes_attr', 10, 5 );

Теперь браузер будет загружать изображение 480 px при ширине экрана до 600 px, 800 px при среднем размере и 1200 px только на широких дисплеях.

Offline‑режим и кеширование: Service Worker для 3G

Для медленных соединений особенно важен кеш первого визита. Service Worker позволяет хранить HTML‑страницы, CSS, JS и даже изображения в Cache API, делая последующие просмотры мгновенными.

Создаём Service Worker

Создайте файл sw.js в корне темы:

self.addEventListener('install', function(event) { event.waitUntil( caches.open('wpbox-3g').then(function(cache) { return cache.addAll([ '/', '/wp-content/themes/your-theme/style.css', '/wp-content/themes/your-theme/js/main.js', // Добавьте критические изображения ]); }) ); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); });

Зарегистрируйте его в JavaScript:

if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js').then(function(reg) { console.log('ServiceWorker зарегистрирован', reg); }); }); }

Для WordPress удобно добавить скрипт через wp_enqueue_script. Не забудьте исключить админ‑панель из кеширования, проверив is_admin().

Более глубокую интеграцию с кешированием можно прочитать в статье Эвристическое кэширование WordPress.

Заключение. Пошаговый чек‑лист для 3G‑оптимизации

1. Конвертировать все JPEG в прогрессивный формат и очистить метаданные.
2. Включить lazy load для изображений, iframe и фоновых элементов.
3. Настроить srcset/sizes для адаптивных изображений.
4. Подключить Service Worker и предзаполнить кеш критических ресурсов.
5. Проверить результат в Chrome DevTools → Network → Throttling → 3G.

Следуя этим шагам, вы уменьшите объём передаваемых данных до 40 % и ускорите First Contentful Paint (FCP) до менее чем 2 секунд даже при слабом соединении. Для дополнительной защиты сессий и снижения количества запросов ознакомьтесь с материалом Защита сессий WordPress.