Как создать popup с автоматическим отключением при низкой производительности сайта в WordPress

Диагностика проблемы: почему popup замедляет сайт

Popup-окна часто используют JavaScript и дополнительные CSS-стили, что может увеличить время загрузки страницы и нагрузку на браузер пользователя. Особенно заметно это на слабых устройствах или при нестабильном соединении. Для улучшения UX и SEO стоит предусмотреть автоматическое отключение popup, если производительность сайта падает ниже заданного порога.

Как проверить производительность сайта в реальном времени

Для мониторинга производительности используйте API window.performance и requestIdleCallback. Можно замерять время загрузки страницы и время простоя браузера, чтобы определить, стоит ли показывать popup.

Пошаговое решение: создание popup с автоотключением при низкой производительности

1. Замер времени загрузки и вычисление производительности

function checkPerformance() {
    const timing = window.performance.timing;
    const loadTime = timing.loadEventEnd - timing.navigationStart;
    return loadTime;
}

Если loadTime превышает, например, 3000 мс, стоит отключить popup.

2. Условный показ popup

document.addEventListener('DOMContentLoaded', () => {
    const maxLoadTime = 3000; // 3 секунды
    const currentLoadTime = checkPerformance();

    if (currentLoadTime <= maxLoadTime) {
        showPopup();
    } else {
        console.warn('Popup отключен из-за низкой производительности');
    }
});

function showPopup() {
    const popup = document.getElementById('my-popup');
    if (popup) {
        popup.style.display = 'block';
    }
}

3. Оптимизация загрузки popup (ленивая загрузка)

Подгружайте скрипты и стили popup только при хорошем состоянии страницы, используя requestIdleCallback или setTimeout с задержкой.

if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    loadPopupAssets();
  });
} else {
  setTimeout(loadPopupAssets, 2000);
}

function loadPopupAssets() {
  // динамическая загрузка CSS и JS
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = '/wp-content/themes/yourtheme/popup.css';
  document.head.appendChild(link);

  const script = document.createElement('script');
  script.src = '/wp-content/themes/yourtheme/popup.js';
  document.body.appendChild(script);
}

Проверка результата после внедрения

• Откройте сайт в режиме инкогнито, чтобы избежать кеша.
• Используйте DevTools (Chrome) → Performance → замеряйте время загрузки.
• Проверьте консоль на наличие сообщения Popup отключен из-за низкой производительности.
• На медленных устройствах (эмуляция в DevTools) popup не должен появляться.
• На быстрых устройствах popup появляется как обычно.

Частые ошибки и как их исправить

• Неверный расчет времени загрузки: Использование performance.timing без проверки, что loadEventEnd уже наступил. Решение: запускать замер после события load или с задержкой.
• Загрузка popup-скриптов без условий: Это убирает смысл оптимизации. Проверьте, что загрузка ресурсов действительно происходит по условию.
• Отсутствие fallback для requestIdleCallback: Всегда добавляйте альтернативу через setTimeout.
• Статичный ID popup: Если у вас несколько popup, используйте классы и делегирование событий.

Практические советы по безопасности и производительности

• Минимизируйте и объединяйте CSS/JS popup для уменьшения HTTP-запросов.
• Используйте defer или async для загрузки скриптов popup.
• Проверяйте наличие и правильность nonce для AJAX-запросов, если popup использует формы.
• Кэшируйте результаты проверки производительности, чтобы не замерять при каждой загрузке.
• При использовании WooCommerce следите, чтобы popup не конфликтовал с корзиной или checkout.

Сравнение подходов к реализации popup с учетом производительности