WP Rocket SaaS: за кулисами

Опубликовано: 2024-09-12

В этой технической статье подробно описана разработка и оптимизация веб-сканера, способного обрабатывать более 15 000 веб-страниц в минуту с использованием NodeJS, Puppeteer и BullMQ. Мы объясняем, как функция «Удалить неиспользуемый CSS» (RUCSS) работает и повышает производительность сети за счет устранения ненужного CSS, сокращения времени загрузки и повышения ключевых показателей производительности. Мы также описываем, как мы решили первоначальные проблемы, включая проблемы неэффективной обработки и стабильности, используя Puppeteer для сбора ресурсов, настраивая библиотеки JavaScript и внедряя систему очередей с помощью BullMQ. Наконец, мы описываем, как мы достигли операционного совершенства, направленного на поддержание высоких стандартов качества, обеспечение быстрых инноваций и эффективную поддержку клиентов.

Что такое РУКСС?

Функция «Удалить неиспользуемый CSS» (RUCSS) предназначена для удаления всех CSS и таблиц стилей, не используемых на веб-странице, сохраняя только CSS, необходимый для каждой страницы. После применения оптимизации ваш веб-сайт будет предоставлять только необходимый CSS для конкретной страницы, которую запрашивает пользователь, что значительно ускоряет загрузку страницы!

В среднем эта оптимизация уменьшила размер предоставляемого CSS на 76 %!

Преимущества РУКСС

  • Уменьшенный размер страницы : уменьшает общий размер веб-страницы.
  • Меньше HTTP-запросов : уменьшает количество таблиц стилей CSS, которые необходимо загрузить.
  • Более быстрая загрузка : улучшает скорость загрузки страницы.
  • Улучшенные основные веб-показатели : повышаются ключевые показатели производительности, такие как наибольшая отрисовка контента (LCP), первая отрисовка контента (FCP) и совокупный сдвиг макета (CLS).
  • Устранение CSS, блокирующего рендеринг : предотвращает задержку рендеринга страницы CSS.

Выявление неиспользуемого CSS: хирургический удар

Процесс удаления неиспользуемого CSS очень сложен: для каждого удаляемого правила CSS мы должны гарантировать, что оно никогда не понадобится на этой странице; в противном случае макет может сломаться! Вам необходимо принять во внимание множество факторов, чтобы обеспечить правильную идентификацию неиспользуемого CSS:

  • Взаимодействия с JavaScript : JavaScript динамически изменяет DOM и CSS. Например, после нажатия кнопки может появиться всплывающее окно, в котором представлены новые элементы DOM и правила CSS. Обработка этих взаимодействий имеет решающее значение для точной идентификации используемого CSS, и существует множество других ползунков, внеэкранных меню и галерей.
  • Варианты CSS и HTML . Темы и плагины WordPress представляют бесконечные варианты правил CSS. Обработка вложенных CSS, крайних случаев и даже синтаксических ошибок имеет важное значение. Точный анализ HTML необходим для эффективного выявления и удаления неиспользуемого CSS.
  • Размеры области просмотра : некоторые стили CSS применяются при определенных условиях к размеру экрана. Чтобы обеспечить правильное отображение CSS для пользователей мобильных и настольных компьютеров, мы предоставляем использованный CSS для экранов различных размеров и предоставляем только тот, который подходит для каждого посещения. Кроме того, к адаптивным стилям CSS применяются особые правила оптимизации.

RUCSS как SaaS-решение

Обработка ресурсов страницы и генерация используемого CSS требуют больших ресурсов. Выполнение этих задач непосредственно на веб-сайтах клиентов может замедлить их работу и может оказаться невозможным на всех серверах и хостингах. Таким образом, некоторые из наиболее продвинутых функций WP Rocket, такие как удаление неиспользуемого CSS, поддерживаются нашим SaaS. Эта оптимизация выполняется на наших серверах по запросам плагина WP Rocket, а результаты затем автоматически применяются к веб-сайтам. Такой подход имеет ряд существенных преимуществ для клиентов:

  • Выполните ресурсоемкую оптимизацию и уменьшите нагрузку на серверы пользователей.
  • Вносите улучшения как можно скорее и быстро реагируйте на отзывы.
  • Активно наблюдайте и устраняйте проблемы и ошибки, не дожидаясь обращения в службу поддержки.
  • Убедитесь, что все пользователи получают пользу от последних версий без каких-либо обновлений на стороне клиента.
  • Быстро выполняйте итерации и внедряйте улучшения без необходимости обновлять плагин WP Rocket.

Как это выглядит за кулисами?

WP Rocket SaaS посещает и оптимизирует до 20 тысяч страниц в минуту, обрабатывая их CSS и изображения над сгибом! Для этого мы постоянно используем тысячи веб-браузеров на примерно 40 различных серверах, чтобы обслуживать все запросы наших пользователей в течение 2 минут. Для достижения этой цели наша команда использует самые современные технологии, включая NodeJS, Django, Redis, CockroachDB и Kubernetes, и управляет ими вместе с командами group.One.

Ключевые технические проблемы

1. Сбор ресурсов страницы

Мы широко используем Puppeteer, библиотеку Node, которая предоставляет высокоуровневый API для управления безголовыми браузерами Chrome или Chromium. Этот инструмент важен для нашей стратегии сбора ресурсов благодаря его способности отображать веб-страницы так же, как это сделал бы реальный пользователь, гарантируя захват всех динамических элементов. Он предлагает множество мощных функций, которые мы используем для оптимизации процесса, таких как контроль размера области просмотра, перехват запросов и т. д.

2. Обработка ресурсов страницы

Поскольку темы и плагины WordPress используют широкий спектр CSS и JavaScript, нам требовалось надежное решение для обработки этих файлов.

После тестирования множества методов обработки ресурсов страницы, таких как Webpack, PostCSS и CleanCSS, мы наконец решили создать и поддерживать нашу собственную настроенную библиотеку JavaScript, чтобы лучше соответствовать нашим конкретным требованиям. Сюда входит обработка крайних случаев, вложенных правил CSS и синтаксических проблем, обнаруженных во многих темах и плагинах WordPress, чтобы гарантировать, что оптимизация может быть надежно выполнена для всех наших пользователей.

3. Точная настройка с помощью опыта нашей команды

Обработка CSS может быть очень сложной, и велик риск сломать макет страницы, если этому процессу не будет уделено достаточно внимания. Наша команда обладает обширными знаниями о популярных темах WordPress и конструкторах страниц, а также постоянной обратной связью от сотен тысяч пользователей о совместимости с последними тенденциями WordPress. Поэтому мы разработали динамическую систему списков надежных объектов для наших товарищей по команде, чтобы напрямую обновлять правила обработки CSS нашего SaaS в режиме реального времени, чтобы постоянно адаптировать наши оптимизации и повышать совместимость каждый день.

4. Управление потоком в тысячи страниц в минуту

Чтобы обрабатывать поток 15 000 веб-страниц в минуту, мы реализовали систему очередей с использованием BullMQ. Эта система предлагает:

  • Асинхронная обработка для разгрузки процесса оптимизации с плагина на асинхронный бэкэнд.
  • Балансировка нагрузки и управление параллелизмом : распределяйте задачи между несколькими серверами, позволяя SaaS эффективно обрабатывать большое количество URL-адресов и легко масштабировать.
  • Надежность и отказоустойчивость : все отправленные задачи и их результаты сохраняются, как только они становятся доступными. Это обеспечивает устойчивость в случае сбоя одного из наших серверов или если веб-сайт пользователя не сможет немедленно получить результаты.
  • Приоритизация : очереди BullMQ можно использовать для определения приоритетов задач, гарантируя, что более важные задачи будут обработаны в первую очередь. Например, оптимизация домашних страниц имеет приоритет, чтобы наши пользователи могли сразу увидеть улучшения на своей домашней странице и сразу же протестировать ее с помощью Pagespeed!

Операционное совершенство

Создание масштабируемой и надежной системы для SaaS имеет важное значение для удобства и эффективности работы клиентов, а также для обработки растущего числа пользователей и увеличения объема запросов на обработку страниц. Ниже мы подробно рассмотрим шаги, которые позволили нам достичь такого совершенства.

1. Масштабируемая архитектура

WP Rocket в любое время используется на миллионах веб-сайтов по всему миру. Поэтому наш SaaS должен всегда оставаться доступным и работать так, как ожидается. Сервис размещен на более чем 40 физических серверах, расположенных в разных регионах. Они организованы с помощью Kubernetes, чтобы упростить развертывание, масштабирование и управление жизненным циклом контейнера. Мы полагаемся на мощные функции, такие как проверка работоспособности, чередующиеся обновления и автоматическое масштабирование, чтобы обеспечить отказоустойчивость службы и поддерживать время безотказной работы при любых обстоятельствах. Кроме того, служба настраиваемого шлюза выполняет управление заданиями и обеспечивает безопасность API (ограничение скорости, аутентификация и т. д.).

2. Мониторинг и оповещение

Все эти сервисы и серверы постоянно отслеживаются и отслеживаются с помощью технических показателей через Prometheus и Grafana, а также функциональных показателей, чтобы гарантировать стабильность сервиса и максимальную производительность для наших пользователей. Углубленный мониторинг позволяет нам гарантировать высокий уровень успеха, сохраняя при этом низкую продолжительность работ и лучшую в своем классе эффективность оптимизации. Оповещения от таких инструментов, как Prometheus и Metabase, позволяют нам реагировать в режиме реального времени, если что-то идет не так, как ожидалось.

3. Наблюдение для помощи нашим клиентам

Хотя мы прилагаем все усилия, чтобы сделать наш SaaS простым в использовании для наших клиентов, некоторые трудности могут возникнуть, например, в очень сложных настройках с брандмауэрами, правилами безопасности или веб-сайтами WordPress со множеством конфликтующих плагинов или тем. Благодаря подходу SaaS наша команда поддержки оснащена внутренними инструментами через Metabase для доступа к данным, связанным с конкретным пользователем, и наблюдения за его заданиями и результатами оптимизации, что позволяет нам быстро выявлять возможные проблемы. Затем они смогут повторять, настраивать и дорабатывать, а также получать обратную связь в режиме реального времени с помощью PostMan и Metabase. В результате они могут эффективно помогать клиентам, испытывающим затруднения, и даже напрямую корректировать правила оптимизации SaaS, чтобы разблокировать пользователей.

4. Автоматизированное тестирование и непрерывная интеграция

Поддержание высоких стандартов качества при сохранении значительной скорости доставки может стать проблемой для инженеров. Мы решаем эту проблему с помощью надежной автоматизации, через которую проходит каждое изменение кода. От автоматического тестирования до развертывания в рабочей среде одним нажатием кнопки — мы также используем зеркалирование, механизмы теневого выпуска и постепенное развертывание выпусков. Все эти мощные подходы позволяют нашей команде инженеров процветать и продолжать внедрять инновации, не подвергая риску качество обслуживания. Большая часть этого процесса автоматизирована, поэтому нам даже не нужно об этом думать и сосредоточиться на том, что важно: создании лучших функций для наших пользователей!

Подведение итогов

Подводя итог, можно сказать, что разработка и оптимизация веб-сканера с использованием NodeJS, Puppeteer и BullMQ привела к созданию высокоэффективного и масштабируемого решения для обработки более 15 000 веб-страниц в минуту. Решая первоначальные проблемы и используя передовые инструменты и методологии, мы создали надежную систему, которая значительно повышает производительность Интернета благодаря функции «Удалить неиспользуемый CSS» (RUCSS). Непрерывная интеграция, автоматическое тестирование, а также упор на масштабируемость и надежность гарантируют, что наш сервис останется первоклассным, обеспечивая пользователям более быстрое время загрузки и улучшая общее качество работы в Интернете.